WuxiCharityMuseum/src/views/about/AboutView.vue

<template>
  <div class="about-view">
    <menu
      class="tab-bar"
    >
      <button
        :class="{
          active: $route.meta.aboutTabIdx === 0
        }"
        @click="$router.push({
          name: 'InstitutionView'
        })"
      >
        机构
      </button>
      <button
        :class="{
          active: $route.meta.aboutTabIdx === 1
        }"
        @click="$router.push({
          name: 'VisitView'
        })"
      >
        参观
      </button>
      <button
        :class="{
          active: $route.meta.aboutTabIdx === 2
        }"
        @click="$router.push({
          name: 'ExhibitionView'
        })"
      >
        展览
      </button>
      <button
        :class="{
          active: $route.meta.aboutTabIdx === 3
        }"
        @click="$router.push({
          name: 'ServiceView'
        })"
      >
        服务
      </button>
      <button
        :class="{
          active: $route.meta.aboutTabIdx === 4
        }"
        @click="$router.push({
          name: 'ConsultView'
        })"
      >
        咨询
      </button>
      <button
        :class="{
          active: $route.meta.aboutTabIdx === 5
        }"
        @click="$router.push({
          name: 'CollectionView'
        })"
      >
        典藏
      </button>
    </menu>

    <router-view />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')
</script>

<style lang="less" scoped>
.about-view{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  >menu.tab-bar{
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 51px;
    background: linear-gradient( 90deg, rgba(88,148,152,0.2) 0%, #589498 50%, rgba(88,148,152,0.2) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 78px;
    z-index: 1;
    >button{
      flex: 0 0 auto;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 21px;
    }
    >button.active{
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      font-size: 18px;
      color: #FFE794;
      line-height: 21px;
      text-shadow: 0px 1px 2px rgba(0,0,0,0.25);
    }
  }
}
</style>