feat 完善注释

src/views/home/cpns/HomeCaseShowcase.vue

@@ -27,7 +27,6 @@ function switchCategory(value: BusinessType | 'all'): void {
   emit('categoryChange', value)
 }
 
-// 设计稿一行固定四张 368×248，最多展示四张
 const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 </script>
 
@@ -86,7 +85,6 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 
 <style lang="less" scoped>
 .home-cases {
-  // 设计稿区块卡 1680×446：白底 + #E2E2E2 描边，标题 @1478（卡顶 +40），卡区左右距 66
   padding: 40px 66px 60px;
   border: 1px solid @home-section-border;
   border-radius: @radius-lg;
@@ -95,11 +93,10 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
   &__head {
     .flex(row, flex-start);
     gap: 24px;
-    margin-bottom: 47px;                 // 标题盒底 1530 → 卡顶 1577
+    margin-bottom: 47px;
   }
 
   &__title {
-    // 设计稿栏目标题 36px / 700 / #121212
     font-size: @font-size-xxl;
     font-weight: 700;
     color: @home-ink;
@@ -107,7 +104,6 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 
   &__tabs {
     .flex(row, center);
-    // 设计稿分类紧跟标题左侧排布（间距 36px）
     gap: 36px;
   }
 
@@ -117,7 +113,6 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
     padding: 0;
     border: 0;
     background: transparent;
-    // 设计稿分类 16px / 500 / #121212（激活 #085DFF + 下划线）
     color: @home-ink;
     font-size: @font-size-md;
     font-weight: 500;
@@ -127,7 +122,6 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
       background: transparent;
       color: @home-tab-active;
 
-      // 设计稿激活下划线 29×2（#1F67EF）
       &::after {
         content: '';
         position: absolute;
@@ -147,18 +141,15 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 
   &__grid {
     display: flex;
-    // 一行固定四张（4×368 + 3×24 = 1544），窄视口行内等比收缩
     gap: 24px;
   }
 
   &__card {
     overflow: hidden;
-    // 设计稿案例卡固定 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;
@@ -178,7 +169,6 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 
   &__cover {
     position: relative;
-    // 设计稿封面区 88px 高（卡 248：封面 0-88，标题 @109，属性行 @174/194，查看详情 @220）
     height: 88px;
     overflow: hidden;
   }
@@ -199,7 +189,6 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 
   &__name {
     margin: 21px 0 0;
-    // 设计稿案例名 16px / 500 / #333333
     font-size: @font-size-md;
     font-weight: 500;
     line-height: 22px;
@@ -209,7 +198,6 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 
   &__meta {
     display: grid;
-    // 设计稿属性行 13px 两行三列（行1 @174、行2 @194，行高 20）
     grid-template-columns: 1fr 1fr 1fr;
     gap: 0 @spacing-lg;
     margin-top: 43px;
@@ -225,11 +213,9 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
   &__view {
     display: block;
     width: fit-content;
-    // 设计稿「查看详情>」@卡内 y220（13px），右下角
     margin: 6px 0 0 auto;
     padding: 0;
     border: 0;
-    // 设计稿「查看详情>」13px / #024FFF（无按钮描边）
     color: @primary-strong;
     font-size: 13px;
     line-height: 15px;