From d0af6b1596bca47ed1029aa51ad40069f1cd2bab Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 27 Apr 2026 09:38:37 +0800
Subject: [PATCH] =?UTF-8?q?style(h5):=20=E9=A6=96=E9=A1=B5=E5=A4=A7?=
 =?UTF-8?q?=E7=B1=BB=E5=8D=A1=E7=89=87=E6=94=B9=E4=B8=BA=E6=A8=AA=E5=90=91?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E9=AB=98=E5=BA=A6=E6=94=B6=E7=B4=A7?=
 =?UTF-8?q?=E5=88=B0=2080px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend-h5/src/components/MajorCategoryCard.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend-h5/src/components/MajorCategoryCard.vue b/frontend-h5/src/components/MajorCategoryCard.vue
index 228a869..f48b0ae 100644
--- a/frontend-h5/src/components/MajorCategoryCard.vue
+++ b/frontend-h5/src/components/MajorCategoryCard.vue
@@ -2,9 +2,12 @@
 defineProps({ label: String, value: String, active: Boolean })
 </script>
 <template>
-  <div class="aspect-square rounded-card shadow-card flex flex-col items-center justify-center transition active:scale-[0.98] cursor-pointer"
+  <div class="h-20 px-4 rounded-card shadow-card flex items-center gap-3 transition active:scale-[0.98] cursor-pointer"
     :class="active ? 'bg-brand text-white' : 'bg-white text-neutral-800'">
-    <div class="text-3xl font-semibold">{{ label.slice(0,1) }}</div>
-    <div class="mt-2 text-sm">{{ label }}</div>
+    <div class="w-10 h-10 rounded-xl flex items-center justify-center text-xl font-semibold shrink-0"
+      :class="active ? 'bg-white/15' : 'bg-brand/10 text-brand'">
+      {{ label.slice(0,1) }}
+    </div>
+    <div class="text-base font-medium">{{ label }}</div>
   </div>
 </template>