feat ui设计稿bug修复

src/views/home/cpns/HomeCaseShowcase.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { ref } from 'vue'
-import { formatBusinessType } from '@/utils/format'
 import type { BusinessType } from '@/types/api'
 import type { Case } from '@/types/business/cases'
 
@@ -8,7 +8,7 @@ interface Props {
   cases: Case[]
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 
 const emit = defineEmits<{ categoryChange: [category: BusinessType | 'all'] }>()
 
@@ -26,6 +26,9 @@ function switchCategory(value: BusinessType | 'all'): void {
   activeCategory.value = value
   emit('categoryChange', value)
 }
+
+// 设计稿一行固定四张 368×248，最多展示四张
+const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 </script>
 
 <template>
@@ -52,18 +55,14 @@ function switchCategory(value: BusinessType | 'all'): void {
 
     <div class="home-cases__grid">
       <article
-        v-for="item in cases"
+        v-for="item in visibleCases"
         :key="item.id"
         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">
@@ -71,12 +70,14 @@ function switchCategory(value: BusinessType | 'all'): void {
             {{ item.title }}
           </h4>
           <ul class="home-cases__meta">
-            <li>客户对象：{{ item.clientType }}</li>
-            <li>研发周期：{{ item.duration }}</li>
-            <li>团队规模：{{ item.teamSize }}人</li>
+            <li>客户类型：{{ item.clientType }}</li>
+            <li>所属行业：{{ item.industry }}</li>
+            <li>规模：{{ item.scale }}</li>
+            <li>项目周期：{{ item.duration }}</li>
+            <li>服务团队：{{ item.teamSize }}人</li>
             <li>完成时间：{{ item.finishDate }}</li>
           </ul>
-          <span class="home-cases__view">查看详情</span>
+          <span class="home-cases__view">查看详情&gt;</span>
         </div>
       </article>
     </div>
@@ -85,23 +86,20 @@ function switchCategory(value: BusinessType | 'all'): void {
 
 <style lang="less" scoped>
 .home-cases {
-  // 设计稿区块卡 1680×446 设计px：白底 + #E2E2E2 描边（内容区内左右缩 50 设计px）
-  max-width: 1294px;
-  margin-right: auto;
-  margin-left: auto;
-  padding: 32px 54px 44px;
+  // 设计稿区块卡 1680×446：白底 + #E2E2E2 描边，标题 @1478（卡顶 +40），卡区左右距 66
+  padding: 40px 66px 60px;
   border: 1px solid @home-section-border;
   border-radius: @radius-lg;
   background: @white;
 
   &__head {
     .flex(row, flex-start);
-    gap: 20px;
-    margin-bottom: 36px;
+    gap: 24px;
+    margin-bottom: 47px;                 // 标题盒底 1530 → 卡顶 1577
   }
 
   &__title {
-    // 设计稿栏目标题 36 设计px / 700 / #121212
+    // 设计稿栏目标题 36px / 700 / #121212
     font-size: @font-size-xxl;
     font-weight: 700;
     color: @home-ink;
@@ -109,8 +107,8 @@ function switchCategory(value: BusinessType | 'all'): void {
 
   &__tabs {
     .flex(row, center);
-    // 设计稿分类紧跟标题左侧排布（间距 36 设计px ≈ 28）
-    gap: 28px;
+    // 设计稿分类紧跟标题左侧排布（间距 36px）
+    gap: 36px;
   }
 
   &__tab {
@@ -119,9 +117,9 @@ function switchCategory(value: BusinessType | 'all'): void {
     padding: 0;
     border: 0;
     background: transparent;
-    // 设计稿分类 16 设计px / 500 / #121212（激活 #085DFF + 下划线）
+    // 设计稿分类 16px / 500 / #121212（激活 #085DFF + 下划线）
     color: @home-ink;
-    font-size: @font-size-sm;
+    font-size: @font-size-md;
     font-weight: 500;
     transition: color 0.2s;
 
@@ -129,12 +127,12 @@ function switchCategory(value: BusinessType | 'all'): void {
       background: transparent;
       color: @home-tab-active;
 
-      // 设计稿激活下划线 29×2 设计px（#1F67EF）
+      // 设计稿激活下划线 29×2（#1F67EF）
       &::after {
         content: '';
         position: absolute;
         right: 0;
-        bottom: -6px;
+        bottom: -8px;
         left: 0;
         height: 2px;
         background: @primary-color;
@@ -144,19 +142,23 @@ function switchCategory(value: BusinessType | 'all'): void {
 
   &__more {
     margin-left: auto;
-    font-size: @font-size-sm;
+    font-size: @font-size-md;
   }
 
   &__grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    // 设计稿案例卡间距 24 设计px ≈ 18 CSS
-    gap: 18px;
+    display: flex;
+    // 一行固定四张（4×368 + 3×24 = 1544），窄视口行内等比收缩
+    gap: 24px;
   }
 
   &__card {
     overflow: hidden;
-    // 设计稿案例卡 368×248 设计px：白底 + #E0DEDE 描边 + 0 4 10 黑 8% 投影
+    // 设计稿案例卡固定 368×248，一行四张（4×368 + 3×24 = 1544 ≤ 1560），不足四张不放大
+    flex: 0 1 368px;
+    min-width: 0;
+    height: 248px;
+    box-sizing: border-box;
+    // 设计稿案例卡 368×248：白底 + #E0DEDE 描边 + 0 4 10 黑 8% 投影
     border: 1px solid @home-case-border;
     border-radius: @radius-base;
     background: @white;
@@ -176,8 +178,8 @@ function switchCategory(value: BusinessType | 'all'): void {
 
   &__cover {
     position: relative;
-    // 设计稿封面区 128 设计px 高 ≈ 99 CSS
-    height: 100px;
+    // 设计稿封面区 88px 高（卡 248：封面 0-88，标题 @109，属性行 @174/194，查看详情 @220）
+    height: 88px;
     overflow: hidden;
   }
 
@@ -191,53 +193,28 @@ function switchCategory(value: BusinessType | 'all'): void {
     }
   }
 
-  &__tag {
-    position: absolute;
-    top: @spacing-sm;
-    left: @spacing-sm;
-    padding: 2px @spacing-sm;
-    border-radius: @radius-sm;
-    background: @primary-color;
-    color: @white;
-    font-size: 11px;
-
-    &--hardware {
-      background: @tag-hardware;
-    }
-
-    &--iot {
-      background: @tag-iot;
-    }
-
-    &--manufacturing {
-      background: @tag-manufacturing;
-    }
-
-    &--other {
-      background: @tag-other;
-    }
-  }
-
   &__body {
-    padding: 12px 15px 6px;
+    padding: 0 20px;
   }
 
   &__name {
-    margin-bottom: 8px;
-    // 设计稿案例名 16 设计px / 500 / #333333
-    font-size: @font-size-sm;
+    margin: 21px 0 0;
+    // 设计稿案例名 16px / 500 / #333333
+    font-size: @font-size-md;
     font-weight: 500;
+    line-height: 22px;
     color: @home-body;
     .multi-ellipsis(1);
   }
 
   &__meta {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    // 设计稿元信息 10 设计px → 可读下限 11px / #333333
-    gap: 3px @spacing-sm;
-    font-size: 11px;
-    line-height: 1.5;
+    // 设计稿属性行 13px 两行三列（行1 @174、行2 @194，行高 20）
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 0 @spacing-lg;
+    margin-top: 43px;
+    font-size: 13px;
+    line-height: 20px;
     color: @home-body;
 
     li {
@@ -248,12 +225,14 @@ function switchCategory(value: BusinessType | 'all'): void {
   &__view {
     display: block;
     width: fit-content;
-    margin: 10px 0 0 auto;
+    // 设计稿「查看详情>」@卡内 y220（13px），右下角
+    margin: 6px 0 0 auto;
     padding: 0;
     border: 0;
-    // 设计稿「查看详情>」12 设计px / #024FFF（无按钮描边）
+    // 设计稿「查看详情>」13px / #024FFF（无按钮描边）
     color: @primary-strong;
-    font-size: @font-size-sm;
+    font-size: 13px;
+    line-height: 15px;
     transition: color 0.2s;
   }
 }