88 lines
1.5 KiB
Vue
88 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<view class="card-box" :style="getMath">
|
||
|
|
<view class="">
|
||
|
|
<view class="card-box_title">{{data.name}}</view>
|
||
|
|
<view class="card-box_title_label">{{data.bankName}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="card-box_number"> **** **** **** {{data.account.substr(data.account.length-4) }}</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
data: {
|
||
|
|
default: () => {},
|
||
|
|
type: Object
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
default: null,
|
||
|
|
type: Number
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
bgColor: [
|
||
|
|
['1668D6', '5899EB'],
|
||
|
|
['F74942', 'FE856E'],
|
||
|
|
['028EAF', '5899EB'],
|
||
|
|
['99A98F', 'C1D0B5'],
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
getMath() {
|
||
|
|
const index = this.index? 0: Math.floor(Math.random() * 4);
|
||
|
|
const c = `;`
|
||
|
|
return {
|
||
|
|
background: `linear-gradient(295deg, #${this.bgColor[index][0]} 0%, #${this.bgColor[index][1]} 100%)`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import "@/font.css";
|
||
|
|
|
||
|
|
.card-box {
|
||
|
|
border-radius: 20upx;
|
||
|
|
font-family: 'Product-Sans-Bold';
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 20upx;
|
||
|
|
margin: 20upx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #fff;
|
||
|
|
|
||
|
|
height: 240upx;
|
||
|
|
|
||
|
|
&_title {
|
||
|
|
font-size: 42upx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #dbe3e8;
|
||
|
|
}
|
||
|
|
|
||
|
|
&_title_label {
|
||
|
|
font-size: 28upx;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
&_number {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 66upx;
|
||
|
|
font-weight: 600;
|
||
|
|
vertical-align: bottom;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|