fengshao1227/yuezi-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
li
2026-03-14 21:38:14 +08:00
parent d3f3076db8
commit 893191880f
1 changed files with 47 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/views/home/index.vue
+47 -23
View File
@@ -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 ── */