Skip to content

T
tobiras-h5
Commit ac408d28 authored by ly's avatar ly
Browse files
Options

修改ui样式

parent 5298de45
Hide whitespace changes
Inline Side-by-side
Showing with 283 additions and 224 deletions
src/utils/Ajax.js
View file @ ac408d28
...@@ -23,7 +23,7 @@ const Fetch = async options => { ...@@ -23,7 +23,7 @@ const Fetch = async options => {
let fetch let fetch
const {url,data, method} = options const {url,data, method} = options
console.log(options,'options') console.log(options,'options')
const baseUrl = `${API}${url}` const baseUrl = `${API}/${url}`
switch (method.toLowerCase()) { switch (method.toLowerCase()) {
case 'get': case 'get':
fetch = axios.get(baseUrl, { fetch = axios.get(baseUrl, {
...@@ -59,7 +59,9 @@ const Fetch = async options => { ...@@ -59,7 +59,9 @@ const Fetch = async options => {
// 对返回结果和错误信息进行处理 // 对返回结果和错误信息进行处理
const request = function (options) { const request = function (options) {
console.log(options,'options9999')
return Fetch(options).then(res => { return Fetch(options).then(res => {
console.log(res,'resssss')
if (res.status === 200) { if (res.status === 200) {
const {message,code,success }=res.data const {message,code,success }=res.data
if(code==500 && success==false){ if(code==500 && success==false){
......
src/views/bill/index.css
View file @ ac408d28
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
} }
.bill-page .bill-mians .bill-card { .bill-page .bill-mians .bill-card {
margin: 20px auto; margin: 20px auto;
width: 714px; width: 730px;
height: 342px; height: 350px;
background: url('../../assets/img/bg-img.png') 0 0 no-repeat; background: url('../../assets/img/bg-imgs.png') 0 0 no-repeat;
background-size: 714px 342px; background-size: 730px 350px;
} }
.bill-page .bill-mians .bill-card .card-main { .bill-page .bill-mians .bill-card .card-main {
padding: 53px 43px; padding: 53px 43px;
...@@ -23,12 +23,12 @@ ...@@ -23,12 +23,12 @@
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 34px; line-height: 34px;
color: #757575; color: #999999;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
.bill-page .bill-mians .bill-card .card-main .main-top .top-text { .bill-page .bill-mians .bill-card .card-main .main-top .top-text {
padding-right: 16px; padding-right: 24px;
font-weight: 500; font-weight: 500;
font-size: 32px; font-size: 32px;
color: #212121; color: #212121;
...@@ -40,8 +40,8 @@ ...@@ -40,8 +40,8 @@
justify-content: space-between; justify-content: space-between;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 24px;
color: #757575; color: #999999;
line-height: 68px; line-height: 68px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
...@@ -55,28 +55,28 @@ ...@@ -55,28 +55,28 @@
padding-left: 8px; padding-left: 8px;
} }
.bill-page .bill-mians .bill-card .card-main .main-text { .bill-page .bill-mians .bill-card .card-main .main-text {
padding-top: 20px; padding-top: 28px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 24px;
color: #212121; color: #333333;
line-height: 38px; line-height: 38px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
border-top: 2px solid #ccc; border-top: 2px dashed #ccc;
} }
.bill-page .bill-mians .bill-card .card-main .main-num { .bill-page .bill-mians .bill-card .card-main .main-num {
padding-top: 18px; padding-top: 18px;
font-family: PingFangSC, PingFang SC; font-family: DINAlternate, DINAlternate;
font-weight: 500; font-weight: bold;
font-size: 42px; font-size: 60px;
color: #3E97F3; color: #2F87FF;
line-height: 40px; line-height: 70px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
.bill-page .bill-mians .bill-card .card-bill { .bill-page .bill-mians .bill-card .card-bill {
margin-top: 54px; margin: 16px 28px;
background: #FFFFFF; background: #FFFFFF;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian { .bill-page .bill-mians .bill-card .card-bill .bill-mian {
...@@ -87,19 +87,25 @@ ...@@ -87,19 +87,25 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian .mian-top .mian-l {
display: flex;
align-items: center;
}
.bill-page .bill-mians .bill-card .card-bill .bill-mian .mian-top .mian-l .l-icon { .bill-page .bill-mians .bill-card .card-bill .bill-mian .mian-top .mian-l .l-icon {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
width: 4px; width: 8px;
height: 22px; height: 40px;
background: #FF4248; background: #FF2F2F;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian .mian-top .mian-l span { .bill-page .bill-mians .bill-card .card-bill .bill-mian .mian-top .mian-l span {
padding-left: 8px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 28px; font-size: 28px;
color: #212121; color: #333333;
line-height: 40px; line-height: 40px;
text-align: center;
font-style: normal; font-style: normal;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian .mian-top .mian-r { .bill-page .bill-mians .bill-card .card-bill .bill-mian .mian-top .mian-r {
...@@ -117,8 +123,8 @@ ...@@ -117,8 +123,8 @@
padding-left: 10px; padding-left: 10px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 26px; font-size: 28px;
color: #278FE9; color: #2F87FF;
line-height: 26px; line-height: 26px;
font-style: normal; font-style: normal;
} }
...@@ -133,30 +139,39 @@ ...@@ -133,30 +139,39 @@
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
color: #757575; color: #666666;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-l .l-first .first-text .text-num { .bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-l .l-first .first-text .text-num {
padding: 0 10px; padding: 0 10px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 28px;
color: #333333;
line-height: 40px;
text-align: left;
font-style: normal;
color: #212121; color: #212121;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-l .l-first .first-time { .bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-l .l-first .first-time {
padding-left: 8px; padding-left: 8px;
height: 33px; height: 34px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
color: #757575; color: #666666;
line-height: 33px; line-height: 34px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-l .l-nums { .bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-l .l-nums {
margin: 14px 0 24px;
font-family: DIN, DIN; font-family: DIN, DIN;
font-weight: bold; font-weight: bold;
font-size: 40px; font-size: 40px;
color: #212121; color: #333333;
line-height: 48px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
...@@ -164,7 +179,8 @@ ...@@ -164,7 +179,8 @@
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
color: #757575; color: #666666;
line-height: 34px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
...@@ -177,11 +193,11 @@ ...@@ -177,11 +193,11 @@
font-style: normal; font-style: normal;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-r .r-red { .bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-r .r-red {
color: #FF4248; color: #FF2F2F;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-r .r-blue { .bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-r .r-blue {
color: #3E97F3; color: #2F87FF;
} }
.bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-r .r-grey { .bill-page .bill-mians .bill-card .card-bill .bill-mian .main-line .line-r .r-grey {
color: #9E9E9E; color: #999999;
} }
src/views/bill/index.less
View file @ ac408d28
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
.bill-card{ .bill-card{
margin:20px auto; margin:20px auto;
width: 714px; width: 730px;
height: 342px; height: 350px;
background: url('../../assets/img/bg-img.png') 0 0 no-repeat; background: url('../../assets/img/bg-imgs.png') 0 0 no-repeat;
background-size: 714px 342px; background-size: 730px 350px;
.card-main{ .card-main{
padding: 53px 43px; padding: 53px 43px;
.main-top{ .main-top{
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 34px; line-height: 34px;
color: #757575; color: #999999;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
.top-text{ .top-text{
padding-right: 16px; padding-right: 24px;
font-weight: 500; font-weight: 500;
font-size: 32px; font-size: 32px;
color: #212121; color: #212121;
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
justify-content: space-between; justify-content: space-between;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 28px; font-size: 24px;
color: #757575; color: #999999;
line-height: 68px; line-height: 68px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
...@@ -55,29 +55,29 @@ ...@@ -55,29 +55,29 @@
} }
} }
.main-text{ .main-text{
padding-top:20px; padding-top:28px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 24px;
color: #212121; color: #333333;
line-height: 38px; line-height: 38px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
border-top: 2px solid #ccc; border-top: 2px dashed #ccc;
} }
.main-num{ .main-num{
padding-top:18px; padding-top:18px;
font-family: PingFangSC, PingFang SC; font-family: DINAlternate, DINAlternate;
font-weight: 500; font-weight: bold;
font-size: 42px; font-size: 60px;
color: #3E97F3; color: #2F87FF;
line-height: 40px; line-height: 70px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
} }
.card-bill{ .card-bill{
margin-top:54px; margin:16px 28px;
background: #FFFFFF; background: #FFFFFF;
.bill-mian{ .bill-mian{
padding:40px; padding:40px;
...@@ -86,22 +86,23 @@ ...@@ -86,22 +86,23 @@
align-items: center; align-items: center;
justify-content: space-between ; justify-content: space-between ;
.mian-l{ .mian-l{
// display: flex; display: flex;
// align-items: center; align-items: center;
.l-icon{ .l-icon{
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
width: 4px; width: 8px;
height: 22px; height: 40px;
background: #FF4248; background: #FF2F2F;
} }
span{ span{
padding-left: 8px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 28px; font-size: 28px;
color: #212121; color: #333333;
line-height: 40px; line-height: 40px;
text-align: center;
font-style: normal; font-style: normal;
} }
} }
...@@ -120,8 +121,8 @@ ...@@ -120,8 +121,8 @@
padding-left:10px; padding-left:10px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 26px; font-size: 28px;
color: #278FE9; color: #2F87FF;
line-height: 26px; line-height: 26px;
// text-align: left; // text-align: left;
font-style: normal; font-style: normal;
...@@ -140,32 +141,41 @@ ...@@ -140,32 +141,41 @@
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
color: #757575; color: #666666;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
.first-text{ .first-text{
.text-num{ .text-num{
padding:0 10px; padding:0 10px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 28px;
color: #333333;
line-height: 40px;
text-align: left;
font-style: normal;
color:#212121; color:#212121;
} }
} }
.first-time{ .first-time{
padding-left:8px; padding-left:8px;
height: 33px; height: 34px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
color: #757575; color: #666666;
line-height: 33px; line-height: 34px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
} }
.l-nums{ .l-nums{
margin:14px 0 24px;
font-family: DIN, DIN; font-family: DIN, DIN;
font-weight: bold; font-weight: bold;
font-size: 40px; font-size: 40px;
color: #212121; color: #333333;
line-height: 48px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
...@@ -173,8 +183,8 @@ ...@@ -173,8 +183,8 @@
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
color: #757575; color: #666666;
line-height: 34px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
...@@ -187,13 +197,13 @@ ...@@ -187,13 +197,13 @@
text-align: right; text-align: right;
font-style: normal; font-style: normal;
.r-red{ .r-red{
color: #FF4248; color: #FF2F2F;
} }
.r-blue{ .r-blue{
color:#3E97F3; color: #2F87FF;
} }
.r-grey{ .r-grey{
color:#9E9E9E; color: #999999;
} }
} }
} }
......
src/views/bill/index.vue
View file @ ac408d28
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class='card-main'> <div class='card-main'>
<div class='main-top'> <div class='main-top'>
<span class='top-text'>产品名称</span> <span class='top-text'>产品名称</span>
<span>协议编号:BA205463526472425</span> <span>协议编号: BA205463526472425</span>
</div> </div>
<div class='main-s'> <div class='main-s'>
<div>借款金额：6000.00元</div> <div>借款金额：6000.00元</div>
......
src/views/login/index.css
View file @ ac408d28
...@@ -2,41 +2,42 @@ ...@@ -2,41 +2,42 @@
width: 100%; width: 100%;
height: calc(100vh-120px); height: calc(100vh-120px);
min-height: 1334px; min-height: 1334px;
background: #F7F7F7; background: #FFFFFF;
padding-bottom: 120px; padding-bottom: 120px;
} }
.login-page .login-main { .login-page .login-main {
margin: 20px; margin: 70px;
background: #FFFFFF; background: #FFFFFF;
} }
.login-page .login-main .mian-box { .login-page .login-main .mian-box {
padding: 10px; padding: 10px;
} }
.login-page .login-main .mian-box .box-id { .login-page .login-main .mian-box .box-id {
height: 112px; height: 138px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 2px solid #E4E6EA;
} }
.login-page .login-main .mian-box .box-id .id-img { .login-page .login-main .mian-box .box-id .id-img {
display: inline-block; display: inline-block;
width: 78px; width: 40px;
height: 78px; height: 40px;
background: url('../../assets/img/idcard.png') 0 0 no-repeat; background: url('../../assets/img/idcardsT.png') 0 0 no-repeat;
background-size: 100%; background-size: 100%;
} }
.login-page .login-main .mian-box .box-id .id-mobile { .login-page .login-main .mian-box .box-id .id-mobile {
display: inline-block; display: inline-block;
width: 78px; width: 40px;
height: 78px; height: 42px;
background: url('../../assets/img/mobile.png') 0 0 no-repeat; background: url('../../assets/img/mobiles.png') 0 0 no-repeat;
background-size: 100%; background-size: 100%;
} }
.login-page .login-main .mian-box .box-id .id-send { .login-page .login-main .mian-box .box-id .id-send {
display: inline-block; display: inline-block;
margin-top: 5px; margin-top: 5px;
width: 60px; width: 40px;
height: 68px; height: 40px;
background: url('../../assets/img/sendcod.png') 0 0 no-repeat; background: url('../../assets/img/sendcodes.png') 0 0 no-repeat;
background-size: 100%; background-size: 100%;
} }
.login-page .login-main .mian-box .box-id .id-input { .login-page .login-main .mian-box .box-id .id-input {
...@@ -50,59 +51,63 @@ ...@@ -50,59 +51,63 @@
} }
.login-page .login-main .mian-box .box-id input::-webkit-input-placeholder { .login-page .login-main .mian-box .box-id input::-webkit-input-placeholder {
color: #909090; color: #909090;
font-size: 34px; font-size: 32px;
} }
.login-page .login-main .mian-box .box-id .id-sendcode { .login-page .login-main .mian-box .box-id .id-sendcode {
width: 240px; width: 182px;
height: 60px;
background: #2F87FF;
border-radius: 30px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 28px;
color: #3877F8; color: #FFFFFF;
line-height: 28px; line-height: 60px;
text-align: right; text-align: center;
font-style: normal; font-style: normal;
} }
.login-page .login-main .mian-box .box-id .id-sendcodes { .login-page .login-main .mian-box .box-id .id-sendcodes {
width: 240px; width: 240px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 24px;
color: #3877F8; color: #3877F8;
line-height: 28px; line-height: 28px;
text-align: right; text-align: left;
} }
.login-page .login-main .mian-box .box-btn { .login-page .login-main .mian-box .box-btn {
margin-top: 32px; margin-top: 54px;
width: 100%; width: 600px;
height: 78px; height: 88px;
border-radius: 20px; background: #2F87FF;
background: #3E97F3; border-radius: 51px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 38px; font-size: 34px;
color: #FFFFFF; color: #FFFFFF;
line-height: 78px; line-height: 88px;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
} }
.login-page .login-main .mian-box .box-footer { .login-page .login-main .mian-box .box-footer {
margin-top: 28px; margin-top: 34px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }
.login-page .login-main .mian-box .box-footer .footer-img { .login-page .login-main .mian-box .box-footer .footer-img {
display: inline-block; display: inline-block;
margin-top: 6px;
margin-right: 8px; margin-right: 8px;
width: 68px; width: 36px;
height: 68px; height: 36px;
background: url('../../assets/img/point.png') 0 0 no-repeat; background: url('../../assets/img/points.png') 0 0 no-repeat;
background-size: 100%; background-size: 100%;
} }
.login-page .login-main .mian-box .box-footer .footer-text { .login-page .login-main .mian-box .box-footer .footer-text {
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 24px;
color: #212121; color: #999999;
font-style: normal; font-style: normal;
text-align: left; text-align: left;
} }
src/views/login/index.less
View file @ ac408d28
...@@ -2,39 +2,39 @@ ...@@ -2,39 +2,39 @@
width: 100%; width: 100%;
height:calc(100vh-120px); height:calc(100vh-120px);
min-height: 1334px; min-height: 1334px;
background: #F7F7F7; background: #FFFFFF;
padding-bottom:120px; padding-bottom:120px;
.login-main{ .login-main{
margin:20px; margin:70px;
// height: 120px;
background: #FFFFFF; background: #FFFFFF;
.mian-box{ .mian-box{
padding:10px; padding:10px;
.box-id{ .box-id{
height:112px; height:138px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 2px solid #E4E6EA;
.id-img{ .id-img{
display: inline-block; display: inline-block;
width: 78px; width: 40px;
height: 78px; height: 40px;
background: url('../../assets/img/idcard.png') 0 0 no-repeat; background: url('../../assets/img/idcardsT.png') 0 0 no-repeat;
background-size: 100%; background-size: 100%;
} }
.id-mobile{ .id-mobile{
display: inline-block; display: inline-block;
width: 78px; width: 40px;
height: 78px; height: 42px;
background: url('../../assets/img/mobile.png') 0 0 no-repeat; background: url('../../assets/img/mobiles.png') 0 0 no-repeat;
background-size: 100%; background-size: 100%;
} }
.id-send{ .id-send{
display: inline-block; display: inline-block;
margin-top:5px; margin-top:5px;
// margin-left: 8px; // margin-left: 8px;
width: 60px; width: 40px;
height: 68px; height: 40px;
background: url('../../assets/img/sendcod.png') 0 0 no-repeat; background: url('../../assets/img/sendcodes.png') 0 0 no-repeat;
background-size:100%; background-size:100%;
} }
.id-input{ .id-input{
...@@ -48,59 +48,63 @@ ...@@ -48,59 +48,63 @@
} }
input::-webkit-input-placeholder{ input::-webkit-input-placeholder{
color: #909090; color: #909090;
font-size: 34px; font-size: 32px;
} }
.id-sendcode{ .id-sendcode{
width: 240px; width: 182px;
height: 60px;
background: #2F87FF;
border-radius: 30px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 28px;
color: #3877F8; color: #FFFFFF;
line-height: 28px; line-height: 60px;
text-align: right; text-align: center;
font-style: normal; font-style: normal;
} }
.id-sendcodes{ .id-sendcodes{
width: 240px; width: 240px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 24px;
color: #3877F8; color: #3877F8;
line-height: 28px; line-height: 28px;
text-align: right; text-align: left;
} }
} }
.box-btn{ .box-btn{
margin-top:32px; margin-top:54px;
width: 100%; width: 600px;
height: 78px; height: 88px;
border-radius: 20px; background: #2F87FF;
background: #3E97F3; border-radius: 51px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 38px; font-size: 34px;
color: #FFFFFF; color: #FFFFFF;
line-height: 78px; line-height: 88px;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
} }
.box-footer{ .box-footer{
margin-top:28px; margin-top:34px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
.footer-img{ .footer-img{
display: inline-block; display: inline-block;
margin-top:6px;
margin-right: 8px; margin-right: 8px;
width: 68px; width: 36px;
height: 68px; height: 36px;
background: url('../../assets/img/point.png') 0 0 no-repeat; background: url('../../assets/img/points.png') 0 0 no-repeat;
background-size: 100%; background-size: 100%;
} }
.footer-text{ .footer-text{
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 30px; font-size: 24px;
color: #212121; color: #999999;
font-style: normal; font-style: normal;
text-align: left; text-align: left;
} }
......
src/views/login/index.vue
View file @ ac408d28
<template> <template>
<div class='login-page'> <div class='login-page'>
<van-nav-bar <!-- <van-nav-bar
:title="titleDes" :title="titleDes"
left-text="" left-text=""
left-arrow left-arrow
@click-left="onClickLeft" @click-left="onClickLeft"
/> /> -->
<div class='login-main'> <div class='login-main'>
<div class='mian-box'> <div class='mian-box'>
<div class='box-id'> <div class='box-id'>
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
<input class='id-input' <input class='id-input'
:value="idCardNumber" :value="idCardNumber"
@input="IDChange($event)" @input="IDChange($event)"
placeholder="输入身份证号" /> placeholder="输入身份证" />
</div> </div>
<div class='box-id'> <div class='box-id'>
<i class='id-mobile'></i> <i class='id-mobile'></i>
<!-- <van-field class='id-input' v-model="tel" type="tel" placeholder="输入手机号" /> -->
<input class='id-input' <input class='id-input'
:value="phone" :value="phone"
maxlength="11" maxlength="11"
...@@ -35,11 +35,12 @@ ...@@ -35,11 +35,12 @@
<div class='id-sendcode' @click='loginSendCode' v-if="canSendCode">获取验证码</div> <div class='id-sendcode' @click='loginSendCode' v-if="canSendCode">获取验证码</div>
<div class='id-sendcodes' v-else>重新获取({{count}}秒)</div> <div class='id-sendcodes' v-else>重新获取({{count}}秒)</div>
</div> </div>
<div class='box-btn' @click="loginbtn">登 录</div>
<div class='box-footer'> <div class='box-footer'>
<i class='footer-img'></i> <i class='footer-img'></i>
<span class='footer-text'>借款人需及时登录，查询逾期信息并进行相关还款、依法还款、义不容辞</span> <span class='footer-text'>借款人需及时登录，查询逾期信息并进行相关还款，依法还款、义不容辞</span>
</div> </div>
<div class='box-btn' @click="loginbtn">登 录</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -64,7 +65,7 @@ export default { ...@@ -64,7 +65,7 @@ export default {
timer: null,//倒计时 timer: null,//倒计时
count: '',//倒计时 count: '',//倒计时
}) })
const onClickLeft = () => history.back() // const onClickLeft = () => history.back()
const IDChange = (e) => { const IDChange = (e) => {
console.log(e.target.value,997) console.log(e.target.value,997)
state.idCardNumber = e.target.value state.idCardNumber = e.target.value
...@@ -123,7 +124,7 @@ export default { ...@@ -123,7 +124,7 @@ export default {
}) })
return { return {
...toRefs(state), ...toRefs(state),
onClickLeft, // onClickLeft,
loginSendCode, loginSendCode,
IDChange, IDChange,
phoneChange, phoneChange,
......
src/views/myLoan/index.css
View file @ ac408d28
...@@ -11,15 +11,21 @@ ...@@ -11,15 +11,21 @@
} }
.loan-page .loan-contant .loan-main { .loan-page .loan-contant .loan-main {
margin: 32px; margin: 32px;
width: 690px;
height: 500px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 0px 20px 0px rgba(220, 220, 220, 0.5);
border-radius: 12px;
} }
.loan-page .loan-contant .loan-main .main-box { .loan-page .loan-contant .loan-main .main-box {
padding: 20px 32px; padding: 40px 24px;
} }
.loan-page .loan-contant .loan-main .main-box .box-top { .loan-page .loan-contant .loan-main .main-box .box-top {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-bottom: 24px;
border-bottom: 2px solid #ccc;
} }
.loan-page .loan-contant .loan-main .main-box .box-top .top-l { .loan-page .loan-contant .loan-main .main-box .box-top .top-l {
display: flex; display: flex;
...@@ -54,7 +60,7 @@ ...@@ -54,7 +60,7 @@
padding-left: 10px; padding-left: 10px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 26px; font-size: 24px;
color: #278FE9; color: #278FE9;
line-height: 26px; line-height: 26px;
font-style: normal; font-style: normal;
...@@ -62,51 +68,55 @@ ...@@ -62,51 +68,55 @@
.loan-page .loan-contant .loan-main .main-box .box-con { .loan-page .loan-contant .loan-main .main-box .box-con {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
margin-top: 10px; margin-top: 34px;
}
.loan-page .loan-contant .loan-main .main-box .box-con .con-l {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
line-height: 50px;
text-align: left;
font-style: normal;
} }
.loan-page .loan-contant .loan-main .main-box .box-con .con-l .l-num { .loan-page .loan-contant .loan-main .main-box .box-con .con-l .l-num {
font-size: 28px; font-family: DINAlternate, DINAlternate;
color: #3E97F3; font-weight: bold;
font-size: 60px;
color: #2F87FF;
line-height: 70px;
text-align: right;
font-style: normal;
} }
.loan-page .loan-contant .loan-main .main-box .box-con .con-l .l-tex { .loan-page .loan-contant .loan-main .main-box .box-con .con-l .l-tex {
margin-top: 26px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24px; font-size: 24px;
color: #212121; color: #333333;
line-height: 34px;
text-align: right;
font-style: normal;
} }
.loan-page .loan-contant .loan-main .main-box .box-con .con-r { .loan-page .loan-contant .loan-main .main-box .box-con .con-r {
margin-left: 18px; margin-left: 80px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 32px; color: #666666;
line-height: 34px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }
.loan-page .loan-contant .loan-main .main-box .box-con .con-r .r-boxs { .loan-page .loan-contant .loan-main .main-box .box-con .con-r .r-back-num {
display: flex; margin: 16px 0;
font-size: 24px;
} }
.loan-page .loan-contant .loan-main .main-box .box-con .con-r .r-boxs .boxs-l { .loan-page .loan-contant .loan-main .main-box .box-con .con-r .r-back-nums {
padding-right: 10px; margin-top: 16px;
} }
.loan-page .loan-contant .loan-main .main-box .box-btn { .loan-page .loan-contant .loan-main .main-box .box-btn {
margin: 10px auto 0; margin: 40px auto 0;
width: 285px; width: 500px;
height: 64px; height: 80px;
border-radius: 10px; border-radius: 51px;
background: #3E97F3; background: #2F87FF;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 32px; font-size: 32px;
color: #FFFFFF; color: #FFFFFF;
line-height: 64px; line-height: 80px;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
} }
...@@ -116,20 +126,20 @@ ...@@ -116,20 +126,20 @@
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-size: 28px; font-size: 28px;
line-height: 48px; line-height: 48px;
color: #278FE9; color: #2F87FF;
text-align: center; text-align: center;
} }
.loan-page .popup-btn { .loan-page .popup-btn {
margin: 16px auto 0; margin: 46px auto 0;
width: 260px; width: 526px;
height: 64px; height: 72px;
border-radius: 8px; background: #2F87FF;
background: #278FE9; border-radius: 36px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 32px; font-size: 32px;
color: #FFFFFF; color: #FFFFFF;
line-height: 64px; line-height: 72px;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
} }
src/views/myLoan/index.less
View file @ ac408d28
...@@ -10,13 +10,19 @@ ...@@ -10,13 +10,19 @@
.loan-main{ .loan-main{
margin:32px; margin:32px;
background:#FFFFFF ; width: 690px;
height: 500px;
background: #FFFFFF;
box-shadow: 0px 0px 20px 0px rgba(220,220,220,0.5);
border-radius: 12px;
.main-box{ .main-box{
padding:20px 32px; padding: 40px 24px;
.box-top{ .box-top{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content:space-between; justify-content:space-between;
padding-bottom: 24px;
border-bottom: 2px solid #ccc;
.top-l{ .top-l{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -51,7 +57,7 @@ ...@@ -51,7 +57,7 @@
padding-left: 10px; padding-left: 10px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 26px; font-size: 24px;
color: #278FE9; color: #278FE9;
line-height: 26px; line-height: 26px;
// text-align: left; // text-align: left;
...@@ -62,58 +68,64 @@ ...@@ -62,58 +68,64 @@
.box-con{ .box-con{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
margin-top:10px; margin-top:34px;
.con-l{ .con-l{
font-family: PingFangSC, PingFang SC;
font-weight: 500;
line-height: 50px;
text-align: left;
font-style: normal;
.l-num{ .l-num{
font-size: 28px;
color: #3E97F3; font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 60px;
color: #2F87FF;
line-height: 70px;
text-align: right;
font-style: normal;
} }
.l-tex{ .l-tex{
margin-top:26px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24px; font-size: 24px;
color: #212121; color: #333333;
line-height: 34px;
text-align: right;
font-style: normal;
} }
} }
.con-r{ .con-r{
margin-left:18px; margin-left:80px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 32px; color: #666666;
line-height: 34px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
.r-loan-num{ .r-loan-num{
} }
.r-back-num{ .r-back-num{
margin:16px 0;
} }
.r-boxs{ .r-back-nums{
display:flex; margin-top:16px;
font-size: 24px;
.boxs-l{
padding-right: 10px;
}
} }
} }
} }
.box-btn{ .box-btn{
margin:10px auto 0; margin:40px auto 0;
width: 285px; width: 500px;
height: 64px; height: 80px;
border-radius: 10px; border-radius: 51px;
background: #3E97F3; background: #2F87FF;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 32px; font-size: 32px;
color: #FFFFFF; color: #FFFFFF;
line-height: 64px; line-height: 80px;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
} }
...@@ -126,20 +138,20 @@ ...@@ -126,20 +138,20 @@
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-size: 28px; font-size: 28px;
line-height: 48px; line-height: 48px;
color:#278FE9; color:#2F87FF;
text-align: center; text-align: center;
} }
.popup-btn{ .popup-btn{
margin: 16px auto 0; margin: 46px auto 0;
width: 260px; width: 526px;
height:64px; height: 72px;
border-radius: 8px; background: #2F87FF;
background: #278FE9; border-radius: 36px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 32px; font-size: 32px;
color: #FFFFFF; color: #FFFFFF;
line-height: 64px; line-height: 72px;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
......
src/views/myLoan/index.vue
View file @ ac408d28
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
/> />
<div class='loan-contant'> <div class='loan-contant'>
<div class='loan-main'> <div class='loan-main'>
<div class='main-box'> <div class='main-box'>
<div class='box-top'> <div class='box-top'>
<div class='top-l'> <div class='top-l'>
<img class='l-img' src='' /> <img class='l-img' src='' />
...@@ -30,15 +30,14 @@ ...@@ -30,15 +30,14 @@
<div class='con-r'> <div class='con-r'>
<div class='r-loan-num'>借款金额：5000.00（元）</div> <div class='r-loan-num'>借款金额：5000.00（元）</div>
<div class='r-back-num'>已还金额：1000.00（元）</div> <div class='r-back-num'>已还金额：1000.00（元）</div>
<div class='r-boxs'> <div class='r-back-num'>逾期期数：28期</div>
<div class='boxs-l'>逾期期数：28期</div> <div class='r-back-nums'>逾期天数：12360天</div>
<div>逾期天数：12360天</div>
</div>
</div> </div>
</div> </div>
<div class='box-btn' @click="goBill">还 款</div> <div class='box-btn' @click="goBill">还 款</div>
</div>
</div> </div>
</div>
...@@ -50,7 +49,7 @@ ...@@ -50,7 +49,7 @@
<div >客服热线</div> <div >客服热线</div>
<div>4006063123</div> <div>4006063123</div>
</div> </div>
<van-popup v-model:show="showCenter" round :style="{ padding: '24px' , fontSize:'16px' }" > <van-popup v-model:show="showCenter" round :style="{ padding: '24px' , fontSize:'18px' }" >
<div>咨询申请已提交，</div> <div>咨询申请已提交，</div>
<div>工作人员会在24小时内电话联系你，</div> <div>工作人员会在24小时内电话联系你，</div>
<div>请注意接听</div> <div>请注意接听</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment