<template> <div id="bank-card-read"> <div class="info"> <div class="info-icon"> <img src="@/assets/userBind/info.png" > <span>温馨提示</span> </div> <p>推荐使用农行卡,农行卡支付免收手续费!</p> </div> <div class="my-card"> <div class="top"> <div class="left"> <img src="@/assets/userBind/bankIcon.png" class="icon" > <span class="top-word"> 我的卡 <span class="sum">(共{{ bankList.length }}张)</span> </span> </div> </div> <div class="clear" /> <div class="card-content"> <ul> <li v-for="(item,index) in bankList" :key="index" @click="sendFlag(item)"> <div class="slider"> <div :style="'background-image: url('+ changeBgImg (item) +')'" class="my-bank-card" > <div class="card-info"> <span class="name">{{ item.bank_full_name }}</span> <span class="card-type">{{ item.bank_card_type }}</span> <span class="number">卡号</span> <span class="card-number">**** **** **** {{ selectLast (item) }}</span> </div> </div> </div> </li> </ul> </div> </div> </div> </template> <script> import backImg1 from '@/assets/userBind/nong.png' import backImg2 from '@/assets/userBind/unNong.png' export default { props: { 'bankList': { default: [], type: Array, }, }, data () { return { backImg: null, showModalValue: true, } }, created () { }, methods: { sendFlag (bank) { this.showModalValue = true this.$emit('getInfo', this.showModalValue,bank) }, selectLast (item) { let num = item.bank_account_num return num.substring(num.length - 4) }, changeBgImg (item) { if (item.bank_full_name === '中国农业银行') { return backImg1 } else { return backImg2 } }, }, } </script> <style lang="less" scoped> #bank-card-read { .info { height: 70px; background-color: rgba(142, 195, 30, 0.1); .info-icon { height: 20px; padding-top: 20px; display: flex; align-items: center; img { width: 15.8px; height: 15.8px; margin-left: 17.1px; } span { font-family: PingFangSC-Semibold; font-size: 14px; color: #8ec31e; margin-left: 9px; letter-spacing: 0.5px; line-height: 20px; } } p { font-family: PingFangSC-Regular; font-size: 13px; color: #656464; width: 310px; margin-left: 42px; letter-spacing: 0.4px; line-height: 18px; margin-top: 8px; } } .my-card { .top { width: 320px; margin: 0 auto; margin-top: 13px; .left { height: 32px; display: flex; align-items: center; float: left; .icon { width: 18px; height: 20px; margin-right: 4px; } .top-word { font-family: PingFangSC-Semibold; font-size: 15px; color: #00469c; letter-spacing: 0.46px; .sum { font-family: PingFangSC-Semibold; font-size: 15px; color: #4d5d6c; letter-spacing: 0.46px; } } } .icon-right { width: 34px; height: 34px; float: right; } } .clear { clear: both; } .card-content { width: 350px; padding-left: 28px; overflow: hidden; margin-top: 16px; li { margin-bottom: 10px; .slider { height: 100%; //margin-left: -14px; } } .my-bank-card { width: 320px; height: 190px; box-shadow: 0 5px 20px 0 rgba(101, 101, 101, 0.25); border-radius: 6px; background-size: 320px 190px; .card-info { font-family: PingFangSC-Medium; color: #ffffff; margin-left: 18px; padding-top: 15px; .name, .card-type { font-size: 16px; letter-spacing: 5.5px; line-height: 24px; } .card-type { display: block; margin-top: 9px; } .number { font-size: 12px; letter-spacing: 0; line-height: 16px; margin-top: 33px; display: block; margin-top: 33px; } .card-number { display: block; font-family: Avenir-Heavy; font-size: 16px; color: #ffffff; letter-spacing: 6px; line-height: 24px; } } } } } .swipeout-list .item .function { left: 330px; border-radius: 6px; width: 54px; height: 190px; background: url("../../../assets/userBind/delete.png") 16px 84.9px #fde5e8 no-repeat; background-size: 20px 20px; } } </style>