<!-- * @Description: 详情tab * @Author: your name * @Date: 2019-09-25 19:47:59 * @LastEditTime: 2019-09-27 13:33:08 * @LastEditors: Please set LastEditors --> <template> <div class="tab-style"> <span @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span> <span @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span> <span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span> </div> </template> <script> import check1 from '@/assets/distributorSign/check1.png' import check2 from '@/assets/distributorSign/check2.png' import check3 from '@/assets/distributorSign/guaranteed.png' import uncheck1 from '@/assets/distributorSign/uncheck1.png' import uncheck2 from '@/assets/distributorSign/uncheck2.png' import uncheck3 from '@/assets/distributorSign/guarantee.png' export default { data () { return { tabNum: 0, check1: check1, check2: check2, check3: check3, uncheck1: uncheck1, uncheck2: uncheck2, uncheck3: uncheck3, } }, methods: { sendTabNum () { this.$emit('getTabNum', this.tabNum) }, }, } </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); span{ display: block; width:112px; height: 32px; border-radius:16px; } img{ width:112px; height: 32px; margin-right:5.7px; } span:nth-of-type(2){ margin:0 10px; } } </style>