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

feat: 首页功能图标换用van-icon，从4格扩展到6格

Browse Source
This commit is contained in:
li
2026-03-14 21:18:59 +08:00
parent 4cdfeb034c
commit 862705847e
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/views/home/index.vue
+13 -12
View File
@@ -34,10 +34,12 @@ const checkinDays = computed(() => {
}) })
const features = [ const features = [
{ label: '月子餐', bg: '#fff0f4', color: '#f43f5e', icon: '🍱', path: '/meal' }, { label: '月子餐', bg: '#fff0f4', color: '#f43f5e', icon: 'food-o', path: '/meal' },
{ label: '服务包', bg: '#eff6ff', color: '#3b82f6', icon: '🛏', path: '/service/orders' }, { label: '护理记录', bg: '#fffbeb', color: '#f59e0b', icon: 'notes-o', path: '/care/records' },
{ label: '护理记录', bg: '#fffbeb', color: '#f59e0b', icon: '🩺', path: '/care/records' }, { label: '健康档案', bg: '#f0fdf4', color: '#10b981', icon: 'records-o', path: '/grow' },
{ label: '我的月嫂', bg: '#f5f3ff', color: '#8b5cf6', icon: '👩', path: '/nanny' }, { label: '服务包', bg: '#eff6ff', color: '#3b82f6', icon: 'gift-o', path: '/service/orders' },
{ label: '我的月嫂', bg: '#f5f3ff', color: '#8b5cf6', icon: 'manager-o', path: '/nanny' },
{ label: '账户余额', bg: '#fff7ed', color: '#f97316', icon: 'balance-o', path: '/account' },
] ]
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' })
@@ -84,7 +86,7 @@ const today = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '
</div> </div>
</div> </div>
<!-- ── 4 格功能入口（圆形图标） ── --> <!-- ── 6 格功能入口（圆形图标 3×2） ── -->
<div class="features-row"> <div class="features-row">
<div <div
v-for="f in features" v-for="f in features"
@@ -93,7 +95,7 @@ const today = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '
@click="router.push(f.path)" @click="router.push(f.path)"
> >
<div class="feat-circle" :style="{ background: f.bg }"> <div class="feat-circle" :style="{ background: f.bg }">
<span class="feat-emoji">{{ f.icon }}</span> <van-icon :name="f.icon" :color="f.color" size="26" />
</div> </div>
<span class="feat-label">{{ f.label }}</span> <span class="feat-label">{{ f.label }}</span>
</div> </div>
@@ -239,24 +241,23 @@ 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; }
.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);
} }
.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 ── */