hsq-pro/src/views/vent/home/configurable/components/navMenu.vue

<template>
  <div class="nav-menu">
    <div
      :class="activeIndex == index ? 'menu-item-active' : 'menu-item'"
      v-for="(item, index) in menuList"
      :key="index"
      @click="handlerClick(item, index)"
      >{{ item.label }}</div
    >
  </div>
</template>

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

//当前激活menu选项索引
let activeIndex = ref(0);
let menuList = ref<any[]>([
  { label: '一张图', value: 'yzt' },
  { label: '监测预警', value: 'jcyj' },
  { label: '设备管理', value: 'sbgl' },
  { label: '联动配置', value: 'ldpz' },
  { label: '系统管理', value: 'xtgl' },
  { label: '大屏展示', value: 'dpzs' },
]);
let $emit = defineEmits(['changeMenu']);

//menu选项切换
function handlerClick(item, index) {
  activeIndex.value = index;
  $emit('changeMenu', item.value);
}
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .nav-menu {
  }
}

.nav-menu {
  --image-modal-nav: url('@/assets/images/home-container/configurable/hsq/2-1.png');
  --image-modal-nav1: url('@/assets/images/home-container/configurable/hsq/2-2.png');
  --image-modal-nav2: url('@/assets/images/home-container/configurable/hsq/2-3.png');
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  width: 90%;
  height: 100%;
  background: var(--image-modal-nav) no-repeat;
  background-size: 100% 100%;
  padding: 6px 15px 0px 15px;
  box-sizing: border-box;

  .menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 34px;
    background: var(--image-modal-nav1) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    user-select: none; /* 禁止选择文本 */
  }

  .menu-item-active {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 34px;
    background: var(--image-modal-nav2) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    user-select: none; /* 禁止选择文本 */
  }
}
</style>