<!-- * @Description: In User Settings Edit * @Author: your name * @Date: 2019-09-25 11:10:34 * @LastEditTime: 2019-09-25 21:05:24 * @LastEditors: Please set LastEditors --> <template> <div class="tab-style"> <div :class="{'tab-content-bg':tabNum == 0}" class="tab-content" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?signed:sign"><span :class="{'colored':tabNum == 0}">待面签</span></div> <div :class="{'tab-content-bg':tabNum == 1}" class="tab-content" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?finished:finish"><span :class="{'colored':tabNum == 1}">已面签</span></div> </div> </template> <script> import signed from '@/assets/contractStart/noY.png' import finished from '@/assets/contractStart/confirmY.png' import sign from '@/assets/contractStart/noN.png' import finish from '@/assets/contractStart/confirmN.png' export default { props: { 'fatherTabNum': { type: Number, }, }, data () { return { tabNum: 0, signed: signed, finished: finished, sign: sign, finish: finish, } }, watch: { 'fatherTabNum': { handler (newVal, oldVal) { this.tabNum = newVal }, }, }, 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); .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; span { margin-left: 2%; font-size: 14px; color: #383F45; font-weight: 600; font-family: PingFangSC-Semibold; } .colored { color: #1D3FFF } } .tab-content-bg{ background: rgba(0,70,156,0.10); } img { width:16px; height: 16px; // margin-right:5.7px; } .tab-content:nth-of-type(2) { margin-left: 7px; } } </style>