From 5fa940e9baa8119a76d9ce51838b1771caa7f533 Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Tue, 13 Oct 2026 15:34:55 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=A1=88=E4=BE=8B=E5=BA=93=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=95=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/cases/cpns/CaseHero.vue        | 13 ++++------
 src/views/cases/detail.vue               | 30 ++++++++++++++----------
 src/views/home/cpns/HomeCaseShowcase.vue | 26 ++++++++++++--------
 3 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/views/cases/cpns/CaseHero.vue b/src/views/cases/cpns/CaseHero.vue
index 08a5540..ca05061 100644
--- a/src/views/cases/cpns/CaseHero.vue
+++ b/src/views/cases/cpns/CaseHero.vue
@@ -18,7 +18,7 @@ const coverStyle = computed(() =>
 
 <template>
   <section class="case-hero" :style="coverStyle">
-    <div class="container case-hero__inner">
+    <div class="case-hero__inner">
       <span v-if="tag" class="case-hero__tag">{{ tag }}</span>
       <h1 class="case-hero__title">
         {{ props.item.title }}
@@ -30,15 +30,9 @@ const coverStyle = computed(() =>
 <style lang="less" scoped>
 .case-hero {
   position: relative;
-  width: auto;
-  max-width: @home-content;
+  width: 100%;
   height: 180px;
-  margin: 0 @home-gutter;
   border-radius: @radius-base;
-
-  @media (max-width: 1600px) {
-    margin: 0 @spacing-lg;
-  }
   background-color: @primary-color;
   background-position: center;
   background-repeat: no-repeat;
@@ -58,7 +52,8 @@ const coverStyle = computed(() =>
     .flex(column, flex-end, flex-start);
     gap: @spacing-sm;
     height: 100%;
-    padding-bottom: @spacing-lg;
+    box-sizing: border-box;
+    padding: 0 @spacing-lg @spacing-lg;
   }
 
   &__tag {
diff --git a/src/views/cases/detail.vue b/src/views/cases/detail.vue
index 403c0a1..ac3542a 100644
--- a/src/views/cases/detail.vue
+++ b/src/views/cases/detail.vue
@@ -51,19 +51,21 @@ onMounted(load)
     </div>
 
     <template v-if="item">
-      <CaseHero :item="item" />
+      <div class="container case-detail__body">
+        <CaseHero :item="item" />
 
-      <div class="container case-detail__main">
-        <CaseDetailHeader :item="item" @favorite="onFavorite" @share="onShare" />
-        <CaseRichText :item="item" />
+        <div class="case-detail__main">
+          <CaseDetailHeader :item="item" @favorite="onFavorite" @share="onShare" />
+          <CaseRichText :item="item" />
 
-        <button
-          class="case-detail__cta"
-          type="button"
-          @click="router.push('/demand')"
-        >
-          一键填报类似案例
-        </button>
+          <button
+            class="case-detail__cta"
+            type="button"
+            @click="router.push('/demand')"
+          >
+            一键填报类似案例
+          </button>
+        </div>
       </div>
     </template>
 
@@ -85,10 +87,14 @@ onMounted(load)
     font-size: @font-size-sm;
   }
 
+  &__body {
+    .flex(column, flex-start, stretch);
+    gap: @spacing-base;
+  }
+
   &__main {
     .flex(column, flex-start, stretch);
     gap: @spacing-base;
-    padding-top: @spacing-lg;
   }
 
   &__cta {
diff --git a/src/views/home/cpns/HomeCaseShowcase.vue b/src/views/home/cpns/HomeCaseShowcase.vue
index af5ecd9..9915dde 100644
--- a/src/views/home/cpns/HomeCaseShowcase.vue
+++ b/src/views/home/cpns/HomeCaseShowcase.vue
@@ -33,9 +33,7 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
 <template>
   <section class="home-cases">
     <div class="home-cases__head">
-      <h3 class="home-cases__title">
-        案例库精选
-      </h3>
+      <h3 class="home-cases__title">案例库精选</h3>
       <div class="home-cases__tabs">
         <button
           v-for="cat in categories"
@@ -60,7 +58,12 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
         @click="$router.push(`/cases/${item.id}`)"
       >
         <div class="home-cases__cover">
-          <img v-if="item.cover" v-lazy="item.cover" class="home-cases__img" :alt="item.title">
+          <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" />
         </div>
 
@@ -140,13 +143,13 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
   }
 
   &__grid {
-    display: flex;
-    gap: 24px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: @spacing-lg;
   }
 
   &__card {
     overflow: hidden;
-    flex: 1 1 0;
     min-width: 0;
     min-height: 220px;
     box-sizing: border-box;
@@ -155,7 +158,10 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
     background: @white;
     box-shadow: none;
     cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+    transition:
+      transform 0.2s,
+      box-shadow 0.2s,
+      border-color 0.2s;
 
     &:hover {
       border-color: @primary-color;
@@ -185,7 +191,7 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
   }
 
   &__body {
-    padding: 0 20px;
+    padding: 0 20px 10px 20px;
   }
 
   &__name {
@@ -201,7 +207,7 @@ const visibleCases = computed<Case[]>(() => props.cases.slice(0, 4))
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 0 @spacing-lg;
-    margin-top: 43px;
+    margin-top: 20px;
     font-size: 13px;
     line-height: 20px;
     color: @home-body;