Skip to content

F
fns_front_2
Commit a34ca239 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 48a4d9e3 dfa84dff
Hide whitespace changes
Inline Side-by-side
Showing with 1845 additions and 53 deletions
src/components/GroupTitle/index.vue
View file @ a34ca239
<template> <template>
<div class="wrap12 flex mx-5 items-center"> <div class="wrap12 flex mx-5 items-center">
<span class="word8">{{ title }}</span> <div class="word8">{{ title }}</div>
<span v-if="subtitle" class="ml-3 info2">{{ subtitle }}</span> <div v-if="subtitle" class="ml-3 info2">{{ subtitle }}</div>
<div class="flex-grow"></div> <div class="flex-grow"></div>
<span class="word9" v-if="iconName === 'icon-gengduo'">更多</span> <span class="word9" v-if="iconName === 'icon-gengduo'">更多</span>
<icon <icon
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
size="16" size="16"
@click="clickFilter" @click="clickFilter"
/> />
<icon v-else :name="iconName" color="#979BB6" size="16" /> <icon v-else-if="iconName" :name="iconName" color="#979BB6" size="16" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
......
src/components/LoanCard/index.vue → src/components/Loan/LoanCard/index.vue
View file @ a34ca239
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue, {defineComponent} from "vue"; import Vue, {defineComponent} from "vue";
import Icon from "../common/Icon.vue"; import Icon from "@/components/common/Icon.vue";
export default defineComponent({ components: { Icon } }); export default defineComponent({ components: { Icon } });
</script> </script>
<style scoped> <style scoped>
......
src/components/Loan/LoanHotCard/index.vue 0 → 100644
View file @ a34ca239
<template>
<div class="hot-loan">
<div class="title text-center mt-5">中国建设银行-信用快贷</div>
<div class="flex items-center box-group">
<div
v-for="n in 3"
:key="n"
class="box"
:style="{
width: 'calc(100% / 3)',
}"
>
<div class="top-text text-center">最低3.85%</div>
<div class="bottom-text mt-2.5 text-center">贷款年利率</div>
</div>
</div>
<div
class="viewRightNow flex items-center justify-center mt-5 mx-auto"
@click="$emit('viewRightNow')"
>
立即查看
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
emits: ["viewRightNow"],
setup() {},
});
</script>
<style lang="less" scoped>
.hot-loan {
margin: 0 auto;
width: 335px;
height: 200px;
background: #ffffff;
box-shadow: 0px 2px 13px 0px #f0f6fc;
border-radius: 20px;
.title {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1b1f37;
line-height: 22px;
}
.box-group {
margin-top: 30px;
.box {
border-right: 1px solid #eaf0ff;
.top-text {
font-size: 16px;
font-family: PingFangHK-Semibold, PingFangHK;
font-weight: 600;
color: #f03a30;
line-height: 22px;
}
.bottom-text {
font-size: 12px;
font-family: PingFangHK-Regular, PingFangHK;
font-weight: 400;
color: #8d92af;
line-height: 17px;
}
&:last-of-type {
border-right: 0;
}
}
}
.viewRightNow {
width: 295px;
height: 40px;
background: #4e61c9;
border-radius: 20px;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
}
}
</style>
\ No newline at end of file
src/components/Loan/LoanHotSwipe/index.vue 0 → 100644
View file @ a34ca239
<template>
<van-swipe class="my-swipe" indicator-color="#3E4FAF">
<van-swipe-item class="flex justify-center swpiItem"
><LoanHotCard />
</van-swipe-item>
<van-swipe-item class="flex justify-center swpiItem"
><LoanHotCard
/></van-swipe-item>
<van-swipe-item class="flex justify-center swpiItem"
><LoanHotCard
/></van-swipe-item>
</van-swipe>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import LoanHotCard from "@/components/Loan/LoanHotCard/index.vue";
export default defineComponent({
components: {
LoanHotCard,
},
});
</script>
<style lang="less" scoped>
.my-swipe /deep/ .van-swipe__indicator {
background-color: #e7e7e7;
opacity: 1;
}
.swpiItem {
height: 230px;
}
</style>
\ No newline at end of file
src/router/index.ts
View file @ a34ca239
...@@ -23,14 +23,14 @@ const routes: Array<RouteRecordRaw> = [ ...@@ -23,14 +23,14 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "mine" */ '@/views/withMenu/Mine/index.vue' /* webpackChunkName: "mine" */ '@/views/withMenu/Mine/index.vue'
), ),
}, },
{ // {
path: '/financialManagement', // path: '/financialManagement',
name: 'FinancialManagement', // name: 'FinancialManagement',
component: () => // component: () =>
import( // import(
/* webpackChunkName: "fns" */ '@/views/withMenu/FinancialManagement/index.vue' // /* webpackChunkName: "fns" */ '@/views/withMenu/FinancialManagement/index.vue'
), // ),
}, // },
{ {
path: '/loan', path: '/loan',
name: 'Loan', name: 'Loan',
...@@ -41,11 +41,11 @@ const routes: Array<RouteRecordRaw> = [ ...@@ -41,11 +41,11 @@ const routes: Array<RouteRecordRaw> = [
}, },
], ],
}, },
{ // {
path: '/fnsList', // path: '/fnsList',
name: 'FnsList', // name: 'FnsList',
component: () => import('@/views/FnsList/index.vue'), // component: () => import('@/views/FnsList/index.vue'),
}, // },
// { // {
// path: '/auth', // path: '/auth',
// component: () => import('@/views/Auth/index.vue'), // component: () => import('@/views/Auth/index.vue'),
......
src/views/withMenu/FinancialManagement/index.vue
View file @ a34ca239
...@@ -37,7 +37,6 @@ ...@@ -37,7 +37,6 @@
<span class="txt1">长期持有增值</span> <span class="txt1">长期持有增值</span>
</div> </div>
</div> </div>
<!-- <div class="box3 flex-col"><span class="word4">精选理财</span></div> -->
</div> </div>
<MainFnsSwip class="relative z-10 mainfnsswip" /> <MainFnsSwip class="relative z-10 mainfnsswip" />
<GroupTitle <GroupTitle
......
src/views/withMenu/Home/AppList/index.vue
View file @ a34ca239
<template> <template>
<div class="flex flex-wrap justify-between"> <div class="flex flex-wrap">
<div v-for="app in appList" :key="app.name" class="w-1/4 mb-5 text-center"> <div
v-for="app in appList"
:key="app.name"
class="w-1/4 mb-5 text-center"
@click="$router.push({ name: app.routerName })"
>
<div <div
class=" class="
w-16 w-16
......
src/views/withMenu/Home/appList.ts
View file @ a34ca239
...@@ -3,12 +3,13 @@ export default [ ...@@ -3,12 +3,13 @@ export default [
name: '贷款服务', name: '贷款服务',
icon: 'icon-daikuan', icon: 'icon-daikuan',
color: '#44D392', color: '#44D392',
routerName: 'Loan',
}, },
{ // {
name: '理财产品', // name: '理财产品',
icon: 'icon-licaichanpin', // icon: 'icon-licaichanpin',
color: '#FF9534', // color: '#FF9534',
}, // },
{ {
name: '精彩活动', name: '精彩活动',
icon: 'icon-jingcaihuodong', icon: 'icon-jingcaihuodong',
......
src/views/withMenu/Home/index.vue
View file @ a34ca239
...@@ -20,22 +20,6 @@ ...@@ -20,22 +20,6 @@
/> />
<group-title class="mt-7" title="热门资讯" /> <group-title class="mt-7" title="热门资讯" />
<HotNews v-for="n in 2" :key="n" /> <HotNews v-for="n in 2" :key="n" />
<!-- <div class="wrap24 flex-row">
<div class="bd7 flex-col">
<span class="info10">建信银行为您量身定做打造良好的信贷体验</span>
<div class="section1 flex-row">
<span class="word25">建信个人贷</span>
<span class="info11">2021-07-10</span>
</div>
</div>
<div class="bd8 flex-col">
<img
class="img1"
referrerpolicy="no-referrer"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng3cfe1683e7037e9adb65b1ebc163f4c5bd44f4dfa15c56ce2636f4d22fe8eba7"
/>
</div>
</div> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -49,7 +33,7 @@ import Icon from "@/components/common/Icon.vue"; ...@@ -49,7 +33,7 @@ import Icon from "@/components/common/Icon.vue";
import Notify from "./Notify/index.vue"; import Notify from "./Notify/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue"; import GroupTitle from "@/components/GroupTitle/index.vue";
import FnsCard from "./FnsCard/index.vue"; import FnsCard from "./FnsCard/index.vue";
import LoanCard from "@/components/LoanCard/index.vue"; import LoanCard from "@/components/Loan/LoanCard/index.vue";
import LiveCard from "@/components/LiveCard/index.vue"; import LiveCard from "@/components/LiveCard/index.vue";
import HotNews from "@/components/HotNews/index.vue"; import HotNews from "@/components/HotNews/index.vue";
......
src/views/withMenu/Loan/index.less 0 → 100644
View file @ a34ca239
.page {
z-index: 1;
position: relative;
width: 375px;
background-color: rgba(247, 247, 250, 1);
overflow: hidden;
justify-content: flex-start;
padding-top: 0;
.main1 {
z-index: auto;
width: 375px;
}
.block1 {
height: 240px;
background: url('../../../assets/img/loan_bg.png');
background-size: cover;
width: 375px;
position: relative;
}
.mod1 {
z-index: auto;
width: 358px;
height: 18px;
}
.word1 {
z-index: 33;
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;
}
.main2 {
z-index: 27;
width: 17px;
height: 11px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng39aeef61ebf4c04e189be0f880a1d512b1f31f81101ab4916ee829da20fbd661) -1px -1px
no-repeat;
margin: 5px 0 0 237px;
}
.main3 {
z-index: 23;
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: 20;
width: 23px;
height: 8px;
margin: 6px 0 0 6px;
}
.mod2 {
z-index: 35;
height: 88px;
width: 375px;
justify-content: flex-end;
padding-bottom: 17px;
align-items: center;
}
.wrap1 {
z-index: auto;
width: 161px;
height: 22px;
justify-content: space-between;
}
.word2 {
z-index: 36;
width: 49px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
// color: rgba(62, 79, 175, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.info1 {
z-index: 37;
width: 49px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 16px;
letter-spacing: 0.19200000166893005px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.info2 {
z-index: 170;
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;
align-self: flex-start;
margin: 25px 0 0 24px;
}
.block2 {
z-index: 153;
height: 200px;
border-radius: 20px;
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
overflow: hidden;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnged13597a132b485bfd8615bc10d2129e3de6627be5a431e1d5ed034e2d80f318) -13px -11px
no-repeat;
align-self: center;
margin-top: 21px;
width: 335px;
justify-content: center;
align-items: center;
position: relative;
}
.layer1 {
z-index: auto;
width: 295px;
height: 161px;
}
.word3 {
z-index: 169;
width: 172px;
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;
align-self: center;
}
.mod3 {
z-index: auto;
width: 283px;
height: 49px;
margin: 30px 0 0 6px;
}
.wrap2 {
z-index: auto;
width: 82px;
height: 49px;
}
.info3 {
z-index: 163;
width: 82px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 16px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word4 {
z-index: 164;
width: 61px;
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: 10px 0 0 9px;
}
.wrap3 {
z-index: 161;
width: 1px;
height: 40px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfcab2433a3f55337ca9b8f244b30275eff9f58c52968b4869ba0caa77442e7d8)
0px 0px no-repeat;
margin: 6px 0 0 12px;
}
.wrap4 {
z-index: auto;
width: 73px;
height: 49px;
margin-left: 19px;
}
.word5 {
z-index: 165;
width: 52px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 16px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
align-self: center;
}
.word6 {
z-index: 166;
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: 10px;
}
.wrap5 {
z-index: 162;
width: 1px;
height: 40px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfcab2433a3f55337ca9b8f244b30275eff9f58c52968b4869ba0caa77442e7d8)
0px 0px no-repeat;
margin: 5px 0 0 23px;
}
.wrap6 {
z-index: auto;
width: 49px;
height: 49px;
margin-left: 23px;
}
.txt1 {
z-index: 167;
width: 45px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 16px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.word7 {
z-index: 168;
width: 49px;
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;
}
.mod4 {
z-index: 159;
height: 40px;
border-radius: 20px;
background-color: rgba(78, 97, 201, 1);
margin-top: 20px;
width: 295px;
justify-content: center;
align-items: center;
}
.info4 {
z-index: 160;
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;
}
.icon1 {
z-index: 154;
position: absolute;
left: 149px;
top: 210px;
width: 38px;
height: 6px;
}
.block3 {
z-index: auto;
width: 326px;
height: 22px;
margin: 36px 0 0 24px;
}
.info5 {
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-Medium;
white-space: nowrap;
line-height: 22px;
text-align: center;
}
.txt2 {
z-index: 176;
width: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
white-space: nowrap;
line-height: 17px;
text-align: left;
margin: 4px 0 0 226px;
}
.icon2 {
z-index: 172;
width: 5px;
height: 10px;
margin: 8px 0 0 5px;
}
.block4 {
z-index: 75;
height: 109px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 13px 0px rgba(240, 246, 252, 1);
align-self: center;
margin-top: 20px;
width: 337px;
justify-content: center;
align-items: flex-start;
padding-left: 17px;
}
.section1 {
z-index: auto;
width: 296px;
height: 67px;
}
.outer1 {
z-index: auto;
width: 60px;
height: 57px;
margin-top: 4px;
}
.word8 {
z-index: 83;
width: 60px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 30px;
letter-spacing: 0.36000001430511475px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 35px;
text-align: center;
}
.word9 {
z-index: 85;
width: 49px;
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: 5px 0 0 4px;
}
.txt3 {
z-index: 84;
width: 13px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin: 18px 0 0 5px;
}
.outer2 {
z-index: auto;
width: 122px;
height: 67px;
margin-left: 19px;
}
.word10 {
z-index: 80;
width: 43px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 20px;
text-align: left;
align-self: flex-start;
}
.word11 {
z-index: 81;
width: 98px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: left;
align-self: flex-start;
margin-top: 10px;
}
.info6 {
z-index: 82;
width: 122px;
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: left;
margin-top: 3px;
}
.label2 {
z-index: 76;
width: 8px;
height: 14px;
margin: 25px 0 0 69px;
}
.block5 {
z-index: 87;
height: 109px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
align-self: center;
margin-top: 10px;
width: 337px;
justify-content: center;
align-items: flex-start;
padding-left: 20px;
}
.section2 {
z-index: auto;
width: 293px;
height: 67px;
justify-content: space-between;
}
.layer2 {
z-index: auto;
width: 50px;
height: 57px;
margin-top: 4px;
}
.mod5 {
z-index: auto;
width: 48px;
height: 35px;
justify-content: space-between;
}
.txt4 {
z-index: 95;
width: 30px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 30px;
letter-spacing: 0.36000001430511475px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 35px;
text-align: center;
}
.info7 {
z-index: 96;
width: 13px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin-top: 14px;
}
.txt5 {
z-index: 97;
width: 49px;
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-end;
margin-top: 5px;
}
.layer3 {
z-index: auto;
width: 146px;
height: 67px;
}
.word12 {
z-index: 92;
width: 43px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 20px;
text-align: center;
align-self: flex-start;
}
.word13 {
z-index: 93;
width: 122px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: left;
align-self: flex-start;
margin-top: 10px;
}
.word14 {
z-index: 94;
width: 146px;
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: left;
margin-top: 3px;
}
.icon3 {
z-index: 88;
width: 8px;
height: 14px;
margin-top: 25px;
}
.block6 {
z-index: 99;
height: 109px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
align-self: center;
margin-top: 10px;
width: 337px;
justify-content: center;
align-items: flex-start;
padding-left: 17px;
}
.main4 {
z-index: auto;
width: 296px;
height: 67px;
}
.section3 {
z-index: auto;
width: 60px;
height: 57px;
margin-top: 4px;
}
.txt6 {
z-index: 107;
width: 60px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 30px;
letter-spacing: 0.36000001430511475px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 35px;
text-align: center;
}
.txt7 {
z-index: 109;
width: 49px;
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: 5px 0 0 3px;
}
.word15 {
z-index: 108;
width: 13px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin: 18px 0 0 5px;
}
.section4 {
z-index: auto;
width: 122px;
height: 67px;
margin-left: 19px;
}
.info8 {
z-index: 104;
width: 43px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 20px;
text-align: left;
align-self: flex-start;
}
.info9 {
z-index: 105;
width: 98px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: left;
align-self: flex-start;
margin-top: 10px;
}
.word16 {
z-index: 106;
width: 122px;
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: left;
margin-top: 3px;
}
.label3 {
z-index: 100;
width: 8px;
height: 14px;
margin: 25px 0 0 69px;
}
.block7 {
z-index: 111;
height: 109px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 1);
align-self: center;
margin-top: 10px;
width: 337px;
justify-content: center;
align-items: flex-start;
padding-left: 17px;
}
.mod6 {
z-index: auto;
width: 296px;
height: 67px;
}
.section5 {
z-index: auto;
width: 60px;
height: 57px;
margin-top: 4px;
}
.word17 {
z-index: 119;
width: 60px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 30px;
letter-spacing: 0.36000001430511475px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 35px;
text-align: center;
}
.txt8 {
z-index: 121;
width: 49px;
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: 5px 0 0 4px;
}
.txt9 {
z-index: 120;
width: 13px;
display: block;
overflow-wrap: break-word;
color: rgba(240, 58, 48, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: center;
margin: 18px 0 0 5px;
}
.section6 {
z-index: auto;
width: 122px;
height: 67px;
margin-left: 19px;
}
.word18 {
z-index: 116;
width: 43px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Semibold;
white-space: nowrap;
line-height: 20px;
text-align: left;
align-self: flex-start;
}
.word19 {
z-index: 117;
width: 98px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
white-space: nowrap;
line-height: 17px;
text-align: left;
align-self: flex-start;
margin-top: 10px;
}
.txt10 {
z-index: 118;
width: 122px;
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: left;
margin-top: 3px;
}
.icon4 {
z-index: 112;
width: 8px;
height: 14px;
margin: 25px 0 0 69px;
}
.txt11 {
z-index: 151;
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;
align-self: flex-start;
margin: 30px 0 0 20px;
}
.block8 {
z-index: 142;
position: relative;
width: 335px;
height: 90px;
border-radius: 10px;
overflow: hidden;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng31633e386bbda59e950e5c032acc54d940fe3128b4f063d83a161084f4bbd79f)
100% no-repeat;
align-self: center;
margin-top: 21px;
}
.img1 {
z-index: 144;
position: absolute;
left: 97px;
top: 0;
width: 96px;
height: 45px;
}
.info10 {
z-index: 146;
position: absolute;
left: 23px;
top: 17px;
width: 91px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 18px;
letter-spacing: 0.2160000056028366px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 25px;
text-align: center;
}
.txt12 {
z-index: 148;
position: absolute;
left: 122px;
top: 17px;
width: 73px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 18px;
letter-spacing: 0.2160000056028366px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 25px;
text-align: center;
}
.info11 {
z-index: 147;
position: absolute;
left: 24px;
top: 41px;
width: 116px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 10px;
letter-spacing: 0.11999999731779099px;
white-space: nowrap;
line-height: 14px;
text-align: center;
}
.img2 {
z-index: 143;
position: absolute;
left: 199px;
top: 17px;
width: 136px;
height: 73px;
}
.block9 {
z-index: 149;
height: 18px;
border-radius: 9px;
background-color: rgba(237, 110, 80, 1);
width: 80px;
justify-content: flex-start;
align-items: center;
position: absolute;
left: 24px;
top: 60px;
}
.word20 {
z-index: 150;
width: 48px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 12px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 17px;
text-align: center;
}
.label4 {
z-index: 145;
position: absolute;
left: 0;
top: 59px;
width: 41px;
height: 31px;
}
.block10 {
z-index: auto;
width: 177px;
height: 22px;
justify-content: space-between;
margin: 32px 0 0 20px;
}
.word21 {
z-index: 130;
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;
}
.info12 {
z-index: 138;
width: 98px;
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-top: 4px;
}
.block11 {
z-index: auto;
width: 333px;
height: 88px;
justify-content: space-between;
margin: 21px 0 0 20px;
}
.main5 {
z-index: auto;
width: 224px;
height: 88px;
}
.word22 {
z-index: 124;
width: 224px;
height: 50px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Medium;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.section7 {
z-index: auto;
width: 148px;
height: 25px;
margin-top: 13px;
justify-content: space-between;
}
.txt13 {
z-index: 125;
width: 68px;
height: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.info13 {
z-index: 126;
width: 70px;
height: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.main6 {
z-index: 128;
position: relative;
width: 80px;
height: 80px;
border-radius: 20px;
overflow: hidden;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd7b6ced5c00064ccb38620d2a9de003cbd2e2688ac377f17fc74f6fba4dadd11) -1px
0px no-repeat;
margin-top: 3px;
}
.img3 {
z-index: 129;
position: absolute;
left: -1px;
top: 0;
width: 81px;
height: 80px;
}
.block12 {
z-index: 139;
width: 335px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng76cd8a0b92d903371b8c790ba91a16772990d457e85c5e3c584c3d37c19064af)
100% no-repeat;
align-self: center;
margin-top: 10px;
}
.block13 {
z-index: auto;
width: 335px;
height: 88px;
justify-content: space-between;
margin: 9px 0 0 20px;
}
.block14 {
z-index: auto;
width: 225px;
height: 88px;
}
.word23 {
z-index: 132;
width: 225px;
height: 50px;
display: block;
overflow-wrap: break-word;
color: rgba(27, 31, 55, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangHK-Medium;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.block15 {
z-index: auto;
width: 149px;
height: 25px;
margin-top: 13px;
justify-content: space-between;
}
.word24 {
z-index: 133;
width: 68px;
height: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.word25 {
z-index: 134;
width: 71px;
height: 25px;
display: block;
overflow-wrap: break-word;
color: rgba(141, 146, 175, 1);
font-size: 12px;
letter-spacing: 0.14399999380111694px;
font-family: PingFangHK-Regular;
line-height: 25px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.block16 {
z-index: 136;
position: relative;
width: 80px;
height: 80px;
border-radius: 20px;
overflow: hidden;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4b4358c351d14ce6d863cadb963d00b4ab6a161c196afa98cf1a9c4a6e640ec5)
100% no-repeat;
margin-top: 3px;
}
.img4 {
z-index: 137;
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
}
.block17 {
z-index: 40;
height: 60px;
border-radius: 19px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4a651d032b0546c8735611d8b700e26b3a7851302defe35e7b30105daf7e1c88)
100% no-repeat;
align-self: center;
margin-top: 22px;
width: 355px;
justify-content: center;
align-items: center;
}
.outer3 {
z-index: auto;
width: 308px;
height: 35px;
justify-content: space-between;
}
.label5 {
z-index: 48;
width: 22px;
height: 23px;
margin-top: 6px;
}
.icon5 {
z-index: 66;
width: 25px;
height: 22px;
margin-top: 7px;
}
.main7 {
z-index: 55;
height: 35px;
border-radius: 9px;
background-color: rgba(255, 255, 255, 1);
width: 80px;
justify-content: center;
align-items: center;
}
.block18 {
z-index: auto;
width: 54px;
height: 23px;
justify-content: space-between;
}
.icon6 {
z-index: 56;
width: 22px;
height: 23px;
}
.info14 {
z-index: 65;
width: 26px;
display: block;
overflow-wrap: break-word;
color: rgba(62, 79, 175, 1);
font-size: 10px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 14px;
text-align: center;
}
.label6 {
z-index: 41;
width: 22px;
height: 22px;
margin-top: 6px;
}
.pic1 {
z-index: 62;
width: 134px;
height: 5px;
align-self: center;
margin-top: 8px;
}
.main8 {
height: 161px;
width: 357px;
margin: 0 auto;
background: url('../../../assets/img/personal_bg.png') center center;
background-size: cover;
.outer4 {
z-index: auto;
width: 310px;
height: 25px;
margin: 20px 0 0 13px;
}
.outer5 {
z-index: 15;
width: 60px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng29a7c38591ccce82c7008a5f362b21539a0a76628b648bc906cea2fee9636ac1)
100% no-repeat;
margin-top: 12px;
}
.word26 {
z-index: 12;
width: 164px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 18px;
letter-spacing: 0.2160000056028366px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 25px;
text-align: center;
margin-left: 20px;
}
.outer6 {
z-index: 16;
width: 60px;
height: 1px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng29a7c38591ccce82c7008a5f362b21539a0a76628b648bc906cea2fee9636ac1)
100% no-repeat;
margin: 12px 0 0 6px;
}
}
.outer7 {
z-index: auto;
width: 240px;
height: 51px;
justify-content: space-between;
margin: 21px 0 0 28px;
}
.section8 {
z-index: 10;
height: 47px;
background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0b65ab38f4ea69da48675be12b88c1616e1f12d2cdf18f11a3df58eb5e76623)
100% no-repeat;
width: 51px;
justify-content: center;
align-items: flex-start;
padding-left: 8px;
}
.paragraph1 {
z-index: 11;
width: 29px;
height: 40px;
display: block;
overflow-wrap: break-word;
color: rgba(52, 85, 220, 1);
font-size: 14px;
letter-spacing: 0.1679999977350235px;
font-family: PingFangSC-Semibold;
line-height: 20px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.word27 {
z-index: 13;
width: 12px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
margin-top: 18px;
}
.txt14 {
z-index: 14;
width: 154px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 40px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 47px;
text-align: center;
margin-top: 4px;
}
}
.outer55 {
height: 167px;
width: 361px;
background: url('../../../assets//img/company_bg.png') center center;
background-size: cover;
margin: 0 auto;
display: flow-root;
padding-left: 20px;
.outer6 {
z-index: auto;
width: 164px;
height: 20px;
justify-content: space-between;
margin: 22px 0 0 20px;
.word32 {
z-index: 12;
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: left;
}
.info14 {
z-index: 13;
width: 98px;
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: left;
}
}
.outer7 {
z-index: auto;
width: 176px;
height: 47px;
justify-content: space-between;
margin: 18px 0 0 20px;
.info15 {
z-index: 15;
width: 12px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-family: PingFangSC-Semibold;
white-space: nowrap;
line-height: 28px;
text-align: center;
margin-top: 14px;
}
.txt10 {
z-index: 16;
width: 154px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 40px;
font-family: DINAlternate-Bold;
white-space: nowrap;
line-height: 47px;
text-align: center;
}
}
.outer8 {
z-index: auto;
width: 265px;
height: 20px;
justify-content: space-between;
margin: 12px 0 0 20px;
.word33 {
z-index: 11;
width: 113px;
display: block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
.main22 {
z-index: 17;
width: 1px;
height: 14px;
opacity: 0.5;
border: 1px solid #ffffff;
margin-top: 3px;
}
.word34 {
z-index: 14;
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: left;
}
.word35 {
z-index: 18;
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: left;
}
}
}
src/views/withMenu/Loan/index.vue
View file @ a34ca239
<template> <template>
<div> <div class="page flex-col">
<div class="home" v-for="n in 1000" :key="n">adsfads</div> <div class="main1 flex-col">
<div class="block1">
<div class="mod2 flex-col">
<div class="wrap1 flex-row">
<span
class="word2"
:style="{
color:
eLoanMode.personal === mode ? 'rgba(62, 79, 175, 1)' : '',
}"
@click="setMode(eLoanMode.personal)"
>个人贷</span
>
<span
class="info1"
:style="{
color: eLoanMode.company === mode ? 'rgba(62, 79, 175, 1)' : '',
}"
@click="setMode(eLoanMode.company)"
>企业贷</span
>
</div>
</div>
<div class="main8 flex-col" v-if="eLoanMode.personal === mode">
<div class="outer4 flex-row">
<div class="outer5 flex-col"></div>
<span class="word26">个人小额借款（元）</span>
<div class="outer6 flex-col"></div>
</div>
<div class="outer7 flex-row">
<div class="section8 flex-col">
<span class="paragraph1">
最高
<br />
可借
</span>
</div>
<span class="word27">¥</span>
<span class="txt14">1,000,000</span>
</div>
</div>
<div class="outer55" v-else-if="eLoanMode.company === mode">
<div class="outer6 flex-row items-center">
<span class="word32">小微快贷</span>
<span class="info14">最高可借（元）</span>
</div>
<div class="outer7 flex-row">
<span class="info15">¥</span>
<span class="txt10">1,000,000</span>
</div>
<div class="outer8 flex-row">
<span class="word33">年利率最低4.35%</span>
<div class="main22 flex-col"></div>
<span class="word34">分秒必批</span>
<div class="main22 flex-col"></div>
<span class="word35">灵活快捷</span>
</div>
</div>
</div>
<GroupTitle title="热门贷款" class="mt-2.5" iconName="" />
<LoanHotSwipe class="mt-5" />
<GroupTitle title="贷款精选" class="mb-2.5" />
<LoanCard v-for="n in 3" :key="n" class="mt-2.5" />
<GroupTitle title="精彩活动" class="mt-2.5" iconName="" />
<div class="activity mt-2.5">
<img
class="mx-auto"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng31633e386bbda59e950e5c032acc54d940fe3128b4f063d83a161084f4bbd79f"
alt=""
/>
</div>
<GroupTitle
title="贷款资讯"
subtitle="最新贷款资讯展示"
class="mt-2.5"
iconName=""
/>
<HotNews v-for="n in 2" :key="n" />
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue, {defineComponent} from "vue"; import { defineComponent, ref } from "vue";
import { eLoanMode } from "./types";
import LoanHotCard from "@/components/Loan/LoanHotCard/index.vue";
import LoanHotSwipe from "@/components/Loan/LoanHotSwipe/index.vue";
import LoanCard from "@/components/Loan/LoanCard/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import HotNews from "@/components/HotNews/index.vue";
export default defineComponent({ export default defineComponent({
components: {}, components: { LoanHotCard, LoanHotSwipe, GroupTitle, LoanCard, HotNews },
setup(props) {
const mode = ref(eLoanMode.personal);
return {
mode,
eLoanMode,
setMode(v: eLoanMode) {
mode.value = v;
},
};
},
}); });
</script> </script>
<style lang="less" scoped>
@import "./index.less";
</style>
\ No newline at end of file
src/views/withMenu/Loan/types.ts 0 → 100644
View file @ a34ca239
export enum eLoanMode {
personal,
company
}
\ No newline at end of file
src/views/withMenu/tabList.ts
View file @ a34ca239
...@@ -4,11 +4,11 @@ export default [ ...@@ -4,11 +4,11 @@ export default [
routeName: 'Home', routeName: 'Home',
icon: 'icon-shouye-tab-xuanze1', icon: 'icon-shouye-tab-xuanze1',
}, },
{ // {
name: '理财', // name: '理财',
routeName: 'FinancialManagement', // routeName: 'FinancialManagement',
icon: 'icon-licai-tabxuanze', // icon: 'icon-licai-tabxuanze',
}, // },
{ {
name: '贷款', name: '贷款',
routeName: 'Loan', routeName: 'Loan',
......
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