aa

src/assets/style/main.css

@@ -9,6 +9,10 @@
   --bg-total-card: transparent;
   --bg-table:#f5f7fa;
   --bg-tab:#e4e7ed;
+  --bg-flow-card:#9ecdf2;
+  --color-skeleton: #cfd2f4;
+  --bg-flow-tab: transparent;
+  --bg-flow-item: #5e98f8;
   --tab-text: #303133;
   --text-primary: #303133;
   --text-primary-down: #dcdfe6;
@@ -42,7 +46,31 @@
     46,
     0.92
   );
+  --bg-flow-card:conic-gradient(
+    transparent,
+    #02409b,
+    #00d2ff,
+    #7c3aed,
+    #db2777,
+    transparent 100%
+  );
+  --bg-flow-tab: linear-gradient(
+    360deg,
+    #003be0 0%,
+    rgba(10, 65, 227, 0.6) 10%,
+    #001c71 40%,
+    #000c33 80%
+  ) !important;
+  --bg-flow-item: linear-gradient(
+    to right,
+    #5887f8 0%,
+    #69b5f8 30%,
+    #fff 50%,
+    #69b5f8 70%,
+    #5887f8 100%
+  );
   --bg-table:#091126;
+  --color-skeleton:#0a193d;
   --bg-tab:#070e24;
   --tab-text: rgba(220, 229, 255, 0.78);
   --text-primary: #eaf1ff;

src/views/flow/index.vue

@@ -38,13 +38,13 @@
                 <div class="">
                   <img
                     v-if="item.title === '我的待办'"
-                    src="../../assets//images/todo.png"
+                    :src="themeStore.theme === 'light' ? todo_white : todo"
                     alt=""
                     class="h-15 w-15"
                   />
                   <img
                     v-if="item.title === '已办事项'"
-                    src="../../assets//images/done.png"
+                    :src="themeStore.theme === 'light' ? done_white : done"
                     alt=""
                     class="h-15 w-15"
                   />
@@ -63,7 +63,7 @@
                           width: 60%;
                           height: 32px;
                           border-radius: 50px;
-                          background: #0a193d;
+                          background: var(--color-skeleton);
                         "
                       />
                     </template>
@@ -223,6 +223,12 @@ import { computed, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
 import { Icon } from "@iconify/vue";
 import banner from "@/assets/images/flwoBanner.png";
 import banner_white from "@/assets/images/flwoBanner_white.png";
+
+import todo from "../../assets//images/todo.png";
+import todo_white from "../../assets//images/todo_white.png";
+
+import done from "../../assets//images/done.png";
+import done_white from "../../assets//images/done_white.png";
 import {
   getFlows,
   ssoLogin,
@@ -973,20 +979,9 @@ onBeforeUnmount(() => {
 }
 
 .el-tab-item.is-active {
-  color: #fff !important;
-  /* background: linear-gradient(
-    180deg,
-    rgba(92, 103, 238, 0.32),
-    rgba(36, 53, 118, 0.3)
-  ) !important; */
+  color: var(--tab-text) !important;
 
-  background: linear-gradient(
-    360deg,
-    #003be0 0%,
-    rgba(10, 65, 227, 0.6) 10%,
-    #001c71 40%,
-    #000c33 80%
-  ) !important;
+  background: var(--bg-flow-tab);
 
   padding-bottom: 22px;
   padding-top: 22px;
@@ -1004,14 +999,7 @@ onBeforeUnmount(() => {
   height: 2px;
   transform: translateX(-50%);
   border-radius: 999px;
-  background: linear-gradient(
-    to right,
-    #5887f8 0%,
-    #69b5f8 30%,
-    #fff 50%,
-    #69b5f8 70%,
-    #5887f8 100%
-  );
+  background: var(--bg-flow-item);
   box-shadow: 0 0 12px rgba(112, 120, 255, 0.95);
 }
 
@@ -1335,15 +1323,8 @@ onBeforeUnmount(() => {
   width: 200%;
   height: 200%;
   /* 彩色圆锥渐变：包含蓝、紫、粉、青等霓虹色 */
-  background: conic-gradient(
-    transparent,
-    #02409b,
-    #00d2ff,
-    #7c3aed,
-    #db2777,
-    transparent 30%
-  );
-  animation: rotate-border 4s linear infinite; /* 旋转动画 */
+  background: var(--bg-flow-card);
+  /* animation: rotate-border 4s linear infinite; */
   z-index: -2;
 }
 
@@ -1363,11 +1344,6 @@ onBeforeUnmount(() => {
   box-shadow: 0 0 20px rgba(2, 64, 155, 0.4); /* 整体外发光 */
 }
 
-/* 悬停时加速旋转或改变亮度（可选） */
-.total-card:hover::before {
-  filter: brightness(1.2); /* 悬停时更亮 */
-}
-
 /* 定义旋转动画 */
 @keyframes rotate-border {
   0% {
@@ -1405,7 +1381,7 @@ onBeforeUnmount(() => {
 
 .card-title {
   font-size: 14px;
-  color: #a7a0b1; /* 调整为浅色以适配深色背景 */
+  color: var(--text-secondary); /* 调整为浅色以适配深色背景 */
   margin-bottom: 4px;
 }
 
@@ -1537,7 +1513,7 @@ onBeforeUnmount(() => {
 .tabs-container {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #192754;
+  /* border-bottom: 1px solid #192754; */
   padding-left: 0;
   overflow-x: auto;
   scroll-behavior: smooth;