details-tab.vue

<!--
 * @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>