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
137
138
139
140
<!--
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-07 16:13:13
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-08-18 11:07:05
* @FilePath: \mcep-h5\src\components\common\Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<!-- <div> -->
<div class="roolsolt">
<div >
<van-row type="flex" class="title">
<van-col span="24" style="text-align: left">合同累计金额（元）
<span class="solts" @click="switchEye">
<van-icon name="closed-eye" v-if="this.eye"/>
<van-icon name="eye" v-else/>
</span>
</van-col>
</van-row>
<van-row type="flex" class="mumMoney">
<van-col span="24" v-text="this.totalFinal" v- class="money"></van-col>
<!-- <van-col span="9" class="moneytitle">壹佰元整</van-col>-->
</van-row>
<!-- <van-row type="flex" class="title">
<van-col span="24" >已使用贷款金额（元）</van-col>
</van-row>
<van-row type="flex" class="mumMoney">
<van-col offset="4" span="11" class="money">6，0000</van-col>
<van-col span="9" class="moneytitle">壹佰元整</van-col>
</van-row> -->
<van-row type="flex" justify="center" class="integral">
<van-col span="12" style="text-align: left; padding-left: 20px; color: #999999; font-size: 12px">合同已使用金额(元)</van-col>
<van-col span="12" style="text-align: left; color: #999999; font-size: 12px">合同未使用金额(元)</van-col>
</van-row>
<van-row type="flex" justify="center" class="integral">
<van-col span="12" v-text="this.useFinal" style="font-weight: 700; text-align: left; padding-left: 20px"></van-col>
<van-col span="12" v-text="this.unUseFinal" style="font-weight: 700; text-align: left"></van-col>
</van-row>
<!-- <van-row type="flex" justify="center" class="integrall">
<van-col span="8">我的积分</van-col>
<van-col span="8">卡券</van-col>
<van-col span="8">我的特权</van-col>
</van-row> -->
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
name: "CardPottom"
})
export default class CardPottom extends Vue {
pass="*****"
totalAmount ="30000.00"
useAmount ="20000.00"
unUseAmount = "10000.00"
totalFinal = this.pass
useFinal = this.pass
unUseFinal = this.pass
eye = true
switchEye() {
this.totalFinal = this.eye ? this.totalAmount : this.pass
this.useFinal = this.eye ? this. useAmount: this.pass
this.unUseFinal = this.eye ? this.unUseAmount : this.pass
this.eye = !this.eye
}
}
</script>
<style scoped lang="scss">
.roolsolt{
background:url("../../assets/images/mycard.png");
width:100%;
height:40%;
background-size: cover;
}
.title {
font-size: 14px;
text-align: left;
font-family: 'Arial Normal', 'Arial', sans-serif;
font-weight: 400;
font-style: normal;
color: #999999;
margin-top: 5%;
margin-left: 20px;
}
.mumMoney{
}
.money {
font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 28px;
color: #FF9921;
text-align: left;
margin-left: 20px;
margin-top: -6px;
}
.moneytitle {
color: #FFA121;
text-align: left;
font-size: 14px;
font-family: 'Arial Normal', 'Arial', sans-serif;
font-style: normal;
margin-top: 5%;
}
.integral {
text-align: center;
font-family: 'Arial Normal', 'Arial', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
letter-spacing: normal;
color: #333333;
margin-top: 4px;
}
.integrall {
text-align: center;
font-size: 12px;
color: #999999;
}
</style>