恢复修改的数据

src/views/home/cpns/HomeBusinessCards.vue

@@ -16,24 +16,28 @@ defineProps<Props>()
       </h3>
       <span class="home-business__slogan text-secondary">研发智造一体化自营平台，全链路质量兜底</span>
     </div>
+
     <div class="home-business__grid">
       <RouterLink
         v-for="line in lines"
         :key="line.id"
         :to="`/business/${line.id}`"
         class="home-business__card"
+        :class="`home-business__card--${line.id}`"
       >
-        <div class="home-business__icon">
-          <!-- TODO(蓝湖): 替换业务图标切图 -->
-          <span>{{ line.name.slice(0, 2) }}</span>
+        <div class="home-business__card-head">
+          <span class="home-business__icon">
+            <!-- TODO(蓝湖): 替换业务图标切图 -->
+            {{ line.name.slice(0, 2) }}
+          </span>
+          <h4 class="home-business__name">
+            {{ line.name }}
+          </h4>
         </div>
-        <h4 class="home-business__name">
-          {{ line.name }}
-        </h4>
-        <p class="home-business__desc text-secondary">
+        <p class="home-business__desc">
           {{ line.desc }}
         </p>
-        <span class="home-business__more">了解详细 ></span>
+        <span class="home-business__more">了解详情 ></span>
       </RouterLink>
     </div>
   </section>
@@ -64,29 +68,31 @@ defineProps<Props>()
 
   &__card {
     .flex(column, flex-start);
-    gap: @spacing-sm;
+    gap: @spacing-base;
     padding: @spacing-lg;
     border-radius: @radius-lg;
-    background: @white;
+    background: @primary-light;
     box-shadow: @shadow-base;
     transition: transform 0.2s, box-shadow 0.2s;
 
     &:hover {
       box-shadow: @shadow-lg;
       transform: translateY(-2px);
-
-      .home-business__more {
-        color: @primary-color;
-      }
     }
   }
 
+  &__card-head {
+    .flex(row, flex-start);
+    gap: @spacing-sm;
+  }
+
   &__icon {
     .flex(row, center);
-    width: 48px;
-    height: 48px;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
     border-radius: @radius-base;
-    background: @primary-light;
+    background: @white;
     color: @primary-color;
     font-size: @font-size-base;
     font-weight: 600;
@@ -101,13 +107,68 @@ defineProps<Props>()
   &__desc {
     min-height: 40px;
     font-size: @font-size-sm;
+    color: @text-color-secondary;
     .multi-ellipsis(2);
   }
 
   &__more {
+    align-self: flex-end;
     font-size: @font-size-sm;
     color: @text-color-secondary;
     transition: color 0.2s;
   }
+
+  // 四类业务各自的主题色（与设计稿一致：卡片浅色底 + 同色系图标/文案）
+  &__card--internet {
+    background: #e8f0ff;
+
+    .home-business__icon {
+      color: #3370ff;
+    }
+
+    .home-business__desc,
+    .home-business__more {
+      color: #598bff;
+    }
+  }
+
+  &__card--hardware {
+    background: #e7f8ec;
+
+    .home-business__icon {
+      color: #22b14c;
+    }
+
+    .home-business__desc,
+    .home-business__more {
+      color: #34c724;
+    }
+  }
+
+  &__card--iot {
+    background: #f0eaff;
+
+    .home-business__icon {
+      color: #7c4dff;
+    }
+
+    .home-business__desc,
+    .home-business__more {
+      color: #9a7bff;
+    }
+  }
+
+  &__card--manufacturing {
+    background: #fff2e4;
+
+    .home-business__icon {
+      color: #ff8f1f;
+    }
+
+    .home-business__desc,
+    .home-business__more {
+      color: #ffa94d;
+    }
+  }
 }
 </style>