From 61713bcb588b253afeee1b2ea6f3042d671c6c87 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 27 Apr 2026 09:41:34 +0800
Subject: [PATCH] =?UTF-8?q?style(h5):=20=E5=A4=A7=E7=B1=BB=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=94=B9=E4=B8=BA=20100px=20=E9=AB=98=E5=B8=A6?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 picsum.photos 按 seed 加载稳定的占位图
- 暗色渐变罩底保证文字可读，选中态切换为品牌绿渐变
- 后续可将 picsum URL 替换为 public/img/majors/ 下的本地图

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/components/MajorCategoryCard.vue        | 17 ++++++++++-------
 frontend-h5/src/views/Home.vue                  |  9 ++++++++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend-h5/src/components/MajorCategoryCard.vue b/frontend-h5/src/components/MajorCategoryCard.vue
index f48b0ae..f488690 100644
--- a/frontend-h5/src/components/MajorCategoryCard.vue
+++ b/frontend-h5/src/components/MajorCategoryCard.vue
@@ -1,13 +1,16 @@
 <script setup>
-defineProps({ label: String, value: String, active: Boolean })
+defineProps({ label: String, value: String, active: Boolean, bg: String })
 </script>
 <template>
-  <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="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 class="relative h-[100px] rounded-card shadow-card overflow-hidden cursor-pointer transition active:scale-[0.98]">
+    <img :src="bg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
+    <div class="absolute inset-0"
+      :class="active
+        ? 'bg-gradient-to-tr from-brand/85 via-brand/70 to-brand/40'
+        : 'bg-gradient-to-tr from-black/55 via-black/35 to-black/10'"></div>
+    <div class="relative h-full px-4 flex items-end pb-3 text-white">
+      <div class="text-lg font-semibold tracking-wide drop-shadow-sm">{{ label }}</div>
+      <div v-if="active" class="ml-auto self-start mt-3 w-2 h-2 rounded-full bg-white"></div>
     </div>
-    <div class="text-base font-medium">{{ label }}</div>
   </div>
 </template>
diff --git a/frontend-h5/src/views/Home.vue b/frontend-h5/src/views/Home.vue
index 7da8536..df905b1 100644
--- a/frontend-h5/src/views/Home.vue
+++ b/frontend-h5/src/views/Home.vue
@@ -20,6 +20,13 @@ const fallbackMajors = [
   { value: 'decoration', label: '装修' },
 ]
 
+const majorBg = {
+  architecture: 'https://picsum.photos/seed/mat3-architecture/600/300',
+  landscape: 'https://picsum.photos/seed/mat3-landscape/600/300',
+  equipment: 'https://picsum.photos/seed/mat3-equipment/600/300',
+  decoration: 'https://picsum.photos/seed/mat3-decoration/600/300',
+}
+
 const tree = ref([])
 const loading = ref(true)
 const selected = ref(ui.selectedMajor)
@@ -61,7 +68,7 @@ const onLogout = () => { auth.logout(); router.replace('/login') }
 
     <section class="p-4 grid grid-cols-2 gap-3">
       <MajorCategoryCard v-for="m in majors" :key="m.value"
-        :label="m.label" :value="m.value" :active="selected === m.value"
+        :label="m.label" :value="m.value" :bg="majorBg[m.value]" :active="selected === m.value"
         @click="onSelect(m.value)" />
     </section>