feat:添加header组件

src/components/fnHeader.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="header">
+    <div class="title">
+      <img src="@/assets/images/common/logo.png" alt="" />
+      <span>飞鸟智慧巡园平台</span>
+      <img src="@/assets/images/common/logo-icon.png" alt="" />
+    </div>
+    <div class="date">
+      <div>111</div>
+      <div class="time">
+        <div>21:05:46</div>
+        <span>2024.11.04 星期一</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.header {
+  width: 100%;
+  height: 74px;
+  display: flex;
+  justify-content: space-between;
+  background: #101010;
+  box-sizing: border-box;
+  pointer-events: all;
+
+  .title {
+    width: 100%;
+    height: 100%;
+    font-size: 24px;
+    letter-spacing: 2px;
+    line-height: 72px;
+    padding-left: 20px;
+    box-sizing: border-box;
+    background: url("@/assets/images/common/header-bg.png") no-repeat center
+      center / 100% 100%;
+    span {
+      margin: 0 5px;
+      font-family: "PangMenZhengDao";
+    }
+  }
+  .date {
+    display: flex;
+    align-items: center;
+    width: 180px;
+  }
+}
+</style>

src/components/toolList.vue

@@ -1,7 +1,6 @@
 <template>
   <div :class="['tool-list', 'tool-' + direction]">
-    <!-- <div class="tool-item text active">首页</div> -->
-    <div :class="['tool-item',{'text':item.name==='home'}]" v-for="(item,index) in list" :key="index" @click="handleActive(item,index)">{{item.title}}</div>
+    <div :class="['tool-item',{'text':item.name==='home'},{active:index===active}]" v-for="(item,index) in list" :key="index" @click="handleActive(item,index)">{{item.title}}</div>
   </div>
 </template>
 
@@ -10,7 +9,7 @@ import {ref} from 'vue'
 const props = defineProps({
   direction: {
     type: String,
-    defalut: "left",
+    defalut: "",
   },
   list: {
     type: Array,
@@ -18,9 +17,9 @@ const props = defineProps({
   },
 });
 
-const active = ref('home')
-const handleActive = (i,v) =>{
-    
+const active = ref(0)
+const handleActive = (value,index) =>{
+    active.value = index
 }
 </script>
 
@@ -30,7 +29,6 @@ const handleActive = (i,v) =>{
   height: 100%;
   background: #232323;
   border: 0.6px solid rgb(255, 255, 255, 0.4);
-  border-left: none;
   box-sizing: border-box;
   border-radius: 4px;
   display: flex;
@@ -39,9 +37,11 @@ const handleActive = (i,v) =>{
   position: relative;
   &.tool-left {
     margin-right: 10px;
+    border-left: none;
   }
   &.tool-right {
     margin-left: 10px;
+    border-right: none;
   }
   .tool-item {
     font-size: 20px;
@@ -53,11 +53,16 @@ const handleActive = (i,v) =>{
     color: #B9B9B9;
     font-family: "PangMenZhengDao";
     cursor: pointer;
+    height: 100%;
+    text-align: center;
+    &.tool-item:first-child{
+        border-radius: 4px 4px 0 0;
+    }
+    &.tool-item:last-child{
+        border-radius: 0 0 4px 4px;
+    }
     &.text{
         writing-mode:horizontal-tb;
-        position: absolute;
-        top: 0;
-        border-radius: 4px 4px 0 0;
         height: 40px;
         line-height: 40px;
         letter-spacing: 1px;

src/views/Home.vue

@@ -1,19 +1,6 @@
 <template>
   <div class="base-container">
-    <div class="header">
-      <div class="title">
-        <img src="@/assets/images/common/logo.png" alt="" />
-        <span>飞鸟智慧巡园平台</span>
-        <img src="@/assets/images/common/logo-icon.png" alt="" />
-      </div>
-      <div class="date">
-        <div>111</div>
-        <div class="time">
-          <div>21:05:46</div>
-          <span>2024.11.04 星期一</span>
-        </div>
-      </div>
-    </div>
+    <fnHeader></fnHeader>
     <div class="content">
       <!-- <div class="top"></div> -->
       <div class="left">
@@ -46,6 +33,7 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import fnHeader from "@/components/fnHeader.vue";
 import chartBox from "@/components/chartBox.vue";
 import toolList from "@/components/toolList.vue";
 import HomeMap from "./homeMap";
@@ -100,36 +88,6 @@ const rightToolList = [
   z-index: 1;
   pointer-events: none;
 
-  .header {
-    width: 100%;
-    height: 74px;
-    display: flex;
-    justify-content: space-between;
-    background: #101010;
-    box-sizing: border-box;
-    pointer-events: all;
-
-    .title {
-      width: 100%;
-      height: 100%;
-      font-size: 24px;
-      letter-spacing: 2px;
-      line-height: 72px;
-      padding-left: 20px;
-      box-sizing: border-box;
-      background: url("@/assets/images/common/header-bg.png") no-repeat center
-        center / 100% 100%;
-      span {
-        margin: 0 5px;
-        font-family: "PangMenZhengDao";
-      }
-    }
-    .date {
-      display: flex;
-      align-items: center;
-      width: 180px;
-    }
-  }
   .content {
     width: 100%;
     height: calc(100% - 74px);