feat: 首页功能图标改用静态van-icon(6格3x2),修复Vite tree-shake导致点击消失问题

This commit is contained in:
li
2026-03-14 21:38:14 +08:00
parent d3f3076db8
commit 893191880f
+47 -23
View File
@@ -33,12 +33,6 @@ const checkinDays = computed(() => {
return diff > 0 ? diff : null 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' }) const today = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
</script> </script>
@@ -84,18 +78,43 @@ const today = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '
</div> </div>
</div> </div>
<!-- 4 格功能入口圆形图标 --> <!-- 6 格功能入口静态 van-icon3×2 -->
<div class="features-row"> <div class="features-row">
<div <div class="feat-item" @click="router.push('/meal')">
v-for="f in features" <div class="feat-circle" style="background:#fff0f4">
:key="f.path" <van-icon name="fire-o" color="#f43f5e" size="26" />
class="feat-item"
@click="router.push(f.path)"
>
<div class="feat-circle" :style="{ background: f.bg }">
<span class="feat-emoji">{{ f.icon }}</span>
</div> </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>
</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; } .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 { .features-row {
display: grid; grid-template-columns: repeat(4, 1fr); display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px; gap: 12px 8px;
margin-bottom: 22px; margin-bottom: 22px;
background: white; background: white;
border-radius: 22px; border-radius: 22px;
padding: 18px 8px 14px; padding: 18px 8px 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.05); 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 { .feat-circle {
width: 58px; height: 58px; width: 56px; height: 56px;
border-radius: 50%; border-radius: 50%;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
box-shadow: 0 3px 10px rgba(0,0,0,0.08); 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; } .feat-label { font-size: 12px; font-weight: 600; color: #374151; text-align: center; }
/* ── Schedule Card ── */ /* ── Schedule Card ── */