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

feat: H5首页对齐原型(暗色监控卡/圆形图标/服务排期) + demo演示数据

Browse Source
This commit is contained in:
li
2026-03-14 21:07:47 +08:00
parent 29d5b9e7db
commit 1c1e44ade7
2 changed files with 416 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/views/home/index.vue
+162 -129
View File
@@ -16,56 +16,75 @@ onMounted(async () => {
} catch { } finally { loading.value = false }
})
const customer = computed(() => homeData.value?.customer || store.info)
const todayMeals = computed(() => homeData.value?.today_meals || [])
const customer = computed(() => homeData.value?.customer || store.info)
const todayMeals = computed(() => homeData.value?.today_meals || [])
const latestRecords = computed(() => homeData.value?.care_records || [])
const nannyOrder = computed(() => homeData.value?.nanny_order)
const nannyOrder = computed(() => homeData.value?.nanny_order)
const mealTypeLabel = { 1: '早餐', 2: '午餐', 3: '下午茶', 4: '晚餐', 5: '宵夜' }
// 膳食时间映射
const mealTime = { 1: '07:30', 2: '12:00', 3: '15:00', 4: '18:00', 5: '21:00' }
const mealLabel = { 1: '早餐', 2: '午餐', 3: '下午茶', 4: '晚餐', 5: '宵夜' }
// 入住天数
const checkinDays = computed(() => {
const d = customer.value?.actual_date
if (!d) return null
const diff = Math.floor((Date.now() - new Date(d).getTime()) / 86400000)
return diff > 0 ? diff : null
})
const features = [
{ label: '月子餐', bg: '#fff0f4', color: '#f43f5e', icon: 'food-o', path: '/meal' },
{ label: '服务包', bg: '#eff6ff', color: '#3b82f6', icon: 'balance-list-o', path: '/service/orders' },
{ label: '护理记录', bg: '#fffbeb', color: '#f59e0b', icon: 'orders-o', path: '/care/records' },
{ label: '我的月嫂', bg: '#f5f3ff', color: '#8b5cf6', icon: 'user-circle-o', path: '/nanny' },
{ 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', { month: 'long', day: 'numeric' })
const today = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
</script>
<template>
<div class="page">
<!-- 顶部问候区 -->
<!-- ── 顶部问候 ── -->
<div class="header">
<div>
<p class="greet-sub">欢迎回来,</p>
<h2 class="greet-name">
{{ customer?.name || '亲爱的' }}妈妈
<van-icon name="shield-o" color="#f43f5e" size="17" style="vertical-align:middle;margin-left:3px" />
<van-icon name="shield-o" color="#f43f5e" size="16" style="vertical-align:middle;margin-left:2px" />
</h2>
</div>
<div class="avatar">
<van-icon name="user-circle-o" size="34" color="#f43f5e" />
<div class="avatar-wrap">
<van-icon name="contact" size="32" color="#f43f5e" />
</div>
</div>
<!-- 滚动主体 -->
<div class="body">
<!-- 安心守护横幅（原型：宝宝监控卡） -->
<div class="hero-card">
<span class="live-badge">● 在住中</span>
<div class="hero-center">
<div class="hero-icon-wrap">
<van-icon name="home-o" size="30" color="white" />
</div>
<p class="hero-name">{{ customer?.name ? customer.name + ' 妈妈' : '宫中有喜' }}</p>
<p class="hero-desc">贴心守护，安心坐月子 🌸</p>
<!-- ── 宝宝监控卡（暗色摄像风格） ── -->
<div class="cam-card">
<!-- 暗色网格背景 -->
<div class="cam-grid" />
<!-- LIVE badge -->
<div class="cam-topbar">
<span class="live-dot">● LIVE</span>
<span class="cam-label">Cam 02 (室内)</span>
</div>
<!-- 播放按钮 -->
<div class="play-wrap">
<div class="play-btn">
<svg width="22" height="24" viewBox="0 0 22 24" fill="none">
<path d="M2 2L20 12L2 22V2Z" fill="white" />
</svg>
</div>
</div>
<!-- 底部文字 -->
<div class="cam-bottom">
<span class="cam-title">宝宝安防监控 · 实时画面</span>
</div>
<span class="hero-badge-br">月子会所 · 专属守护</span>
</div>
<!-- 4格金刚位 -->
<!-- ── 4 格功能入口（圆形图标） ── -->
<div class="features-row">
<div
v-for="f in features"
@@ -73,36 +92,37 @@ const today = new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'nume
class="feat-item"
@click="router.push(f.path)"
>
<div class="feat-icon" :style="{ background: f.bg }">
<van-icon :name="f.icon" :color="f.color" size="26" />
<div class="feat-circle" :style="{ background: f.bg }">
<span class="feat-emoji">{{ f.icon }}</span>
</div>
<span class="feat-label">{{ f.label }}</span>
</div>
</div>
<!-- 今日服务排期（teal 渐变卡） -->
<!-- ── 今日服务排期（teal 渐变卡） ── -->
<div class="schedule-card">
<div class="sch-bg-icon">🍽</div>
<div class="sch-head">
<div>
<h5 class="sch-title">今日用膳</h5>
<p class="sch-date">{{ today }} · 共 {{ todayMeals.length }} 餐</p>
<h5 class="sch-title">今日服务排期</h5>
<p class="sch-date">{{ today }}（共 {{ todayMeals.length }} 项）</p>
</div>
<span class="sch-more-btn" @click="router.push('/meal')">查看全部</span>
<span class="sch-day-badge" v-if="checkinDays">入住第{{ checkinDays }}天</span>
<span class="sch-more-btn" v-else @click="router.push('/meal')">查看全部</span>
</div>
<div class="sch-list" v-if="todayMeals.length">
<div v-for="m in todayMeals.slice(0, 3)" :key="m.id" class="sch-item">
<span class="sch-time">{{ mealTypeLabel[m.meal_type] || '用餐' }}</span>
<span class="sch-time">{{ mealTime[m.meal_type] || '--:--' }}</span>
<div class="sch-sep" />
<span class="sch-content">
{{ m.dishes?.length ? m.dishes.map(d => d.name).join('、') : '待排餐' }}
{{ mealLabel[m.meal_type] || '用餐' }}
<span v-if="m.dishes?.length">：{{ m.dishes.map(d => d.name || d).join('、') }}</span>
</span>
</div>
</div>
<p class="sch-empty" v-else>今日暂无用餐安排</p>
<p class="sch-empty" v-else>今日暂无服务安排</p>
</div>
<!-- 最近监测数据（2列） -->
<!-- ── 最近监测数据 ── -->
<div class="data-section">
<h5 class="sec-title">最近监测数据</h5>
<div class="data-grid">
@@ -114,12 +134,12 @@ const today = new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'nume
<div class="data-card" @click="router.push('/nanny')">
<p class="data-label">我的月嫂</p>
<p class="data-val">{{ nannyOrder?.nanny?.name || '待分配' }}</p>
<p class="data-ext blue">{{ nannyOrder?.nanny?.level || '---' }}</p>
<p class="data-ext blue">{{ nannyOrder?.nanny?.level ? '高级月嫂' : '---' }}</p>
</div>
</div>
</div>
<!-- 护理动态 -->
<!-- ── 护理动态 ── -->
<div v-if="latestRecords.length" class="records-section">
<div class="rec-head">
<h5 class="sec-title">护理动态</h5>
@@ -141,138 +161,151 @@ const today = new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'nume
</template>
<style scoped>
.page {
background: #fff8fc;
min-height: 100vh;
padding-bottom: 90px;
}
.page { background: #f5f5f7; min-height: 100vh; padding-bottom: 90px; }
/* ── Header ─────────────────────────────── */
/* ── Header ── */
.header {
display: flex;
justify-content: space-between;
align-items: center;
display: flex; justify-content: space-between; align-items: center;
padding: 52px 22px 18px;
background: white;
}
.greet-sub { font-size: 12px; color: #9ca3af; margin: 0 0 3px; }
.greet-name { font-size: 20px; font-weight: 700; color: #111827; margin: 0; }
.avatar {
width: 50px; height: 50px;
.greet-sub { font-size: 13px; color: #9ca3af; margin: 0 0 2px; }
.greet-name { font-size: 22px; font-weight: 800; color: #111827; margin: 0; letter-spacing: -0.3px; }
.avatar-wrap {
width: 52px; height: 52px;
background: #fff0f4;
border-radius: 50%;
border: 2px solid #fecdd3;
display: flex; align-items: center; justify-content: center;
}
/* ── Body ───────────────────────────────── */
.body { padding: 16px; }
/* ── Body ── */
.body { padding: 14px 16px; }
/* ── Hero Card ──────────────────────────── */
.hero-card {
background: linear-gradient(135deg, #0d9488, #14b8a6);
border-radius: 28px;
height: 178px;
/* ── Camera Card ── */
.cam-card {
border-radius: 24px;
height: 200px;
margin-bottom: 22px;
position: relative;
overflow: hidden;
box-shadow: 0 8px 28px rgba(20, 184, 166, 0.38);
display: flex;
align-items: center;
justify-content: center;
background: #0d1117;
box-shadow: 0 10px 32px rgba(0,0,0,0.35);
}
.live-badge {
position: absolute;
top: 14px; left: 16px;
background: rgba(255,255,255,0.22);
color: white; font-size: 11px;
.cam-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 40px 40px;
}
/* 暗色影调 */
.cam-card::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(20,184,166,0.12) 0%, rgba(0,0,0,0.55) 100%);
}
.cam-topbar {
position: absolute; top: 14px; left: 14px;
display: flex; align-items: center; gap: 8px;
z-index: 2;
}
.live-dot {
background: #ef4444;
color: white; font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: 20px;
animation: pulse 2s infinite;
letter-spacing: 0.5px;
animation: blink 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.hero-badge-br {
position: absolute;
bottom: 12px; right: 14px;
background: rgba(0,0,0,0.16);
color: white; font-size: 10px;
padding: 3px 10px; border-radius: 20px;
@keyframes blink { 0%,100%{ opacity:1 } 50%{ opacity:0.55 } }
.cam-label { color: rgba(255,255,255,0.75); font-size: 12px; }
.play-wrap {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: 2;
}
.hero-center { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-icon-wrap {
.play-btn {
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.35);
display: flex; align-items: center; justify-content: center;
padding-left: 4px;
}
.cam-bottom {
position: absolute; bottom: 16px; left: 0; right: 0;
text-align: center; z-index: 2;
}
.cam-title { color: rgba(255,255,255,0.88); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; }
/* ── Features (圆形) ── */
.features-row {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 22px;
background: white;
border-radius: 22px;
padding: 18px 8px 14px;
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-circle {
width: 58px; height: 58px;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(8px);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.hero-name { color: white; font-size: 16px; font-weight: 700; margin: 0; }
.hero-desc { color: rgba(255,255,255,0.82); font-size: 12px; margin: 0; }
.feat-emoji { font-size: 26px; line-height: 1; }
.feat-label { font-size: 12px; font-weight: 600; color: #374151; text-align: center; }
/* ── Features 4-grid ───────────────────── */
.features-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 22px;
}
.feat-item { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.feat-icon {
width: 52px; height: 52px;
border-radius: 18px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.feat-label { font-size: 11px; font-weight: 600; color: #374151; text-align: center; }
/* ── Schedule Card (Teal) ──────────────── */
/* ── Schedule Card ── */
.schedule-card {
background: linear-gradient(135deg, #0d9488, #0891b2);
border-radius: 28px;
border-radius: 24px;
padding: 20px 18px;
margin-bottom: 20px;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 6px 22px rgba(13, 148, 136, 0.35);
box-shadow: 0 6px 24px rgba(13,148,136,0.38);
}
.sch-bg-icon {
position: absolute; right: -8px; top: -8px;
font-size: 80px; opacity: 0.12;
.sch-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.sch-title { font-size: 18px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.2px; }
.sch-date { font-size: 12px; color: rgba(255,255,255,0.72); margin: 0; }
.sch-day-badge {
background: rgba(255,255,255,0.22);
padding: 5px 14px; border-radius: 20px;
font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.sch-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.sch-title { font-size: 16px; font-weight: 700; margin: 0 0 3px; }
.sch-date { font-size: 11px; color: rgba(255,255,255,0.72); margin: 0; }
.sch-more-btn {
background: rgba(255,255,255,0.22);
padding: 4px 12px; border-radius: 20px;
font-size: 11px; cursor: pointer; white-space: nowrap;
padding: 5px 12px; border-radius: 20px;
font-size: 11px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.sch-list { display: flex; flex-direction: column; gap: 8px; }
.sch-list { display: flex; flex-direction: column; gap: 10px; }
.sch-item {
background: rgba(255,255,255,0.14);
border-radius: 14px; padding: 9px 14px;
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.15);
border-radius: 14px; padding: 11px 14px;
display: flex; align-items: center; gap: 12px;
}
.sch-time { font-size: 12px; font-weight: 600; white-space: nowrap; }
.sch-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.25); }
.sch-content { font-size: 12px; font-weight: 500; }
.sch-empty { text-align: center; font-size: 13px; color: rgba(255,255,255,0.65); margin: 0; }
.sch-time { font-size: 13px; font-weight: 700; white-space: nowrap; min-width: 42px; }
.sch-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.3); flex-shrink: 0; }
.sch-content { font-size: 13px; font-weight: 500; }
.sch-empty { text-align: center; font-size: 13px; color: rgba(255,255,255,0.6); margin: 4px 0 0; }
/* ── Data Grid ─────────────────────────── */
/* ── Data Grid ── */
.data-section { margin-bottom: 20px; }
.sec-title { font-size: 15px; font-weight: 700; color: #1f2937; margin: 0 0 12px; }
.sec-title { font-size: 16px; font-weight: 700; color: #1f2937; margin: 0 0 12px; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.data-card {
background: white; border-radius: 22px; padding: 16px;
box-shadow: 0 2px 14px rgba(0,0,0,0.05); cursor: pointer;
background: white; border-radius: 20px; padding: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.05); cursor: pointer;
}
.data-label { font-size: 11px; color: #9ca3af; margin: 0 0 6px; }
.data-val { font-size: 17px; font-weight: 700; color: #1f2937; margin: 0 0 3px; }
.data-ext { font-size: 12px; color: #10b981; margin: 0; }
.data-val { font-size: 17px; font-weight: 700; color: #1f2937; margin: 0 0 3px; }
.data-ext { font-size: 12px; color: #10b981; margin: 0; }
.data-ext.blue { color: #6366f1; }
/* ── Records ───────────────────────────── */
/* ── Records ── */
.records-section { }
.rec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rec-more { font-size: 13px; color: #f43f5e; cursor: pointer; }
@@ -282,7 +315,7 @@ const today = new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'nume
display: flex; align-items: center; gap: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.rec-emoji { font-size: 22px; }
.rec-nurse { font-size: 14px; font-weight: 600; color: #1f2937; margin: 0 0 2px; }
.rec-time { font-size: 12px; color: #9ca3af; margin: 0; }
.rec-emoji { font-size: 22px; }
.rec-nurse { font-size: 14px; font-weight: 600; color: #1f2937; margin: 0 0 2px; }
.rec-time { font-size: 12px; color: #9ca3af; margin: 0; }
</style>