diff --git a/src/views/Dashboard/components/ConsumptionRecords/Index.vue b/src/views/Dashboard/components/ConsumptionRecords/Index.vue
index 84fd491c..895922ad 100644
--- a/src/views/Dashboard/components/ConsumptionRecords/Index.vue
+++ b/src/views/Dashboard/components/ConsumptionRecords/Index.vue
@@ -11,7 +11,7 @@
         class="relationship-item"
         :class="`relate-${item.color}`"
       >
-        <div class="relationship-icon" :style="{ color: getIconColor(item.color) }">
+        <div class="relationship-icon" :class="`icon-${item.color}`">
           <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
             <path
               d="M16 7c0-2.21-1.79-4-4-4S8 4.79 8 7c0 2.21 1.79 4 4 4s4-1.79 4-4zm-4 6c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
@@ -242,17 +242,6 @@ const props = withDefaults(
 if (props.data && props.data.length > 0) {
   recordsData.value = props.data
 }
-
-// 根据颜色获取图标颜色
-const getIconColor = (color: string) => {
-  const colorMap: Record<string, string> = {
-    orange: '#ffa500',
-    green: '#00ffff',
-    yellow: '#ffff00',
-    purple: '#ef9efa'
-  }
-  return colorMap[color] || '#ffffff'
-}
 </script>
 
 <style scoped lang="scss">
@@ -414,6 +403,18 @@ const getIconColor = (color: string) => {
     width: 8px;
     height: 9px;
   }
+  &.icon-orange {
+    color: #ffa500;
+  }
+  &.icon-green {
+    color: #00ffff;
+  }
+  &.icon-yellow {
+    color: #ffff00;
+  }
+  &.icon-purple {
+    color: #ef9efa;
+  }
 }
 
 .relationship-name {