bankCards.vue
2.29 KB
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
<template>
<v-layout id="BankCards" column justify-center align-center>
<v-flex>
<v-card class="bankCardBlock" v-for="(item, index) in cards" :key="index" flat height="5.5rem">
<v-card-title class="bankCardTitle" >
{{item.bank}}
</v-card-title>
<v-card-text class="bankCardNo">
{{item.cardNo}}
</v-card-text>
</v-card>
<v-list class="list addCardList">
<v-list-tile class="addCardListItem" avatar @click="$router.push('/bindCard')">
<v-list-tile-avatar>
<v-icon class="addCardIcon">add</v-icon>
</v-list-tile-avatar>
<v-list-tile-content class="BorrowListTitle">
<span>添加银行卡</span>
</v-list-tile-content>
<v-list-tile-action>
<v-icon class="addCardIcon">keyboard_arrow_right</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-flex>
</v-layout>
</template>
<script>
import {wechatShareSetting} from '@/helper'
export default {
layout: 'default',
data: () => ({
cards: [{
bank: '招商银行',
cardNo: '**** **** **** 1190'
},{
bank: '招商银行',
cardNo: '**** **** **** 1190'
},{
bank: '招商银行',
cardNo: '**** **** **** 1190'
}]
}),
mounted() {
wechatShareSetting(this.$axios, this.$store)
}
}
</script>
<style lang="scss" scoped>
#BankCards {
.bankCardBlock {
width: 90vw;
background-image: linear-gradient(-113deg, #DAB269 11%, #F1CF8F 43%, #ECB653 100%);
border-radius: 10px;
color: #FFFFFF;
margin: 1rem auto 1.2rem auto;
.bankCardTitle {
padding: 1rem 1rem 0 1rem;
font-size: 1rem;
font-weight: bold;
}
.bankCardNo {
padding: 1rem 1rem 0 1rem;
font-weight: bold;
font-size: 1rem;
}
}
.addCardList {
width: 100vw;
height: 2.5rem;
padding: 0;
.addCardListItem {
height: 2.5rem;
line-height: 2.5rem;
/deep/ .list__tile {
height: 2.5rem;
color: $light-gold;
font-size: 1rem;
font-weight: bold;
.avatar {
min-width: 1.1rem;
width: 1.1rem !important;
height: 2.5rem !important;
margin-right: 0.7rem;
}
}
.addCardIcon {
color: $light-gold;
font-weight: bold;
font-size: 1.1rem;
}
}
}
}
</style>