Skip to content

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

feat：贷款

parent 7cd7dd64
Expand all Show whitespace changes
Inline Side-by-side
Showing with 248 additions and 46 deletions
src/components/GroupTitle/index.vue
View file @ d9d71c1b
<template>
<div class="wrap12 flex mx-5 items-center">
<span class="word8">{{ title }}</span>
<span v-if="subtitle" class="ml-3 info2">{{ subtitle }}</span>
<div class="word8">{{ title }}</div>
<div v-if="subtitle" class="ml-3 info2">{{ subtitle }}</div>
<div class="flex-grow"></div>
<span class="word9" v-if="iconName === 'icon-gengduo'">更多</span>
<icon
......@@ -18,7 +18,7 @@
size="16"
@click="clickFilter"
/>
<icon v-else :name="iconName" color="#979BB6" size="16" />
<icon v-else-if="iconName" :name="iconName" color="#979BB6" size="16" />
</div>
</template>
<script lang="ts">
......
src/components/LoanCard/index.vue → src/components/Loan/LoanCard/index.vue
View file @ d9d71c1b
......@@ -17,7 +17,7 @@
</template>
<script lang="ts">
import Vue, {defineComponent} from "vue";
import Icon from "../common/Icon.vue";
import Icon from "@/components/common/Icon.vue";
export default defineComponent({ components: { Icon } });
</script>
<style scoped>
......
src/components/Loan/LoanHotCard/index.vue 0 → 100644
View file @ d9d71c1b
<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 @ d9d71c1b
<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 @ d9d71c1b
......@@ -23,14 +23,14 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "mine" */ '@/views/withMenu/Mine/index.vue'
),
},
{
path: '/financialManagement',
name: 'FinancialManagement',
component: () =>
import(
/* webpackChunkName: "fns" */ '@/views/withMenu/FinancialManagement/index.vue'
),
},
// {
// path: '/financialManagement',
// name: 'FinancialManagement',
// component: () =>
// import(
// /* webpackChunkName: "fns" */ '@/views/withMenu/FinancialManagement/index.vue'
// ),
// },
{
path: '/loan',
name: 'Loan',
......@@ -41,11 +41,11 @@ const routes: Array<RouteRecordRaw> = [
},
],
},
{
path: '/fnsList',
name: 'FnsList',
component: () => import('@/views/FnsList/index.vue'),
},
// {
// path: '/fnsList',
// name: 'FnsList',
// component: () => import('@/views/FnsList/index.vue'),
// },
// {
// path: '/auth',
// component: () => import('@/views/Auth/index.vue'),
......
src/views/withMenu/FinancialManagement/index.vue
View file @ d9d71c1b
......@@ -37,7 +37,6 @@
<span class="txt1">长期持有增值</span>
</div>
</div>
<!-- <div class="box3 flex-col"><span class="word4">精选理财</span></div> -->
</div>
<MainFnsSwip class="relative z-10 mainfnsswip" />
<GroupTitle
......
src/views/withMenu/Home/index.vue
View file @ d9d71c1b
......@@ -20,22 +20,6 @@
/>
<group-title class="mt-7" title="热门资讯" />
<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>
</template>
......@@ -49,7 +33,7 @@ import Icon from "@/components/common/Icon.vue";
import Notify from "./Notify/index.vue";
import GroupTitle from "@/components/GroupTitle/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 HotNews from "@/components/HotNews/index.vue";
......
src/views/withMenu/Loan/index.less 0 → 100644
View file @ d9d71c1b
This diff is collapsed.
src/views/withMenu/Loan/index.vue
View file @ d9d71c1b
<template>
<div>
<div class="home" v-for="n in 1000" :key="n">adsfads</div>
<div class="page flex-col">
<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>
</template>
</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>
</template>
<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({
components: {},
components: { LoanHotCard, LoanHotSwipe, GroupTitle, LoanCard, HotNews },
setup(props) {
const mode = ref(eLoanMode.personal);
return {
mode,
eLoanMode,
setMode(v: eLoanMode) {
mode.value = v;
},
};
},
});
</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 @ d9d71c1b
export enum eLoanMode {
personal,
company
}
\ No newline at end of file
src/views/withMenu/tabList.ts
View file @ d9d71c1b
......@@ -4,11 +4,11 @@ export default [
routeName: 'Home',
icon: 'icon-shouye-tab-xuanze1',
},
{
name: '理财',
routeName: 'FinancialManagement',
icon: 'icon-licai-tabxuanze',
},
// {
// name: '理财',
// routeName: 'FinancialManagement',
// icon: 'icon-licai-tabxuanze',
// },
{
name: '贷款',
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