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

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

@@ -7,9 +7,15 @@
         <arrow-down />
       </el-icon>
     </span> -->
-      <el-button type="primary">
-        {{ title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
-      </el-button>
+      <!-- <el-button type="primary"> -->
+      <div class="change_mode">
+        {{ 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;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 40px;
+    a {
+      color: #fff;
+    }
   }
 }
 </style>