diff --git a/pages/index/index.vue b/pages/index/index.vue
index b051b92..37a4bd6 100755
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -103,8 +103,8 @@
               <text class="card-tags">{{ holding.tags }}</text>
             </view>
           </view>
-          <view class="status-badge" :class="holding.statusType === 'green' ? 'bg-green-50' : 'bg-gray-100'">
-            <text class="status-text" :class="holding.statusType === 'green' ? 'text-green-600' : 'text-gray-500'">● {{ holding.status }}</text>
+          <view class="status-badge" :class="getStatusBgClass(holding.statusType)">
+            <text class="status-text" :class="getStatusTextClass(holding.statusType)">● {{ holding.status }}</text>
           </view>
         </view>
 
@@ -147,6 +147,27 @@ const assetData = ref({
 // 持仓组合数据
 const holdings = ref([]);
 
+// 状态标签样式
+const getStatusBgClass = (statusType) => {
+  const classes = {
+    'green': 'bg-green-50',
+    'yellow': 'bg-yellow-50',
+    'red': 'bg-red-50',
+    'gray': 'bg-gray-100'
+  };
+  return classes[statusType] || 'bg-gray-100';
+};
+
+const getStatusTextClass = (statusType) => {
+  const classes = {
+    'green': 'text-green-600',
+    'yellow': 'text-yellow-600',
+    'red': 'text-red-600',
+    'gray': 'text-gray-500'
+  };
+  return classes[statusType] || 'text-gray-500';
+};
+
 // 防止重复请求的标志
 let isFetching = false;
 
@@ -260,6 +281,14 @@ onShow(async () => {
   color: #059669;
 }
 
+.text-yellow-600 {
+  color: #D97706;
+}
+
+.text-red-600 {
+  color: #DC2626;
+}
+
 .text-red {
   color: #EF4444;
 }
@@ -563,6 +592,14 @@ onShow(async () => {
   background-color: #ECFDF5;
 }
 
+.bg-yellow-50 {
+  background-color: #FFFBEB;
+}
+
+.bg-red-50 {
+  background-color: #FEF2F2;
+}
+
 .bg-gray-100 {
   background-color: #F3F4F6;
 }