<template>
  <div>
    <TitleGroup>
      <template slot="title">ULTRA HIGH FREQUENCY RFID</template>
      <template slot="subTitle">超高频RFID产品系列</template>
    </TitleGroup>
    <div class="tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane name="1" label="RFID读写器">
          <transition name="fade">
            <div v-if="activeName === '1'" style="position:relative;">
              <div class="content">
                <div class="contentInfo">
                  读写器产品包含一体式读写器、车载读写器、四通道读写器、各尺寸读写器天线等一系列产品，具备丰富的通讯接口和公用的软件接口平台，具有稳定性强、性价比高、易开发、易部署等特点。
                </div>
                <div class="list">
                  <div class="item" v-for=" i in 8">
                    <div class="image">
                      <el-image
                        style="width: 100%; height: 100%;"
                        :src="banner"
                        fit="contain"></el-image>
                    </div>
                    <div class="info">
                      RFID通道门具有窄波束、高增益特点，适用于超高频门禁通道类、物流仓储、人员、图书、档案馆、医疗系统、设备资产等应用。
                    </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-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;

    .contentInfo {
      text-indent: 2em;
      font-size: 1.1vw;
      line-height: 1.9vw;
      letter-spacing: 2.6px;
    }

    .list {
      width: 100%;
      margin-top: 1.7vw;

      .item {
        margin-right: 2.6%;
        width: 23%;
        height: 16vw;
        display: inline-block;
        box-shadow: 0 0 3px #0002;
        margin-bottom: 1.4vw;

        .image {
          width: 100%;
          height: 50%;
        }

        .info {
          width: calc(100% - 2.2vw);
          height: calc(50% - 2.1vw);
          padding: 1.1vw;
          font-size: 0.85vw;
          line-height: 1.2vw;
          letter-spacing: 0.6px;
          color: #0006;
        }

        &:nth-child(4n) {
          margin-right: 0%;
        }
      }
    }
  }

}

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

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