Skip to content

M
mcep-h5
提交 c5aaf072 编写于 作者: “grape”'s avatar “grape”
浏览文件
操作

首页card

上级 175ec4d3
显示空白字符变更
内嵌 并排
正在显示 包含 41 行增加 和 154 行删除
src/components/common/Picket.vue
浏览文件 @ c5aaf072
......@@ -26,6 +26,19 @@
<van-col span="8" class="loantermlot">参考利率</van-col>
<van-col span="8" class="loantermlot">贷款期限</van-col>
</van-row>
<van-row type="flex" justify="center" style="line-height: 30px;font-weight: 700;">
<van-col span="8" class="loanterm" style="text-align: center;">{{ crowd }}</van-col>
<van-col span="8" class="interestrate" style="text-align: center;">{{ assureMeans }}</van-col>
<van-col span="8" class="loanterm" style="text-align: center;">{{ type }}</van-col>
</van-row>
<van-row type="flex" justify="center" style="line-height: 30px;color: #999999;font-weight: 400;font-size: 12px;">
<van-col span="8" class="loantermlot">面向人群</van-col>
<van-col span="8" class="loantermlot">担保方式</van-col>
<van-col span="8" class="loantermlot">贷款种类</van-col>
</van-row>
</div>
</div>
</template>
......@@ -44,6 +57,10 @@ export default class Picket extends Vue {
@Prop({ default: "" }) limitrange: string | undefined //额度范围
@Prop({ default: "" }) interestrate: string | undefined //利率
@Prop({ default: "" }) loanterm: string | undefined //贷款期限
@Prop({ default: "" }) crowd: string | undefined //面向人群
@Prop({ default: "" }) assureMeans: string | undefined //担保方式
@Prop({ default: "" }) type: string | undefined //贷款种类
//调用父组件的值
@Emit("onClickPicket")
onClickPicket(){}
......@@ -52,7 +69,7 @@ export default class Picket extends Vue {
</script>
<style scoped lang="scss">
.card {
height: 130px;
height: 200px;
width: 98%;
margin: 0% auto;
background: inherit;
......
src/components/common/Picket2.vue 已删除 100644 → 0
浏览文件 @ 175ec4d3
<!--
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-04 16:24:00
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-08-18 13:55:42
* @FilePath: \mcep-h5\src\components\common\Tatle.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<!-- <div> -->
<div class="d-tatle">
<div class="card" @click="onClickPicket()">
<van-row>
<van-col span="24" class="priductName">{{ productname }}</van-col>
</van-row>
<div class="describe" style="line-height: 30px;">
<div class="description">{{ describe }}</div>
</div>
<van-row type="flex" justify="center" style="line-height: 30px;font-weight: 700;">
<van-col span="8" class="loanterm" style="text-align: center;">{{ limitrange }}</van-col>
<van-col span="8" class="interestrate" style="text-align: center;">{{ interestrate }}</van-col>
<van-col span="8" class="loanterm" style="text-align: center;">{{ loanterm }}</van-col>
</van-row>
<van-row type="flex" justify="center" style="line-height: 30px;color: #999999;font-weight: 400;font-size: 12px;">
<van-col span="8" class="loantermlot">面向人群</van-col>
<van-col span="8" class="loantermlot">担保方式</van-col>
<van-col span="8" class="loantermlot">贷款期限</van-col>
</van-row>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
name: "Picket2",
})
export default class Picket extends Vue {
@Prop({ default: "" }) productname: string | undefined //产品名称
@Prop({ default: "" }) describe: string | undefined //描述
@Prop({ default: "" }) limitrange: string | undefined //额度范围
@Prop({ default: "" }) interestrate: string | undefined //利率
@Prop({ default: "" }) loanterm: string | undefined //贷款期限
//调用父组件的值
@Emit("onClickPicket")
onClickPicket(){}
}
</script>
<style scoped lang="scss">
.card {
height: 130px;
width: 98%;
margin: 0% auto;
background: inherit;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 4px;
-moz-box-shadow: 0px 0px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.priductName{
font-size: 16px;
text-align: left;
//margin-left: 3%;
font-weight: 600;
margin: 2% 0% 2% 4%;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
font-kerning: normal;
}
// .describe{
// background: #eaf5ff;
// }
.description{
background: #eaf5ff;
font-size: 12px;
margin-left: 3%;
color: #1890FF;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
font-kerning: normal;
// width: 50%;
border-radius: 4px;
padding-left:1%;
// text-align: center;
}
.limitrange{
// margin-left: 3%;
align-items: center;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #FF7628;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
font-kerning: normal;
}
.van-col--8 {
width: 32%;
}
.loantermlot{
text-align: center;
}
</style>
src/services/component-vue.service.ts
浏览文件 @ c5aaf072
......@@ -22,7 +22,7 @@ import AnchorNav from "@/components/general/AnchorNav.vue";
import * as echarts from "echarts";
import Tatle from "@/components/common/Tatle.vue";
import picket from "@/components/common/Picket.vue";
import picket2 from "@/components/common/Picket2.vue";
import ant from "ant-design-vue/es/locale/zh_CN"
import Tool from "@/components/common/Tool.vue";
import Bottom from "@/components/common/Bottom.vue";
......@@ -102,7 +102,6 @@ class ComponentVueService {
Vue.component("anchor-nav", AnchorNav);
Vue.component("tatle-bar", Tatle);
Vue.component("picket-bar", picket);
Vue.component("picket-bar2", picket2);
Vue.component("tools-bar", Tool);
Vue.component("bottom-bar", Bottom);
Vue.component("person-bar", Person);
......
src/views/main/Main.vue
浏览文件 @ c5aaf072
......@@ -60,7 +60,7 @@
<span style="padding:20px 16px; font-size: 18px; font-weight: 600; margin-left: 4% width: 30%; height:44px;" >推荐产品</span>
<van-cell
style="font-size: 18px; padding:18px 16px; width: 50%; "
style="font-size: 18px; padding:18px 16px; width: 60%; "
:value="outcsinfo.place"
@click="onAddress">
......@@ -313,28 +313,13 @@
:limitrange="item.limitrange"
:interestrate="item.interestrate"
:loanterm="item.loanterm"
:crowd="item.crowd"
:assureMeans="item.assureMeans"
:type="item.type"
@onClickPicket="onClickPicket"
></picket-bar>
</div>
<div
v-for="(item, index) in productList2"
:key="index"
style="margin: 4% auto"
>
<picket-bar2
:productname="item.productname"
:describe="item.describe"
:limitrange="item.limitrange"
:interestrate="item.interestrate"
:loanterm="item.loanterm"
@onClickPicket="onClickPicket"
></picket-bar2>
</div>
</scroller-view>
</div>
</div>
......@@ -529,29 +514,35 @@ export default class Main extends Vue {
limitrange: "1~500万", //额度范围
interestrate: "2%~4%", //利率
loanterm: "1~36个月", //贷款期限
}
];
productList2: any = [
crowd: "经营企业",//面向人群
assureMeans: "抵押", // 担保方式
type:"消费贷",//贷款种类
},
{
productname: "“企业之兴”流动资金贷款", //产品名称
productname: "“企业之星”流动资金贷款", //产品名称
describe: "额度较大 利率优惠", //描述
limitrange: "经营企业", //面向人群 TODO 字段名
interestrate: "抵押", //担保方式 TODO 字段名
limitrange: "1~500万", //额度范围
interestrate: "2%~4%", //利率
loanterm: "1~36个月", //贷款期限
crowd: "经营企业",//面向人群
assureMeans: "抵押", // 担保方式
type:"消费贷",//贷款种类
},
{
productname: "白领贷", //产品名称
describe: "手续简单 轻松操作 随用随贷 安全可靠", //描述
limitrange: "经营企业", //面向人群 TODO 字段名
interestrate: "抵押", //担保方式 TODO 字段名
limitrange: "1~500万", //额度范围
interestrate: "2%~4%", //利率
loanterm: "1~36个月", //贷款期限
crowd: "个人",//面向人群
assureMeans: "抵押", // 担保方式
type:"金融贷",//贷款种类
},
];
//按钮
tabbarlist: any = {
name: "首页",
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或