1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!--
* @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="limitrange" 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>
<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>
<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
name: "Picket",
})
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 //贷款期限
@Prop({ default: "" }) crowd: string | undefined //面向人群
@Prop({ default: "" }) assureMeans: string | undefined //担保方式
@Prop({ default: "" }) type: string | undefined //贷款种类
//调用父组件的值
@Emit("onClickPicket")
onClickPicket(){}
}
</script>
<style scoped lang="scss">
.card {
height: 200px;
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>