20251128修改前端界面

src/components/TaskManagement/manage/DataManage.vue

@@ -1,24 +1,23 @@
 <template>
-  <div>
-    <div id="buttomContain">
-      <div class="search-container">
+  <div class="task-manage-page">
+    <div class="toolbar-container">
+      <div class="search-box">
         <el-input
           v-model="searchKeyword"
           placeholder="请输入关键词进行搜索"
           prefix-icon="el-icon-search"
           clearable
           size="small"
-          style="width: 450px; margin-right: 15px;"
           @input="handleSearch"
         ></el-input>
       </div>
-      <div class="button-container">
-        <el-button id="buttonStyle" size="small" @click="openBatchDownloadDialog">
-            批量数据下载
+      <div class="toolbar-actions">
+        <el-button class="forest-btn" size="medium" icon="el-icon-download" @click="openBatchDownloadDialog">
+          批量数据下载
+        </el-button>
+        <el-button class="forest-btn ghost" size="medium" icon="el-icon-copy-document" @click="ExchangeData()">
+          任务数据复制
         </el-button>
-        <el-button id="buttonStyle" size="small" @click="ExchangeData()"
-          >任务数据复制</el-button
-        >
       </div>
     </div>
     <el-table
@@ -1558,36 +1557,136 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
->>> .el-pagination button {
-  background-color: #fff !important;
+.task-manage-page {
+  padding: 24px 28px 40px;
+  background: linear-gradient(135deg, #edf7ef 0%, #fdfefe 100%);
+  min-height: calc(100vh - 120px);
+  box-sizing: border-box;
+  border-radius: 20px;
+  box-shadow: 0 14px 32px rgba(76, 175, 80, 0.12);
+  border: 1px solid rgba(129, 199, 132, 0.25);
 }
->>> .el-pager li {
-  background: #fff !important;
-}
-#buttomContain {
-  right: 25px;
-  position: absolute;
+
+.toolbar-container {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  width: calc(100% - 50px);
+  align-items: center;
+  margin-bottom: 20px;
 }
 
-.search-container {
-  /* 搜索容器靠左 */
+.search-box {
+  flex: 0 0 auto;
+  width: 450px;
 }
 
-.button-container {
-  /* 按钮容器靠右 */
+:deep(.search-box .el-input) {
+  width: 100%;
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 16px;
+  flex: 0 0 auto;
+}
+
+.forest-btn {
+  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
+  border: none;
+  color: #fff;
+  border-radius: 12px;
+  padding: 0 26px;
+  min-height: 38px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  font-size: 15px;
+  box-shadow: 0 8px 18px rgba(76, 175, 80, 0.35);
+}
+
+.forest-btn.ghost {
+  background: rgba(255, 255, 255, 0.95);
+  color: #2e7d32;
+  border: 1px solid #66bb6a;
+  box-shadow: 0 5px 14px rgba(76, 175, 80, 0.2);
+}
+
+.forest-btn:hover {
+  filter: brightness(1.05);
 }
 
 #tableStyle {
-  top: 40px;
   margin-bottom: 30px;
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid rgba(129, 199, 132, 0.3);
+  box-shadow: 0 14px 28px rgba(76, 175, 80, 0.12);
 }
+
+:deep(#tableStyle .el-table__header-wrapper th) {
+  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
+  color: #1b5e20 !important;
+  font-weight: 600 !important;
+  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
+  font-size: 14px !important;
+  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
+}
+
+:deep(#tableStyle .el-table__body-wrapper td) {
+  color: #2e4b31;
+  border-bottom: 1px solid rgba(76, 175, 80, 0.08);
+}
+
+:deep(#tableStyle .el-table__body tr:hover > td) {
+  background: rgba(129, 199, 132, 0.15) !important;
+  color: #1b5e20;
+}
+
+:deep(#tableStyle .el-table__row--striped td) {
+  background: rgba(233, 247, 235, 0.65);
+}
+
+:deep(#tableStyle .el-table__row.current-row > td) {
+  background: rgba(76, 175, 80, 0.18) !important;
+  color: #1b5e20;
+}
+
+:deep(#tableStyle .el-table__body tr) {
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+:deep(#tableStyle .el-table__body tr:hover) {
+  transform: translateY(-1px);
+  box-shadow: inset 0 2px 0 rgba(76, 175, 80, 0.15);
+}
+
+:deep(#tableStyle .el-button--text) {
+  color: #2e7d32;
+  font-weight: 500;
+  padding: 6px 12px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+:deep(#tableStyle .el-button--text:hover) {
+  color: #1b5e20;
+  background: rgba(129, 199, 132, 0.2);
+  transform: translateY(-1px);
+}
+
+>>> .el-pagination button {
+  background-color: #E8F5E9 !important;
+  color: #2E7D32 !important;
+}
+
+>>> .el-pager li {
+  background: #E8F5E9 !important;
+  color: #2E7D32 !important;
+}
+
 .text {
   font-size: 17px;
   text-align: left;
+  color: #2e7d32;
 }
 
 .clearfix:before,
@@ -1607,5 +1706,176 @@ export default {
   right: 0;
   left: 0;
   z-index: 999;
+  border-radius: 16px;
+  border: 1px solid rgba(129, 199, 132, 0.3);
+  box-shadow: 0 12px 28px rgba(76, 175, 80, 0.15);
+}
+
+:deep(.box-card .el-card__header) {
+  background: linear-gradient(90deg, #e0f0e2, #f2fbf3);
+  color: #1b5e20;
+  border-bottom: 1px solid rgba(129, 199, 132, 0.25);
+  border-radius: 16px 16px 0 0;
+}
+
+.taskDialog :deep(.el-dialog) {
+  border-radius: 18px;
+  border: 1px solid rgba(129, 199, 132, 0.35);
+  box-shadow: 0 12px 30px rgba(76, 175, 80, 0.18);
+}
+
+.taskDialog :deep(.el-dialog__header) {
+  background: linear-gradient(135deg, #4caf50, #2e7d32);
+  color: #fff;
+  border-radius: 18px 18px 0 0;
+}
+
+.taskDialog :deep(.el-form-item__label) {
+  color: #1b5e20;
+  font-weight: 600;
+}
+
+.taskDialog :deep(.el-button--primary) {
+  background-color: #4caf50 !important;
+  border-color: #4caf50 !important;
+}
+
+.taskDialog :deep(.el-button--primary:hover) {
+  background-color: #66bb6a !important;
+  border-color: #66bb6a !important;
+}
+</style>
+
+<style>
+/* 全局表格样式覆盖 - 确保主题样式生效 */
+#tableStyle.el-table {
+  border: 1px solid rgba(129, 199, 132, 0.3) !important;
+  border-radius: 16px !important;
+  overflow: hidden !important;
+}
+
+#tableStyle.el-table.el-table--border {
+  border: 1px solid rgba(129, 199, 132, 0.3) !important;
+}
+
+#tableStyle.el-table.el-table--border::after,
+#tableStyle.el-table.el-table--border::before {
+  background-color: rgba(129, 199, 132, 0.3) !important;
+}
+
+#tableStyle.el-table.el-table--border th {
+  border-right: 1px solid rgba(129, 199, 132, 0.25) !important;
+}
+
+#tableStyle.el-table.el-table--border th:last-child {
+  border-right: none !important;
+}
+
+#tableStyle.el-table.el-table--border td {
+  border-right: 1px solid rgba(76, 175, 80, 0.08) !important;
+}
+
+#tableStyle.el-table.el-table--border td:last-child {
+  border-right: none !important;
+}
+
+#tableStyle.el-table.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: rgba(233, 247, 235, 0.65) !important;
+}
+
+#tableStyle.el-table.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
+  background: rgba(200, 230, 201, 0.5) !important;
+}
+
+/* 表头样式全局覆盖 */
+#tableStyle.el-table .el-table__header-wrapper th {
+  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
+  color: #1b5e20 !important;
+  font-weight: 600 !important;
+  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
+  font-size: 14px !important;
+  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
+  padding: 12px 0 !important;
+  text-align: center !important;
+}
+
+#tableStyle.el-table .el-table__header-wrapper thead th {
+  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
+  color: #1b5e20 !important;
+}
+
+#tableStyle.el-table .el-table__header th {
+  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
+  color: #1b5e20 !important;
+  font-weight: 600 !important;
+  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
+}
+
+#tableStyle.el-table .el-table__header th .cell {
+  color: #1b5e20 !important;
+  font-weight: 600 !important;
+  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
+}
+
+/* 覆盖自定义表头类名 sinCl */
+#tableStyle.el-table .el-table__header th.sinCl {
+  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
+  color: #1b5e20 !important;
+  font-weight: 600 !important;
+  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
+  font-size: 14px !important;
+  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
+}
+
+#tableStyle.el-table .el-table__header th.sinCl .cell {
+  color: #1b5e20 !important;
+  font-weight: 600 !important;
+}
+
+/* 滚动条全局样式 */
+#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper {
+  scrollbar-width: thin !important;
+  scrollbar-color: rgba(76, 175, 80, 0.4) rgba(232, 245, 233, 0.5) !important;
+}
+
+#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
+  height: 8px !important;
+}
+
+#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
+  background: rgba(232, 245, 233, 0.5) !important;
+  border-radius: 4px !important;
+}
+
+#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background: linear-gradient(90deg, #81c784, #66bb6a) !important;
+  border-radius: 4px !important;
+}
+
+#tableStyle.el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(90deg, #66bb6a, #4caf50) !important;
+}
+
+#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper {
+  scrollbar-width: thin !important;
+  scrollbar-color: rgba(76, 175, 80, 0.4) rgba(232, 245, 233, 0.5) !important;
+}
+
+#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
+  width: 8px !important;
+}
+
+#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
+  background: rgba(232, 245, 233, 0.5) !important;
+  border-radius: 4px !important;
+}
+
+#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #81c784, #66bb6a) !important;
+  border-radius: 4px !important;
+}
+
+#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #66bb6a, #4caf50) !important;
 }
 </style>