From 19b3fcc0e36610cff1c34e5b483318bf752f59f7 Mon Sep 17 00:00:00 2001
From: Jafeng <2998840497@qq.com>
Date: Wed, 6 May 2026 16:27:46 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=B7=BB=E5=8A=A0=E6=A1=88=E4=BE=8B?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E7=9A=84=E5=88=86=E7=B1=BB=E8=A1=8C=E6=98=A0?=
 =?UTF-8?q?=E5=B0=84=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CaseSection.vue | 12 +++++++-
 src/styles/theme.css           | 50 ++++++++++++++++++++++++++++++++--
 2 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/components/CaseSection.vue b/src/components/CaseSection.vue
index 18a83c1..5476ae9 100644
--- a/src/components/CaseSection.vue
+++ b/src/components/CaseSection.vue
@@ -6,6 +6,14 @@ import SectionTitle from './SectionTitle.vue'
 const active = ref(caseCategories[0])
 const filteredCases = computed(() => cases.filter(item => item.category === active.value))
 const activeIndex = computed(() => caseCategories.findIndex(category => category === active.value))
+const categoryLineMap = {
+  国家医学中心: ['国家医学', '中心'],
+  公立医院: ['公立医院'],
+  妇幼保健客户: ['妇幼保健', '客户'],
+  医疗集团客户: ['医疗集团', '客户']
+}
+
+const getCategoryLines = (category) => categoryLineMap[category] ?? [category]
 
 const selectCategory = (category) => {
   active.value = category
@@ -56,7 +64,9 @@ const handleCategoryKeydown = (event, index) => {
             @click="selectCategory(category)"
             @keydown="handleCategoryKeydown($event, index)"
           >
-            {{ category }}
+            <span class="case-filter-text">
+              <span v-for="line in getCategoryLines(category)" :key="line">{{ line }}</span>
+            </span>
           </button>
           <span class="case-tab-indicator" :style="{ transform: `translateX(${activeIndex * 100}%)` }"></span>
         </aside>
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 31e5eca..9b3e1a4 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -56,6 +56,21 @@ button {
   overflow: hidden;
 }
 
+.reveal-on-scroll {
+  opacity: 0;
+  transform: translateY(22px);
+  transition:
+    opacity 0.62s ease,
+    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 0.2s ease;
+  transition-delay: var(--reveal-delay, 0ms);
+}
+
+.reveal-on-scroll.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 .site-header {
   position: sticky;
   top: 0;
@@ -735,6 +750,12 @@ button {
   display: none;
 }
 
+.case-filter-text {
+  display: inline-grid;
+  place-items: center;
+  gap: 1px;
+}
+
 .case-card {
   height: 116px;
   display: flex;
@@ -1090,14 +1111,15 @@ button {
     position: relative;
     z-index: 2;
     min-width: 0;
-    min-height: 40px;
-    padding: 0 6px;
+    min-height: 42px;
+    padding: 0 2px;
     border-color: transparent;
     border-radius: 12px;
     background: transparent;
     font-size: 13px;
-    line-height: 1.25;
+    line-height: 1.2;
     white-space: normal;
+    word-break: keep-all;
     box-shadow: none;
   }
   .case-filter-btn.active {
@@ -1212,6 +1234,7 @@ button {
     min-height: 112px;
     gap: 15px;
     padding: 18px;
+    animation: case-card-in 0.32s ease both;
   }
   .case-logo-slot {
     flex-basis: 88px;
@@ -1277,3 +1300,24 @@ button {
     line-height: 1.25;
   }
 }
+
+@keyframes case-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal-on-scroll,
+  .case-card {
+    animation: none;
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}