diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue b/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
index 0225d7620..b6bb0f642 100644
--- a/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
@@ -300,7 +300,10 @@ onMounted(() => {
             <div class="card-header">
               <div
                 class="status-info"
-                :style="{ '--status-color': STATUS_COLOR_MAP[item.status] }"
+                :style="{
+                  '--status-color': STATUS_COLOR_MAP[item.status]?.text,
+                  '--status-bg': STATUS_COLOR_MAP[item.status]?.bg,
+                }"
               >
                 <IconifyIcon
                   :icon="STATUS_ICON_MAP[item.status] || 'solar:circle-bold'"
@@ -389,12 +392,15 @@ onMounted(() => {
             <div class="card-footer">
               <!-- 左侧：类型 + 时间 -->
               <div class="card-meta">
-                <Tag
-                  :color="ORDER_TYPE_COLOR_MAP[item.orderType]"
+                <span
                   class="type-tag"
+                  :style="{
+                    backgroundColor: ORDER_TYPE_COLOR_MAP[item.orderType]?.bg,
+                    color: ORDER_TYPE_COLOR_MAP[item.orderType]?.text,
+                  }"
                 >
                   {{ ORDER_TYPE_TEXT_MAP[item.orderType] }}
-                </Tag>
+                </span>
                 <span class="create-time">{{
                   formatTime(item.createTime)
                 }}</span>
@@ -536,7 +542,22 @@ onMounted(() => {
     }
 
     &--urgent {
-      border-left: 3px solid #ff4d4f;
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 120px;
+        height: 120px;
+        pointer-events: none;
+        content: '';
+        background: radial-gradient(
+          circle at 100% 0%,
+          rgb(192 29 29 / 14%) 0%,
+          rgb(192 29 29 / 6%) 40%,
+          transparent 70%
+        );
+        border-radius: 0 8px 0 0;
+      }
     }
 
     &--terminal {
@@ -557,14 +578,18 @@ onMounted(() => {
   }
 
   .status-info {
-    --status-color: #8c8c8c;
+    --status-color: #6b5e52;
+    --status-bg: #f0ede8;
 
     display: flex;
     gap: 4px;
     align-items: center;
+    padding: 2px 8px;
     font-size: 12px;
     font-weight: 500;
     color: var(--status-color);
+    background: var(--status-bg);
+    border-radius: 4px;
 
     .status-icon {
       font-size: 14px;
@@ -693,10 +718,12 @@ onMounted(() => {
 
     .type-tag {
       flex-shrink: 0;
+      padding: 1px 6px;
       margin: 0;
       font-size: 11px;
+      font-weight: 500;
       line-height: 16px;
-      border: none;
+      border-radius: 4px;
     }
 
     .order-code {
@@ -784,6 +811,15 @@ html.dark {
       &:hover {
         border-color: #434343;
       }
+
+      &--urgent::before {
+        background: radial-gradient(
+          circle at 100% 0%,
+          rgb(192 29 29 / 18%) 0%,
+          rgb(192 29 29 / 7%) 40%,
+          transparent 70%
+        );
+      }
     }
 
     .card-title {
diff --git a/apps/web-antd/src/views/ops/work-order/modules/card-view.vue b/apps/web-antd/src/views/ops/work-order/modules/card-view.vue
index ed075c153..4c26e8ee0 100644
--- a/apps/web-antd/src/views/ops/work-order/modules/card-view.vue
+++ b/apps/web-antd/src/views/ops/work-order/modules/card-view.vue
@@ -298,7 +298,10 @@ defineExpose({
             <div class="card-header">
               <div
                 class="status-info"
-                :style="{ '--status-color': STATUS_COLOR_MAP[item.status] }"
+                :style="{
+                  '--status-color': STATUS_COLOR_MAP[item.status]?.text,
+                  '--status-bg': STATUS_COLOR_MAP[item.status]?.bg,
+                }"
               >
                 <IconifyIcon
                   :icon="STATUS_ICON_MAP[item.status] || 'solar:circle-bold'"
@@ -387,12 +390,15 @@ defineExpose({
             <div class="card-footer">
               <!-- 左侧：类型 + 时间 -->
               <div class="card-meta">
-                <Tag
-                  :color="ORDER_TYPE_COLOR_MAP[item.orderType]"
+                <span
                   class="type-tag"
+                  :style="{
+                    backgroundColor: ORDER_TYPE_COLOR_MAP[item.orderType]?.bg,
+                    color: ORDER_TYPE_COLOR_MAP[item.orderType]?.text,
+                  }"
                 >
                   {{ ORDER_TYPE_TEXT_MAP[item.orderType] }}
-                </Tag>
+                </span>
                 <span class="create-time">{{
                   formatTime(item.createTime)
                 }}</span>
@@ -534,7 +540,22 @@ defineExpose({
     }
 
     &--urgent {
-      border-left: 3px solid #ff4d4f;
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 120px;
+        height: 120px;
+        pointer-events: none;
+        content: '';
+        background: radial-gradient(
+          circle at 100% 0%,
+          rgb(192 29 29 / 14%) 0%,
+          rgb(192 29 29 / 6%) 40%,
+          transparent 70%
+        );
+        border-radius: 0 8px 0 0;
+      }
     }
 
     &--terminal {
@@ -555,14 +576,18 @@ defineExpose({
   }
 
   .status-info {
-    --status-color: #8c8c8c;
+    --status-color: #6b5e52;
+    --status-bg: #f0ede8;
 
     display: flex;
     gap: 4px;
     align-items: center;
+    padding: 2px 8px;
     font-size: 12px;
     font-weight: 500;
     color: var(--status-color);
+    background: var(--status-bg);
+    border-radius: 4px;
 
     .status-icon {
       font-size: 14px;
@@ -691,10 +716,12 @@ defineExpose({
 
     .type-tag {
       flex-shrink: 0;
+      padding: 1px 6px;
       margin: 0;
       font-size: 11px;
+      font-weight: 500;
       line-height: 16px;
-      border: none;
+      border-radius: 4px;
     }
 
     .order-code {
@@ -782,6 +809,15 @@ html.dark {
       &:hover {
         border-color: #434343;
       }
+
+      &--urgent::before {
+        background: radial-gradient(
+          circle at 100% 0%,
+          rgb(192 29 29 / 18%) 0%,
+          rgb(192 29 29 / 7%) 40%,
+          transparent 70%
+        );
+      }
     }
 
     .card-title {