aa

src/assets/style/main.css

@@ -6,11 +6,13 @@
   --bg-primary: #ffffff;
   --bg-secondary: #f5f7fa;
   --bg-card: #ffffff;
+  --bg-table:#f5f7fa;
   --text-primary: #303133;
   --text-secondary: #606266;
   --text-tertiary: #909399;
   --border-color: #dcdfe6;
   
+  
   /* 品牌色 */
   --primary-color: #02409b;
   --primary-hover: #02307a;
@@ -29,6 +31,7 @@
   --bg-primary: #0b0f2e; /* 对应您代码中的 rgb(11, 15, 46) */
   --bg-secondary: #131928;
   --bg-card: #131928;
+  --bg-table:#091126;
   --text-primary: #eaf1ff;
   --text-secondary: #c7ced9;
   --text-tertiary: #869ac2;

src/views/drive/index.vue

@@ -186,15 +186,87 @@ const openDrive = async (option: DriveCard) => {
 
 <style scoped>
 .drive-page {
-  min-height: 100vh;
+  --portal-text: #17345f;
+  --portal-text-muted: #5f6f83;
+  --portal-text-soft: #7f8fa6;
+  --portal-title: #163867;
+  --portal-subtitle: rgba(61, 92, 135, 0.86);
+  --portal-line: rgba(126, 156, 201, 0.24);
+  --portal-card: rgba(255, 255, 255, 0.82);
+  --portal-card-2: rgba(248, 251, 255, 0.94);
+  --portal-card-3: rgba(240, 246, 255, 0.88);
+  --portal-card-4: rgba(231, 239, 251, 0.92);
+  --portal-nav-bg: rgba(255, 255, 255, 0.72);
+  --portal-nav-hover: rgba(219, 232, 252, 0.8);
+  --portal-input-bg: rgba(255, 255, 255, 0.7);
+  --portal-input-hover: rgba(255, 255, 255, 0.92);
+  --portal-shadow: 0 18px 40px rgba(23, 52, 95, 0.12);
+  --portal-shadow-strong: 0 24px 60px rgba(23, 52, 95, 0.16);
+  --portal-accent: #245edb;
+  --portal-accent-2: #4e8cff;
+  --portal-accent-soft: rgba(36, 94, 219, 0.14);
+  --portal-todo-bg: rgba(242, 247, 255, 0.94);
+  --portal-todo-hover: rgba(228, 238, 252, 0.95);
+  --portal-number-todo: #e15a5a;
+  --portal-number-done: #2da04d;
+  color: var(--portal-text);
   background:
-    radial-gradient(circle at 50% 0%, rgba(30, 74, 255, 0.18), transparent 28%),
     radial-gradient(
-      circle at 82% 18%,
-      rgba(151, 66, 255, 0.16),
-      transparent 18%
+      circle at 18% 12%,
+      rgba(83, 126, 255, 0.14),
+      transparent 22%
     ),
-    linear-gradient(180deg, #000613 0%, #000613 100%);
+    radial-gradient(
+      circle at 82% 20%,
+      rgba(71, 148, 255, 0.14),
+      transparent 20%
+    ),
+    radial-gradient(
+      circle at 50% 100%,
+      rgba(97, 142, 247, 0.12),
+      transparent 28%
+    ),
+    linear-gradient(180deg, #eef3f9 0%, #f7faff 46%, #eef3f9 100%);
+}
+
+:global([data-theme="dark"] .drive-page) {
+  --portal-text: #eaf1ff;
+  --portal-text-muted: rgba(234, 241, 255, 0.95);
+  --portal-text-soft: #8a9ab0;
+  --portal-title: #f4f7ff;
+  --portal-subtitle: rgba(188, 205, 255, 0.82);
+  --portal-line: rgba(97, 129, 206, 0.28);
+  --portal-card: rgba(10, 19, 43, 0.8);
+  --portal-card-2: rgba(12, 24, 52, 0.92);
+  --portal-card-3: rgba(17, 25, 48, 0.8);
+  --portal-card-4: rgba(15, 24, 45, 0.82);
+  --portal-nav-bg: rgba(10, 19, 43, 0.8);
+  --portal-nav-hover: rgba(28, 40, 72, 0.8);
+  --portal-input-bg: rgba(255, 255, 255, 0.08);
+  --portal-input-hover: rgba(255, 255, 255, 0.12);
+  --portal-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
+  --portal-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.38);
+  --portal-accent: #6e7dff;
+  --portal-accent-2: #8d4dff;
+  --portal-accent-soft: rgba(110, 125, 255, 0.16);
+  --portal-todo-bg: #070e20;
+  --portal-todo-hover: rgba(28, 40, 72, 0.8);
+  --portal-number-todo: #f56c6c;
+  --portal-number-done: #ffffff;
+  color: var(--portal-text);
+  background:
+    radial-gradient(
+      circle at 18% 12%,
+      rgba(79, 82, 221, 0.34),
+      transparent 22%
+    ),
+    radial-gradient(circle at 82% 20%, rgba(28, 95, 255, 0.2), transparent 20%),
+    radial-gradient(
+      circle at 50% 100%,
+      rgba(103, 46, 255, 0.16),
+      transparent 28%
+    ),
+    linear-gradient(180deg, #040814 0%, #060d1d 46%, #040814 100%);
 }
 
 .drive-main {
@@ -288,6 +360,7 @@ const openDrive = async (option: DriveCard) => {
   border-radius: 10px;
   background: #070e24;
   box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
 }
 
 .drive-tab {
@@ -358,6 +431,7 @@ const openDrive = async (option: DriveCard) => {
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: transparent !important;
 
   /* width: 100%; */
   height: 140px;
@@ -377,12 +451,13 @@ const openDrive = async (option: DriveCard) => {
 
   overflow: hidden;
   /* margin-top: -50px; */
+  border-radius: 20px;
 }
 
 .drive-card:hover {
-  transform: translateY(-4px);
+  transform: scale(1.02);
   border-color: rgba(115, 145, 255, 0.42);
-  box-shadow: 0 28px 54px rgba(0, 0, 0, 0.42);
+  /* box-shadow: 0 28px 54px rgba(0, 0, 0, 0.42); */
 }
 
 /* 补充缺失的内容样式，确保文字能显示在背景图上 */

src/views/flow/oaDoneList.vue

@@ -3,10 +3,8 @@
     <Header />
 
     <div class="content-wrapper mt-15 max-w-[1200px] mx-auto">
-      <div
-        class="flex gap-5 items-center mb-4 bg-[#091126] py-2 pl-4 rounded-sm"
-      >
-        <p class="flex items-center text-white/90">
+      <div class="nav flex gap-5 items-center mb-4 py-2 pl-4 rounded-sm">
+        <p class="flex items-center text-var(--text-primary)">
           <Icon
             icon="mynaui:arrow-up-down"
             class="icon pr-1 h-6 w-6"
@@ -38,13 +36,10 @@
           element-loading-text="加载中..."
           :empty-text="loading ? '' : '暂无数据'"
           :header-cell-style="{
-            backgroundColor: '#091126',
-            color: '#b8bfd0',
+            backgroundColor: 'var(--bg-table)',
+            color: 'var(--text-primary)',
             fontWeight: '400',
           }"
-          :cell-style="{
-            color: 'black',
-          }"
         >
           <el-table-column
             type="index"
@@ -271,6 +266,94 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+.todo-list {
+  --portal-text: #17345f;
+  --portal-text-muted: #5f6f83;
+  --portal-text-soft: #7f8fa6;
+  --portal-title: #163867;
+  --portal-subtitle: rgba(61, 92, 135, 0.86);
+  --portal-line: rgba(126, 156, 201, 0.24);
+  --portal-card: rgba(255, 255, 255, 0.82);
+  --portal-card-2: rgba(248, 251, 255, 0.94);
+  --portal-card-3: rgba(240, 246, 255, 0.88);
+  --portal-card-4: rgba(231, 239, 251, 0.92);
+  --portal-nav-bg: rgba(255, 255, 255, 0.72);
+  --portal-nav-hover: rgba(219, 232, 252, 0.8);
+  --portal-input-bg: rgba(255, 255, 255, 0.7);
+  --portal-input-hover: rgba(255, 255, 255, 0.92);
+  --portal-shadow: 0 18px 40px rgba(23, 52, 95, 0.12);
+  --portal-shadow-strong: 0 24px 60px rgba(23, 52, 95, 0.16);
+  --portal-accent: #245edb;
+  --portal-accent-2: #4e8cff;
+  --portal-accent-soft: rgba(36, 94, 219, 0.14);
+  --portal-todo-bg: rgba(242, 247, 255, 0.94);
+  --portal-todo-hover: rgba(228, 238, 252, 0.95);
+  --portal-number-todo: #e15a5a;
+  --portal-number-done: #2da04d;
+  color: var(--portal-text);
+  background:
+    radial-gradient(
+      circle at 18% 12%,
+      rgba(83, 126, 255, 0.14),
+      transparent 22%
+    ),
+    radial-gradient(
+      circle at 82% 20%,
+      rgba(71, 148, 255, 0.14),
+      transparent 20%
+    ),
+    radial-gradient(
+      circle at 50% 100%,
+      rgba(97, 142, 247, 0.12),
+      transparent 28%
+    ),
+    linear-gradient(180deg, #eef3f9 0%, #f7faff 46%, #eef3f9 100%);
+}
+
+:global([data-theme="dark"] .todo-list) {
+  --portal-text: #eaf1ff;
+  --portal-text-muted: rgba(234, 241, 255, 0.95);
+  --portal-text-soft: #8a9ab0;
+  --portal-title: #f4f7ff;
+  --portal-subtitle: rgba(188, 205, 255, 0.82);
+  --portal-line: rgba(97, 129, 206, 0.28);
+  --portal-card: rgba(10, 19, 43, 0.8);
+  --portal-card-2: rgba(12, 24, 52, 0.92);
+  --portal-card-3: rgba(17, 25, 48, 0.8);
+  --portal-card-4: rgba(15, 24, 45, 0.82);
+  --portal-nav-bg: rgba(10, 19, 43, 0.8);
+  --portal-nav-hover: rgba(28, 40, 72, 0.8);
+  --portal-input-bg: rgba(255, 255, 255, 0.08);
+  --portal-input-hover: rgba(255, 255, 255, 0.12);
+  --portal-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
+  --portal-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.38);
+  --portal-accent: #6e7dff;
+  --portal-accent-2: #8d4dff;
+  --portal-accent-soft: rgba(110, 125, 255, 0.16);
+  --portal-todo-bg: #070e20;
+  --portal-todo-hover: rgba(28, 40, 72, 0.8);
+  --portal-number-todo: #f56c6c;
+  --portal-number-done: #ffffff;
+  --bg-table: #091126;
+  color: var(--portal-text);
+  background:
+    radial-gradient(
+      circle at 18% 12%,
+      rgba(79, 82, 221, 0.34),
+      transparent 22%
+    ),
+    radial-gradient(circle at 82% 20%, rgba(28, 95, 255, 0.2), transparent 20%),
+    radial-gradient(
+      circle at 50% 100%,
+      rgba(103, 46, 255, 0.16),
+      transparent 28%
+    ),
+    linear-gradient(180deg, #040814 0%, #060d1d 46%, #040814 100%);
+}
+
+.nav {
+  background-color: var(--bg-table);
+}
 .todo-list {
   min-height: 100vh;
   display: flex;
@@ -336,44 +419,44 @@ onMounted(async () => {
 }
 
 :deep(.el-table) {
-  background-color: #091126 !important;
-  color: white !important;
+  background-color: var(--bg-table) !important;
+  color: var(--text-primary) !important;
 }
 
 :deep(.table-wrapper) {
-  background: #091126 !important;
+  background: var(--bg-table) !important;
 }
 
 :deep(.el-table__header-wrapper thead) {
-  background: #091126 !important;
-  color: white !important;
+  background: var(--bg-table) !important;
+  color: var(--text-primary) !important;
 }
 
 :deep(.el-table__header-wrapper .el-table__header) {
   border-bottom: none;
 }
 :deep(.el-table__inner-wrapper) {
-  background: #091126 !important;
-  color: white !important;
+  background: var(--bg-table) !important;
+  color: var(--text-primary) !important;
 }
 :deep(.el-table__body-wrapper .el-table__row) {
-  background: #091126;
-  color: white !important;
+  background: var(--bg-table);
+  color: var(--text-primary) !important;
 }
 
 :deep(.el-table__body-wrapper .el-table__row .hover-row) {
-  background: #091126 !important;
-  color: white !important;
+  background: var(--bg-table) !important;
+  color: var(--text-primary) !important;
 }
 
 :deep(.el-table__body-wrapper .el-table__row .el-table__cell) {
-  background: #091126 !important;
-  color: white !important;
-  border-bottom: 1px solid #313849;
+  background: var(--bg-table) !important;
+  color: var(--text-primary) !important;
+  border-bottom: 1px solid var(--text-tertiary);
 }
 
 :deep(.el-loading-mask) {
-  background-color: rgba(9, 17, 38, 0.8) !important; /* 半透明深色遮罩 */
+  background-color: var(--bg-table) !important; /* 半透明深色遮罩 */
 }
 
 :deep(.el-table__body-wrapper .el-table__row .el-table__cell) {
@@ -381,12 +464,12 @@ onMounted(async () => {
 }
 
 :deep(.el-pagination is-background) {
-  background: #091126 !important;
+  background: var(--bg-table) !important;
 }
 
 :deep(.el-pagination .el-pager li) {
-  background: #091126 !important;
-  color: white !important;
+  background: var(--bg-table) !important;
+  color: var(--text-tertiary) !important;
 }
 
 :deep(.el-pagination .el-pager li.active) {
@@ -394,7 +477,7 @@ onMounted(async () => {
 }
 
 :deep(.el-select .el-select__wrapper) {
-  background: #091126 !important;
+  background: var(--bg-table) !important;
   border: 1px solid #313849 !important;
   outline: none !important;
 }
@@ -405,34 +488,34 @@ onMounted(async () => {
 }
 
 :deep(.btn-next) {
-  background: #091126 !important;
-  color: white !important;
+  background: var(--bg-table) !important;
+  color: var(--text-tertiary) !important;
 }
 
 :deep(.btn-prev) {
-  background: #091126 !important;
-  color: white !important;
+  background: var(--bg-table) !important;
+  color: var(--text-tertiary) !important;
 }
 
 /* 下拉菜单弹出层的背景 */
 :deep(.el-select-dropdown) {
-  background-color: #091126 !important;
+  background-color: var(--bg-table) !important;
   border: 1px solid #313849 !important;
 }
 
 /* 下拉菜单项 */
 :deep(.el-select-dropdown__item) {
-  color: #fff !important;
+  color: var(--bg-table) !important;
 }
 
 :deep(.el-select-dropdown__item.hover),
 :deep(.el-select-dropdown__item:hover) {
-  background-color: #111a35 !important; /* 悬停深色背景 */
+  background-color: var(--bg-table) !important; /* 悬停深色背景 */
 }
 
 /* 关键：修复下拉选择框 (PageSize) 的白色边框/背景 */
 :deep(.el-pagination .el-select .el-select__wrapper) {
-  background-color: #091126 !important;
+  background-color: var(--bg-table) !important;
   box-shadow: none !important; /* 去掉可能的阴影 */
   border: 1px solid #313849 !important; /* 统一边框颜色 */
 }
@@ -446,12 +529,12 @@ onMounted(async () => {
 
 /* 通用输入框边框修复 (如果其他地方也有) */
 :deep(.el-input__wrapper) {
-  background-color: #091126 !important;
+  background-color: var(--bg-table) !important;
   box-shadow: none !important; /* 去掉默认的白色/灰色阴影边框 */
   border: 1px solid #313849 !important;
 }
 
 :deep(.el-input__inner) {
-  color: #fff !important;
+  color: var(--bg-primary) !important;
 }
 </style>