mky-vent-5/src/views/dashboard/Analysis/index.vue

<template>
  <div class="vent-home">
    <customHeader>智能管控系统</customHeader>
    <div class="home-container">
      <workerFace v-if="isBtnActive == 'workFace'"/>
      <netWork v-if="isBtnActive == 'netWork'"/>
    </div>
    <div class="bottom-btn-group">
        <div v-for="item in bottomBtnList" :key="item.value" class="vent-row-center btn-item" @click="setBtn('click', item)" @mouseenter="setBtn('over', item) " @mouseleave="setBtn('leave', item)">
          <Decoration11 :color="isBtnActive === item.value ? activeColors : item.isHover ? activeColors : noActiveColors" style="width:200px;height:60px;">
            {{ item.text }}
          </Decoration11>
        </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import {onMounted, onUnmounted, ref } from 'vue'
  import { Decoration11 } from '@kjgl77/datav-vue3'
  import { bottomBtnList } from "./home.data";
  import workerFace from './homePage/workerFace.vue'
  import netWork from './homePage/network.vue'
  import customHeader from '/@/views/vent/comment/components/customHeader.vue';

  const activeColors = []
  const noActiveColors = ['#aaa', '#aaa']
  const isBtnActive = ref('workFace')


  function setBtn(type, activeObj) {
    if(type === 'over'){
      activeObj.isHover = true
    }else if(type === 'leave'){
      activeObj.isHover = false
    }else if(type === 'click') {
      isBtnActive.value = activeObj.value
    }
  }
  
  onMounted(() => {

  })

  onUnmounted(() => {

  })

</script>

<style lang="less" scoped>
  @ventSpace: zxm;
  .vent-home {
    width: 100%;
    // height: calc(100%);
    position: fixed;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    top: 0;
    .home-container {
      width: 100%;
      height: calc(100% - 200px);
      display: flex;
      justify-content: space-between;
      margin-bottom: 100px;
      margin-top: 20px;
    }
    .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>