Skip to content

F
fns_front_2
Commit 53f99609 authored by chenqikuai's avatar chenqikuai
Browse files
Options

feat：贷款列表

parent dfa84dff
Hide whitespace changes
Inline Side-by-side
Showing with 1302 additions and 5 deletions
src/App.vue
View file @ 53f99609
<template> <template>
<div id="nav"> <div id="nav" class="bg-app-bg h-screen">
<router-view /> <router-view />
</div> </div>
</template> </template>
......
src/components/Loan/LoanCard/index.vue
View file @ 53f99609
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue, {defineComponent} from "vue"; import Vue, { defineComponent } from "vue";
import Icon from "@/components/common/Icon.vue"; import Icon from "@/components/common/Icon.vue";
export default defineComponent({ components: { Icon } }); export default defineComponent({ components: { Icon } });
</script> </script>
......
src/components/NavBar/index.vue
View file @ 53f99609
<template> <template>
<div class="navbar w-full" style="z-index: 100"> <div class="navbar w-full" style="z-index: 300">
<div <div
class=" class="
h-full h-full
...@@ -56,7 +56,7 @@ export default defineComponent({ ...@@ -56,7 +56,7 @@ export default defineComponent({
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 100; z-index: 300;
height: 46px; height: 46px;
} }
.some-block { .some-block {
......
src/components/PopUpContent/LoanFilter/index.vue 0 → 100644
View file @ 53f99609
<template>
<div>
<div class="group-title mt-8">银行名称</div>
<SelectList
class="mt-5"
:list="bankList"
:selecteds="selectedBanks"
:setSelecteds="setBanks"
/>
<div class="group-title mt-8">利率 (%)</div>
<div class="section10 flex-row">
<div class="mod5 flex-col">
<div class="layer4 flex-row">
<div class="word24">
<input
v-model.number="min_"
type="number"
placeholder="最低利率"
class="bg-transparent w-full"
/>
</div>
<div class="word25">%</div>
</div>
</div>
<div class="mod6 flex-col"></div>
<div class="mod7 flex-col">
<div class="main12 flex-row">
<div class="txt12">
<input
type="number"
v-model.number="max_"
placeholder="最高利率"
class="bg-transparent w-full"
/>
</div>
<div class="word26">%</div>
</div>
</div>
</div>
<div class="group-title mt-8">额度 (万元)</div>
<div class="section10 flex-row">
<div class="mod5 flex-col">
<div class="layer4 flex-row">
<div class="word24">
<input
v-model.number="min_2"
type="number"
placeholder=""
class="bg-transparent w-full"
/>
</div>
</div>
</div>
<div class="mod6 flex-col"></div>
<div class="mod7 flex-col">
<div class="main12 flex-row">
<div class="txt12">
<input
type="number"
v-model.number="max_2"
placeholder=""
class="bg-transparent w-full"
/>
</div>
</div>
</div>
</div>
<div class="group-title mt-8">期限</div>
<SelectList
class="mt-5"
:list="peridList"
:selecteds="selectedPerids"
:setSelecteds="setSelectedPerids"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import SelectList from "@/components/SelectList/index.vue";
export default defineComponent({
components: {
SelectList,
},
props: {
bankList: Array,
selectedBanks: Array,
setBanks: Function,
peridList: Array,
selectedPerids: Array,
setSelectedPerids: Function,
min: [Number, String],
max: [Number, String],
setMin: {
type: Function,
required: true,
},
setMax: {
type: Function,
required: true,
},
min2: [Number, String],
max2: [Number, String],
setMin2: {
type: Function,
required: true,
},
setMax2: {
type: Function,
required: true,
},
},
computed: {
min_: {
get(): number | string | undefined {
return this.min;
},
set(v: number | string): void {
this.setMin(v);
},
},
max_: {
get(): number | string | undefined {
return this.max;
},
set(v: number | string): void {
this.setMax(v);
},
},
min_2: {
get(): number | string | undefined {
return this.min2;
},
set(v: number | string): void {
this.setMin2(v);
},
},
max_2: {
get(): number | string | undefined {
return this.max2;
},
set(v: number | string): void {
this.setMax2(v);
},
},
},
});
</script>
<style lang="less" scoped>
.group-title {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1b1f37;
}
.section10 {
z-index: auto;
width: 282px;
height: 40px;
justify-content: space-between;
margin-top: 20px;
}
.mod5 {
z-index: 136;
height: 40px;
border-radius: 5px;
background-color: rgba(247, 247, 250, 1);
width: 116px;
justify-content: center;
align-items: flex-end;
padding-right: 10px;
}
.layer4 {
z-index: auto;
width: 82px;
height: 20px;
justify-content: space-between;
}
.word24 {
z-index: 140;
width: 56px;
display: block;
overflow-wrap: break-word;
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
color: #1b1f37;
line-height: 20px;
text-align: left;
}
.word25 {
z-index: 138;
width: 14px;
display: block;
overflow-wrap: break-word;
font-size: 14px;
color: #1b1f37;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
.mod6 {
z-index: 145;
width: 14px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0e9464c2bc2666ea94aaa969a4fbb2853a62a3a30b32f0a92310f37426eb2d6)
0px 0px no-repeat;
margin-top: 20px;
}
.mod7 {
z-index: 139;
height: 40px;
border-radius: 5px;
background-color: rgba(247, 247, 250, 1);
width: 116px;
justify-content: center;
align-items: flex-end;
padding-right: 10px;
}
.main12 {
z-index: auto;
width: 76px;
height: 20px;
justify-content: space-between;
}
.txt12 {
z-index: 143;
width: 56px;
display: block;
overflow-wrap: break-word;
color: #1b1f37;
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
.word26 {
z-index: 141;
width: 14px;
display: block;
overflow-wrap: break-word;
color: #1b1f37;
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
</style>
\ No newline at end of file
src/router/index.ts
View file @ 53f99609
...@@ -41,6 +41,11 @@ const routes: Array<RouteRecordRaw> = [ ...@@ -41,6 +41,11 @@ const routes: Array<RouteRecordRaw> = [
}, },
], ],
}, },
{
path: '/loanList',
name: 'LoanList',
component: ()=>import("@/views/LoanList/index.vue")
},
// { // {
// path: '/fnsList', // path: '/fnsList',
// name: 'FnsList', // name: 'FnsList',
......
src/views/LoanList/index.vue 0 → 100644
View file @ 53f99609
<template>
<div class="page">
<NavBar title="全部功能" />
<div class="layer1 flex-col">
<GroupTitle
class="mt-4"
title="贷款精选"
iconName="icon-shaixuan"
@filter="showFilter"
/>
</div>
<LoanCard v-for="n in 10" :key="n" class="mt-2.5" />
<PopUp
title="筛选"
:show="show"
:setShow="(v) => (show = v)"
@clickLeft="clickReset"
@clickRight="clickConfirm"
>
<LoanFilter
:bankList="bankList"
:selectedBanks="selectedBanks"
:setBanks="(v) => (selectedBanks = v)"
:peridList="peridList"
:selectedPerids="selectedPerids"
:setSelectedPerids="(v) => (selectedPerids = v)"
:min="min"
:max="max"
:setMin="(v) => (min = v)"
:setMax="(v) => (max = v)"
:min2="min2"
:max2="max2"
:setMin2="(v) => (min2 = v)"
:setMax2="(v) => (max2 = v)"
/>
</PopUp>
</div>
</template>
<script>
import NavBar from "@/components/NavBar/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import PopUp from "@/components/PopUp/index.vue";
import LoanFilter from "@/components/PopUpContent/LoanFilter/index.vue";
import LoanCard from "@/components/Loan/LoanCard/index.vue";
import { defineComponent } from "vue";
export default defineComponent({
components: {
PopUp,
NavBar,
GroupTitle,
LoanCard,
LoanFilter,
},
data() {
return {
show: false,
bankList: [
{
name: "zhongguo",
id: 1,
},
{
name: "df",
id: 12,
},
{
name: "43",
id: 13,
},
{
name: "zhongg3456uo",
id: 14,
},
{
name: "zhong345guo",
id: 15,
},
],
selectedBanks: [],
peridList: [
{ id: 1, name: "lsdkfj" },
{ id: 12, name: "lsdkfj" },
{ id: 31, name: "lsdkfj" },
{ id: 14, name: "lsdkfj" },
{ id: 15, name: "lsdkfj" },
],
selectedPerids: [],
min: undefined,
max: undefined,
min2: undefined,
max2: undefined,
reqParams: {
selectedBanks: [],
selectedPerids: [],
min: undefined,
max: undefined,
min2: undefined,
max2: undefined,
},
};
},
methods: {
showFilter() {
this.show = true;
this.selectedBanks = this.reqParams.selectedBanks;
this.selectedPerids = this.reqParams.selectedPerids;
this.max = this.reqParams.max;
this.min = this.reqParams.min;
this.max2 = this.reqParams.max2;
this.min2 = this.reqParams.min2;
},
clickReset() {
this.selectedBanks = [];
this.selectedPerids = [];
this.min = undefined;
this.max = undefined;
this.min2 = undefined;
this.max2 = undefined;
},
clickConfirm() {
this.reqParams = {
...this.reqParams,
selectedBanks: this.selectedBanks,
selectedPerids: this.selectedPerids,
min: this.min,
max: this.max,
min2: this.min2,
max2: this.max2,
};
this.show = false;
},
},
});
</script>
<style lang="less" scoped>
.page {
z-index: 1;
position: relative;
background-color: rgba(247, 247, 250, 1);
justify-content: flex-start;
align-items: flex-start;
}
.layer1 {
z-index: auto;
width: 100%;
}
.layer2 {
z-index: auto;
width: 358px;
height: 18px;
}
.word1 {
z-index: 17;
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;
}
.main1 {
z-index: 11;
width: 17px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng39aeef61ebf4c04e189be0f880a1d512b1f31f81101ab4916ee829da20fbd661) -1px -1px
no-repeat;
margin: 5px 0 0 237px;
}
.main2 {
z-index: 7;
width: 16px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8b86eb1dc9460d0dbc2bca7ceceed1b7dcd69dd2157029edccb420d28cf9b047) -1px
0px no-repeat;
margin: 5px 0 0 5px;
}
.label1 {
z-index: 4;
width: 23px;
height: 8px;
margin: 6px 0 0 6px;
}
.info1 {
z-index: 78;
width: 65px;
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;
}
.word2 {
z-index: 79;
width: 102px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin: 3px 0 0 14px;
}
.label2 {
z-index: 80;
width: 16px;
height: 16px;
margin: 3px 0 0 133px;
}
.layer4 {
z-index: auto;
width: 343px;
height: 114px;
justify-content: space-between;
margin: 20px 0 0 17px;
}
.outer1 {
z-index: 23;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
width: 335px;
justify-content: flex-end;
align-items: flex-start;
padding: 0 0 16px 20px;
}
.block1 {
z-index: auto;
width: 191px;
height: 78px;
justify-content: space-between;
}
.group1 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.txt1 {
z-index: 28;
width: 61px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 3px;
}
.word3 {
z-index: 32;
width: 73px;
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: 5px;
}
.group2 {
z-index: 33;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.group3 {
z-index: auto;
width: 98px;
height: 74px;
}
.txt2 {
z-index: 29;
width: 98px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.txt3 {
z-index: 30;
width: 86px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.info2 {
z-index: 31;
width: 92px;
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;
align-self: flex-start;
margin-top: 10px;
}
.outer2 {
z-index: 26;
width: 6px;
height: 9px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng70c7ac37d37e44856a8b49947aa31eed8f33d7ab806cf2d9ff723d50672c3b9e)
0px 0px no-repeat;
margin-top: 41px;
}
.layer5 {
z-index: auto;
width: 343px;
height: 114px;
justify-content: space-between;
margin: 10px 0 0 17px;
}
.bd1 {
z-index: 35;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
width: 335px;
justify-content: flex-end;
align-items: flex-start;
padding: 0 0 16px 20px;
}
.group4 {
z-index: auto;
width: 260px;
height: 78px;
justify-content: space-between;
}
.group5 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.info3 {
z-index: 40;
width: 58px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 4px;
}
.word4 {
z-index: 44;
width: 73px;
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: 5px;
}
.group6 {
z-index: 45;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.group7 {
z-index: auto;
width: 167px;
height: 74px;
}
.txt4 {
z-index: 41;
width: 167px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.info4 {
z-index: 42;
width: 86px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.txt5 {
z-index: 43;
width: 92px;
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;
align-self: flex-start;
margin-top: 10px;
}
.bd2 {
z-index: 38;
width: 6px;
height: 9px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng43ebde3e0d3f341174c4a41153b4afdb2634d25c5cef2768a049679f755813a7)
0px 0px no-repeat;
margin-top: 41px;
}
.layer6 {
z-index: 47;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
align-self: flex-end;
width: 335px;
justify-content: flex-end;
align-items: flex-start;
margin: 10px 8px 0 0;
padding: 0 0 16px 20px;
}
.section1 {
z-index: auto;
width: 185px;
height: 78px;
justify-content: space-between;
}
.box1 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.info5 {
z-index: 48;
width: 62px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 2px;
}
.info6 {
z-index: 52;
width: 73px;
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: 5px;
}
.box2 {
z-index: 53;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.box3 {
z-index: auto;
width: 92px;
height: 74px;
}
.word5 {
z-index: 49;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: flex-start;
}
.txt6 {
z-index: 50;
width: 57px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.word6 {
z-index: 51;
width: 92px;
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: 10px;
}
.layer7 {
z-index: 55;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
align-self: flex-end;
width: 335px;
justify-content: flex-end;
align-items: flex-start;
margin: 10px 8px 0 0;
padding: 0 0 16px 20px;
}
.section2 {
z-index: auto;
width: 185px;
height: 78px;
justify-content: space-between;
}
.wrap1 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.txt7 {
z-index: 56;
width: 62px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 2px;
}
.info7 {
z-index: 60;
width: 73px;
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: 5px;
}
.wrap2 {
z-index: 61;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.wrap3 {
z-index: auto;
width: 92px;
height: 74px;
}
.txt8 {
z-index: 57;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: flex-start;
}
.info8 {
z-index: 58;
width: 57px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.txt9 {
z-index: 59;
width: 92px;
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: 10px;
}
.layer8 {
z-index: 63;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
align-self: flex-end;
width: 335px;
justify-content: flex-end;
align-items: flex-start;
margin: 10px 8px 0 0;
padding: 0 0 16px 20px;
}
.main3 {
z-index: auto;
width: 185px;
height: 78px;
justify-content: space-between;
}
.box4 {
z-index: auto;
width: 73px;
height: 50px;
margin-top: 15px;
}
.txt10 {
z-index: 64;
width: 62px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
align-self: flex-start;
margin-left: 2px;
}
.word7 {
z-index: 68;
width: 73px;
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: 5px;
}
.box5 {
z-index: 69;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc0d5d1975a3423afbff3f433be115317783ee3ba0e2ed6411c42cec4e6ab6f3b) -1px
0px no-repeat;
}
.box6 {
z-index: auto;
width: 92px;
height: 74px;
}
.word8 {
z-index: 65;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: flex-start;
}
.info9 {
z-index: 66;
width: 57px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
.txt11 {
z-index: 67;
width: 92px;
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: 10px;
}
.layer9 {
z-index: 19;
height: 28px;
align-items: center;
}
.main4 {
z-index: auto;
width: 201px;
height: 22px;
justify-content: space-between;
}
.bd3 {
z-index: 92;
width: 16px;
height: 16px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbd286f871df361d77a59e4d06a98bd81b81c3bf9b82240cabd0a2599ffc15392)
2px -1px no-repeat;
margin-top: 5px;
}
.info10 {
z-index: 20;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.layer10 {
z-index: 25;
position: absolute;
left: 306px;
top: 154px;
width: 56px;
height: 30px;
border-radius: 15px 0 0 15px;
background-color: rgba(255, 145, 13, 1);
}
.word9 {
z-index: 27;
position: absolute;
left: 321px;
top: 158px;
width: 29px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.layer11 {
z-index: 37;
position: absolute;
left: 306px;
top: 278px;
width: 56px;
height: 30px;
border-radius: 15px 0 0 15px;
background-color: rgba(53, 85, 220, 1);
}
.txt12 {
z-index: 39;
position: absolute;
left: 321px;
top: 282px;
width: 29px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Medium;
white-space: nowrap;
line-height: 20px;
text-align: center;
}
.layer12 {
z-index: 71;
height: 114px;
border-radius: 20px;
border-width: 1px;
border: 1px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
width: 335px;
justify-content: flex-end;
align-items: flex-start;
position: absolute;
left: 20px;
top: 763px;
padding: 0 0 16px 22px;
}
.layer13 {
z-index: auto;
width: 156px;
height: 78px;
}
.info11 {
z-index: 72;
width: 62px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 20px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
margin-top: 15px;
}
.bd4 {
z-index: 75;
width: 1px;
height: 78px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfeebb919020bb7ef135b93939ebfdbb759f4f9d1c08e335e6a66571c347bff55) -1px
0px no-repeat;
margin-left: 19px;
}
.bd5 {
z-index: auto;
width: 65px;
height: 47px;
margin-left: 9px;
}
.txt13 {
z-index: 73;
width: 65px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word10 {
z-index: 74;
width: 57px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
margin-top: 5px;
}
</style>
src/views/withMenu/Loan/index.vue
View file @ 53f99609
...@@ -61,7 +61,11 @@ ...@@ -61,7 +61,11 @@
</div> </div>
<GroupTitle title="热门贷款" class="mt-2.5" iconName="" /> <GroupTitle title="热门贷款" class="mt-2.5" iconName="" />
<LoanHotSwipe class="mt-5" /> <LoanHotSwipe class="mt-5" />
<GroupTitle title="贷款精选" class="mb-2.5" /> <GroupTitle
title="贷款精选"
class="mb-2.5"
@seeMore="$router.push({ name: 'LoanList' })"
/>
<LoanCard v-for="n in 3" :key="n" class="mt-2.5" /> <LoanCard v-for="n in 3" :key="n" class="mt-2.5" />
<GroupTitle title="精彩活动" class="mt-2.5" iconName="" /> <GroupTitle title="精彩活动" class="mt-2.5" iconName="" />
......
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