From b266b0da3eebf26b52c9f78cf7d41c3f2b42bb6a Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 5 Jan 2026 22:28:54 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E7=BA=A7=E8=81=94?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/CreateTask.vue | 59 +++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/frontend/src/views/CreateTask.vue b/frontend/src/views/CreateTask.vue
index 444721e..5618cb8 100644
--- a/frontend/src/views/CreateTask.vue
+++ b/frontend/src/views/CreateTask.vue
@@ -67,6 +67,7 @@
                         expand-trigger="hover"
                         :show-search="{ filter: cascaderFilter }"
                         @change="(value: any) => onTaskTypeChange(value, item, index)"
+                        popup-class-name="task-type-cascader-popup"
                       >
                         <template #displayRender="{ labels }">
                           <span>{{ labels.join(' / ') }}</span>
@@ -2182,3 +2183,61 @@ onUnmounted(() => {
 }
 </style>
 
+
+<style lang="scss">
+@import '@/styles/variables.scss';
+
+// 自定义级联选择器下拉弹窗样式（挂载在body下，需全局覆盖）
+.task-type-cascader-popup {
+  background-color: #1f1f1f !important; // 强制深色背景
+  border: 1px solid #303030 !important;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
+  border-radius: 8px !important;
+  padding: 4px !important;
+
+  .ant-cascader-menu {
+    background: transparent !important;
+    border-right: 1px solid #303030 !important;
+    height: 280px !important; // 增加高度以便容纳更多选项
+
+    &:last-child {
+      border-right: none !important;
+    }
+
+    .ant-cascader-menu-item {
+      color: #a0a0a0; // 普通文字颜色
+      padding: 10px 16px;
+      margin: 2px 4px;
+      border-radius: 6px;
+      transition: all 0.2s;
+      
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.08) !important;
+        color: #e5e5e5;
+      }
+
+      // 激活/选中状态
+      &-active {
+        background-color: rgba(49, 240, 139, 0.15) !important; // 品牌色背景
+        color: #31f08b !important; // 品牌色文字
+        font-weight: 600;
+        
+        // 覆盖箭头颜色
+        .ant-cascader-menu-item-expand-icon {
+          color: #31f08b !important;
+        }
+      }
+      
+      // 展开图标
+      &-expand-icon {
+        color: #555;
+      }
+    }
+  }
+  
+  // 搜索结果高亮
+  .ant-cascader-menu-item-keyword {
+    color: #31f08b !important;
+  }
+}
+</style>