feat:封装tool组件

src/components/toolList.vue

@@ -1,16 +1,27 @@
 <template>
-  <div :class="['tool-list','tool-'+direction]">
-    <div class="tool-item">气象预警</div>
+  <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>
 </template>
 
 <script setup>
+import {ref} from 'vue'
 const props = defineProps({
-    direction:{
-        type:String,
-        defalut:'left'
-    },
-})
+  direction: {
+    type: String,
+    defalut: "left",
+  },
+  list: {
+    type: Array,
+    defalut: [],
+  },
+});
+
+const active = ref('home')
+const handleActive = (i,v) =>{
+    
+}
 </script>
 
 <style lang="scss" scoped>
@@ -22,10 +33,14 @@ const props = defineProps({
   border-left: none;
   box-sizing: border-box;
   border-radius: 4px;
-  &.tool-left{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  position: relative;
+  &.tool-left {
     margin-right: 10px;
   }
-  &.tool-right{
+  &.tool-right {
     margin-left: 10px;
   }
   .tool-item {
@@ -34,6 +49,26 @@ const props = defineProps({
     text-orientation: upright; /* 保持文字直立，而不是旋转 */
     white-space: nowrap; /* 防止文本换行 */
     line-height: 54px;
+    letter-spacing: 6px;
+    color: #B9B9B9;
+    font-family: "PangMenZhengDao";
+    cursor: pointer;
+    &.text{
+        writing-mode:horizontal-tb;
+        position: absolute;
+        top: 0;
+        border-radius: 4px 4px 0 0;
+        height: 40px;
+        line-height: 40px;
+        letter-spacing: 1px;
+        width: 100%;
+        text-align: center;
+        font-size: 16px;
+    }
+    &.active{
+        background: #101010;
+        color: #2B85E4;
+    }
   }
 }
 </style>

src/views/Home.vue

@@ -17,7 +17,7 @@
     <div class="content">
       <!-- <div class="top"></div> -->
       <div class="left">
-        <tool-list direction="left"></tool-list>
+        <tool-list direction="left" :list="leftToolList"></tool-list>
         <div class="chart-list">
           <div class="chart-item">
             <chart-box name="气象预警"></chart-box>
@@ -37,7 +37,7 @@
         <div class="list">
           <chart-box name="农事列表" arrow="arrow-left"></chart-box>
         </div>
-        <tool-list direction="right"></tool-list>
+        <tool-list direction="right" :list="rightToolList"></tool-list>
       </div>
     </div>
   </div>
@@ -46,6 +46,37 @@
 <script setup>
 import chartBox from "@/components/chartBox.vue";
 import toolList from "@/components/toolList.vue";
+
+const leftToolList = [
+  {
+    title:'首页',
+    name:'home',
+  },
+  {
+    title:'气象预警'
+  },
+  {
+    title:'物候调节'
+  },
+  {
+    title:'病虫测报'
+  },
+  {
+    title:'营养评估'
+  }
+]
+
+const rightToolList = [
+  {
+    title:'农事列表'
+  },
+  {
+    title:'新增农事'
+  },
+  {
+    title:'复核对比'
+  }
+]
 </script>
 
 <style lang="scss" scoped>