涉农金融详情页
This commit is contained in:
parent
b48ed6b5cb
commit
ce42966ec4
BIN
sub-operation-service/src/assets/images/finance/customs.png
Normal file
BIN
sub-operation-service/src/assets/images/finance/customs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
sub-operation-service/src/assets/images/finance/productInt.png
Normal file
BIN
sub-operation-service/src/assets/images/finance/productInt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
sub-operation-service/src/assets/images/finance/wydk.png
Normal file
BIN
sub-operation-service/src/assets/images/finance/wydk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@ -184,13 +184,13 @@ export const constantRoutes = [
|
||||
path: 'detail',
|
||||
component: () => import('@/views/ruralFinance/integratedSector/detail.vue'),
|
||||
name: 'integratedSectorDetail',
|
||||
meta: { title: '查看详情', hideInBread: true },
|
||||
meta: { title: '查看详情' },
|
||||
},
|
||||
{
|
||||
path: 'loan',
|
||||
component: () => import('@/views/ruralFinance/integratedSector/loan.vue'),
|
||||
name: 'integratedSectorLoan',
|
||||
meta: { title: '我要贷款', hideInBread: true },
|
||||
meta: { title: '我要贷款' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,19 +1,160 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card style="border-radius: 16px" :body-style="{ padding: 0 }">
|
||||
<div class="product-card">
|
||||
<div style="padding: 20px; display: flex; justify-content: space-between">
|
||||
<div style="display: flex">
|
||||
<img :src="getAssetsFile('images/finance/nyyh.png')" width="120px" alt="" />
|
||||
<div style="display: flex; align-items: center">
|
||||
<div style="font-size: 20px; font-weight: bold; margin: 0 20px">惠农e贷</div>
|
||||
<div style="display: flex" class="tags">
|
||||
<div>额度高</div>
|
||||
<div>政策扶持</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: auto 0">
|
||||
<el-button style="background-color: #25bf82; color: #ffffff; padding: 20px; font-size: 20px" @click="goLoan">我要贷款</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 40px; justify-content: space-around; text-align: center">
|
||||
<div>
|
||||
<div class="subTitle">最高50万</div>
|
||||
<div class="subContent">货款额度</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="subTitle">4.15%起</div>
|
||||
<div class="subContent">产品利率</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="subTitle">最长60个月</div>
|
||||
<div class="subContent">货款期限</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; padding: 40px">
|
||||
<div style="font-size: 18px">
|
||||
<div class="subs">最快放款：<span>即时放款</span></div>
|
||||
<div class="subs">适用范围：<span>临沧市</span></div>
|
||||
</div>
|
||||
<div style="font-size: 18px">
|
||||
<div class="subs">担保方式：<span>信用、抵押</span></div>
|
||||
<div class="subs">所属机构：<span>农业银行</span></div>
|
||||
</div>
|
||||
<div style="font-size: 18px">
|
||||
<div class="subs">还款方式：<span>等额本息、先息后本</span></div>
|
||||
<div class="subs"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 40px; padding: 20px">
|
||||
<div style="display: flex">
|
||||
<img :src="getAssetsFile('images/finance/productInt.png')" alt="" height="40" />
|
||||
<div class="titles">
|
||||
<div>产品介绍</div>
|
||||
<div class="underLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
惠农e贷是中国农业银行依托互联网大数据技术，专门为农民设计的一款线上化、批量化、便捷化、普惠化的贷款产品。创新运用互联网大数据分析技术，采取线上线下相结合方式办理贷款。
|
||||
</div>
|
||||
<div style="padding: 20px">
|
||||
<div style="display: flex">
|
||||
<img :src="getAssetsFile('images/finance/customs.png')" alt="" height="40" />
|
||||
<div class="titles">
|
||||
<div>适用客户</div>
|
||||
<div class="underLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contents" style="text-indent: 0">
|
||||
广泛覆盖从事特色产业经营、农村电商购销、农业产业链供销以及在农行有金融资产或信贷关系等客户，贷款可用于生产经营和消费，包括但不限于以下范围：<br />1.在农行存款、理财、基金等金融资产达到一定标准的农户。<br />2.在农行办理住房贷款且尚未结清的农户。<br />3.在农行办理过农户贷款且信用记录良好的农户。<br />4.从事茶叶、林果、蔬菜、烟草、谷物种植和畜牧、家禽、渔业养殖等农行认可的特色产业经营农户。<br />5.农行认可的信用村内有资产、有收入、有诚信的农户。<br />6.与农行合作的农业产业化龙头企业上下游农户。<br />7.与农行合作的电商平台上下游购销农户。<br />8.纳入政府增信机制或融资性担保公司担保的农户。
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '../../../utils/index.js';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
const goLoan = () => {
|
||||
router.push({
|
||||
path: '/sub-operation-service/finance/integratedSector/loan',
|
||||
});
|
||||
};
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.contents {
|
||||
text-indent: 2em;
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
}
|
||||
.product-card {
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
background: linear-gradient(to top, #25bf82 -100%, #ffffff 90%);
|
||||
}
|
||||
.tags {
|
||||
font-size: 14px;
|
||||
color: #25bf82;
|
||||
div {
|
||||
margin-right: 10px;
|
||||
padding: 5px;
|
||||
border: 1px solid #25bf82;
|
||||
background-color: rgba(37, 191, 130, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.subs {
|
||||
text-align: left;
|
||||
span {
|
||||
font-size: 18px;
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
max-width: 8em; /* 大约6个汉字的宽度 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
.subTitle {
|
||||
font-size: 26px;
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
}
|
||||
.subContent {
|
||||
font-size: 18px;
|
||||
}
|
||||
.titles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.underLine {
|
||||
background-color: #25bf82;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: auto 0">
|
||||
<el-button style="background-color: #25bf82; color: #ffffff; border-radius: 11px; padding: 20px; font-size: 18px"> 查看详情 </el-button>
|
||||
<el-button class="detailBtn" @click="goDetail(item.id)"> 查看详情 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -104,8 +104,8 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '../../../utils/index.js';
|
||||
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
const chooseMoney = ref(0);
|
||||
@ -113,6 +113,8 @@ const chooseDate = ref(0);
|
||||
const chooseWay = ref(0);
|
||||
const chooseUse = ref(0);
|
||||
const chooseType = ref(0);
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const pagination = ref({
|
||||
total: 2,
|
||||
@ -178,6 +180,14 @@ const sortFunction = (type) => {};
|
||||
const getList = () => {
|
||||
console.log('刷新数据');
|
||||
};
|
||||
|
||||
const goDetail = (id) => {
|
||||
router.push({
|
||||
path: '/sub-operation-service/finance/integratedSector/detail',
|
||||
query: { id: id },
|
||||
});
|
||||
};
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
@ -245,4 +255,11 @@ const getList = () => {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
.detailBtn {
|
||||
background-color: #25bf82;
|
||||
color: #ffffff;
|
||||
border-radius: 11px;
|
||||
padding: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,29 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card style="border-radius: 16px" :body-style="{ padding: 0 }">
|
||||
<div style="padding: 20px">
|
||||
<img :src="getAssetsFile('images/finance/wydk.png')" style="width: 100%" alt="" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user