en-shoubo-pc/src/components/PageNav/index.vue

<template>
  <div
    class="page-nav"
    data-aria-viewport-area
    aria-description="You've reached the secondary menu under the Exhibition section. This menu contains four options. To browse the content,  please use the tab key."
  >
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        :class="{
          active: isActive(index, item.name),
        }"
        @click="$router.push(item.routeParams)"
        @keydown.enter.passive="$router.push(item.routeParams)"
        tabindex="0"
        aria-label="Link"
        :aria-description="item.name"
      >
        <img :src="item.img" alt="" />
        <p>
          {{ item.name }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { isNumber } from "lodash-unified";
import type { PageNavListItemType } from "./types";

const props = defineProps<{
  /**
   * 导航列表
   */
  list: PageNavListItemType[];
  /**
   * 当前所在路由名称
   */
  curRouteName?: string;
  /**
   * 当前所在导航索引，默认通过路由名称判断
   */
  activeIndex?: number;
}>();

const isActive = (idx: number, name: string) => {
  if (isNumber(props.activeIndex)) {
    return props.activeIndex === idx;
  }

  return props.curRouteName === name;
};
</script>

<style lang="scss" scoped>
.page-nav {
  width: 100%;
  padding-bottom: 8px;
  background: url("@/assets/images/Visit/bg_3.png") left bottom repeat-x #f1f1f1;
  overflow: hidden;

  ul {
    margin: 0 auto;
    display: flex;
    width: 1180px;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 168px;
      height: 108px;
      cursor: pointer;

      &.active {
        background: url("@/assets/images/Visit/bg_1.jpg") center top no-repeat
          #f1f1f1;
      }
      p {
        margin-top: 5px;
        font-size: 14px;
        line-height: 18px;
      }
    }
  }
}
</style>