恢复修改的数据

src/views/home/cpns/HomeCaseShowcase.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { CaseCard } from '@/components'
+import { formatBusinessType } from '@/utils/format'
 import type { BusinessType } from '@/types/api'
 import type { Case } from '@/types/business/cases'
 
@@ -46,16 +46,39 @@ function switchCategory(value: BusinessType | 'all'): void {
         </button>
       </div>
       <RouterLink to="/cases" class="home-cases__more link">
-        查看更多 >
+        查看全部 >
       </RouterLink>
     </div>
+
     <div class="home-cases__grid">
-      <CaseCard
+      <article
         v-for="item in cases"
         :key="item.id"
-        :item="item"
-        @view="$router.push(`/cases/${$event}`)"
-      />
+        class="home-cases__card"
+        @click="$router.push(`/cases/${item.id}`)"
+      >
+        <div class="home-cases__cover">
+          <!-- TODO(蓝湖): 替换案例封面切图 -->
+          <img v-if="item.cover" v-lazy="item.cover" class="home-cases__img" :alt="item.title">
+          <div v-else class="home-cases__img home-cases__img--placeholder" />
+          <span class="home-cases__tag" :class="`home-cases__tag--${item.category}`">
+            {{ formatBusinessType(item.category) }}
+          </span>
+        </div>
+
+        <div class="home-cases__body">
+          <h4 class="home-cases__name">
+            {{ item.title }}
+          </h4>
+          <ul class="home-cases__meta">
+            <li>客户对象：{{ item.clientType }}</li>
+            <li>研发周期：{{ item.duration }}</li>
+            <li>团队规模：{{ item.teamSize }}人</li>
+            <li>完成时间：{{ item.finishDate }}</li>
+          </ul>
+          <span class="home-cases__view">查看详情</span>
+        </div>
+      </article>
     </div>
   </section>
 </template>
@@ -64,6 +87,7 @@ function switchCategory(value: BusinessType | 'all'): void {
 .home-cases {
   &__head {
     .flex(row, space-between);
+    gap: @spacing-base;
     margin-bottom: @spacing-base;
   }
 
@@ -75,6 +99,7 @@ function switchCategory(value: BusinessType | 'all'): void {
 
   &__tabs {
     .flex(row, center);
+    flex: 1;
     gap: @spacing-sm;
   }
 
@@ -102,5 +127,103 @@ function switchCategory(value: BusinessType | 'all'): void {
     grid-template-columns: repeat(4, 1fr);
     gap: @spacing-base;
   }
+
+  &__card {
+    overflow: hidden;
+    border-radius: @radius-lg;
+    background: @white;
+    box-shadow: @shadow-base;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      box-shadow: @shadow-lg;
+      transform: translateY(-2px);
+
+      .home-cases__view {
+        background: @primary-color;
+        color: @white;
+      }
+    }
+  }
+
+  &__cover {
+    position: relative;
+    height: 130px;
+    overflow: hidden;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    &--placeholder {
+      background: linear-gradient(135deg, @primary-light, @bg-color);
+    }
+  }
+
+  &__tag {
+    position: absolute;
+    top: @spacing-sm;
+    left: @spacing-sm;
+    padding: 2px @spacing-sm;
+    border-radius: @radius-sm;
+    background: @primary-color;
+    color: @white;
+    font-size: @font-size-sm;
+
+    &--hardware {
+      background: #22b14c;
+    }
+
+    &--iot {
+      background: #7c4dff;
+    }
+
+    &--manufacturing {
+      background: #ff8f1f;
+    }
+
+    &--other {
+      background: @text-color-secondary;
+    }
+  }
+
+  &__body {
+    padding: @spacing-base;
+  }
+
+  &__name {
+    margin-bottom: @spacing-sm;
+    font-size: @font-size-lg;
+    font-weight: 600;
+    color: @heading-color;
+    .multi-ellipsis(1);
+  }
+
+  &__meta {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4px @spacing-sm;
+    font-size: @font-size-sm;
+    color: @text-color-secondary;
+
+    li {
+      .ellipsis();
+    }
+  }
+
+  &__view {
+    display: block;
+    width: fit-content;
+    margin: @spacing-base 0 0 auto;
+    padding: 2px @spacing-base;
+    border: 1px solid @primary-color;
+    border-radius: @radius-sm;
+    color: @primary-color;
+    font-size: @font-size-sm;
+    transition: all 0.2s;
+  }
 }
 </style>