Skip to content

F
fns_front_2
Commit e17294cf authored by Zhang Xiaojie's avatar Zhang Xiaojie
Browse files
Options

Merge branch 'dev' of gitlab.33.cn:chenqikuai/fns_front_2 into dev

parents 98d500e8 cbaf7195
Hide whitespace changes
Inline Side-by-side
Showing with 1707 additions and 1 deletion
src/components/Loan/LoanCard2/index.vue 0 → 100644
View file @ e17294cf
<script lang="tsx">
import { defineComponent } from "vue";
export default defineComponent({
setup() {
return () => (
<div class="group2 flex-col">
<button class="bd12 flex-col" onClick={() => {}}>
<span class="txt9">立即申请</span>
</button>
<div class="bd13 flex-col w-full">
<div class="layer12 flex-col w-full">
<span class="word18">借款额度（万元）</span>
<span class="txt10">1.0-1,000.0</span>
<span class="word19">近七日年化&nbsp;3.85%-4.25%</span>
</div>
</div>
</div>
);
},
});
</script>
<style lang="less" scoped>
.group2 {
z-index: 11;
height: 197px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5);
width: 335px;
justify-content: flex-end;
padding-bottom: 24px;
align-items: center;
position: absolute;
left: 20px;
top: 222px;
.bd12 {
z-index: 12;
height: 40px;
border-radius: 20px;
background-color: rgba(62, 79, 175, 1);
box-shadow: 0px 2px 8px 0px rgba(62, 79, 175, 0.4);
width: 201px;
justify-content: center;
align-items: flex-start;
padding-left: 69px;
.txt9 {
z-index: 13;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
}
.bd13 {
z-index: 14;
height: 177px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(200, 183, 123, 1);
width: 316px;
justify-content: flex-start;
padding-top: 10px;
align-items: center;
position: absolute;
left: 10px;
top: 10px;
.layer12 {
z-index: auto;
height: 103px;
.word18 {
z-index: 17;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-end;
margin: 0 auto;
}
.txt10 {
z-index: 15;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 40px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 47px;
text-align: center;
margin-top: 19px;
}
.word19 {
z-index: 16;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
align-self: flex-start;
margin: 0 auto;
}
}
}
}
</style>
\ No newline at end of file
src/components/NavBar/index.vue
View file @ e17294cf
......@@ -20,7 +20,14 @@
name="icon-fanhui"
class="absolute left-0"
size="18"
color="#343640"
:color="iconColor"
/>
<icon
v-if="showSecondIcon"
name="icon-kefu"
class="absolute left-11"
size="18"
:color="iconColor"
/>
<div>{{ title }}</div>
</div>
......@@ -46,6 +53,14 @@ export default defineComponent({
type: Boolean,
default: true,
},
iconColor: {
type: String,
default: "#343640",
},
showSecondIcon: {
type: Boolean,
default: false,
},
},
});
</script>
......
src/router/index.ts
View file @ e17294cf
......@@ -46,6 +46,11 @@ const routes: Array<RouteRecordRaw> = [
name: 'LoanList',
component: ()=>import("@/views/LoanList/index.vue")
},
{
path: '/loanDetail',
name: 'LoanDetail',
component: ()=>import("@/views/LoanDetail/index.vue")
},
// {
// path: '/fnsList',
// name: 'FnsList',
......
src/views/LoanDetail/index.less 0 → 100644
View file @ e17294cf
.page {
z-index: 1;
position: relative;
width: 375px;
background-color: rgba(247, 247, 250, 1);
overflow: hidden;
justify-content: flex-start;
padding-top: 0;
.group1 {
z-index: auto;
width: 375px;
.block1 {
z-index: 3;
height: 390px;
background: url('../../assets/img/loan_detail_bg.png');
background-size: cover;
width: 375px;
.bd1 {
z-index: 4;
height: 390px;
width: 375px;
.section1 {
z-index: auto;
width: 375px;
height: 390px;
.block2 {
z-index: 37;
height: 88px;
width: 375px;
.section2 {
z-index: auto;
width: 358px;
height: 18px;
margin: 13px 0 0 3px;
.word1 {
z-index: 54;
width: 54px;
display: block;
overflow-wrap: break-word;
color: rgba(0, 0, 0, 1);
font-size: 15px;
letter-spacing: -0.30000001192092896px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 15px;
text-align: center;
}
.wrap1 {
z-index: 48;
width: 17px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng39aeef61ebf4c04e189be0f880a1d512b1f31f81101ab4916ee829da20fbd661) -1px -1px
no-repeat;
margin: 5px 0 0 237px;
}
.wrap2 {
z-index: 44;
width: 16px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8b86eb1dc9460d0dbc2bca7ceceed1b7dcd69dd2157029edccb420d28cf9b047) -1px
0px no-repeat;
margin: 5px 0 0 5px;
}
.icon1 {
z-index: 41;
width: 23px;
height: 8px;
margin: 6px 0 0 6px;
}
}
.section3 {
z-index: auto;
width: 197px;
height: 22px;
margin: 23px 0 0 23px;
.icon2 {
z-index: 62;
width: 10px;
height: 16px;
margin-top: 3px;
}
.icon3 {
z-index: 57;
width: 16px;
height: 16px;
margin: 3px 0 0 33px;
}
.info1 {
z-index: 38;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
margin-left: 73px;
}
}
}
.word2 {
z-index: 6;
width: 170px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 16px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: center;
margin-top: 70px;
}
.block3 {
z-index: 34;
width: 335px;
height: 0px;
border-bottom: 1px solid rgba(167, 178, 227, 0.3);
align-self: center;
margin-top: 22px;
}
.block4 {
z-index: auto;
width: 323px;
height: 20px;
margin: 8px 0 0 26px;
.label1 {
z-index: 22;
width: 16px;
height: 16px;
}
.word3 {
z-index: 19;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(167, 178, 227, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-left: 7px;
}
.label2 {
z-index: 26;
width: 16px;
height: 16px;
margin: 0px 0 0 40px;
}
.info2 {
z-index: 20;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(167, 178, 227, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-left: 12px;
}
.label3 {
z-index: 30;
width: 16px;
height: 16px;
margin: 0px 0 0 41px;
}
.word4 {
z-index: 21;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(167, 178, 227, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-left: 7px;
}
}
.block5 {
z-index: 35;
width: 336px;
height: 0px;
border-bottom: 1px solid rgba(167, 178, 227, 0.3);
align-self: center;
margin-top: 7px;
}
.info3 {
z-index: 7;
display: block;
overflow-wrap: break-word;
color: rgba(167, 178, 227, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-end;
margin: 0 auto;
margin-top: 19px;
}
}
}
}
.block7 {
z-index: auto;
width: 192px;
height: 22px;
justify-content: space-between;
margin: 60px 0 0 92px;
.icon4 {
z-index: 168;
width: 43px;
height: 4px;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(179, 144, 77, 1) 100%
);
margin-top: 10px;
}
.label4 {
z-index: 158;
width: 16px;
height: 14px;
margin-top: 3px;
}
.info4 {
z-index: 157;
width: 64px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.icon5 {
z-index: 171;
width: 43px;
height: 4px;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(179, 144, 77, 1) 100%
);
transform: rotateY(180deg);
margin-top: 10px;
}
}
.block8 {
z-index: 174;
height: 91px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
align-self: center;
margin-top: 17px;
width: 335px;
justify-content: center;
align-items: center;
position: relative;
.layer1 {
z-index: auto;
width: 295px;
height: 51px;
.layer2 {
z-index: auto;
width: 270px;
height: 24px;
margin-left: 11px;
justify-content: space-between;
.layer3 {
z-index: 176;
height: 26px;
border: 1px solid rgba(163, 171, 224, 1);
border-radius: 50%;
width: 26px;
justify-content: center;
align-items: center;
}
.word5 {
z-index: 177;
display: block;
overflow-wrap: break-word;
color: rgba(163, 171, 224, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
text-align: center;
}
.layer4 {
z-index: 189;
width: 46px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng460c724e5a38942b9c99f98b1c0ec8e82981fb1b2684be19ea8299dfb42cab31)
0px 0px no-repeat;
margin-top: 12px;
}
.layer5 {
z-index: 181;
width: 24px;
height: 24px;
border-width: 1px;
border: 1px solid rgba(163, 171, 224, 1);
border-radius: 50%;
}
.layer6 {
z-index: 188;
width: 46px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng460c724e5a38942b9c99f98b1c0ec8e82981fb1b2684be19ea8299dfb42cab31)
0px 0px no-repeat;
margin-top: 12px;
}
.layer7 {
z-index: 182;
width: 24px;
height: 24px;
border-width: 1px;
border: 1px solid rgba(163, 171, 224, 1);
border-radius: 50%;
}
.layer8 {
z-index: 187;
width: 46px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng460c724e5a38942b9c99f98b1c0ec8e82981fb1b2684be19ea8299dfb42cab31)
0px 0px no-repeat;
margin-top: 12px;
}
.layer9 {
z-index: 183;
width: 24px;
height: 24px;
border-width: 1px;
border: 1px solid rgba(163, 171, 224, 1);
border-radius: 50%;
}
}
.layer10 {
z-index: auto;
width: 295px;
height: 17px;
margin-top: 10px;
justify-content: space-between;
.word6 {
z-index: 175;
width: 48px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
.txt1 {
z-index: 184;
width: 48px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
.word7 {
z-index: 185;
width: 48px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
.info5 {
z-index: 186;
width: 48px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
}
}
.txt2 {
z-index: 178;
position: absolute;
left: 123px;
top: 22px;
width: 9px;
display: block;
overflow-wrap: break-word;
color: rgba(163, 171, 224, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.info6 {
z-index: 179;
position: absolute;
left: 203px;
top: 22px;
width: 9px;
display: block;
overflow-wrap: break-word;
color: rgba(163, 171, 224, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.info7 {
z-index: 180;
position: absolute;
left: 286px;
top: 22px;
width: 9px;
display: block;
overflow-wrap: break-word;
color: rgba(163, 171, 224, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
}
.block9 {
z-index: auto;
width: 193px;
height: 22px;
justify-content: space-between;
margin: 30px 0 0 91px;
.icon6 {
z-index: 86;
width: 43px;
height: 4px;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(179, 144, 77, 1) 100%
);
margin-top: 10px;
}
.label5 {
z-index: 76;
width: 16px;
height: 14px;
margin-top: 3px;
}
.word8 {
z-index: 75;
width: 64px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.label6 {
z-index: 89;
width: 43px;
height: 4px;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(179, 144, 77, 1) 100%
);
transform: rotateY(180deg);
margin-top: 10px;
}
}
.block10 {
z-index: 68;
height: 301px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(234, 240, 255, 1);
background-color: rgba(255, 255, 255, 1);
align-self: center;
margin-top: 20px;
width: 335px;
align-items: flex-end;
padding-right: 12px;
.section4 {
z-index: auto;
width: 223px;
height: 301px;
justify-content: space-between;
.mod1 {
z-index: 70;
width: 1px;
height: 301px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng41afa68e649c0c19d32a979fa9e27d6aedba8eae24e51ba3b38b29baa4fdf20f)
100% no-repeat;
}
.mod2 {
z-index: auto;
width: 169px;
height: 272px;
margin-top: 17px;
.info8 {
z-index: 72;
width: 169px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.info9 {
z-index: 74;
width: 150px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-end;
margin: 31px 8px 0 0;
}
.info10 {
z-index: 95;
width: 92px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-end;
margin: 29px 8px 0 0;
}
.info11 {
z-index: 98;
width: 96px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-end;
margin: 29px 8px 0 0;
}
.word9 {
z-index: 101;
width: 86px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-end;
margin: 31px 8px 0 0;
}
.info12 {
z-index: 104;
width: 28px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-end;
margin: 32px 8px 0 0;
}
}
}
}
.block11 {
z-index: 105;
height: 673px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
align-self: center;
margin-top: 20px;
width: 335px;
justify-content: flex-start;
padding-top: 20px;
.outer1 {
z-index: auto;
width: 335px;
height: 630px;
.bd2 {
z-index: auto;
width: 97px;
height: 30px;
margin-left: 20px;
justify-content: space-between;
.bd3 {
z-index: 132;
height: 30px;
background-color: rgba(0, 0, 0, 0);
width: 30px;
justify-content: center;
align-items: center;
.bd4 {
z-index: 133;
width: 25px;
height: 28px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng83ab0ca9cf25c2e272766a5f373bfc3c9356144b8fe48feca35bd24e8231ce49)
100% no-repeat;
}
}
.txt3 {
z-index: 121;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: justify;
}
}
.txt4 {
z-index: 107;
width: 255px;
height: 120px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
line-height: 24px;
text-align: justify;
align-self: flex-end;
margin-right: 19px;
overflow: hidden;
text-overflow: ellipsis;
}
.bd5 {
z-index: 152;
width: 335px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0191636da1de6b04ea6bdc0d9854280d5d2d1c28dbc8bd2141ca13a8c615e82)
100% no-repeat;
margin-top: 20px;
}
.bd6 {
z-index: auto;
width: 191px;
height: 50px;
justify-content: space-between;
margin: 19px 0 0 20px;
.label7 {
z-index: 112;
width: 30px;
height: 30px;
margin-top: 3px;
}
.main1 {
z-index: auto;
width: 140px;
height: 50px;
.txt5 {
z-index: 109;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: justify;
align-self: flex-start;
}
.word10 {
z-index: 108;
width: 140px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: justify;
margin-top: 10px;
}
}
}
.bd7 {
z-index: 153;
width: 335px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0191636da1de6b04ea6bdc0d9854280d5d2d1c28dbc8bd2141ca13a8c615e82)
100% no-repeat;
margin-top: 20px;
}
.bd8 {
z-index: auto;
width: 289px;
height: 50px;
justify-content: space-between;
margin: 19px 0 0 20px;
.label8 {
z-index: 122;
width: 30px;
height: 30px;
margin-top: 4px;
}
.box1 {
z-index: auto;
width: 238px;
height: 50px;
.txt6 {
z-index: 111;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
}
.txt7 {
z-index: 110;
width: 238px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-top: 10px;
}
}
}
.bd9 {
z-index: 154;
width: 335px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0191636da1de6b04ea6bdc0d9854280d5d2d1c28dbc8bd2141ca13a8c615e82)
100% no-repeat;
margin-top: 20px;
}
.bd10 {
z-index: auto;
width: 305px;
height: 126px;
justify-content: space-between;
margin: 19px 0 0 21px;
.icon7 {
z-index: 138;
width: 28px;
height: 29px;
margin-top: 4px;
}
.layer11 {
z-index: auto;
width: 255px;
height: 126px;
.word11 {
z-index: 129;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
}
.paragraph1 {
z-index: 131;
width: 255px;
height: 96px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
line-height: 24px;
text-align: left;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.bd11 {
z-index: auto;
width: 105px;
height: 30px;
justify-content: space-between;
margin: 38px 0 0 22px;
.label9 {
z-index: 247;
width: 26px;
height: 30px;
}
.word12 {
z-index: 130;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
}
.word13 {
z-index: 106;
width: 246px;
height: 66px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
line-height: 20px;
text-align: left;
align-self: flex-end;
margin-right: 19px;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.info13 {
z-index: 192;
width: 64px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: flex-start;
margin: 29px 0 0 22px;
}
.block12 {
z-index: 194;
height: 198px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
align-self: center;
margin-top: 10px;
width: 335px;
justify-content: flex-start;
align-items: flex-start;
padding: 18px 0 0 15px;
.box2 {
z-index: auto;
width: 301px;
height: 119px;
.main2 {
z-index: auto;
width: 300px;
height: 24px;
.outer2 {
z-index: 195;
width: 24px;
height: 24px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngaea79b533352061d5a3a86f52ddd86115183257e10e68009f45ed159fe4bc6d6) -1px -1px
no-repeat;
}
.info14 {
z-index: 212;
width: 114px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
margin-left: 10px;
}
.outer3 {
z-index: 219;
height: 19px;
border-radius: 4px;
background-color: rgba(249, 243, 232, 1);
width: 40px;
justify-content: center;
align-items: flex-end;
padding-right: 6px;
margin: 2px 0 0 112px;
.word14 {
z-index: 220;
width: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(173, 151, 129, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
}
}
.main3 {
z-index: auto;
width: 296px;
height: 18px;
justify-content: space-between;
margin: 8px 0 0 5px;
.txt8 {
z-index: 213;
width: 137px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
.word15 {
z-index: 211;
width: 40px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 1px;
}
}
.main4 {
z-index: 228;
width: 292px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng914ff48eb6a0d232ce1fb7dd6f23c934226d14776ab390c626223df45357b906)
100% no-repeat;
align-self: flex-end;
margin: 9px 2px 0 0;
}
.main5 {
z-index: auto;
width: 74px;
height: 19px;
justify-content: space-between;
margin: 10px 0 0 6px;
.label10 {
z-index: 229;
width: 14px;
height: 13px;
margin-top: 2px;
}
.section5 {
z-index: 216;
height: 19px;
border-radius: 4px;
border-width: 1px;
border: 1px solid rgba(77, 92, 181, 1);
background-color: rgba(246, 247, 255, 1);
width: 49px;
justify-content: center;
align-items: center;
.word16 {
z-index: 217;
width: 37px;
display: block;
overflow-wrap: break-word;
color: rgba(62, 79, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
}
}
.main6 {
z-index: auto;
width: 292px;
height: 28px;
margin: 2px 0 0 6px;
.label11 {
z-index: 222;
width: 14px;
height: 14px;
margin-top: 12px;
}
.word17 {
z-index: 221;
width: 156px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin: 11px 0 0 8px;
}
.label12 {
z-index: 202;
width: 16px;
height: 16px;
margin-left: 98px;
}
}
}
}
}
.group4 {
z-index: 93;
position: absolute;
left: 20px;
top: 735px;
width: 335px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0191636da1de6b04ea6bdc0d9854280d5d2d1c28dbc8bd2141ca13a8c615e82)
100% no-repeat;
}
.group5 {
z-index: 92;
position: absolute;
left: 20px;
top: 785px;
width: 335px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0191636da1de6b04ea6bdc0d9854280d5d2d1c28dbc8bd2141ca13a8c615e82)
100% no-repeat;
}
.group6 {
z-index: 69;
height: 300px;
border-radius: 20px 0 0 20px;
background-color: rgba(234, 240, 255, 1);
width: 101px;
justify-content: flex-end;
align-items: flex-end;
padding: 0 18px 11px 0;
.wrap3 {
z-index: auto;
width: 56px;
height: 272px;
.txt11 {
z-index: 71;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.info15 {
z-index: 73;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-top: 30px;
}
.word20 {
z-index: 94;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-top: 30px;
}
.txt12 {
z-index: 97;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-top: 29px;
}
.txt13 {
z-index: 100;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-top: 31px;
}
.txt14 {
z-index: 103;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
margin-top: 32px;
}
}
}
.group7 {
z-index: 96;
position: absolute;
left: 20px;
top: 835px;
width: 335px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0191636da1de6b04ea6bdc0d9854280d5d2d1c28dbc8bd2141ca13a8c615e82)
100% no-repeat;
}
.group8 {
z-index: 99;
position: absolute;
left: 20px;
top: 885px;
width: 335px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0191636da1de6b04ea6bdc0d9854280d5d2d1c28dbc8bd2141ca13a8c615e82)
100% no-repeat;
}
.group9 {
z-index: 102;
position: absolute;
left: 20px;
top: 937px;
width: 335px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0191636da1de6b04ea6bdc0d9854280d5d2d1c28dbc8bd2141ca13a8c615e82)
100% no-repeat;
}
.group10 {
z-index: 155;
position: absolute;
left: 20px;
top: 1540px;
width: 336px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng202762cba1f2338c01a7293b2e6c1fe3c02510edca06d73be105476d2002d980)
0px 0px no-repeat;
}
.group11 {
z-index: 208;
height: 45px;
border-radius: 0 0 20px 20px;
background-color: rgba(249, 251, 255, 1);
width: 335px;
justify-content: center;
align-items: flex-end;
padding-right: 49px;
position: absolute;
left: 20px;
top: 1893px;
.box3 {
z-index: auto;
width: 225px;
height: 20px;
.info16 {
z-index: 209;
width: 56px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
.group12 {
z-index: 244;
width: 1px;
height: 20px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5b93cf055b2bea699dd9daf8ac37809363052661f0ec1b9b20e56a053d8553d9)
100% no-repeat;
margin-left: 50px;
}
.txt15 {
z-index: 210;
width: 57px;
display: block;
overflow-wrap: break-word;
color: rgba(62, 79, 175, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: left;
margin-left: 61px;
}
}
}
}
src/views/LoanDetail/index.vue 0 → 100644
View file @ e17294cf
<script lang="tsx">
import { defineComponent } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import LoanCard2 from "@/components/Loan/LoanCard2/index.vue";
import Icon from "@/components/common/Icon.vue";
export default defineComponent({
components: {
NavBar,
LoanCard2,
Icon,
},
setup() {
return () => (
<>
<div class="page flex-col">
<div class="group1 flex-col">
<NavBar
title={"产品详情"}
class="text-app-white"
iconColor="white"
style={{ backgroundColor: "#2A3A91" }}
showSecondIcon={true}
occupyPosition={false}
/>
<div class="block1 flex-col">
<div class="bd1 flex-col">
<div class="section1 flex-col">
<span class="word2">中国建设银行-抵押快贷</span>
<div class="block3 flex-col" />
<div class="block4 flex-row items-center">
<icon
class="label1 flex items-center justify-center"
name="icon-gouxuanyangshi"
color="#A7B2E3"
size="17"
/>
<span class="word3">额度更优</span>
<icon
class="label2 flex items-center justify-center"
name="icon-gouxuanyangshi"
color="#A7B2E3"
size="17"
/>
<span class="info2">分秒批贷</span>
<icon
class="label3 flex items-center justify-center"
name="icon-gouxuanyangshi"
color="#A7B2E3"
size="17"
/>
<span class="word4">随借随还</span>
</div>
<div class="block5 flex-col" />
<span class="info3">小微企业/个体工商户专属</span>
</div>
</div>
</div>
<div class="block7 flex-row">
<img
class="icon4"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0f4e03a84d9909f4eb157d49ee7ff5425988ad5cfcc0c03fded38ae1cfa46950"
}
/>
<img
class="label4"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf54b10e8a1bc9dc96c83314979a5ef86a38bad178dea6a5557b4be4011bdc1b1"
}
/>
<span class="info4">申请流程</span>
<img
class="icon5"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1258892e3d5687d4d01ab411f765ca4dba42de918a00d916324ed3333c9f9940"
}
/>
</div>
<div class="block8 flex-col">
<div class="layer1 flex-col">
<div class="layer2 flex-row">
<div class="layer3 flex-col flex items-center justify-center">
<span class="word5">1</span>
</div>
<div class="layer4 flex-col"></div>
<div class="layer5 flex-col flex items-center justify-center">
<span class="word5">2</span>
</div>
<div class="layer6 flex-col" />
<div class="layer7 flex-col flex items-center justify-center">
<span class="word5">3</span>
</div>
<div class="layer8 flex-col" />
<div class="layer9 flex-col">
<span class="word5">4</span>
</div>
</div>
<div class="layer10 flex-row">
<span class="word6">线上申请</span>
<span class="txt1">专人联系</span>
<span class="word7">资料准备</span>
<span class="info5">审批发放</span>
</div>
</div>
</div>
<div class="block9 flex-row">
<img
class="icon6"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0f4e03a84d9909f4eb157d49ee7ff5425988ad5cfcc0c03fded38ae1cfa46950"
}
/>
<img
class="label5"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf54b10e8a1bc9dc96c83314979a5ef86a38bad178dea6a5557b4be4011bdc1b1"
}
/>
<span class="word8">产品详情</span>
<img
class="label6"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1258892e3d5687d4d01ab411f765ca4dba42de918a00d916324ed3333c9f9940"
}
/>
</div>
<div class="block10 flex">
<div class="group6 flex-col">
<div class="wrap3 flex-col">
<span class="txt11">贷款机构</span>
<span class="info15">产品名称</span>
<span class="word20">贷款利率</span>
<span class="txt12">贷款额度</span>
<span class="txt13">贷款期限</span>
<span class="txt14">担保方式</span>
</div>
</div>
<div class="section4 flex-row">
<div class="mod1 flex-col" />
<div class="mod2 flex-col">
<span class="info8">中国建设银行（杭州支行）</span>
<span class="info9">中国建设银行-抵押快贷</span>
<span class="info10">3.85%~4.25%</span>
<span class="info11">1.0万~1000.0万</span>
<span class="word9">1个月~36个月</span>
<span class="info12">抵押</span>
</div>
</div>
</div>
<div class="block11 flex-col">
<div class="outer1 flex-col">
<div class="bd2 flex-row">
<div class="bd3 flex-col">
<div class="bd4 flex-col" />
</div>
<span class="txt3">产品介绍</span>
</div>
<span class="txt4">
小微企业“抵押快贷”业务，是指以大数据分析为基础，以建设银行认可的优质房产抵押作为主要担保方式，运用评分卡评价方式，为小微企业办理的流动资金贷款业务。
</span>
<div class="bd5 flex-col" />
<div class="bd6 flex-row">
<img
class="label7"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng81b0faf4e68e064ddcc0ed73d3c746c60b5b920b522537fe16d319254507bef1"
}
/>
<div class="main1 flex-col">
<span class="txt5">产品特点</span>
<span class="word10">以房定贷，随借随还。</span>
</div>
</div>
<div class="bd7 flex-col" />
<div class="bd8 flex-row">
<img
class="label8"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge0627465907992acb175cdb29b6583c3b609938d1c6953a9c4650841bd0c3624"
}
/>
<div class="box1 flex-col">
<span class="txt6">适用客户</span>
<span class="txt7">有建设银行认可的优质房产的小微企业</span>
</div>
</div>
<div class="bd9 flex-col" />
<div class="bd10 flex-row">
<img
class="icon7"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngcc8fe5fe564d8073e8e9ece8fb65a4962289cd0cab34228c9fa1efaff4b53880"
}
/>
<div class="layer11 flex-col">
<span class="word11">申请条件</span>
<span class="paragraph1">
1、企业经营年满3个月；
<br />
2、个人及企业征信良好；
<br />
3、企业无违法、涉诉及各类处罚情况；
<br />
4、抵押物需产权明晰、价值稳定。
</span>
</div>
</div>
<div class="bd11 flex-row">
<img
class="label9"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbba2b4ec1ed69bebd435266e9d413349464bc8f9178fbe08808832db5c47fc69"
}
/>
<span class="word12">提交条件</span>
</div>
<span class="word13">
身份信息：营业执照、法人（股东）身份证；企业股东会决议，房产相关证明等。
</span>
</div>
</div>
<span class="info13">营业网点</span>
<div class="block12 flex-col">
<div class="box2 flex-col">
<div class="main2 flex-row">
<div class="outer2 flex-col" />
<span class="info14">杭州文三路支行</span>
<div class="outer3 flex-col">
<span class="word14">网点</span>
</div>
</div>
<div class="main3 flex-row">
<span class="txt8">浙江省杭州市文三路49号</span>
<span class="word15">1.16KM</span>
</div>
<div class="main4 flex-col" />
<div class="main5 flex-row">
<img
class="label10"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc62ec7ddbd079ea74b31b89776b914f1bafe8435ee006143e8c990a5ebc02a98"
}
/>
<div class="section5 flex-col">
<span class="word16">营业中</span>
</div>
</div>
<div class="main6 flex-row">
<img
class="label11"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb858f49bea133157f74d5144366edff569448109adff1379072c95380213e6f3"
}
/>
<span class="word17">
周一至周五&nbsp;丨&nbsp;08:30-17:00
</span>
<img
class="label12"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9c69d884c23c10ba22ec95a57be0090f155970d6d4072311b71a9805b7885bfb"
}
/>
</div>
</div>
</div>
</div>
<LoanCard2 />
<div class="group4 flex-col" />
<div class="group5 flex-col" />
<div class="group7 flex-col" />
<div class="group8 flex-col" />
<div class="group9 flex-col" />
<div class="group10 flex-col" />
<div class="group11 flex-col">
<div class="box3 flex-row">
<span class="info16">联系客服</span>
<div class="group12 flex-col" />
<span class="txt15">电话咨询</span>
</div>
</div>
</div>
</>
);
},
});
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
\ No newline at end of file
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