tab.vue 2.76 KB
Newer Older
786817560's avatar
786817560 committed
1 2 3 4
<!--
 * @Description: 详情tab
 * @Author: your name
 * @Date: 2019-09-25 19:47:59
786817560's avatar
786817560 committed
5
 * @LastEditTime: 2019-11-04 14:34:16
786817560's avatar
786817560 committed
6 7 8 9
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="tab-style">
786817560's avatar
786817560 committed
10 11 12 13 14 15
    <a :class="{'tab-content-bg':tabNum == 0}" class="tab-content" href="#baseInfo" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?baseInfo:unBaseInfo"><span
      :class="{'colored':tabNum == 0}">基本信息</span></a>
    <a :class="{'tab-content-bg':tabNum == 1}" class="tab-content" href="#prodetail" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?detail:unDetail"><span
      :class="{'colored':tabNum == 1}">商品详情</span></a>
    <a :class="{'tab-content-bg':tabNum == 2}" class="tab-content" href="#procfg" @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?config:unConfig"><span
      :class="{'colored':tabNum == 2}">产品配置</span></a>
786817560's avatar
786817560 committed
16 17 18
  </div>
</template>
<script>
786817560's avatar
786817560 committed
19 20 21 22 23 24
import baseInfo from '@/assets/productQuery/baseInfo.png'
import unBaseInfo from '@/assets/productQuery/unBaseInfo.png'
import detail from '@/assets/productQuery/detail.png'
import unDetail from '@/assets/productQuery/unDetail.png'
import config from '@/assets/productQuery/config.png'
import unConfig from '@/assets/productQuery/unConfig.png'
786817560's avatar
786817560 committed
25
export default {
786817560's avatar
786817560 committed
26 27 28 29 30 31
  props: {
    tabNums: {
      type: Number,
      default: 0,
    },
  },
786817560's avatar
786817560 committed
32 33
  data () {
    return {
786817560's avatar
786817560 committed
34
      tabNum: this.tabNums,
786817560's avatar
786817560 committed
35 36 37 38 39 40
      baseInfo: baseInfo,
      unBaseInfo: unBaseInfo,
      detail: detail,
      unDetail: unDetail,
      config: config,
      unConfig: unConfig,
786817560's avatar
786817560 committed
41 42
    }
  },
786817560's avatar
786817560 committed
43 44 45 46 47
  watch: {
    tabNums () {
      this.tabNum = this.tabNums
    },
  },
786817560's avatar
786817560 committed
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
  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);
786817560's avatar
786817560 committed
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
    .tab-content {
      display: block;
      width: 33%;
      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: #00469C
      }
786817560's avatar
786817560 committed
87
    }
786817560's avatar
786817560 committed
88 89
    .tab-content-bg{
      background: rgba(0,70,156,0.10);
786817560's avatar
786817560 committed
90
    }
786817560's avatar
786817560 committed
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106

    .tab-content:nth-of-type(1) {
      margin-left: 12px
    }

    img {
      height: 16px;
      // margin-right:5.7px;
    }

    .tab-content:nth-of-type(2) {
      margin-left: 8px;
    }
    .tab-content:nth-of-type(3) {
      margin-left: 8px;
      margin-right: 4px;
786817560's avatar
786817560 committed
107 108 109
    }
}
</style>