diff --git a/src/assets/images/menu/air-conditioning-select.png b/src/assets/images/menu/air-conditioning-select.png
new file mode 100644
index 0000000..6e229ac
Binary files /dev/null and b/src/assets/images/menu/air-conditioning-select.png differ
diff --git a/src/assets/images/menu/air-conditioning.png b/src/assets/images/menu/air-conditioning.png
new file mode 100644
index 0000000..9020848
Binary files /dev/null and b/src/assets/images/menu/air-conditioning.png differ
diff --git a/src/assets/images/menu/carbon-select.png b/src/assets/images/menu/carbon-select.png
new file mode 100644
index 0000000..c5a84f0
Binary files /dev/null and b/src/assets/images/menu/carbon-select.png differ
diff --git a/src/assets/images/menu/carbon.png b/src/assets/images/menu/carbon.png
new file mode 100644
index 0000000..473e67a
Binary files /dev/null and b/src/assets/images/menu/carbon.png differ
diff --git a/src/assets/images/menu/drainage-select.png b/src/assets/images/menu/drainage-select.png
new file mode 100644
index 0000000..f072106
Binary files /dev/null and b/src/assets/images/menu/drainage-select.png differ
diff --git a/src/assets/images/menu/drainage.png b/src/assets/images/menu/drainage.png
new file mode 100644
index 0000000..e18bfcb
Binary files /dev/null and b/src/assets/images/menu/drainage.png differ
diff --git a/src/assets/images/menu/energy-efficiency-select.png b/src/assets/images/menu/energy-efficiency-select.png
new file mode 100644
index 0000000..3852362
Binary files /dev/null and b/src/assets/images/menu/energy-efficiency-select.png differ
diff --git a/src/assets/images/menu/energy-efficiency.png b/src/assets/images/menu/energy-efficiency.png
new file mode 100644
index 0000000..f93a5c4
Binary files /dev/null and b/src/assets/images/menu/energy-efficiency.png differ
diff --git a/src/assets/images/menu/energy-select.png b/src/assets/images/menu/energy-select.png
new file mode 100644
index 0000000..2ebcabc
Binary files /dev/null and b/src/assets/images/menu/energy-select.png differ
diff --git a/src/assets/images/menu/energy.png b/src/assets/images/menu/energy.png
new file mode 100644
index 0000000..c4890a9
Binary files /dev/null and b/src/assets/images/menu/energy.png differ
diff --git a/src/assets/images/menu/lighting-select.png b/src/assets/images/menu/lighting-select.png
new file mode 100644
index 0000000..3c0fc1c
Binary files /dev/null and b/src/assets/images/menu/lighting-select.png differ
diff --git a/src/assets/images/menu/lighting.png b/src/assets/images/menu/lighting.png
new file mode 100644
index 0000000..847058f
Binary files /dev/null and b/src/assets/images/menu/lighting.png differ
diff --git a/src/assets/images/menu/overview-select.png b/src/assets/images/menu/overview-select.png
new file mode 100644
index 0000000..bf95bc3
Binary files /dev/null and b/src/assets/images/menu/overview-select.png differ
diff --git a/src/assets/images/menu/overview.png b/src/assets/images/menu/overview.png
new file mode 100644
index 0000000..1708cd3
Binary files /dev/null and b/src/assets/images/menu/overview.png differ
diff --git a/src/assets/images/menu/screen-select.png b/src/assets/images/menu/screen-select.png
new file mode 100644
index 0000000..6caaa08
Binary files /dev/null and b/src/assets/images/menu/screen-select.png differ
diff --git a/src/assets/images/menu/screen.png b/src/assets/images/menu/screen.png
new file mode 100644
index 0000000..0493e2b
Binary files /dev/null and b/src/assets/images/menu/screen.png differ
diff --git a/src/components/mainHeader/index.vue b/src/components/mainHeader/index.vue
index eb43cb7..b397391 100644
--- a/src/components/mainHeader/index.vue
+++ b/src/components/mainHeader/index.vue
@@ -1,12 +1,21 @@
 <script setup>
 import moment from "moment"
-import  {ref,onMounted} from "vue";
+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 '@/view/energyMonitoring/index'
 const nowDate = ref('')
 const nowWeek = ref('')
 const nowMin = ref('')
 
-const timer = ref('')
-const getNowDate = (val) =>{
+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')
@@ -15,6 +24,29 @@ 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: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>
@@ -42,7 +74,16 @@ timer.value = setInterval(()=>{
       </p>
 
     </div>
-    <router-view />
+    <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>
 
@@ -88,5 +129,27 @@ timer.value = setInterval(()=>{
 }
 .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>
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
index 8389607..52fba84 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -6,7 +6,7 @@
   padding: 0;
   overflow: hidden;
 }
-p{
+p,ul,li{
   margin: 0;
   padding: 0;
 }
diff --git a/src/views/air-conditioning/index.vue b/src/views/air-conditioning/index.vue
new file mode 100644
index 0000000..c76ebd2
--- /dev/null
+++ b/src/views/air-conditioning/index.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  空调
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/carbonEmission/index.vue b/src/views/carbonEmission/index.vue
new file mode 100644
index 0000000..d0a28dd
--- /dev/null
+++ b/src/views/carbonEmission/index.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  碳排放
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/drainage/index.vue b/src/views/drainage/index.vue
new file mode 100644
index 0000000..31c2d72
--- /dev/null
+++ b/src/views/drainage/index.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  排水
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/energyEfficiency/index.vue b/src/views/energyEfficiency/index.vue
new file mode 100644
index 0000000..9ad5f3d
--- /dev/null
+++ b/src/views/energyEfficiency/index.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  能效
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/lighting/index.vue b/src/views/lighting/index.vue
new file mode 100644
index 0000000..0825d5d
--- /dev/null
+++ b/src/views/lighting/index.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  照明
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/overview/index.vue b/src/views/overview/index.vue
index cc95c7c..a9c31a8 100644
--- a/src/views/overview/index.vue
+++ b/src/views/overview/index.vue
@@ -156,7 +156,9 @@ const drawPowerEcharts = () =>{
         <span>实时负荷</span>
       </div>
       <div class="margin10 box-bg">
+          <div class="">
 
+          </div>
       </div>
       <!--  气象站-->
       <div class="title margin10">
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
new file mode 100644
index 0000000..5eb3c33
--- /dev/null
+++ b/src/views/screen/index.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+<div>
+  显示屏
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file