portal_website/src/views/productCenter/product/highFrequencyRFID.vue

<template>
  <div>
    <TitleGroup>
      <template slot="title">{{ data.productInfoEtitle }}</template>
      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
    </TitleGroup>
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :name="`${i.productInfoDetailId}`" :label="i.productInfoDetailTitle" v-for="(i,k) in data.hwProductInfoDetailList">
          <transition name="fade">
            <div v-if="activeName === `${i.productInfoDetailId}`" style="position:relative;">
              <div class="content">
                <div class="left">
                  <div class="itemTitle">{{ (info[0]||{}).productInfoDetailTitle }}</div>
                  <div class="itemCode">{{ (info[0]||{}).productInfoDetailDesc }}</div>
                  <div class="image">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="(info[0]||{}).productInfoDetailPic"
                      fit="contain"></el-image>
                  </div>
                </div>
                <div class="right">
                  <div class="infos" v-for="i in info.filter(e=>!e.productInfoDetailPic)">
                    <div class="infoTitle">{{ i.productInfoDetailTitle }}</div>
                    <div class="infoNum">{{ i.productInfoDetailDesc }}</div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import TitleGroup from "@/components/TitleGroup";
import banner from '@/assets/image/banner.png'
import {getProductCenterProductDetailInfo} from "@/api/productCenter";

export default {
  name: 'HighFrequencyRFID',
  props:['data'],
  components: {
    TitleGroup
  },
  data() {
    return {
      banner,
      activeName: '0',
      info:[]
    }
  },
  mounted() {
    this.activeName = `${this.data.hwProductInfoDetailList[0].productInfoDetailId}`
    console.log(this.data.hwProductInfoDetailList)
    getProductCenterProductDetailInfo({parentId:this.data.hwProductInfoDetailList[0].productInfoDetailId}).then(v=>{
      this.info = v.data
    })
  },
  methods: {
    handleClick(e){
      getProductCenterProductDetailInfo({parentId:e.name}).then(v=>{
        this.info = v.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.tabs {
  text-align: left;
  margin-top: 2.3vw;

  /deep/ .el-tabs__header {
    margin: 0 20vw 15px;
  }

  /deep/ .el-tabs__content {
    padding: 0 20vw;
    background-color: fade(@standard-color, 10);
  }

  /deep/ .el-tabs__nav-wrap::after {
    display: none;
  }

  /deep/ .el-tabs__item {
    letter-spacing: 3px;
    padding: 0 2vw;
    height: 2.9vw;
    font-size: 1.6vw;
  }
  /deep/.el-tabs__item {
    line-height: 2.9vw;
  }

  /deep/ .el-tabs__item.is-active {
    font-weight: 600;
    color: @standard-color;
  }

  /deep/ .el-tabs__active-bar {
    height: 4px;
    background-color: @standard-color;
  }

  .content {
    padding: 2.2vw 0;

    .left {
      width: 34%;
      height: 21.7vw;
      display: inline-block;
      box-shadow: 0 0 3px #0002;
      background-color: #fff;
      text-align: center;
      vertical-align: top;

      .itemTitle {
        padding-top: 1.2vw;
        font-size: 1vw;
      }

      .itemCode {
        margin-top: 0.2vw;
        font-size: 1.1vw;
      }

      .image {
        width: 80%;
        margin-top: 1vw;
        margin-left: 10%;
        height: 15vw;
        background-color: cadetblue;
      }
    }

    .right {
      margin-left: 1%;
      width: 65%;
      height: 21.2vw;
      display: inline-block;
      box-shadow: 0 0 5px #0002;
      background-color: #fff;
      padding-top: 0.5vw;

      .infos {
        width: 93%;
        margin: 0 auto;
        border-bottom: 1px dashed #0003;
        position: relative;
        height: 2.9vw;
      }

      .infoTitle {
        position: absolute;
        width: 96%;
        height: 100%;
        top: 0;
        left: 4%;
        text-align: left;
        font-size: 1vw;
        letter-spacing: 1px;
        color: #0009;
        line-height: 2.9vw;
      }

      .infoNum {
        position: absolute;
        width: 95%;
        height: 100%;
        top: 0;
        right: 5%;
        text-align: right;
        font-size: 1vw;
        letter-spacing: 1.4px;
        color: #000;
        line-height: 2.9vw;
      }
    }
  }

}

.fade-enter-active {
  animation: fadeInRight;
  animation-duration: 0.5s;
}

.fade-leave-active {
  animation: fadeOutLeft;
  animation-duration: 0.5s;
}
</style>