vue tab切换滑动门

<script setup lang="ts">
  import {ref} from "vue";

  const selectName = ref('技术指标及标准')
  const nacigation = ref([ '技术指标及标准', '文献著作', '报告模版', '专家库/项目库',])
</script>

<template>
  <div class="epd-box-bagColor">
    <div class="epd-box">
      <div class="epd-box-center">

        <div class="epd-box-center-navigation">
          <div @click="selectName = item" v-for="(item, index) in nacigation" :key="index" :class="{'epd-box-center-navigation-item': true, 'epd-box-center-navigation-selectItem': item === selectName}">
            {{ item }}
          </div>
          <div :style="{'left': (nacigation.indexOf(selectName) * 14.5) + 'rem'}" class="epd-box-center-navigation-tab-active" >
            <div class="epd-box-center-navigation-tab-active-footer" />
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
  .epd-box-bagColor {
    background: #F6FAFF;
  }
  .epd-box {
    padding-top: 2.7rem;
    background-size: 100% 26.8rem !important;
    background: url("@/assets/images/EPD/EPDBackground4.png") no-repeat;
    &-center {
      padding: 2.7rem 1.8rem 0 2.4rem;
      width: 62.5rem;
      min-height: 48rem;
      background: #FFFFFF;
      border-radius: 0.5rem;
      margin: 0 auto 2.1rem auto;
  
      &-navigation {
        display: flex;
        position: relative;
        background: #F5F7FA;
        color: #9E9E9E;
        border-radius: 0.3rem;
        &-item {
          z-index: 2;
          cursor: pointer;
          width: 14.5rem;
          height: 2.7rem;
          font-weight: 500;
          font-size: @epd-fontSize-middle;
          line-height: 2.7rem;
          text-align: center;
          position: relative;
        }
        &-selectItem {
          color: #fff;
          transition: color 0.4s;
        }
        &-tab-active {
          z-index: 1;
          position: absolute;
          bottom: 0;
          width: 14.5rem;
          height: 2.7rem;
          display: inline-block;
          background: #2F9CF1;
          border-radius: 0.3rem;
          transition: left .4s; /* 针对 left 变动来实现动画 */
          &-footer {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 0.5rem solid transparent;
            border-right: 0.5rem solid transparent;
            border-bottom: 0.6rem solid #fff;
          }
        }
      }
    }
  }
</style>