tab.vue 2.2 KB
Newer Older
1 2 3 4
<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-25 11:10:34
786817560's avatar
786817560 committed
5
 * @LastEditTime: 2019-11-20 17:29:40
6 7 8
 * @LastEditors: Please set LastEditors
 -->
<template>
786817560's avatar
786817560 committed
9
  <div class="tab-style has-header">
李晓兵's avatar
李晓兵 committed
10 11 12 13 14
    <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>
      <!-- <span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span> -->
15 16 17
  </div>
</template>
<script>
李晓兵's avatar
李晓兵 committed
18 19 20 21 22
import signed from '@/assets/distributorSign/icon-signed.png'
import finished from '@/assets/distributorSign/icon-finished.png'
import sign from '@/assets/distributorSign/icon-sign.png'
import finish from '@/assets/distributorSign/icon-finish.png'

23 24 25 26
export default {
  data () {
    return {
      tabNum: 0,
李晓兵's avatar
李晓兵 committed
27 28 29 30
      signed: signed,
      finished: finished,
      sign: sign,
      finish: finish,
31 32 33 34 35 36 37 38 39 40
    }
  },
  methods: {
    sendTabNum () {
      this.$emit('getTabNum', this.tabNum)
    },
  },
}
</script>
<style lang="less" scoped>
李晓兵's avatar
李晓兵 committed
41
  .tab-style {
786817560's avatar
786817560 committed
42 43 44
    width: 100%;
    position: absolute;
    z-index: 999;
李晓兵's avatar
李晓兵 committed
45
    background-color: #fff;
李晓兵's avatar
李晓兵 committed
46 47 48
    display: flex;
    justify-content: center;
    padding-top: 12px;
49 50
    padding-bottom: 8px;
    align-items: center;
李晓兵's avatar
李晓兵 committed
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
    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 {
李晓兵's avatar
李晓兵 committed
72
        color: @headerColor
李晓兵's avatar
李晓兵 committed
73
      }
74
    }
李晓兵's avatar
李晓兵 committed
75 76
    .tab-content-bg{
      background: rgba(0,70,156,0.10);
77
    }
李晓兵's avatar
李晓兵 committed
78 79 80 81

    img {
      height: 16px;
      // margin-right:5.7px;
82
    }
李晓兵's avatar
李晓兵 committed
83 84 85 86 87

    .tab-content:nth-of-type(2) {
      margin-left: 7px;
    }
  }
88
</style>