<template> <!-- <div class="tab-style"> <span @click="tabNum1 = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span> <span @click="tabNum1 = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span> <span @click="tabNum1 = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span> </div>--> <div class="tab-style"> <div :class="{'tab-content-bg':tabNum1 == 0}" class="tab-content" @click="tabNum1 = 0;sendTabNum()"><img :src="tabNum1 == 0?check1:uncheck1"><span :class="{'colored':tabNum1 == 0}">基本信息</span></div> <div :class="{'tab-content-bg':tabNum1 == 1}" class="tab-content" @click="tabNum1 = 1;sendTabNum()"><img :src="tabNum1 == 1?check2:uncheck2"><span :class="{'colored':tabNum1 == 1}">银行信息</span></div> <div :class="{'tab-content-bg':tabNum1 == 2}" class="tab-content" @click="tabNum1 = 2;sendTabNum()"><img :src="tabNum1 == 2?check3:uncheck3"><span :class="{'colored':tabNum1 == 2}">开票信息</span></div> </div> </template> <script> import check1 from '@/assets/userBind/check1.png' import check2 from '@/assets/userBind/check2.png' import check3 from '@/assets/userBind/check3.png' import uncheck1 from '@/assets/userBind/uncheck1.png' import uncheck2 from '@/assets/userBind/uncheck2.png' import uncheck3 from '@/assets/userBind/uncheck3.png' export default { props: { 'tabNum': { default: 0, type: Number, }, }, data () { return { tabNum1: this.tabNum, check1: check1, check2: check2, check3: check3, uncheck1: uncheck1, uncheck2: uncheck2, uncheck3: uncheck3, } }, methods: { sendTabNum () { this.$emit('getTabNum', this.tabNum1) }, }, } </script> <style lang="less" scoped> .tab-style { position: relative; z-index: 50; background-color: #fff; display: flex; justify-content: center; padding-top: 12px; padding-bottom: 8px; align-items: center; box-shadow: 0 2px 3px 0 rgba(220, 220, 221, 0.50); .tab-content { display: block; width: 45.9%; height: 32px; background: rgba(220, 220, 221, 0.26); border-radius: 16px; display: flex; justify-content: center; align-items: center; flex-grow: 1; margin: 0 2% 0 2%; span { margin-left: 2%; font-size: 14px; color: #383F45; font-weight: 600; font-family: PingFangSC-Semibold; } .colored { color: @headerColor } } .tab-content-bg{ background: rgba(0,70,156,0.10); } img { height: 16px; // margin-right:5.7px; } .tab-content:nth-of-type(2) { margin-left: 7px; } } </style>