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

<template>
  <div>
    <TitleGroup>
      <template slot="title">HIGH FREQUENCY RFID</template>
      <template slot="subTitle">高频RFID产品系列</template>
    </TitleGroup>
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="1" label="高频RFID读头">
          <transition name="fade">
            <div v-if="activeName === '1'" style="position:relative;">
              <div class="content">
                <div class="left">
                  <div class="itemTitle">产品型号</div>
                  <div class="itemCode">HW-RFR-050-B-003-B1204S</div>
                  <div class="image">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="banner"
                      fit="contain"></el-image>
                  </div>
                </div>
                <div class="right">
                  <div class="infos" v-for="i in 7">
                    <div class="infoTitle">射频协议</div>
                    <div class="infoNum">符合ISO/IEC 13.56MHZ</div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
        <el-tab-pane name="2" label="高频RFID一体机">
          <transition name="fade">
            <div v-if="activeName === '2'" style="position:relative;">
              <div class="content">
                <div class="left">
                  <div class="itemTitle">产品型号</div>
                  <div class="itemCode">HW-RFR-050-B-003-B1204S</div>
                  <div class="image">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="banner"
                      fit="contain"></el-image>
                  </div>
                </div>
                <div class="right">
                  <div class="infos" v-for="i in 7">
                    <div class="infoTitle">射频协议</div>
                    <div class="infoNum">符合ISO/IEC 13.56MHZ</div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
        <el-tab-pane name="3" label="协议网关">
          <transition name="fade">
            <div v-if="activeName === '3'" style="position:relative;">
              <div class="content">
                <div class="left">
                  <div class="itemTitle">产品型号</div>
                  <div class="itemCode">HW-RFR-050-B-003-B1204S</div>
                  <div class="image">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="banner"
                      fit="contain"></el-image>
                  </div>
                </div>
                <div class="right">
                  <div class="infos" v-for="i in 7">
                    <div class="infoTitle">射频协议</div>
                    <div class="infoNum">符合ISO/IEC 13.56MHZ</div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
        <el-tab-pane name="4" label="高频RFID圆环标签">
          <transition name="fade">
            <div v-if="activeName === '4'" style="position:relative;">
              <div class="content">
                <div class="left">
                  <div class="itemTitle">产品型号</div>
                  <div class="itemCode">HW-RFR-050-B-003-B1204S</div>
                  <div class="image">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="banner"
                      fit="contain"></el-image>
                  </div>
                </div>
                <div class="right">
                  <div class="infos" v-for="i in 7">
                    <div class="infoTitle">射频协议</div>
                    <div class="infoNum">符合ISO/IEC 13.56MHZ</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'

export default {
  name: 'HighFrequencyRFID',
  components: {
    TitleGroup
  },
  data() {
    return {
      banner,
      activeName: '1'
    }
  },
  methods: {}
}
</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>