qiuwang/src/components/mainHeader/index.vue

<script setup>
import moment from "moment"
import  {ref,shallowRef} from "vue";
import overview from '@/views/overview/index.vue' //总览
import energyEfficiency from '@/views/energyEfficiency/index.vue' //能效
import drainage from '@/views/drainage/index.vue' //排水
import airConditioning from '@/views/air-conditioning/index.vue' //空调
import lighting from '@/views/lighting/index.vue' //照明
import carbonEmission from '@/views/carbonEmission/index.vue' //碳排放

import screen from '@/views/screen/index.vue' //显示屏
import energyMonitoring from '@/views/energyMonitoring/index.vue'
const nowDate = ref('')
const nowWeek = ref('')
const nowMin = ref('')

const timer = ref(0)
const getNowDate = () =>{
  nowDate.value = moment().format('YYYY年MM月DD日')
  nowWeek.value = moment().format('dddd')
  nowMin.value = moment().format('HH:mm:ss')
}
getNowDate()
timer.value = setInterval(()=>{
  getNowDate()
},1000)
const menuList = ref([
  {name:shallowRef(overview),default:'../../assets/images/menu/overview.png',select:'../../assets/images/menu/overview-select.png'},
  {name:shallowRef(energyMonitoring),
    default:'../../assets/images/menu/energy.png',select:'../../assets/images/menu/energy-select.png'},
  {name:shallowRef(energyEfficiency),default:'../../assets/images/menu/energy-efficiency.png',select:'../../assets/images/menu/energy-efficiency-select.png'},
  {name:shallowRef(drainage),default:'../../assets/images/menu/drainage.png',select:'../../assets/images/menu/drainage-select.png'},
  {name:shallowRef(airConditioning),default:'../../assets/images/menu/air-conditioning.png',select:'../../assets/images/menu/air-conditioning-select.png'},
  {name:shallowRef(lighting),default:'../../assets/images/menu/lighting.png',select:'../../assets/images/menu/lighting-select.png'},
  {name:shallowRef(carbonEmission),default:'../../assets/images/menu/carbon.png',select:'../../assets/images/menu/carbon-select.png'},
  {name:shallowRef(screen),default:'../../assets/images/menu/screen.png',select:'../../assets/images/menu/screen-select.png'}
])
const menuIndex = ref(0)
// 菜单切换方法
const toggleClick = (item,index) =>{
  tabName.value = item?.name
  menuIndex.value = index

}
const tabName = shallowRef(overview)
const getImageUrl=(name)=>{
  return `url(${new URL(name, import.meta.url).href})`
}

</script>

<template>
  <div class="header">

  </div>
  <!--  左侧遮罩-->
  <div class="left-mask">

  </div>
  <!--  右侧遮罩-->
  <div class="right-mask">

  </div>
  <div class="container">
    <div class="date">
      <p>
        <span class="m10">{{nowDate}}</span>
        <span class="m10">{{nowWeek}}</span>
        <span>{{nowMin}}</span>
      </p>
      <p>
        <span class="m10 weaIcon">晴</span>
        <span>4~13℃</span>
      </p>

    </div>
    <div class="menu">
      <ul>
        <li @click="toggleClick(item,index)" v-for="(item,index) in menuList"  :style="'background-image:'+ getImageUrl(menuIndex==index?item.select:item.default)" :class="'menu-icon'+index"></li>
      </ul>
    </div>
<!--    <overview></overview>-->
<!--    <router-view />-->
    <keep-alive>
      <component :is="tabName"></component>
    </keep-alive>
  </div>
</template>

<style lang="scss" scoped>
.header {
  height: vh(136);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('@/assets/images/mask/top.png');
  background-size: 100% 100%;
  z-index: -1 !important;
}
.left-mask {
  width: vw(600);
  left: 0;
  position: absolute;
  z-index: -99;
  height: 100%;
  background-image: url('@/assets/images/mask/left.png');
  background-size: 100% 100%;
}

.right-mask {
  position: absolute;
  right: 0;
  top: 0;
  width: vw(600);
  height: 100%;
  z-index: -99;
  background-image: url('@/assets/images/mask/right.png');
  background-size: 100% 100%;
}
.date{
  display: flex;
  color:#fff;
  margin: 2.5rem 2.2rem 0 2.2rem;
  justify-content: space-between;
}
.m10{
  margin-right: 1.3rem;
}
.weaIcon{

}
.menu{
  position: fixed;
  bottom: vh(24);
  z-index:999;
  left:29.15%;
  width: vw(800);
  height: vh(100);
  ul{
    //width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
  li{
    list-style: none;
    cursor: pointer;
    width:12.5%;
    height: 100%;
    background-size: 100% 100%;
  }
  }

}
</style>