20251128修改前端界面

src/components/TaskManagement/manage/TPManage.vue

@@ -2,10 +2,14 @@
   <div id="TPcontainer">
     <el-container style="height: 100%">
       <el-aside class="MyAside">
+        <div class="aside-header">
+          <h2>任务中心</h2>
+          <p>Task Management Console</p>
+        </div>
         <el-menu
-          background-color="#F7F8F1"
-          text-color="rgb(38,70,114)"
-          active-text-color="#3A87F9"
+          background-color="#E8F5E9"
+          text-color="#2E7D32"
+          active-text-color="#1B5E20"
           :default-active="this.$route.path"
           router
         >
@@ -29,7 +33,7 @@
       </el-aside>
       <el-container>
         <el-main class="tpcontent">
-          <router-view class="view" style="padding: 20px"></router-view>
+          <router-view class="view"></router-view>
         </el-main>
       </el-container>
     </el-container>
@@ -46,33 +50,117 @@ export default {
 <style scoped>
 .MyAside {
   width: 255px !important;
-  opacity: 0.9;
-  background-color: #f7f8f1;
-  color: #333;
+  opacity: 0.95;
+  background: linear-gradient(180deg, #e8f5e9 0%, #d0ebd4 100%);
+  color: #1b5e20;
   text-align: left;
-  line-height: 200px;
+  line-height: normal;
   z-index: 10;
   bottom: 0;
   position: absolute;
   top: 0;
+  border-right: 1px solid rgba(76, 175, 80, 0.25);
+  box-shadow: 4px 0 18px rgba(52, 133, 78, 0.14);
+  padding: 24px 12px;
+  display: flex;
+  flex-direction: column;
+}
+.aside-header {
+  text-align: left;
+  padding: 0 12px 16px 12px;
+  border-bottom: 1px solid rgba(76, 175, 80, 0.2);
+  margin-bottom: 12px;
+}
+:deep(.MyAside .el-menu) {
+  background: transparent !important;
+  border-right: none !important;
+  flex: 1;
+  overflow-y: auto;
+}
+:deep(.MyAside .el-menu::-webkit-scrollbar) {
+  width: 6px;
+}
+:deep(.MyAside .el-menu::-webkit-scrollbar-thumb) {
+  background: rgba(76, 175, 80, 0.3);
+  border-radius: 3px;
+}
+:deep(.MyAside .el-menu::-webkit-scrollbar-track) {
+  background: rgba(232, 245, 233, 0.6);
+}
+.aside-header h2 {
+  font-size: 20px;
+  color: #1b5e20;
+  margin: 0;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.aside-header p {
+  margin: 6px 0 0 0;
+  font-size: 12px;
+  color: #4f7e50;
+  letter-spacing: 0.5px;
 }
 .tpcontent {
   position: absolute;
   left: 255px;
   right: 0px;
   width: calc(100% - 255px);
-  padding: 0px;
-  background: #fff;
+  padding: 8px;
+  background: linear-gradient(135deg, #edf7ef 0%, #fdfefe 100%);
+}
+.tpcontent .view {
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: 20px;
+  box-shadow: 0 12px 28px rgba(76, 175, 80, 0.12);
+  border: 1px solid rgba(129, 199, 132, 0.25);
+  min-height: calc(100vh - 120px);
+  padding: 24px;
+  box-sizing: border-box;
+  display: block;
 }
 .MyAside .usermp {
   padding-left: 10px !important;
 }
 
+:deep(.MyAside .el-menu) {
+  background: transparent !important;
+  border-right: none !important;
+}
+
+:deep(.MyAside .el-menu-item),
+:deep(.MyAside .el-submenu__title) {
+  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
+  font-weight: 600;
+  color: #2e7d32 !important;
+  letter-spacing: 0.5px;
+  padding: 14px 20px !important;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+:deep(.MyAside .el-menu-item:hover),
+:deep(.MyAside .el-submenu__title:hover) {
+  background: rgba(129, 199, 132, 0.25) !important;
+  color: #1b5e20 !important;
+}
+
+:deep(.MyAside .el-menu-item.is-active) {
+  background: linear-gradient(90deg, rgba(76, 175, 80, 0.2), rgba(129, 199, 132, 0.3)) !important;
+  color: #1b5e20 !important;
+  border-radius: 12px;
+  margin: 4px 12px;
+}
+
+:deep(.MyAside .el-icon-folder-opened),
+:deep(.MyAside .el-icon-user-solid) {
+  color: #43a047;
+}
+
 @media screen and (min-width: 840px) and (max-width: 1401px) {
   .tpcontent {
     position: absolute;
     left: 255px;
     width: calc(100% - 255px);
+    padding: 24px;
   }
 }
 
@@ -84,6 +172,7 @@ export default {
     position: absolute;
     left: 160px;
     width: calc(100% - 160px);
+    padding: 20px;
   }
 }
 @media all and (max-width: 420px) {
@@ -94,6 +183,7 @@ export default {
     position: absolute;
     left: 120px;
     width: calc(100% - 120px);
+    padding: 16px 12px;
   }
 }
 </style>