tab.vue 2.69 KB
Newer Older
李晓兵's avatar
李晓兵 committed
1
<template>
李晓兵's avatar
李晓兵 committed
2
 <!-- <div class="tab-style">
3 4 5
    <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>
李晓兵's avatar
李晓兵 committed
6 7 8 9 10 11 12 13
  </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>
李晓兵's avatar
李晓兵 committed
14 15 16 17 18 19 20 21 22 23
  </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 {
24 25 26 27 28 29 30
  props: {
    'tabNum': {
      default: 0,
      type: Number,
    },
  },

李晓兵's avatar
李晓兵 committed
31 32
  data () {
    return {
33
      tabNum1: this.tabNum,
李晓兵's avatar
李晓兵 committed
34 35 36 37 38 39 40 41 42 43
      check1: check1,
      check2: check2,
      check3: check3,
      uncheck1: uncheck1,
      uncheck2: uncheck2,
      uncheck3: uncheck3,
    }
  },
  methods: {
    sendTabNum () {
44
      this.$emit('getTabNum', this.tabNum1)
李晓兵's avatar
李晓兵 committed
45 46 47 48 49
    },
  },
}
</script>
<style lang="less" scoped>
李晓兵's avatar
李晓兵 committed
50
  .tab-style {
李晓兵's avatar
李晓兵 committed
51 52 53
    position: relative;
    z-index: 50;
    background-color: #fff;
李晓兵's avatar
李晓兵 committed
54
    display: flex;
李晓兵's avatar
李晓兵 committed
55
    justify-content: center;
李晓兵's avatar
李晓兵 committed
56
    padding-top: 12px;
李晓兵's avatar
李晓兵 committed
57 58
    padding-bottom: 8px;
    align-items: center;
李晓兵's avatar
李晓兵 committed
59 60 61 62 63 64 65 66 67 68 69
    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;
李晓兵's avatar
李晓兵 committed
70 71
      flex-grow: 1;
      margin: 0 2% 0 2%;
李晓兵's avatar
李晓兵 committed
72 73 74 75 76 77 78 79 80 81 82
      span {
        margin-left: 2%;
        font-size: 14px;
        color: #383F45;
        font-weight: 600;
        font-family: PingFangSC-Semibold;
      }

      .colored {
        color: @headerColor
      }
李晓兵's avatar
李晓兵 committed
83
    }
李晓兵's avatar
李晓兵 committed
84 85
    .tab-content-bg{
      background: rgba(0,70,156,0.10);
李晓兵's avatar
李晓兵 committed
86
    }
李晓兵's avatar
李晓兵 committed
87 88 89 90

    img {
      height: 16px;
      // margin-right:5.7px;
李晓兵's avatar
李晓兵 committed
91
    }
李晓兵's avatar
李晓兵 committed
92 93 94 95 96

    .tab-content:nth-of-type(2) {
      margin-left: 7px;
    }
  }
李晓兵's avatar
李晓兵 committed
97
</style>