feat 案例库样式整改

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 {

src/views/cases/detail.vue

@@ -51,9 +51,10 @@ onMounted(load)
     </div>
 
     <template v-if="item">
+      <div class="container case-detail__body">
         <CaseHero :item="item" />
 
-      <div class="container case-detail__main">
+        <div class="case-detail__main">
           <CaseDetailHeader :item="item" @favorite="onFavorite" @share="onShare" />
           <CaseRichText :item="item" />
 
@@ -65,6 +66,7 @@ onMounted(load)
             一键填报类似案例
           </button>
         </div>
+      </div>
     </template>
 
     <p v-else class="case-detail__empty text-secondary">
@@ -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 {

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;