ghjg-digital-twin/src/views/home/Tab.vue

<template>
  <div id="tab">
    <transition-group name="tab">
      <div class="main" key="tabMain">
        <div class="main-bg"></div>
        <transition-group name="mainTabs" class="main-content" tag="div">
          <div class="tab-item" v-for="item, index in tabList.data" :key="item.name" @click="changePage(item.routeName)">
            <img class="tab-icon" :src="index === 2 ? item.iconOn : item.icon" alt="">
            <span class="tab-label">{{ item.name }}</span>
          </div>
        </transition-group>
      </div>
      <div class="sub" v-if="showSub" key="tabSub">
        <div class="sub-content">
          <span class="options" :class="{ 'highlight': subType === 'hsx' }" @click="handleChangeSub('hsx')">杭申线</span>
          <i class="divider"></i>
          <!-- <span class="options" :class="{'highlight': subType==='chsx'}" @click="handleChangeSub('chsx')">长湖申线</span> -->
          <span style="cursor: not-allowed;" class="options" :class="{ 'highlight': subType === 'chsx' }">长湖申线</span>
        </div>
      </div>
    </transition-group>
    <under-water v-if="sxdxShow" />
  </div>
</template>

<script>
export default {
  name: 'TabSwitch',
}
</script>

<script setup>
import { reactive, watch, nextTick, ref, onBeforeMount, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { ueCallfullExtent, ueCallFlyToHsx } from '@/utils/UIInteractions'
import UnderWater from './cpns/UnderWater.vue';
import bus from '@/utils/bus'
import { GetUserPrivilege } from "@/utils/user";

const router = reactive(useRouter())
const showSub = ref(false)
const subType = ref('hsx')

function sortTabList() {
  showSub.value = router.currentRoute.name === 'AccessMonitor' ? true : false
  tabList.data.forEach((i, index) => {
    if (i.routeName === router.currentRoute.name) {
      let tabTemp = [...tabList.data]
      while (index !== 2) {
        if (index < 2) {
          tabTemp.unshift(tabTemp.pop())
          index++
        }
        if (index > 2) {
          tabTemp.push(tabTemp.shift())
          index--
        }
      }
      tabList.data = tabTemp
      return
    }
  })
}

onBeforeMount(() => {
  sortTabList()
})

watch(router, (n, o) => {
  nextTick(() => {
    sortTabList()
  })
}, { immediate: true })

const tabList = reactive({
  data: [
    { name: '交通安全', icon: require('@/assets/imgs/navi/icon-jtaq.png'), iconOn: require('@/assets/imgs/navi/icon-jtaq-s.png'), routeName: 'TrafficSafty' },
    { name: '航道疏浚', icon: require('@/assets/imgs/navi/icon-hdsj.png'), iconOn: require('@/assets/imgs/navi/icon-hdsj-s.png'), routeName: 'LaneDredge' },
    { name: '运营监管', icon: require('@/assets/imgs/navi/icon-yyjg.png'), iconOn: require('@/assets/imgs/navi/icon-yyjg-s.png'), routeName: 'OperationSupervision' },
    { name: '水上客运', icon: require('@/assets/imgs/navi/icon-ssky.png'), iconOn: require('@/assets/imgs/navi/icon-ssky-s.png'), routeName: 'WaterTransport' },
    { name: '卡口监控', icon: require('@/assets/imgs/navi/icon-kkjk.png'), iconOn: require('@/assets/imgs/navi/icon-kkjk-s.png'), routeName: 'AccessMonitor' },
  ]
})

onMounted(() => [
  GetUserPrivilege(tabList),
])

function handleChangeSub(type) {
  subType.value = type
}

function changePage(name) {
  if (name === "AccessMonitor") {
    ueCallFlyToHsx()
  } else {
    ueCallfullExtent()
  }

  router.push({
    name
  })
}

const sxdxShow = ref(false)
bus.on('toggle_sxdx', (param) => {
  sxdxShow.value = param
})

</script>

<style lang="scss" scoped>
#tab {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  .main {
    position: relative;
    width: 100%;
    height: 160px;

    .main-bg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 64px;
      background: url('@/assets/imgs/navi/bg-main.png') no-repeat;
      background-size: 100% 64px;
      z-index: 3;
    }

    .main-content {
      position: absolute;
      bottom: 26px;
      left: 50%;
      width: 600px;
      height: 120px;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 4;
    }


    .tab-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &.disabed {
        cursor: not-allowed;
        opacity: 0.5;
      }

      .tab-icon {
        width: 85px;
        height: 85px;
      }

      .tab-label {
        font-size: 20px;
        font-family: YSBTH;
        font-weight: 400;
        font-style: italic;
        color: #fff;
        transform: translateY(-3px);
        padding-right: 4px;
      }

      &:hover .tab-icon {
        transform: scale(1.05) translateY(-3px);
      }
    }

    .tab-item:nth-child(1),
    .tab-item:nth-child(5) {
      .tab-label {
        color: #F2FBFF;
      }
    }

    .tab-item:nth-child(2),
    .tab-item:nth-child(4) {
      transform: translateY(-10px);
    }

    .tab-item:nth-child(3) {
      transform: translateY(-20px);

      .tab-icon {
        width: 105px;
        height: 112px;
      }

      .tab-label {
        color: transparent;
        background: linear-gradient(0deg, #FFEFC9 0%, #FFD46F 100%);
        -webkit-background-clip: text;
        transform: translateY(-16px);
      }
    }

  }

  .mainTabs-move,
  .mainTabs-enter-active,
  .mainTabs-leave-active {
    transition: all 0.5s ease;
  }

  .tab-move,
  .tab-enter-active {
    transition: all 0.5s ease;
  }

  .tab-leave-active {
    display: none;
  }

  .tab-enter-from,
  .tab-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }

  .sub {
    position: relative;
    width: 100%;
    height: 30px;

    .sub-content {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: fit-content;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 4;

      .options {
        position: relative;
        width: 112px;
        height: 44px;
        box-sizing: border-box;
        padding-top: 6px;
        font-size: 18px;
        font-family: YSBTH;
        color: transparent;
        background: linear-gradient(0deg, rgba(97, 155, 214, 1) 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        cursor: pointer;
        z-index: 5;

        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: url('@/assets/imgs/page_kkjk/sub-navi.png') no-repeat;
          background-size: 100% 100%;
          z-index: 4;
        }

        &.highlight {
          background: linear-gradient(0deg, #D6D660 0%, #FFFFFF 100%);
          -webkit-background-clip: text;

          &::after {
            background: url('@/assets/imgs/page_kkjk/sub-navi-s.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }

      .divider {
        display: inline-block;
        width: 1px;
        height: 17px;
        margin: 0 60px;
        background: #FFFFFF;
        opacity: 0.4;
      }
    }

  }
}
</style>