en-shoubo-pc/src/views/Collections/components/Menu.vue

<template>
  <ul class="collection-menu">
    <li
      v-for="item in NAV_LIST"
      :key="item.type"
      tabindex="0"
      :aria-description="item.name"
      :class="{
        active: $route.params.type === item.type,
      }"
      @click="
        $router.push({ name: 'Collections', params: { type: item.type } })
      "
    >
      <p>{{ item.name }}</p>
    </li>
  </ul>
</template>

<script lang="ts" setup>
// import { getCollectionThumbListApi, type CollectionThumbListItem } from "@/api";
import { NAV_LIST } from "../constants";
// import { onMounted, ref } from "vue";
// import { getBaseURL } from "@dage/service";

// const baseUrl = getBaseURL();
// const list = ref<CollectionThumbListItem[]>([]);

// onMounted(() => {
//   getThumbList();
// });

// const getThumbList = async () => {
//   const data = await getCollectionThumbListApi();
//   list.value = data;
// };
</script>

<style lang="scss" scoped>
.collection-menu {
  li {
    position: relative;
    border-bottom: 1px solid #fff;
    background: #181818 no-repeat 100%;

    @for $i from 1 through 11 {
      &:nth-child(#{$i}) {
        background-image: url("../images/tab/#{$i}-min.png");
      }
    }
    &:last-child {
      border: none;
    }
    &:hover,
    &.active {
      p {
        background: rgba(254, 24, 24, 0.7);
      }
    }
    p {
      height: 47px;
      line-height: 47px;
      text-indent: 10px;
      font-size: 14px;
      color: white;
      cursor: pointer;
    }
  }
}
</style>