更新
This commit is contained in:
Your Name
Vendored
+1
-3
@@ -1,5 +1,3 @@
|
||||
{
|
||||
"kiroAgent.configureMCP": "Disabled"
|
||||
|
||||
|
||||
"kiroAgent.configureMCP": "Enabled"
|
||||
}
|
||||
|
||||
@@ -31,8 +31,6 @@ onLaunch(() => {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function (loginRes) {
|
||||
console.log('xx');
|
||||
console.log(loginRes.code);
|
||||
if( uni.getStorageSync('token')){
|
||||
userinfo(loginRes.code);
|
||||
}else{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import App from './App'
|
||||
var baseUrl ='https://css.zhenyangtang.com.cn/';
|
||||
var baseUrl ='https://admin.zhenyangtang.com.cn/';
|
||||
|
||||
function joinApiUrl(base, path) {
|
||||
const b = String(base || '').replace(/\/+$/, '')
|
||||
|
||||
@@ -167,6 +167,23 @@
|
||||
"backgroundColor": "#faf9f5",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/weekly",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "血糖管理",
|
||||
"backgroundColor": "#f4fbf4",
|
||||
"enablePullDownRefresh": true,
|
||||
"mp-weixin": {
|
||||
"usingPlugins": {
|
||||
"WechatSI": {
|
||||
"version": "0.3.5",
|
||||
"provider": "wx069ba97219f66d99"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -40,6 +40,9 @@ const ICON_PATHS = {
|
||||
heart: '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>',
|
||||
activity: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
|
||||
users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
|
||||
user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
||||
person: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
||||
send: '<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',
|
||||
'alert-triangle': '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
|
||||
minus: '<path d="M5 12h14"/>',
|
||||
droplet: '<path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.5-2.5-5.5C15 7 12 2 12 2S9 7 7.5 9.5 5 13 5 15a7 7 0 0 0 7 7z"/>',
|
||||
@@ -54,7 +57,16 @@ const ICON_PATHS = {
|
||||
info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>',
|
||||
sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41-1.41M17.66 6.34l1.41-1.41M6.34 4.93l1.41 1.41"/>',
|
||||
moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
|
||||
sunset: '<path d="M12 10V2M18.364 5.636l-2.12 2.12M5.636 18.364l2.12-2.12M22 18h-3M5 18H2M18.364 18.364l-2.12-2.12M5.636 5.636l2.12 2.12M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/>'
|
||||
sunset: '<path d="M12 10V2M18.364 5.636l-2.12 2.12M5.636 18.364l2.12-2.12M22 18h-3M5 18H2M18.364 18.364l-2.12-2.12M5.636 5.636l2.12 2.12M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/>',
|
||||
mic: '<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/>',
|
||||
camera: '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
|
||||
bulb: '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
|
||||
leaf: '<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/>',
|
||||
utensils: '<path d="M3 2v7c0 1.1.9 2 2 2a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-3 4.5v6a2 2 0 0 0 2 2h1Z"/><path d="M18 15v7"/>',
|
||||
egg: '<path d="M12 22c4.97 0 8-3.27 8-7.31C20 9.65 16.42 2 12 2S4 9.65 4 14.69C4 18.73 7.03 22 12 22Z"/>',
|
||||
home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
|
||||
'plus-circle': '<circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8v8"/>',
|
||||
'chevron-right': '<path d="m9 18 6-6-6-6"/>'
|
||||
}
|
||||
|
||||
/** 图片加载失败时的 emoji 回退 */
|
||||
@@ -68,6 +80,9 @@ const ICON_FALLBACK = {
|
||||
heart: '❤',
|
||||
activity: '🏃',
|
||||
users: '👥',
|
||||
user: '👤',
|
||||
person: '👤',
|
||||
send: '➤',
|
||||
'alert-triangle': '⚠',
|
||||
minus: '—',
|
||||
droplet: '💧',
|
||||
@@ -82,7 +97,16 @@ const ICON_FALLBACK = {
|
||||
info: '!',
|
||||
sun: '☀',
|
||||
moon: '🌙',
|
||||
sunset: '☀'
|
||||
sunset: '☀',
|
||||
mic: '🎤',
|
||||
camera: '📷',
|
||||
bulb: '💡',
|
||||
leaf: '🥬',
|
||||
utensils: '🍴',
|
||||
egg: '🍳',
|
||||
home: '🏠',
|
||||
'plus-circle': '⊕',
|
||||
'chevron-right': '›'
|
||||
}
|
||||
|
||||
const strokeColor = computed(() => {
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
# VitalMint Health (Stitch)
|
||||
|
||||
Source: Google Stitch MCP · project `Modern WeChat UI Redesign`
|
||||
Screen HTML: `design-system/stitch-weekly.html`
|
||||
|
||||
## Colors
|
||||
|
||||
- background / surface: `#f4fbf4`
|
||||
- primary: `#006c49`
|
||||
- primary-container: `#10b981`
|
||||
- tertiary-container (餐后): `#fc7c78`
|
||||
- on-surface: `#161d19`
|
||||
- error (high glucose): `#ba1a1a`
|
||||
- warning: `#ea580c`
|
||||
|
||||
## Layout (weekly.vue)
|
||||
|
||||
1. TopAppBar — 头像 + 问候 + 朗读按钮
|
||||
2. 录入今日血糖 — 全宽圆角主按钮
|
||||
3. 今日血糖 — 双列卡片 + 查看更多
|
||||
4. 血糖趋势 — 单卡片内含统计、图表、7/30 切换
|
||||
5. AI 饮食 — 渐变边框白底卡片
|
||||
6. 能不能吃 — 独立卡片
|
||||
|
||||
## Styles
|
||||
|
||||
- `styles/stitch-vitalmint-theme.scss` — 设计 token
|
||||
- `styles/weekly-stitch.scss` — 页面组件样式 (vm-*)
|
||||
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html><html lang="zh-CN" style=""><head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>血糖管理</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#3e4943",
|
||||
"on-background": "#161d19",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container-highest": "#dde4dd",
|
||||
"surface-container-high": "#e3eae3",
|
||||
"primary-fixed-dim": "#4edea3",
|
||||
"on-secondary-container": "#5b6760",
|
||||
"on-primary": "#ffffff",
|
||||
"inverse-surface": "#2b322d",
|
||||
"tertiary-fixed-dim": "#ffb3af",
|
||||
"primary": "#006c49",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-primary-fixed-variant": "#005236",
|
||||
"on-surface-variant": "#3c4a42",
|
||||
"surface-container": "#e8f0e9",
|
||||
"tertiary-container": "#fc7c78",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-tertiary-container": "#711419",
|
||||
"surface-container-low": "#eef6ee",
|
||||
"on-secondary-fixed": "#131e19",
|
||||
"inverse-primary": "#4edea3",
|
||||
"surface-tint": "#006c49",
|
||||
"secondary-fixed-dim": "#bdcac1",
|
||||
"on-primary-container": "#00422b",
|
||||
"on-secondary": "#ffffff",
|
||||
"secondary-container": "#d9e6dd",
|
||||
"tertiary": "#a43a3a",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-fixed": "#d9e6dd",
|
||||
"background": "#f4fbf4",
|
||||
"tertiary-fixed": "#ffdad7",
|
||||
"outline": "#6c7a71",
|
||||
"primary-fixed": "#6ffbbe",
|
||||
"on-tertiary-fixed": "#410005",
|
||||
"outline-variant": "#bbcabf",
|
||||
"primary-container": "#10b981",
|
||||
"on-tertiary-fixed-variant": "#842225",
|
||||
"surface-variant": "#dde4dd",
|
||||
"on-primary-fixed": "#002113",
|
||||
"on-surface": "#161d19",
|
||||
"surface-bright": "#f4fbf4",
|
||||
"inverse-on-surface": "#ebf3eb",
|
||||
"surface": "#f4fbf4",
|
||||
"surface-dim": "#d4dcd5",
|
||||
"secondary": "#55615a",
|
||||
"error": "#ba1a1a"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px",
|
||||
"2xl": "1.5rem",
|
||||
"3xl": "2rem"
|
||||
},
|
||||
"spacing": {
|
||||
"container-margin": "20px",
|
||||
"stack-gap": "16px",
|
||||
"section-margin": "32px",
|
||||
"inline-gap": "12px",
|
||||
"card-padding": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-lg": [
|
||||
"Manrope"
|
||||
],
|
||||
"headline-lg": [
|
||||
"Manrope"
|
||||
],
|
||||
"headline-md": [
|
||||
"Manrope"
|
||||
],
|
||||
"display-lg": [
|
||||
"Manrope"
|
||||
],
|
||||
"headline-lg-mobile": [
|
||||
"Manrope"
|
||||
],
|
||||
"label-md": [
|
||||
"Manrope"
|
||||
],
|
||||
"body-md": [
|
||||
"Manrope"
|
||||
]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-lg": [
|
||||
"16px",
|
||||
{
|
||||
"lineHeight": "24px",
|
||||
"fontWeight": "500"
|
||||
}
|
||||
],
|
||||
"headline-lg": [
|
||||
"24px",
|
||||
{
|
||||
"lineHeight": "32px",
|
||||
"letterSpacing": "-0.01em",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"headline-md": [
|
||||
"20px",
|
||||
{
|
||||
"lineHeight": "28px",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"display-lg": [
|
||||
"32px",
|
||||
{
|
||||
"lineHeight": "40px",
|
||||
"letterSpacing": "-0.02em",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"headline-lg-mobile": [
|
||||
"22px",
|
||||
{
|
||||
"lineHeight": "28px",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"label-md": [
|
||||
"12px",
|
||||
{
|
||||
"lineHeight": "16px",
|
||||
"letterSpacing": "0.02em",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
],
|
||||
"body-md": [
|
||||
"14px",
|
||||
{
|
||||
"lineHeight": "20px",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.icon-fill {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
|
||||
.ambient-shadow {
|
||||
box-shadow: 0 12px 30px -10px rgba(0, 108, 73, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.btn-press:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-lg antialiased pb-24 md:pb-0 min-h-screen">
|
||||
<!-- Desktop Sidebar Shell (Hidden on Mobile) -->
|
||||
<div class="hidden md:flex fixed left-0 top-0 h-full w-64 bg-surface-container-lowest border-r border-surface-dim z-50 flex-col">
|
||||
<div class="p-6">
|
||||
<h1 class="text-headline-lg font-headline-lg text-primary">VitalMint</h1>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 flex flex-col gap-2 mt-4">
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl bg-primary-container text-on-primary-container font-bold" href="#">
|
||||
<span class="material-symbols-outlined icon-fill">home</span>
|
||||
<span class="">首页</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">add_circle</span>
|
||||
<span class="">记录</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
<span class="">动态</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-on-surface-variant hover:bg-surface-container-high transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="">我的</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Main Content Area -->
|
||||
<main class="md:ml-64 w-full max-w-[1200px] mx-auto min-h-screen flex flex-col md:flex-row">
|
||||
<!-- Left/Main Column: Dashboard -->
|
||||
<div class="flex-1 w-full">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-surface dark:bg-surface-dim docked full-width top-0 flex justify-between items-center px-container-margin py-4 w-full sticky z-40">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden border-2 border-surface-container-lowest">
|
||||
<span class="material-symbols-outlined text-primary">person</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-headline-lg-mobile font-headline-lg-mobile text-on-surface dark:text-on-background">下午好，用户16295733</h1>
|
||||
<p class="text-label-md font-label-md text-on-surface-variant opacity-80">今日血糖已记录</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container dark:hover:bg-surface-container-high transition-colors text-primary dark:text-primary-fixed-dim">
|
||||
<span class="material-symbols-outlined" data-icon="volume_up">volume_up</span>
|
||||
</button>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<div class="px-container-margin pb-section-margin flex flex-col gap-6 mt-2">
|
||||
<!-- 1. Primary Action (Prominent) -->
|
||||
<section>
|
||||
<button class="w-full bg-primary text-on-primary h-14 rounded-2xl flex items-center justify-center gap-2 text-body-lg font-bold btn-press shadow-[0_8px_16px_rgba(0,108,73,0.2)] transition-all">
|
||||
<span class="material-symbols-outlined icon-fill">add</span>
|
||||
录入今日血糖
|
||||
</button>
|
||||
</section>
|
||||
<!-- 2. 血糖趋势 (Trends) - Moved to top -->
|
||||
<section class="bg-surface-container-lowest rounded-3xl p-5 ambient-shadow border border-surface-container-highest/30">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 class="text-headline-md font-headline-md text-on-surface">血糖趋势</h2>
|
||||
<p class="text-label-md font-label-md text-on-surface-variant">最近 7 天 · mmol/L</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-label-md font-label-md text-on-surface-variant">
|
||||
<div class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-primary"></div>空腹</div>
|
||||
<div class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-tertiary"></div>餐后</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stats Row -->
|
||||
<div class="flex justify-between items-center bg-surface-container-low rounded-xl p-4 mb-6">
|
||||
<div class="flex flex-col items-center flex-1 border-r border-surface-container-highest">
|
||||
<span class="text-headline-md font-headline-md text-tertiary">1</span>
|
||||
<span class="text-label-md font-label-md text-on-surface-variant mt-1">天偏高</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center flex-1 border-r border-surface-container-highest">
|
||||
<span class="text-headline-md font-headline-md text-primary">1</span>
|
||||
<span class="text-label-md font-label-md text-on-surface-variant mt-1">天正常</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center flex-1">
|
||||
<span class="text-headline-md font-headline-md text-on-surface">2</span>
|
||||
<span class="text-label-md font-label-md text-on-surface-variant mt-1">天有记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Faux Chart Area -->
|
||||
<div class="h-[180px] w-full relative flex items-end pt-4 pb-6 border-b border-surface-container-highest border-dashed">
|
||||
<!-- Y Axis -->
|
||||
<div class="absolute left-0 top-0 bottom-6 flex flex-col justify-between text-[10px] text-on-surface-variant">
|
||||
<span class="">23.0</span>
|
||||
<span class="">18.0</span>
|
||||
<span class="">13.0</span>
|
||||
<span class="">8.0</span>
|
||||
<span class="">3.0</span>
|
||||
</div>
|
||||
<!-- Target Line -->
|
||||
<div class="absolute left-6 right-0 bottom-12 border-b border-tertiary border-dashed opacity-30"></div>
|
||||
<span class="absolute left-6 bottom-12 text-[10px] text-tertiary -translate-y-full mb-1">空腹阈 7</span>
|
||||
<!-- Chart Lines -->
|
||||
<div class="absolute inset-0 left-8 overflow-hidden">
|
||||
<div class="absolute bottom-6 right-8 w-1 h-[100px] bg-primary/20 rounded-t-full transform rotate-45 origin-bottom"></div>
|
||||
<div class="absolute bottom-[80px] right-2 w-1 h-[60px] bg-tertiary/20 rounded-t-full transform rotate-12 origin-bottom"></div>
|
||||
<div class="absolute right-[15%] bottom-[15%] w-2 h-2 rounded-full border-[1.5px] border-primary bg-white z-10"></div>
|
||||
<div class="absolute right-[5%] bottom-[75%] w-2 h-2 rounded-full border-[1.5px] border-tertiary bg-white z-10"></div>
|
||||
<!-- Tooltips -->
|
||||
<div class="absolute right-[2%] bottom-[85%] bg-tertiary text-white text-[10px] px-1.5 py-0.5 rounded font-bold">18</div>
|
||||
<div class="absolute right-[2%] bottom-[65%] bg-tertiary text-white text-[10px] px-1.5 py-0.5 rounded font-bold">20</div>
|
||||
</div>
|
||||
<!-- X Axis -->
|
||||
<div class="absolute left-8 right-0 bottom-0 flex justify-between text-[10px] text-on-surface-variant translate-y-full pt-2">
|
||||
<span class="">05-23</span>
|
||||
<span class="">05-25</span>
|
||||
<span class="">05-27</span>
|
||||
<span class="">05-29</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 3. 最新测量 & 概览 (Combined Section) -->
|
||||
<section class="flex flex-col gap-4">
|
||||
<!-- Latest Reading -->
|
||||
<div class="bg-error-container text-on-error-container rounded-3xl p-6 ambient-shadow relative overflow-hidden flex flex-col items-center text-center justify-center min-h-[160px]">
|
||||
<div class="absolute inset-0 opacity-10 pointer-events-none" style="background-image: radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0); background-size: 16px 16px;"></div>
|
||||
<span class="text-label-md font-label-md uppercase tracking-wider mb-1 opacity-90 z-10">最新测量 · 餐后</span>
|
||||
<div class="flex items-baseline gap-1 z-10">
|
||||
<span class="text-[56px] font-extrabold leading-none tracking-tighter">20.00</span>
|
||||
<span class="text-body-lg font-body-lg opacity-80 font-medium">mmol/L</span>
|
||||
</div>
|
||||
<div class="mt-3 inline-flex items-center gap-1.5 bg-white/30 backdrop-blur-sm px-3 py-1 rounded-full z-10">
|
||||
<span class="material-symbols-outlined text-[16px] icon-fill">warning</span>
|
||||
<span class="text-label-md font-label-md font-bold">偏高，请遵医嘱</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Today's Summary -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="bg-surface-container-lowest rounded-2xl p-4 ambient-shadow flex flex-col gap-2 border border-surface-container-highest/50">
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">空腹</span>
|
||||
<div class="flex items-baseline gap-1 text-tertiary">
|
||||
<span class="text-headline-lg font-headline-lg">18.00</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-tertiary bg-error-container/50 px-2 py-0.5 rounded-sm inline-block w-fit">偏高</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest rounded-2xl p-4 ambient-shadow flex flex-col gap-2 border border-surface-container-highest/50">
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">餐后</span>
|
||||
<div class="flex items-baseline gap-1 text-tertiary">
|
||||
<span class="text-headline-lg font-headline-lg">20.00</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-tertiary bg-error-container/50 px-2 py-0.5 rounded-sm inline-block w-fit">偏高</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 4. AI 饮食建议 -->
|
||||
<section class="bg-gradient-to-br from-primary/10 to-primary/5 rounded-3xl p-5 border border-primary/10 relative overflow-hidden">
|
||||
<div class="absolute -right-8 -top-8 w-32 h-32 bg-primary-fixed-dim/20 rounded-full blur-2xl"></div>
|
||||
<div class="flex justify-between items-center mb-4 relative z-10">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[18px]">temp_preferences_custom</span>
|
||||
</div>
|
||||
<h3 class="text-headline-md font-headline-md text-on-surface">AI 饮食建议</h3>
|
||||
</div>
|
||||
<button class="text-label-md font-label-md text-primary flex items-center gap-1 bg-white/50 px-3 py-1.5 rounded-full hover:bg-white transition-colors">
|
||||
<span class="material-symbols-outlined text-[14px]">refresh</span>
|
||||
换一换
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-body-md font-body-md text-on-surface-variant mb-4 relative z-10">读您近 7 天 · 30 天血糖，定制今日三餐</p>
|
||||
<div class="flex flex-col gap-3 relative z-10">
|
||||
<div class="bg-white/80 backdrop-blur-md rounded-2xl p-4 shadow-sm border border-white">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-orange-400">light_mode</span>
|
||||
<span class="font-bold text-on-surface">早餐</span>
|
||||
</div>
|
||||
<p class="text-body-md font-body-md text-on-surface-variant">小米粥（少米多水）加煮鸡蛋一个</p>
|
||||
</div>
|
||||
<div class="bg-white/80 backdrop-blur-md rounded-2xl p-4 shadow-sm border border-white">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-primary">eco</span>
|
||||
<span class="font-bold text-on-surface">午餐</span>
|
||||
</div>
|
||||
<p class="text-body-md font-body-md text-on-surface-variant">清蒸鱼块、蒜蓉炒苋菜、二米饭（小米掺大米）</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Spacer for bottom nav on mobile -->
|
||||
<section class="sticky bottom-20 md:bottom-6 z-30 px-container-margin md:px-0 mb-4">
|
||||
<div class="bg-white/90 backdrop-blur-md rounded-full p-2 pl-5 flex items-center gap-3 shadow-[0_8px_32px_rgba(0,108,73,0.15)] border border-primary/10">
|
||||
<div class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined icon-fill text-[18px]">sparkles</span>
|
||||
</div>
|
||||
<input type="text" placeholder="输入食物名称或健康疑问，咨询 AI..." class="flex-1 bg-transparent border-none focus:ring-0 text-body-md placeholder:text-on-surface-variant/60 py-2">
|
||||
<button class="bg-primary text-on-primary h-10 w-10 rounded-full flex items-center justify-center btn-press shadow-sm">
|
||||
<span class="material-symbols-outlined">send</span>
|
||||
</button>
|
||||
</div>
|
||||
</section><div class="h-8 md:hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Secondary Info (Visible on Tablet/Desktop) -->
|
||||
<aside class="hidden lg:flex w-80 flex-col gap-section-margin pt-4 pr-container-margin">
|
||||
<div class="bg-surface-container-lowest rounded-3xl p-6 ambient-shadow">
|
||||
<h3 class="text-headline-md font-headline-md text-on-surface mb-4">运动降糖</h3>
|
||||
<div class="bg-error-container/30 rounded-xl p-4 mb-4">
|
||||
<p class="text-body-md font-body-md text-on-surface">近期血糖偏高，三顿饭后都动一动，最能帮着把糖降下来。</p>
|
||||
</div>
|
||||
<ul class="flex flex-col gap-3 text-body-md text-on-surface-variant">
|
||||
<li class="flex gap-2"><span class="font-bold text-tertiary">1</span> <span class="">早饭后快走 15 分钟</span></li>
|
||||
<li class="flex gap-2"><span class="font-bold text-tertiary">2</span> <span class="">午饭后原地踏步 20-30 分钟</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
<!-- BottomNavBar (Mobile Only) -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1 @@
|
||||
{"name":"projects/15362588878567114380/screens/259c8c233434481881d0bacddb59fa7f","title":"血糖管理重构版","screenshot":{"name":"projects/15362588878567114380/files/c18dd3e3d7774a16897d78b40073b9f2","downloadUrl":"https://lh3.googleusercontent.com/aida/ADBb0ugpswBosy3eCG_j3kJlxCWpntXQGvRJvMuepINJTcB47Nf4ymWU81mrjex1ICPdAXn-p_JjyUokOtms4zIJpXL49692zt16mIJhEC16nfU9kH5hwAj1s7v3PlAZbUGWjYjPTdfVMaOCveS6Ohuh_IeyRTD6MmdsFZ2-H7Whg6zy4MiZeGLxRw0ckCOrNbTRObtuzk_dlUc49eDGeRagYtuL9xyS6pno5CiwBzSkGp872chdZVn9JOK-2n1P"},"htmlCode":{"name":"projects/15362588878567114380/files/ca56c13fc2d6481d9de60727f7b70f3f","downloadUrl":"https://contribution.usercontent.google.com/download?c=CgthaWRhX2NvZGVmeBJ8Eh1hcHBfY29tcGFuaW9uX2dlbmVyYXRlZF9maWxlcxpbCiVodG1sXzk5NTVmZjZjNTFkODQxMmY4MzIxNWNkYmIwNWI2MTMzEgsSBxCEnv3unRAYAZIBJAoKcHJvamVjdF9pZBIWQhQxNTM2MjU4ODg3ODU2NzExNDM4MA&filename=&opi=89354086","mimeType":"text/html"},"width":"780","height":"4122","deviceType":"MOBILE"}
|
||||
@@ -0,0 +1,351 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>血糖管理</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-tertiary-fixed": "#410005",
|
||||
"surface-bright": "#f4fbf4",
|
||||
"on-primary-container": "#00422b",
|
||||
"surface-container": "#e8f0e9",
|
||||
"surface-container-high": "#e3eae3",
|
||||
"surface-dim": "#d4dcd5",
|
||||
"primary-container": "#10b981",
|
||||
"on-secondary-fixed": "#131e19",
|
||||
"surface": "#f4fbf4",
|
||||
"on-surface": "#161d19",
|
||||
"on-tertiary": "#ffffff",
|
||||
"tertiary-container": "#fc7c78",
|
||||
"secondary": "#55615a",
|
||||
"on-error-container": "#93000a",
|
||||
"on-background": "#161d19",
|
||||
"secondary-fixed-dim": "#bdcac1",
|
||||
"inverse-on-surface": "#ebf3eb",
|
||||
"surface-container-highest": "#dde4dd",
|
||||
"on-error": "#ffffff",
|
||||
"on-surface-variant": "#3c4a42",
|
||||
"secondary-fixed": "#d9e6dd",
|
||||
"inverse-surface": "#2b322d",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#842225",
|
||||
"outline-variant": "#bbcabf",
|
||||
"on-primary-fixed-variant": "#005236",
|
||||
"on-secondary-container": "#5b6760",
|
||||
"on-primary": "#ffffff",
|
||||
"primary": "#006c49",
|
||||
"outline": "#6c7a71",
|
||||
"tertiary-fixed": "#ffdad7",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary": "#a43a3a",
|
||||
"surface-tint": "#006c49",
|
||||
"inverse-primary": "#4edea3",
|
||||
"on-tertiary-container": "#711419",
|
||||
"primary-fixed-dim": "#4edea3",
|
||||
"on-secondary-fixed-variant": "#3e4943",
|
||||
"tertiary-fixed-dim": "#ffb3af",
|
||||
"surface-container-low": "#eef6ee",
|
||||
"error-container": "#ffdad6",
|
||||
"on-primary-fixed": "#002113",
|
||||
"background": "#f4fbf4",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed": "#6ffbbe",
|
||||
"surface-variant": "#dde4dd",
|
||||
"secondary-container": "#d9e6dd"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px",
|
||||
"2xl": "1.5rem"
|
||||
},
|
||||
"spacing": {
|
||||
"section-margin": "32px",
|
||||
"stack-gap": "16px",
|
||||
"card-padding": "20px",
|
||||
"inline-gap": "12px",
|
||||
"container-margin": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Manrope"],
|
||||
"label-md": ["Manrope"],
|
||||
"body-lg": ["Manrope"],
|
||||
"headline-lg-mobile": ["Manrope"],
|
||||
"headline-lg": ["Manrope"],
|
||||
"display-lg": ["Manrope"],
|
||||
"body-md": ["Manrope"]
|
||||
},
|
||||
"boxShadow": {
|
||||
'ambient': '0 10px 30px -10px rgba(0, 108, 73, 0.08)',
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.material-symbols-outlined.fill-icon {
|
||||
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-md antialiased md:max-w-[600px] md:mx-auto pb-24">
|
||||
<!-- TopAppBar -->
|
||||
<header class="flex justify-between items-center px-container-margin py-4 w-full bg-surface top-0 sticky z-40">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center overflow-hidden">
|
||||
<span class="material-symbols-outlined text-outline">person</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-headline-lg-mobile font-headline-lg-mobile text-on-surface">下午好，用户16295733</h1>
|
||||
<p class="text-label-md font-label-md text-on-surface-variant">今日血糖已记录</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex flex-col items-center justify-center bg-surface-container-low border border-outline-variant rounded-xl px-3 py-1.5 hover:bg-surface-container transition-colors">
|
||||
<span class="material-symbols-outlined text-primary mb-0.5">volume_up</span>
|
||||
<span class="text-[10px] font-label-md text-on-surface-variant">朗读血糖</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="px-container-margin flex flex-col gap-section-margin mt-4">
|
||||
<!-- Primary Action -->
|
||||
<section>
|
||||
<button class="w-full bg-primary text-on-primary rounded-full py-4 flex items-center justify-center gap-2 hover:bg-on-primary-fixed-variant transition-colors shadow-ambient active:scale-95 duration-150">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
<span class="text-body-lg font-body-lg font-bold">录入今日血糖</span>
|
||||
</button>
|
||||
</section>
|
||||
<!-- Current Status Cards -->
|
||||
<section class="flex flex-col gap-3">
|
||||
<h2 class="text-headline-md font-headline-md">今日血糖</h2>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<!-- Fasting -->
|
||||
<div class="bg-surface-container-lowest rounded-2xl p-card-padding shadow-ambient border border-error-container">
|
||||
<div class="text-label-md font-label-md text-on-surface-variant mb-1">空腹</div>
|
||||
<div class="flex items-baseline gap-1 mb-2">
|
||||
<span class="text-display-lg font-display-lg text-error">18.00</span>
|
||||
<span class="text-label-md font-label-md text-error">mmol/L</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-error bg-error-container/30 px-2 py-1 rounded-md w-fit">
|
||||
<span class="material-symbols-outlined text-[14px]">warning</span>
|
||||
<span class="text-[10px] font-label-md">偏高，请遵医嘱</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Post-meal -->
|
||||
<div class="bg-surface-container-lowest rounded-2xl p-card-padding shadow-ambient border border-error-container">
|
||||
<div class="text-label-md font-label-md text-on-surface-variant mb-1">餐后</div>
|
||||
<div class="flex items-baseline gap-1 mb-2">
|
||||
<span class="text-display-lg font-display-lg text-error">20.00</span>
|
||||
<span class="text-label-md font-label-md text-error">mmol/L</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-error bg-error-container/30 px-2 py-1 rounded-md w-fit">
|
||||
<span class="material-symbols-outlined text-[14px]">warning</span>
|
||||
<span class="text-[10px] font-label-md">偏高，请遵医嘱</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full flex items-center justify-between bg-surface-container-lowest rounded-xl p-4 shadow-ambient mt-2">
|
||||
<div>
|
||||
<div class="text-body-md font-body-md font-bold">查看更多</div>
|
||||
<div class="text-label-md font-label-md text-on-surface-variant">健康日历 · 运动 · 家人互动</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline">chevron_right</span>
|
||||
</button>
|
||||
</section>
|
||||
<!-- Data Overview: Trend -->
|
||||
<section class="bg-surface-container-lowest rounded-2xl p-card-padding shadow-ambient">
|
||||
<div class="flex justify-between items-end mb-4">
|
||||
<div>
|
||||
<h2 class="text-headline-md font-headline-md">血糖趋势</h2>
|
||||
<p class="text-label-md font-label-md text-on-surface-variant">最近 7 天 · mmol/L</p>
|
||||
</div>
|
||||
<div class="flex gap-3 text-label-md font-label-md">
|
||||
<div class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-primary"></div>空腹</div>
|
||||
<div class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-tertiary-container"></div>餐后</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Summary Stats -->
|
||||
<div class="flex bg-surface-container-low rounded-xl p-3 mb-6 divide-x divide-outline-variant">
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<span class="text-headline-md font-headline-md text-error">1</span>
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">天偏高</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<span class="text-headline-md font-headline-md text-primary">1</span>
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">天正常</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center">
|
||||
<span class="text-headline-md font-headline-md text-on-surface">2</span>
|
||||
<span class="text-label-md font-label-md text-on-surface-variant">天有记录</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart Area Placeholder -->
|
||||
<div class="relative h-48 w-full mb-6 border-b border-l border-outline-variant">
|
||||
<!-- Y Axis Labels -->
|
||||
<div class="absolute -left-6 top-0 bottom-0 flex flex-col justify-between text-[10px] text-on-surface-variant">
|
||||
<span>23.0</span>
|
||||
<span>18.0</span>
|
||||
<span>13.0</span>
|
||||
<span>8.0</span>
|
||||
<span>3.0</span>
|
||||
</div>
|
||||
<!-- X Axis Labels -->
|
||||
<div class="absolute -bottom-5 left-0 right-0 flex justify-between text-[10px] text-on-surface-variant">
|
||||
<span>05-23</span>
|
||||
<span>05-25</span>
|
||||
<span>05-27</span>
|
||||
<span>05-29</span>
|
||||
</div>
|
||||
<!-- Threshold Line -->
|
||||
<div class="absolute bottom-[25%] w-full border-t border-dashed border-error opacity-50">
|
||||
<span class="absolute -top-4 text-[10px] text-error">空腹阈值 7</span>
|
||||
</div>
|
||||
<!-- Abstract Chart representation -->
|
||||
<svg class="absolute inset-0 h-full w-full" preserveaspectratio="none" viewbox="0 0 100 100">
|
||||
<path d="M 80 80 L 95 30" fill="none" stroke="#006c49" stroke-width="2"></path>
|
||||
<path d="M 85 85 L 95 15" fill="none" stroke="#fc7c78" stroke-width="2"></path>
|
||||
<circle cx="80" cy="80" fill="#ffffff" r="2" stroke="#006c49" stroke-width="1.5"></circle>
|
||||
<circle cx="95" cy="30" fill="#ffffff" r="2" stroke="#006c49" stroke-width="1.5"></circle>
|
||||
<circle cx="85" cy="85" fill="#ffffff" r="2" stroke="#fc7c78" stroke-width="1.5"></circle>
|
||||
<circle cx="95" cy="15" fill="#ffffff" r="2" stroke="#fc7c78" stroke-width="1.5"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Time Toggles -->
|
||||
<div class="flex bg-surface-container-low rounded-full p-1 w-full max-w-[240px] mx-auto mt-8">
|
||||
<button class="flex-1 py-2 text-label-md font-label-md bg-primary text-on-primary rounded-full shadow-sm">最近 7 天</button>
|
||||
<button class="flex-1 py-2 text-label-md font-label-md text-on-surface-variant rounded-full">最近 30 天</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- AI Nutrition Section -->
|
||||
<section class="bg-gradient-to-br from-primary-container/20 to-primary/10 rounded-2xl p-[2px] shadow-ambient overflow-hidden relative">
|
||||
<div class="bg-surface-container-lowest rounded-2xl p-card-padding relative z-10">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary text-[18px]">auto_awesome</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="text-body-lg font-body-lg font-bold">AI 饮食建议</h3>
|
||||
<span class="text-[10px] bg-primary/10 text-primary px-2 py-0.5 rounded-full border border-primary/20">智能定制</span>
|
||||
</div>
|
||||
<p class="text-[10px] text-on-surface-variant mt-0.5">读您近 7 天 · 30 天血糖，定制今日三餐</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex items-center gap-1 text-label-md font-label-md text-primary bg-primary/10 px-3 py-1.5 rounded-full">
|
||||
<span class="material-symbols-outlined text-[14px]">refresh</span>换一换
|
||||
</button>
|
||||
</div>
|
||||
<!-- Meals List -->
|
||||
<div class="flex flex-col gap-3 mb-4">
|
||||
<div class="text-label-md font-label-md text-primary font-bold flex items-center gap-1">
|
||||
<div class="w-1 h-3 bg-primary rounded-full"></div> 今日三餐
|
||||
</div>
|
||||
<!-- Breakfast -->
|
||||
<div class="bg-surface p-3 rounded-xl border border-surface-container-highest">
|
||||
<div class="flex items-center gap-1.5 mb-1.5">
|
||||
<span class="material-symbols-outlined text-tertiary-container text-[16px] fill-icon">wb_sunny</span>
|
||||
<span class="text-label-md font-label-md font-bold">早餐</span>
|
||||
</div>
|
||||
<p class="text-body-md font-body-md">小米粥（少米多水）加煮鸡蛋一个</p>
|
||||
</div>
|
||||
<!-- Lunch -->
|
||||
<div class="bg-primary/5 p-3 rounded-xl border-l-2 border-primary">
|
||||
<div class="flex items-center gap-1.5 mb-1.5">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] fill-icon">wb_twilight</span>
|
||||
<span class="text-label-md font-label-md font-bold text-primary">午餐</span>
|
||||
</div>
|
||||
<p class="text-body-md font-body-md">清蒸鱼块、蒜蓉炒苋菜、二米饭（小米掺大米）</p>
|
||||
</div>
|
||||
<!-- Dinner -->
|
||||
<div class="bg-surface p-3 rounded-xl border border-surface-container-highest">
|
||||
<div class="flex items-center gap-1.5 mb-1.5">
|
||||
<span class="material-symbols-outlined text-[#7e85cc] text-[16px] fill-icon">dark_mode</span>
|
||||
<span class="text-label-md font-label-md font-bold">晚餐</span>
|
||||
</div>
|
||||
<p class="text-body-md font-body-md">玉米糝粥（稀）配凉拌黄瓜</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tips -->
|
||||
<div class="bg-surface-container-low rounded-xl p-3 mb-4 text-body-md font-body-md text-on-surface-variant flex gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] mt-0.5">info</span>
|
||||
<p>小贴士：先吃菜和肉再吃主食，每餐七分饱，血糖高就少喝粥汤。</p>
|
||||
</div>
|
||||
<!-- Avoid List -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-1 text-error text-label-md font-label-md mb-2">
|
||||
<span class="material-symbols-outlined text-[14px]">warning</span> 今日尽量少碰
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-error-container/30 text-error px-3 py-1 rounded-full text-[12px] border border-error-container">白馒头</span>
|
||||
<span class="bg-error-container/30 text-error px-3 py-1 rounded-full text-[12px] border border-error-container">油条</span>
|
||||
<span class="bg-error-container/30 text-error px-3 py-1 rounded-full text-[12px] border border-error-container">粘豆包</span>
|
||||
<span class="bg-error-container/30 text-error px-3 py-1 rounded-full text-[12px] border border-error-container">糯米饭</span>
|
||||
<span class="bg-error-container/30 text-error px-3 py-1 rounded-full text-[12px] border border-error-container">西瓜</span>
|
||||
<span class="bg-error-container/30 text-error px-3 py-1 rounded-full text-[12px] border border-error-container">含糖饮料</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-3">
|
||||
<button class="flex-1 bg-primary text-on-primary rounded-xl py-3 text-body-md font-body-md font-bold hover:bg-on-primary-fixed-variant transition-colors">填入今日饮食</button>
|
||||
<button class="flex-1 bg-surface-container border border-outline-variant text-on-surface rounded-xl py-3 text-body-md font-body-md font-bold hover:bg-surface-container-high transition-colors">手动记录</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative background elements -->
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full blur-2xl -mr-10 -mt-10 pointer-events-none"></div>
|
||||
<div class="absolute bottom-0 left-0 w-24 h-24 bg-tertiary-container/10 rounded-full blur-xl -ml-10 -mb-10 pointer-events-none"></div>
|
||||
</section>
|
||||
<!-- Ask AI -->
|
||||
<section class="bg-surface-container-lowest rounded-2xl p-4 shadow-ambient border border-surface-container-highest">
|
||||
<h3 class="text-body-md font-body-md font-bold mb-1">能不能吃？</h3>
|
||||
<p class="text-[10px] text-on-surface-variant mb-3">输入食物名称，结合您的档案判断</p>
|
||||
<div class="flex gap-2">
|
||||
<input class="flex-1 bg-surface rounded-xl border border-outline-variant px-3 py-2 text-body-md focus:ring-2 focus:ring-primary focus:border-primary outline-none" placeholder="如：白馒头、地瓜、粘豆包" type="text"/>
|
||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-xl flex items-center gap-1 hover:bg-on-primary-fixed-variant transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">auto_awesome</span>
|
||||
<span class="text-body-md font-body-md font-bold">问 AI</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Disclaimer -->
|
||||
<footer class="text-center py-6">
|
||||
<p class="text-[10px] text-outline">数据仅供参考，请遵医嘱</p>
|
||||
</footer>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 w-full z-50 rounded-t-2xl shadow-[0_-4px_20px_0_rgba(0,0,0,0.05)] bg-surface-container-lowest md:hidden flex justify-around items-center h-16 px-4">
|
||||
<button class="flex flex-col items-center justify-center text-primary font-bold w-16">
|
||||
<span class="material-symbols-outlined fill-icon mb-1">home</span>
|
||||
<span class="text-[10px] font-label-md">首页</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant opacity-60 w-16 hover:bg-surface-container-high transition-all rounded-xl py-1">
|
||||
<span class="material-symbols-outlined mb-1">add_circle</span>
|
||||
<span class="text-[10px] font-label-md">记录</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant opacity-60 w-16 hover:bg-surface-container-high transition-all rounded-xl py-1">
|
||||
<span class="material-symbols-outlined mb-1">analytics</span>
|
||||
<span class="text-[10px] font-label-md">动态</span>
|
||||
</button>
|
||||
<button class="flex flex-col items-center justify-center text-on-surface-variant opacity-60 w-16 hover:bg-surface-container-high transition-all rounded-xl py-1">
|
||||
<span class="material-symbols-outlined mb-1">person</span>
|
||||
<span class="text-[10px] font-label-md">我的</span>
|
||||
</button>
|
||||
</nav>
|
||||
</body></html>
|
||||
@@ -373,24 +373,38 @@
|
||||
<!-- AI 饮食助手（霍大夫升糖指数 · 结合近7/30天血糖） -->
|
||||
<view v-if="diagnosisId" class="card ai-diet-card">
|
||||
<view class="ai-diet-hero">
|
||||
<view class="ai-diet-hero-main">
|
||||
<view class="ai-diet-hero-icon" aria-hidden="true">
|
||||
<TongjiIcon name="sparkles" size="md" color="#ffffff" />
|
||||
</view>
|
||||
<view class="ai-diet-hero-copy">
|
||||
<text class="ai-diet-title">AI 饮食建议</text>
|
||||
<text class="ai-diet-sub">读您近 7 天 · 30 天血糖，定制今日三餐</text>
|
||||
</view>
|
||||
<view class="ai-diet-hero-aurora" aria-hidden="true">
|
||||
<view class="ai-diet-blob ai-diet-blob-1" />
|
||||
<view class="ai-diet-blob ai-diet-blob-2" />
|
||||
<view class="ai-diet-blob ai-diet-blob-3" />
|
||||
</view>
|
||||
<view
|
||||
class="ai-diet-refresh"
|
||||
:class="{ disabled: dietAiLoading }"
|
||||
role="button"
|
||||
aria-label="换一换今日饮食建议"
|
||||
@click="refreshDietAiRecommend"
|
||||
>
|
||||
<TongjiIcon name="refresh" size="sm" color="#204e2b" />
|
||||
<text>{{ dietAiLoading ? '生成中' : '换一换' }}</text>
|
||||
<view class="ai-diet-hero-content">
|
||||
<view class="ai-diet-hero-main">
|
||||
<view class="ai-diet-hero-icon" :class="{ thinking: dietAiLoading }" aria-hidden="true">
|
||||
<view class="ai-diet-hero-icon-ring" />
|
||||
<TongjiIcon name="sparkles" size="md" color="#ffffff" />
|
||||
</view>
|
||||
<view class="ai-diet-hero-copy">
|
||||
<view class="ai-diet-hero-titles">
|
||||
<text class="ai-diet-title">AI 饮食建议</text>
|
||||
<view class="ai-diet-badge">
|
||||
<view class="ai-diet-badge-dot" />
|
||||
<text>智能定制</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="ai-diet-sub">读您近 7 天 · 30 天血糖，定制今日三餐</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="ai-diet-refresh"
|
||||
:class="{ disabled: dietAiLoading }"
|
||||
role="button"
|
||||
aria-label="换一换今日饮食建议"
|
||||
@click="refreshDietAiRecommend"
|
||||
>
|
||||
<TongjiIcon name="refresh" size="sm" color="#ffffff" />
|
||||
<text>{{ dietAiLoading ? '生成中' : '换一换' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -412,7 +426,7 @@
|
||||
<view class="ai-diet-meal-card meal-breakfast">
|
||||
<view class="ai-diet-meal-head">
|
||||
<view class="ai-diet-meal-icon" aria-hidden="true">
|
||||
<TongjiIcon name="sun" size="sm" color="#204e2b" />
|
||||
<TongjiIcon name="sun" size="sm" color="#ffffff" />
|
||||
</view>
|
||||
<text class="ai-diet-meal-label">早餐</text>
|
||||
</view>
|
||||
@@ -423,7 +437,7 @@
|
||||
<view class="ai-diet-meal-card meal-lunch">
|
||||
<view class="ai-diet-meal-head">
|
||||
<view class="ai-diet-meal-icon" aria-hidden="true">
|
||||
<TongjiIcon name="sunset" size="sm" color="#204e2b" />
|
||||
<TongjiIcon name="sunset" size="sm" color="#ffffff" />
|
||||
</view>
|
||||
<text class="ai-diet-meal-label">午餐</text>
|
||||
</view>
|
||||
@@ -434,7 +448,7 @@
|
||||
<view class="ai-diet-meal-card meal-dinner">
|
||||
<view class="ai-diet-meal-head">
|
||||
<view class="ai-diet-meal-icon" aria-hidden="true">
|
||||
<TongjiIcon name="moon" size="sm" color="#204e2b" />
|
||||
<TongjiIcon name="moon" size="sm" color="#ffffff" />
|
||||
</view>
|
||||
<text class="ai-diet-meal-label">晚餐</text>
|
||||
</view>
|
||||
@@ -6119,77 +6133,185 @@ async function onFamilyLike() {
|
||||
@import '../styles/daily-theme.scss';
|
||||
|
||||
.ai-diet-card {
|
||||
margin: 24rpx 24rpx 0;
|
||||
margin: 28rpx 24rpx 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 28rpx;
|
||||
border: 1rpx solid var(--border-soft);
|
||||
box-shadow: var(--shadow-premium);
|
||||
border-radius: 34rpx;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 18rpx 48rpx rgba(14, 138, 138, 0.14), 0 6rpx 16rpx rgba(32, 78, 43, 0.06);
|
||||
}
|
||||
|
||||
/* ===== Hero：清新极光渐变 ===== */
|
||||
.ai-diet-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 32rpx 26rpx;
|
||||
background: linear-gradient(135deg, #1f6f4a 0%, #0d8a82 58%, #14b8a6 100%);
|
||||
}
|
||||
.ai-diet-hero-aurora {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ai-diet-blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.ai-diet-blob-1 {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
top: -120rpx;
|
||||
right: -60rpx;
|
||||
background: radial-gradient(circle, rgba(94, 234, 212, 0.9) 0%, rgba(94, 234, 212, 0) 70%);
|
||||
animation: ai-diet-float 7s ease-in-out infinite;
|
||||
}
|
||||
.ai-diet-blob-2 {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
bottom: -110rpx;
|
||||
left: -50rpx;
|
||||
background: radial-gradient(circle, rgba(165, 243, 252, 0.8) 0%, rgba(165, 243, 252, 0) 70%);
|
||||
animation: ai-diet-float 9s ease-in-out infinite reverse;
|
||||
}
|
||||
.ai-diet-blob-3 {
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
top: 6rpx;
|
||||
left: 42%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
|
||||
animation: ai-diet-float 11s ease-in-out infinite;
|
||||
}
|
||||
@keyframes ai-diet-float {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
50% { transform: translate(-16rpx, 16rpx); }
|
||||
}
|
||||
.ai-diet-hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
padding: 28rpx 24rpx 24rpx;
|
||||
background: linear-gradient(135deg, var(--primary-light) 0%, #f0faf4 55%, #ffffff 100%);
|
||||
border-bottom: 1rpx solid var(--border-soft);
|
||||
}
|
||||
.ai-diet-hero-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.ai-diet-hero-icon {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20rpx;
|
||||
background: var(--primary-grad);
|
||||
box-shadow: var(--shadow-glow-primary);
|
||||
border-radius: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 8rpx 22rpx rgba(0, 0, 0, 0.14), inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.ai-diet-hero-icon-ring {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
left: -8rpx;
|
||||
right: -8rpx;
|
||||
bottom: -8rpx;
|
||||
border-radius: 30rpx;
|
||||
border: 3rpx solid rgba(255, 255, 255, 0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
.ai-diet-hero-icon.thinking .ai-diet-hero-icon-ring {
|
||||
animation: ai-diet-ring 1.6s ease-out infinite;
|
||||
}
|
||||
@keyframes ai-diet-ring {
|
||||
0% { opacity: 0.7; transform: scale(0.82); }
|
||||
100% { opacity: 0; transform: scale(1.28); }
|
||||
}
|
||||
.ai-diet-hero-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.ai-diet-hero-titles {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ai-diet-title {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
color: #ffffff;
|
||||
letter-spacing: 1rpx;
|
||||
line-height: 1.25;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.ai-diet-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7rpx;
|
||||
padding: 5rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.ai-diet-badge text {
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.5rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.ai-diet-badge-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: #a7f3d0;
|
||||
box-shadow: 0 0 10rpx #6ee7b7;
|
||||
animation: ai-diet-pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes ai-diet-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.35; transform: scale(0.7); }
|
||||
}
|
||||
.ai-diet-sub {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
color: var(--text-secondary);
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
.ai-diet-refresh {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
min-height: 64rpx;
|
||||
padding: 0 20rpx;
|
||||
min-height: 60rpx;
|
||||
padding: 0 22rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid var(--border-soft);
|
||||
color: var(--primary);
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.42);
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4rpx 12rpx rgba(32, 78, 43, 0.06);
|
||||
box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.1);
|
||||
transition: opacity 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
.ai-diet-refresh.disabled {
|
||||
opacity: 0.55;
|
||||
opacity: 0.6;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ai-diet-blob,
|
||||
.ai-diet-hero-icon.thinking .ai-diet-hero-icon-ring,
|
||||
.ai-diet-badge-dot {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 建议依据：近7天 / 近30天 血糖回顾 ===== */
|
||||
@@ -6325,11 +6447,23 @@ async function onFamilyLike() {
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
.ai-diet-section-title {
|
||||
position: relative;
|
||||
padding-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
.ai-diet-section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4rpx;
|
||||
bottom: 4rpx;
|
||||
width: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: linear-gradient(180deg, #10b981 0%, #14b8a6 100%);
|
||||
}
|
||||
.ai-diet-section-tag {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
@@ -6402,44 +6536,69 @@ async function onFamilyLike() {
|
||||
gap: 12rpx;
|
||||
}
|
||||
.ai-diet-meal-card {
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
padding: 22rpx 22rpx 22rpx 26rpx;
|
||||
border-radius: 22rpx;
|
||||
background: var(--surface);
|
||||
border: 1rpx solid var(--border-soft);
|
||||
border-left-width: 6rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ai-diet-meal-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.ai-diet-meal-card.meal-breakfast {
|
||||
border-left-color: #d97706;
|
||||
background: linear-gradient(90deg, rgba(217, 119, 6, 0.06) 0%, #ffffff 28%);
|
||||
background: linear-gradient(120deg, rgba(251, 191, 36, 0.14) 0%, rgba(255, 255, 255, 0) 45%);
|
||||
}
|
||||
.ai-diet-meal-card.meal-breakfast::before {
|
||||
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
|
||||
}
|
||||
.ai-diet-meal-card.meal-lunch {
|
||||
border-left-color: var(--primary);
|
||||
background: linear-gradient(90deg, var(--primary-glow) 0%, #ffffff 28%);
|
||||
background: linear-gradient(120deg, rgba(16, 185, 129, 0.16) 0%, rgba(255, 255, 255, 0) 45%);
|
||||
}
|
||||
.ai-diet-meal-card.meal-lunch::before {
|
||||
background: linear-gradient(180deg, #10b981 0%, #0d8a82 100%);
|
||||
}
|
||||
.ai-diet-meal-card.meal-dinner {
|
||||
border-left-color: #4f46e5;
|
||||
background: linear-gradient(90deg, rgba(79, 70, 229, 0.06) 0%, #ffffff 28%);
|
||||
background: linear-gradient(120deg, rgba(99, 102, 241, 0.14) 0%, rgba(255, 255, 255, 0) 45%);
|
||||
}
|
||||
.ai-diet-meal-card.meal-dinner::before {
|
||||
background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%);
|
||||
}
|
||||
.ai-diet-meal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.ai-diet-meal-icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12rpx;
|
||||
background: var(--primary-light);
|
||||
border-radius: 14rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.meal-breakfast .ai-diet-meal-icon {
|
||||
background: linear-gradient(150deg, #fde68a 0%, #fbbf24 100%);
|
||||
}
|
||||
.meal-lunch .ai-diet-meal-icon {
|
||||
background: linear-gradient(150deg, #6ee7b7 0%, #10b981 100%);
|
||||
}
|
||||
.meal-dinner .ai-diet-meal-icon {
|
||||
background: linear-gradient(150deg, #c7d2fe 0%, #818cf8 100%);
|
||||
}
|
||||
.ai-diet-meal-label {
|
||||
font-size: 26rpx;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
letter-spacing: 1rpx;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.ai-diet-meal-text {
|
||||
display: block;
|
||||
@@ -6520,9 +6679,9 @@ async function onFamilyLike() {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.ai-diet-btn.primary {
|
||||
background: var(--primary-grad);
|
||||
background: linear-gradient(135deg, #1f6f4a 0%, #0d8a82 55%, #14b8a6 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: var(--shadow-glow-primary);
|
||||
box-shadow: 0 10rpx 22rpx rgba(14, 138, 138, 0.28);
|
||||
border: none;
|
||||
}
|
||||
.ai-diet-btn.ghost {
|
||||
@@ -6717,11 +6876,11 @@ async function onFamilyLike() {
|
||||
gap: 6rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--primary-grad);
|
||||
background: linear-gradient(135deg, #1f6f4a 0%, #0d8a82 55%, #14b8a6 100%);
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-glow-primary);
|
||||
box-shadow: 0 8rpx 18rpx rgba(14, 138, 138, 0.26);
|
||||
}
|
||||
.ai-diet-ask-btn.disabled {
|
||||
opacity: 0.55;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* Google Stitch MCP · VitalMint Health
|
||||
* 设计 token 与 stitch-weekly.html tailwind.config 一一对应
|
||||
*/
|
||||
|
||||
.weekly-page {
|
||||
--primary: #006c49;
|
||||
--on-primary: #ffffff;
|
||||
--on-primary-fixed-variant: #005236;
|
||||
--primary-container: #10b981;
|
||||
--on-primary-container: #00422b;
|
||||
--inverse-primary: #4edea3;
|
||||
|
||||
--surface: #f4fbf4;
|
||||
--on-surface: #161d19;
|
||||
--on-surface-variant: #3c4a42;
|
||||
--surface-container-lowest: #ffffff;
|
||||
--surface-container-low: #eef6ee;
|
||||
--surface-container: #e8f0e9;
|
||||
--surface-container-high: #e3eae3;
|
||||
--surface-container-highest: #dde4dd;
|
||||
--surface-variant: #dde4dd;
|
||||
|
||||
--outline: #6c7a71;
|
||||
--outline-variant: #bbcabf;
|
||||
|
||||
--error: #ba1a1a;
|
||||
--on-error-container: #93000a;
|
||||
--error-container: #ffdad6;
|
||||
--tertiary: #a43a3a;
|
||||
--tertiary-container: #fc7c78;
|
||||
|
||||
--st-container-margin: 40rpx;
|
||||
--st-section-gap: 64rpx;
|
||||
--st-card-padding: 40rpx;
|
||||
--st-stack-gap: 32rpx;
|
||||
--st-inline-gap: 24rpx;
|
||||
--st-radius-2xl: 48rpx;
|
||||
--st-radius-xl: 24rpx;
|
||||
--st-radius-lg: 16rpx;
|
||||
--st-shadow-ambient: 0 20rpx 60rpx -20rpx rgba(0, 108, 73, 0.08);
|
||||
|
||||
min-height: 100vh;
|
||||
background: var(--surface);
|
||||
color: var(--on-surface);
|
||||
padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
/* weekly.vue 录入弹窗 — 沿用 MCP 主色 */
|
||||
|
||||
.weekly-page .input-modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
backdrop-filter: blur(12px);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
animation: input-modal-mask-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.weekly-page .input-modal {
|
||||
width: 100%;
|
||||
max-width: 750rpx;
|
||||
background: var(--surface-container-lowest);
|
||||
border-radius: 36rpx 36rpx 0 0;
|
||||
padding: 16rpx 0 calc(20rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -12rpx 36rpx rgba(15, 23, 42, 0.12);
|
||||
max-height: 88vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: input-modal-rise 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
@keyframes input-modal-mask-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes input-modal-rise {
|
||||
from { transform: translate3d(0, 100%, 0); opacity: 0.96; }
|
||||
to { transform: translate3d(0, 0, 0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes input-modal-content-in {
|
||||
from { opacity: 0; transform: translate3d(0, 24rpx, 0); }
|
||||
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-grip {
|
||||
width: 80rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 999rpx;
|
||||
background: var(--surface-container-highest);
|
||||
margin: 0 auto 8rpx;
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 32rpx 16rpx;
|
||||
border-bottom: 1rpx solid var(--surface-container-low);
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-sub {
|
||||
font-size: 26rpx;
|
||||
color: var(--on-surface-variant);
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-close {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999rpx;
|
||||
background: var(--surface-container-low);
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-close-icon {
|
||||
font-size: 42rpx;
|
||||
color: var(--outline);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.weekly-page .phone-gate-body {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.weekly-page .phone-gate-tip {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: var(--on-surface-variant);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.weekly-page .phone-gate-gender-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.weekly-page .phone-gate-gender-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.weekly-page .phone-gate-gender-opt {
|
||||
flex: 1;
|
||||
min-height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--st-radius-xl);
|
||||
background: var(--surface-container-lowest);
|
||||
border: 2rpx solid var(--outline-variant);
|
||||
color: var(--on-surface-variant);
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.weekly-page .phone-gate-gender-opt.active {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.weekly-page .phone-gate-btn {
|
||||
width: 100%;
|
||||
min-height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
border-radius: var(--st-radius-xl);
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.weekly-page .phone-gate-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-loading {
|
||||
min-height: 520rpx;
|
||||
padding: 120rpx 0;
|
||||
text-align: center;
|
||||
color: var(--outline);
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-body {
|
||||
flex: 1;
|
||||
min-height: 520rpx;
|
||||
padding: 20rpx 32rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-body-ready {
|
||||
animation: input-modal-content-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-tip {
|
||||
background: var(--surface-container-low);
|
||||
border: 1rpx dashed var(--outline-variant);
|
||||
border-radius: 14rpx;
|
||||
padding: 18rpx 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: var(--on-surface-variant);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.weekly-page .input-section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
margin: 18rpx 0 14rpx;
|
||||
}
|
||||
|
||||
.weekly-page .input-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 14rpx 0;
|
||||
border-bottom: 1rpx solid var(--surface-container-low);
|
||||
min-height: 88rpx;
|
||||
}
|
||||
|
||||
.weekly-page .input-field-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
width: 180rpx;
|
||||
font-size: 30rpx;
|
||||
color: var(--on-surface);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.weekly-page .input-field-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.weekly-page .input-field-dot-fasting {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.weekly-page .input-field-dot-postprandial {
|
||||
background: var(--tertiary-container);
|
||||
}
|
||||
|
||||
.weekly-page .input-field-dot-other {
|
||||
background: var(--outline);
|
||||
}
|
||||
|
||||
.weekly-page .input-field-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--surface);
|
||||
border-radius: 16rpx;
|
||||
padding: 18rpx 20rpx;
|
||||
min-height: 76rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.weekly-page .input-field-input input {
|
||||
width: 100%;
|
||||
font-size: 34rpx;
|
||||
color: var(--on-surface);
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.weekly-page .input-placeholder {
|
||||
color: var(--outline);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.weekly-page .input-field-textarea textarea {
|
||||
width: 100%;
|
||||
min-height: 140rpx;
|
||||
background: var(--surface);
|
||||
border-radius: 14rpx;
|
||||
padding: 20rpx 22rpx;
|
||||
font-size: 30rpx;
|
||||
color: var(--on-surface);
|
||||
border: 2rpx solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-actions {
|
||||
display: flex;
|
||||
gap: 18rpx;
|
||||
padding: 20rpx 32rpx 0;
|
||||
border-top: 1rpx solid var(--surface-container-low);
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-btn {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
border-radius: var(--st-radius-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-btn.primary {
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-btn.danger {
|
||||
flex: 0 0 180rpx;
|
||||
background: var(--error-container);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.weekly-page .input-modal-btn.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -0,0 +1,655 @@
|
||||
/**
|
||||
* weekly.vue — 与 code.html (Stitch Modern WeChat UI) 1:1
|
||||
*/
|
||||
|
||||
.weekly-page {
|
||||
--st-shadow-ambient: 0 24rpx 60rpx -20rpx rgba(0, 108, 73, 0.08), 0 8rpx 20rpx -8rpx rgba(0, 0, 0, 0.03);
|
||||
--st-shadow-cta: 0 16rpx 32rpx rgba(0, 108, 73, 0.2);
|
||||
--st-shadow-float: 0 16rpx 64rpx rgba(0, 108, 73, 0.15);
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
.weekly-page .st-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: var(--st-container-margin);
|
||||
padding-right: var(--st-container-margin);
|
||||
padding-bottom: 32rpx;
|
||||
/* padding-top / padding-right 由 initHeaderSafeArea 动态设置 */
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.weekly-page .st-header-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.weekly-page .st-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--st-inline-gap);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.weekly-page .st-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-container);
|
||||
border: 4rpx solid var(--surface-container-lowest);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.weekly-page .st-greet {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.27;
|
||||
color: var(--on-surface);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.weekly-page .st-status {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.weekly-page .st-voice-round {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.weekly-page .st-voice-round.disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.weekly-page .st-card-scroll {
|
||||
margin: 0 var(--st-container-margin) 8rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.weekly-page .st-card-row {
|
||||
display: inline-flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-card-chip {
|
||||
padding: 12rpx 28rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
background: var(--surface-container-lowest);
|
||||
border: 1rpx solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.weekly-page .st-card-chip.active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
|
||||
/* ===== Main ===== */
|
||||
.weekly-page .st-main {
|
||||
padding: 0 var(--st-container-margin) 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-main-spacer {
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
/* CTA — rounded-2xl h-14 */
|
||||
.weekly-page .st-cta {
|
||||
width: 100%;
|
||||
height: 112rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
border-radius: var(--st-radius-2xl);
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--st-shadow-cta);
|
||||
}
|
||||
|
||||
.weekly-page .st-cta:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* ===== Chart card — rounded-3xl ===== */
|
||||
.weekly-page .st-chart-card {
|
||||
padding: 40rpx;
|
||||
border-radius: 48rpx;
|
||||
background: var(--surface-container-lowest);
|
||||
border: 1rpx solid rgba(221, 228, 221, 0.3);
|
||||
box-shadow: var(--st-shadow-ambient);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-title {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-sub {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-legend {
|
||||
display: flex;
|
||||
gap: var(--st-inline-gap);
|
||||
}
|
||||
|
||||
.weekly-page .st-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.weekly-page .st-legend-item.inactive {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.weekly-page .st-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.weekly-page .st-dot-fasting {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.weekly-page .st-dot-post {
|
||||
background: var(--tertiary);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-summary {
|
||||
display: flex;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 48rpx;
|
||||
border-radius: var(--st-radius-xl);
|
||||
background: var(--surface-container-low);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-summary-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-right: 1rpx solid var(--surface-container-highest);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-summary-item:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-summary-num {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-summary-num.is-high {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-summary-num.is-good {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-summary-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-area {
|
||||
position: relative;
|
||||
height: 360rpx;
|
||||
border-bottom: 1rpx dashed var(--surface-container-highest);
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-canvas {
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.weekly-page .st-chart-empty,
|
||||
.weekly-page .st-chart-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
/* ===== 最新测量 ===== */
|
||||
.weekly-page .st-latest-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-latest-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 320rpx;
|
||||
padding: 48rpx 40rpx;
|
||||
border-radius: 48rpx;
|
||||
background: var(--surface-container-lowest);
|
||||
box-shadow: var(--st-shadow-ambient);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.weekly-page .st-latest-hero.is-high {
|
||||
background: var(--error-container);
|
||||
color: var(--on-error-container);
|
||||
}
|
||||
|
||||
.weekly-page .st-latest-hero-pattern {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.1;
|
||||
background-image: radial-gradient(circle at 4rpx 4rpx, currentColor 2rpx, transparent 0);
|
||||
background-size: 32rpx 32rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.weekly-page .st-latest-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-latest-value-row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-latest-value {
|
||||
font-size: 112rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.weekly-page .st-latest-hero.is-high .st-latest-value,
|
||||
.weekly-page .st-latest-hero.is-high .st-latest-unit {
|
||||
color: var(--on-error-container);
|
||||
}
|
||||
|
||||
.weekly-page .st-latest-unit {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.weekly-page .st-latest-flag {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 24rpx;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.weekly-page .st-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-summary-card {
|
||||
padding: 32rpx;
|
||||
border-radius: var(--st-radius-2xl);
|
||||
background: var(--surface-container-lowest);
|
||||
border: 1rpx solid rgba(221, 228, 221, 0.5);
|
||||
box-shadow: var(--st-shadow-ambient);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-summary-label {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.weekly-page .st-summary-value {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.weekly-page .st-summary-value.is-high {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
.weekly-page .st-summary-tag {
|
||||
align-self: flex-start;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: var(--tertiary);
|
||||
background: rgba(255, 218, 214, 0.5);
|
||||
}
|
||||
|
||||
/* ===== AI 饮食 ===== */
|
||||
.weekly-page .st-ai-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 40rpx;
|
||||
border-radius: 48rpx;
|
||||
background: linear-gradient(135deg, rgba(0, 108, 73, 0.1) 0%, rgba(0, 108, 73, 0.05) 100%);
|
||||
border: 1rpx solid rgba(0, 108, 73, 0.1);
|
||||
}
|
||||
|
||||
.weekly-page .st-ai-deco {
|
||||
position: absolute;
|
||||
width: 256rpx;
|
||||
height: 256rpx;
|
||||
top: -64rpx;
|
||||
right: -64rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(78, 222, 163, 0.2);
|
||||
filter: blur(40rpx);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.weekly-page .st-ai-head {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-ai-head-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-ai-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.weekly-page .st-ai-icon.thinking {
|
||||
animation: st-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes st-pulse {
|
||||
50% { opacity: 0.65; }
|
||||
}
|
||||
|
||||
.weekly-page .st-ai-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.weekly-page .st-ai-refresh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.weekly-page .st-ai-refresh.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.weekly-page .st-ai-sub {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
margin-bottom: 32rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.43;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.weekly-page .st-meal-list {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-meal-glass {
|
||||
padding: 32rpx;
|
||||
border-radius: var(--st-radius-2xl);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1rpx solid #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.weekly-page .st-meal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-meal-label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.weekly-page .st-meal-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.43;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.weekly-page .st-skeleton-line {
|
||||
height: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.weekly-page .st-skeleton-hint {
|
||||
font-size: 26rpx;
|
||||
color: var(--outline);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== 底部浮动输入 ===== */
|
||||
.weekly-page .st-float-ask {
|
||||
position: fixed;
|
||||
left: var(--st-container-margin);
|
||||
right: var(--st-container-margin);
|
||||
bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.weekly-page .st-float-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
padding: 16rpx 16rpx 16rpx 40rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20rpx);
|
||||
border: 1rpx solid rgba(0, 108, 73, 0.1);
|
||||
box-shadow: var(--st-shadow-float);
|
||||
}
|
||||
|
||||
.weekly-page .st-float-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 108, 73, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.weekly-page .st-float-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--on-surface);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.weekly-page .st-float-placeholder {
|
||||
color: rgba(60, 74, 66, 0.6);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.weekly-page .st-float-send {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 108, 73, 0.2);
|
||||
}
|
||||
|
||||
.weekly-page .st-float-send.disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.weekly-page .st-float-send:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.weekly-page .st-float-result {
|
||||
margin-top: 16rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
border-radius: var(--st-radius-xl);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1rpx solid var(--outline-variant);
|
||||
box-shadow: var(--st-shadow-ambient);
|
||||
}
|
||||
|
||||
.weekly-page .st-float-badge {
|
||||
display: inline-block;
|
||||
margin-bottom: 8rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
background: rgba(0, 108, 73, 0.1);
|
||||
}
|
||||
|
||||
.weekly-page .st-float-advice {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.weekly-page .ai-stream-cursor {
|
||||
animation: st-blink 0.8s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes st-blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
.weekly-page .chart-tip {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
padding: 12rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba(22, 29, 25, 0.88);
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.weekly-page .chart-tip-date {
|
||||
font-weight: 700;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.weekly-page .chart-tip-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user