From 893191880f0e2a95529b060781f4826e1dfdbf9d Mon Sep 17 00:00:00 2001
From: li <ljf@com>
Date: Sat, 14 Mar 2026 21:38:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=94=B9=E7=94=A8=E9=9D=99=E6=80=81van-icon(?=
 =?UTF-8?q?6=E6=A0=BC3x2)=EF=BC=8C=E4=BF=AE=E5=A4=8DVite=20tree-shake?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E7=82=B9=E5=87=BB=E6=B6=88=E5=A4=B1=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/views/home/index.vue | 70 ++++++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 23 deletions(-)

diff --git a/client/src/views/home/index.vue b/client/src/views/home/index.vue
index 1d2d859..e7e2202 100644
--- a/client/src/views/home/index.vue
+++ b/client/src/views/home/index.vue
@@ -33,12 +33,6 @@ const checkinDays = computed(() => {
   return diff > 0 ? diff : null
 })
 
-const features = [
-  { label: '月子餐',  bg: '#fff0f4', color: '#f43f5e', icon: '🍱', path: '/meal' },
-  { label: '服务包',  bg: '#eff6ff', color: '#3b82f6', icon: '🛏',  path: '/service/orders' },
-  { label: '护理记录', bg: '#fffbeb', color: '#f59e0b', icon: '🩺', path: '/care/records' },
-  { label: '我的月嫂', bg: '#f5f3ff', color: '#8b5cf6', icon: '👩', path: '/nanny' },
-]
 
 const today = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
 </script>
@@ -84,18 +78,43 @@ const today = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '
         </div>
       </div>
 
-      <!-- ── 4 格功能入口（圆形图标） ── -->
+      <!-- ── 6 格功能入口（静态 van-icon，3×2） ── -->
       <div class="features-row">
-        <div
-          v-for="f in features"
-          :key="f.path"
-          class="feat-item"
-          @click="router.push(f.path)"
-        >
-          <div class="feat-circle" :style="{ background: f.bg }">
-            <span class="feat-emoji">{{ f.icon }}</span>
+        <div class="feat-item" @click="router.push('/meal')">
+          <div class="feat-circle" style="background:#fff0f4">
+            <van-icon name="fire-o" color="#f43f5e" size="26" />
           </div>
-          <span class="feat-label">{{ f.label }}</span>
+          <span class="feat-label">月子餐</span>
+        </div>
+        <div class="feat-item" @click="router.push('/care/records')">
+          <div class="feat-circle" style="background:#fffbeb">
+            <van-icon name="notes-o" color="#f59e0b" size="26" />
+          </div>
+          <span class="feat-label">护理记录</span>
+        </div>
+        <div class="feat-item" @click="router.push('/grow')">
+          <div class="feat-circle" style="background:#f0fdf4">
+            <van-icon name="records-o" color="#10b981" size="26" />
+          </div>
+          <span class="feat-label">健康档案</span>
+        </div>
+        <div class="feat-item" @click="router.push('/service/orders')">
+          <div class="feat-circle" style="background:#eff6ff">
+            <van-icon name="gift-o" color="#3b82f6" size="26" />
+          </div>
+          <span class="feat-label">服务包</span>
+        </div>
+        <div class="feat-item" @click="router.push('/nanny')">
+          <div class="feat-circle" style="background:#f5f3ff">
+            <van-icon name="manager-o" color="#8b5cf6" size="26" />
+          </div>
+          <span class="feat-label">我的月嫂</span>
+        </div>
+        <div class="feat-item" @click="router.push('/account')">
+          <div class="feat-circle" style="background:#fff7ed">
+            <van-icon name="balance-o" color="#f97316" size="26" />
+          </div>
+          <span class="feat-label">账户余额</span>
         </div>
       </div>
 
@@ -239,24 +258,29 @@ const today = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '
 }
 .cam-title { color: rgba(255,255,255,0.88); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; }
 
-/* ── Features (圆形) ── */
+/* ── Features (圆形 3×2) ── */
 .features-row {
-  display: grid; grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 12px 8px;
   margin-bottom: 22px;
   background: white;
   border-radius: 22px;
-  padding: 18px 8px 14px;
+  padding: 18px 8px 16px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.05);
 }
-.feat-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
+.feat-item {
+  display: flex; flex-direction: column; align-items: center; gap: 8px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.feat-item:active .feat-circle { transform: scale(0.92); }
 .feat-circle {
-  width: 58px; height: 58px;
+  width: 56px; height: 56px;
   border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 3px 10px rgba(0,0,0,0.08);
+  transition: transform 0.15s;
 }
-.feat-emoji { font-size: 26px; line-height: 1; }
 .feat-label { font-size: 12px; font-weight: 600; color: #374151; text-align: center; }
 
 /* ── Schedule Card ── */