底部样式更改&计划树图标更改

frontend/src/layouts/components/Footer/index.vue

@@ -7,9 +7,15 @@
         <arrow-down />
       </el-icon>
     </span> -->
-      <el-button type="primary">
+      <!-- <el-button type="primary"> -->
-        {{ title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      <div class="change_mode">
-      </el-button>
+        {{ title }}
+        <el-icon class="el-icon--right change_mode_down"
+          ><arrow-down
+        /></el-icon>
+        <el-icon class="el-icon--right change_mode_up"><arrow-up /></el-icon>
+      </div>
+      <!-- </el-button> -->
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item @click="title = '模拟式模式'"
@@ -24,7 +30,11 @@
         </el-dropdown-menu>
       </template>
     </el-dropdown>
-    <p> <a href="http://www.shining-electric.com/" target="_blank"> 2024 © 南京灿能电力自动化股份有限公司 </a></p>
+    <p>
+      <a href="http://www.shining-electric.com/" target="_blank">
+        2024 © 南京灿能电力自动化股份有限公司
+      </a>
+    </p>
   </div>
 </template>
 <script lang="ts" setup>
@@ -33,14 +43,49 @@ const title = ref("模拟式模块");
 </script>
 <style scoped lang="scss">
 @import "./index.scss";
-.footer{
+.footer {
   position: relative;
-  p{
+  background-color: var(--el-color-primary);
+  // .el-button:hover {
+  //   background-color: var(--el-color-primary) !important;
+  //   border: none !important;
+  //   outline: none !important;
+  // }
+  .change_mode {
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100%;
+    width: auto;
+    font-size: 14px;
+    .change_mode_down {
+      display: block;
+    }
+    .change_mode_up {
+      display: none;
+    }
+  }
+  .change_mode:hover {
+    .change_mode_down {
+      display: none;
+    }
+    .change_mode_up {
+      display: block;
+    }
+  }
+  .el-dropdown {
+    z-index: 1001;
+  }
+  p {
     position: absolute;
     width: 100%;
     height: 100%;
     text-align: center;
     line-height: 40px;
+    a {
+      color: #fff;
+    }
   }
 }
 </style>

frontend/src/layouts/components/Main/index.scss

@@ -1,6 +1,6 @@
 .el-main {
   box-sizing: border-box;
-  padding: 10px 12px;
+  padding: 10px 12px;//主体padding
   overflow-x: hidden;
   background-color: var(--el-bg-color-page);
 }

frontend/src/layouts/index.vue

@@ -30,5 +30,8 @@ const layout = computed(() => globalStore.layout);
 <style scoped lang="scss">
 .layout {
   min-width: 600px;
+  position: fixed;
+  left: 0;
+  top: 0;
 }
 </style>

frontend/src/styles/common.scss

@@ -74,9 +74,12 @@
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
+  background-color: var(--el-color-primary);
 }
+/* 滚动条实际可拖动部分的颜色 */
 ::-webkit-scrollbar-thumb {
-  background-color: var(--el-border-color-darker);
+  // background-color: var(--el-border-color-darker);
+  background-color: var(--el-color-primary);
   border-radius: 20px;
 }
 

frontend/src/views/home/components/tree.vue

@@ -5,7 +5,7 @@
         placeholder="请输入计划名称"
         v-model="searchForm.planName"
       ></el-input>
-      <Menu style="width: 26px;height: 26px; margin-left: 8px;cursor: pointer;" @click.stop="detail({})" />
+      <Menu style="width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)" @click.stop="detail({})" />
     </div>
     <div class="tree_container">
       <el-tree
@@ -19,8 +19,8 @@
         @node-click="handleNodeClick"
       >
         <template #default="{ node, data }">
-          <span class="custom-tree-node">
+          <span class="custom-tree-node" style="display: flex;align-items: center;">
-            <Platform v-if="!data.pid" style="width:14px;height: 12px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/>
+            <Platform v-if="!data.pid" style="width:18px;height: 18px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/>
             <span>{{ node.label }}</span>
             <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
           </span>

frontend/src/views/home/tabs/dashboard.vue

@@ -6,7 +6,6 @@
     </div>
     <!-- <span class="new_span">测试scss颜色</span> -->
     <div class="right_container">
-
       <!-- 功能选择 -->
       <div class="container_function">
         <!-- <div class="function_title"><p>功能选择</p></div> -->
@@ -74,7 +73,6 @@
           ></pie>
         </div>
       </div>
-
       <!-- 筛选条件 -->
       <div class="container_title">
         <el-form :model="form" label-width="80px" :inline="true">