feat: 首页功能图标改用静态van-icon(6格3x2),修复Vite tree-shake导致点击消失问题
This commit is contained in:
@@ -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-icon,3×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 ── */
|
||||||
|
|||||||
Reference in New Issue
Block a user