gas-injection/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>