mky-vent-5/src/views/vent/monitorManager/nitrogen/components/bottomMenu.vue

<template>
  <div class="bottom-btn-group">
    <div v-for="item in navList" :key="item.pathName" class="vent-row-center btn-item" @click="setBtn('click', item)"
      @mouseenter="setBtn('over', item)" @mouseleave="setBtn('leave', item)">
      <dv-decoration11
        :color="isBtnActive === item.pathName ? activeColors : item.isHover ? activeColors : noActiveColors"
        style="width:200px;height:60px;">
        {{ item.title }}
      </dv-decoration11>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Decoration5, Decoration11 as DvDecoration11} from '@kjgl77/datav-vue3'

const router = useRouter()
const isBtnActive = ref('nitrogen_page_lh')
const activeColors = ['#009BFF', '#28DBE4']
const noActiveColors = ['#aaa', '#aaa']
const navList = ref([
  {
    title: '监控界面',
    pathName: 'nitrogen_page_lh',
    isHover: true
  },
  {
    title: '关键节点监测',
    pathName: 'critical_node',
    isHover: false
  },
  {
    title: '实时曲线',
    pathName: 'yfj_monitor_echarts',
    isHover: false
  },
  {
    title: '压风机历史记录',
    pathName: 'yfj_history',
    isHover: false
  },
  {
    title: '操作历史记录',
    pathName: 'yfj_handler_history',
    isHover: false
  },
  {
    title: '故障诊断历史记录',
    pathName: 'yfj_faultRecord',
    isHover: false
  }
])


function setBtn(type, activeObj) {
  if (type === 'over') {
    activeObj.isHover = true
  } else if (type === 'leave') {
    activeObj.isHover = false
  } else if (type === 'click') {
    isBtnActive.value = activeObj.pathName
  }
  // router.push('')
}

</script>
<style lang="less" scoped>
.bottom-btn-group {
    display: flex;
    position: fixed;
    width: calc(100% - 400px);
    height: 100px;
    bottom: 20px;
    align-items: center;
    justify-content: center;

    .btn-item {
      width: 200px;
      height: 60px;
      margin: 10px;
      color: #fff;
      cursor: pointer;
      pointer-events: auto;
    }
  }
</style>