fix: 更新膳食建议和膳食问卷页面
This commit is contained in:
liuyunqin
@@ -5,232 +5,544 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>膳食建议 - 员工端 | 健康CQ原型</title>
|
||||
<style>
|
||||
/* ================================================================
|
||||
Design Tokens — 统一设计变量
|
||||
================================================================ */
|
||||
:root {
|
||||
--green-50: #f6ffed;
|
||||
--green-100: #d9f7be;
|
||||
--green-400: #73d13d;
|
||||
--green-500: #52c41a;
|
||||
--green-600: #389e0d;
|
||||
--green-700: #237804;
|
||||
--blue-50: #e6f7ff;
|
||||
--blue-500: #1677ff;
|
||||
--blue-600: #0958d9;
|
||||
--gold-50: #fffbe6;
|
||||
--gold-500: #faad14;
|
||||
--gold-600: #d48806;
|
||||
--red-50: #fff1f0;
|
||||
--red-100: #ffccc7;
|
||||
--red-500: #ff4d4f;
|
||||
--red-600: #d9363e;
|
||||
--purple-400:#667eea;
|
||||
--purple-500:#5b6be8;
|
||||
--purple-600:#4a56d4;
|
||||
--text-title: #1a1a1a;
|
||||
--text-body: #333;
|
||||
--text-secondary:#666;
|
||||
--text-hint: #999;
|
||||
--text-placeholder:#bbb;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-card: #fff;
|
||||
--bg-subtle: #f7f8fa;
|
||||
--bg-item: #f9fafb;
|
||||
--border-light: #f0f0f0;
|
||||
--border-normal: #e0e0e0;
|
||||
--shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
|
||||
--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
|
||||
--shadow-md: 0 6px 20px rgba(0,0,0,0.1);
|
||||
--shadow-lg: 0 16px 48px rgba(0,0,0,0.2);
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 20px;
|
||||
--font-xs: 10px; --font-sm: 12px; --font-md: 14px; --font-lg: 16px; --font-xl: 20px;
|
||||
--transition: .2s ease;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
Reset & Layout
|
||||
================================================================ */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #f5f7fa; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
display: flex; justify-content: center; align-items: flex-start;
|
||||
min-height: 100vh; padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 44px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
|
||||
overflow: hidden; position: relative;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* ---- Status & Nav ---- */
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; background: #fff; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #333; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: var(--text-title); }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.nav-action { font-size: 13px; color: #1677ff; cursor: pointer; font-weight: 500; width: 56px; text-align: right; flex-shrink: 0; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; position: relative; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid var(--border-light); }
|
||||
.nav-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-title); border-radius: 50%; transition: background var(--transition); }
|
||||
.nav-back:active { background: rgba(0,0,0,0.05); }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: var(--text-title); letter-spacing: .3px; }
|
||||
.nav-action { font-size: 13px; color: var(--blue-500); cursor: pointer; font-weight: 500; width: 56px; text-align: right; flex-shrink: 0; transition: color var(--transition); }
|
||||
.nav-action:active { color: var(--blue-600); }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; position: relative; -webkit-overflow-scrolling: touch; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ===== 膳食注意事项（可折叠） ===== */
|
||||
.alert-banner { background: #fff; margin: 8px 12px 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
|
||||
.alert-banner__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; user-select: none; }
|
||||
.alert-banner__icon { font-size: 16px; flex-shrink: 0; line-height: 1.3; }
|
||||
.alert-banner__title { font-size: 13px; font-weight: 700; color: #a8071a; flex: 1; }
|
||||
.alert-banner__arrow { font-size: 11px; color: #999; transition: transform .25s; flex-shrink: 0; }
|
||||
/* ================================================================
|
||||
Card Base — 通用卡片
|
||||
================================================================ */
|
||||
.card { background: var(--bg-card); margin: 12px 12px 0; border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-xs); }
|
||||
|
||||
/* ================================================================
|
||||
1. 膳食注意事项（可折叠）
|
||||
================================================================ */
|
||||
.alert-banner {
|
||||
background: var(--bg-card); margin: 12px 12px 0;
|
||||
border-radius: var(--radius-md); overflow: hidden;
|
||||
box-shadow: var(--shadow-xs);
|
||||
border-left: 3px solid var(--red-500);
|
||||
}
|
||||
.alert-banner__header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; user-select: none; }
|
||||
.alert-banner__icon { font-size: 18px; flex-shrink: 0; }
|
||||
.alert-banner__title { font-size: 14px; font-weight: 700; color: var(--text-title); flex: 1; }
|
||||
.alert-banner__arrow { font-size: 12px; color: var(--text-hint); transition: transform .25s ease; flex-shrink: 0; }
|
||||
.alert-banner__arrow.collapsed { transform: rotate(180deg); }
|
||||
.alert-banner__body { padding: 0 12px 10px; }
|
||||
.alert-banner__body { padding: 0 14px 14px; }
|
||||
.alert-banner__body.collapsed { display: none; }
|
||||
.alert-banner__text { font-size: 12px; color: #a8071a; line-height: 1.5; }
|
||||
|
||||
/* ===== 热量目标卡片 ===== */
|
||||
.calorie-goal { background: linear-gradient(135deg, #6ee16e 0%, #3ec46a 100%); margin: 10px 12px 0; border-radius: 16px; padding: 16px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(62,196,106,0.25); }
|
||||
.calorie-goal::after { content: ''; position: absolute; bottom: -30px; right: -20px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none; }
|
||||
.calorie-goal__header { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
|
||||
.calorie-goal__label { font-size: 13px; opacity: 0.85; }
|
||||
.calorie-goal__bmr { font-size: 11px; opacity: 0.7; }
|
||||
.calorie-goal__val { font-size: 42px; font-weight: 800; line-height: 1; margin: 4px 0 2px; position: relative; z-index: 1; }
|
||||
.calorie-goal__unit { font-size: 16px; font-weight: 500; opacity: 0.8; }
|
||||
.calorie-goal__sub { font-size: 12px; opacity: 0.7; position: relative; z-index: 1; }
|
||||
.calorie-goal__bar-wrap { position: relative; z-index: 1; margin-top: 10px; display: flex; border-radius: 6px; height: 8px; overflow: hidden; gap: 2px; }
|
||||
.tips-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.tips-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); transition: background var(--transition); }
|
||||
.tips-item:hover { background: #f0f2f5; }
|
||||
.tips-item__icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 800; color: #fff; }
|
||||
.tips-item__icon--warn { background: var(--gold-500); }
|
||||
.tips-item__icon--good { background: var(--green-500); }
|
||||
.tips-item__icon--info { background: var(--blue-500); }
|
||||
.tips-item__icon--danger { background: var(--red-500); }
|
||||
.tips-item__text { font-size: 12px; color: var(--text-secondary); line-height: 1.65; flex: 1; }
|
||||
.tips-item__text strong { color: var(--text-body); }
|
||||
|
||||
/* ================================================================
|
||||
2. 热量目标卡片
|
||||
================================================================ */
|
||||
.calorie-goal {
|
||||
background: linear-gradient(145deg, #5cd65c 0%, #3aa350 60%, #2d8a40 100%);
|
||||
margin: 16px 12px 0;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 20px 18px 16px;
|
||||
color: #fff;
|
||||
position: relative; overflow: hidden;
|
||||
box-shadow: 0 6px 20px rgba(58,163,80,0.3);
|
||||
}
|
||||
/* 背景装饰 */
|
||||
.calorie-goal::before {
|
||||
content: '';
|
||||
position: absolute; top: -40px; right: -30px;
|
||||
width: 140px; height: 140px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.06);
|
||||
pointer-events: none;
|
||||
}
|
||||
.calorie-goal::after {
|
||||
content: '';
|
||||
position: absolute; bottom: -50px; left: -20px;
|
||||
width: 120px; height: 120px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.04);
|
||||
pointer-events: none;
|
||||
}
|
||||
.calorie-goal__header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.calorie-goal__label { font-size: 13px; opacity: 0.9; font-weight: 500; letter-spacing: .3px; }
|
||||
.calorie-goal__bmr { font-size: 10px; opacity: 0.65; }
|
||||
.calorie-goal__val {
|
||||
font-size: 46px; font-weight: 800; line-height: 1;
|
||||
margin: 6px 0 0; position: relative; z-index: 1;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
.calorie-goal__unit { font-size: 17px; font-weight: 500; opacity: 0.75; margin-left: 2px; }
|
||||
.calorie-goal__sub {
|
||||
font-size: 11px; opacity: 0.7; margin-top: 4px;
|
||||
position: relative; z-index: 1; line-height: 1.5;
|
||||
}
|
||||
/* 三大营养素进度条 */
|
||||
.calorie-goal__bar-wrap {
|
||||
position: relative; z-index: 1; margin-top: 14px;
|
||||
display: flex; border-radius: 6px; height: 10px; overflow: hidden; gap: 3px;
|
||||
}
|
||||
.calorie-goal__bar-seg { height: 100%; position: relative; border-radius: 6px; overflow: hidden; }
|
||||
.calorie-goal__bar-seg--protein { background: rgba(84,112,198,0.25); }
|
||||
.calorie-goal__bar-seg--carbs { background: rgba(250,200,88,0.25); }
|
||||
.calorie-goal__bar-seg--fat { background: rgba(238,102,102,0.25); }
|
||||
.calorie-goal__bar-fill { height: 100%; border-radius: 6px; transition: width .3s; position: absolute; left: 0; top: 0; }
|
||||
.calorie-goal__bar-seg--protein .calorie-goal__bar-fill { background: #5470c6; }
|
||||
.calorie-goal__bar-seg--carbs .calorie-goal__bar-fill { background: #fac858; }
|
||||
.calorie-goal__bar-seg--fat .calorie-goal__bar-fill { background: #ee6666; }
|
||||
.calorie-goal__bar-label { display: flex; justify-content: center; gap: 14px; font-size: 11px; margin-top: 6px; opacity: 0.85; position: relative; z-index: 1; }
|
||||
.calorie-goal__bar-legend { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
|
||||
.calorie-goal__bar-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
|
||||
.calorie-goal__bar-seg--protein { background: rgba(84,112,198,0.3); }
|
||||
.calorie-goal__bar-seg--carbs { background: rgba(250,200,88,0.3); }
|
||||
.calorie-goal__bar-seg--fat { background: rgba(238,102,102,0.3); }
|
||||
.calorie-goal__bar-fill {
|
||||
height: 100%; border-radius: 6px;
|
||||
transition: width .5s cubic-bezier(.4,0,.2,1);
|
||||
position: absolute; left: 0; top: 0;
|
||||
}
|
||||
.calorie-goal__bar-seg--protein .calorie-goal__bar-fill { background: #7b9af5; }
|
||||
.calorie-goal__bar-seg--carbs .calorie-goal__bar-fill { background: #fcd465; }
|
||||
.calorie-goal__bar-seg--fat .calorie-goal__bar-fill { background: #f08282; }
|
||||
.calorie-goal__bar-label {
|
||||
display: flex; justify-content: center; gap: 16px;
|
||||
font-size: 10px; margin-top: 8px; opacity: 0.8;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.calorie-goal__bar-legend { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
|
||||
.calorie-goal__bar-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
|
||||
|
||||
/* ===== 今日三餐卡片 ===== */
|
||||
.meal-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; padding: 14px 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
|
||||
.meal-card__title { font-size: 15px; font-weight: 800; color: #1a1a1a; margin-bottom: 2px; }
|
||||
.meal-card__ai-reason { font-size: 10px; color: #bbb; font-weight: 400; margin-bottom: 8px; display: block; }
|
||||
.meal-card__tabs { display: flex; gap: 6px; margin-bottom: 8px; }
|
||||
.meal-tab { flex: 1; text-align: center; padding: 7px 0; border-radius: 8px; font-size: 12px; font-weight: 600; color: #999; background: #f7f8fa; cursor: pointer; transition: all .2s; }
|
||||
.meal-tab.active { background: #6ee16e; color: #fff; }
|
||||
.meal-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.meal-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f9fafb; border-radius: 10px; }
|
||||
.meal-item__icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
|
||||
/* ================================================================
|
||||
3. 今日三餐卡片
|
||||
================================================================ */
|
||||
.meal-card {
|
||||
background: var(--bg-card); border-radius: var(--radius-lg);
|
||||
margin: 12px 12px 0; padding: 16px 14px;
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
.meal-card__header-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
|
||||
.meal-card__title { font-size: 15px; font-weight: 800; color: var(--text-title); }
|
||||
.meal-card__ai-reason { font-size: 10px; color: var(--text-placeholder); font-weight: 400; }
|
||||
.meal-card__tabs { display: flex; gap: 8px; margin-bottom: 12px; }
|
||||
.meal-tab {
|
||||
flex: 1; text-align: center; padding: 8px 0; border-radius: var(--radius-sm);
|
||||
font-size: 12px; font-weight: 600; color: var(--text-hint);
|
||||
background: var(--bg-subtle); cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
.meal-tab:active { transform: scale(0.96); }
|
||||
.meal-tab.active {
|
||||
background: var(--green-500); color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(82,196,26,0.3);
|
||||
}
|
||||
.meal-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.meal-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 12px; background: var(--bg-item);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.meal-item:hover { background: #f0f4f0; border-color: var(--green-100); }
|
||||
.meal-item:active { transform: scale(0.985); }
|
||||
.meal-item__icon {
|
||||
width: 40px; height: 40px; border-radius: var(--radius-sm);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 22px; flex-shrink: 0;
|
||||
}
|
||||
.meal-item__icon--staple { background: #fff7e6; }
|
||||
.meal-item__icon--vege { background: #f6ffed; }
|
||||
.meal-item__icon--meat { background: #fff1f0; }
|
||||
.meal-item__icon--soup { background: #e6f7ff; }
|
||||
.meal-item__icon--vege { background: var(--green-50); }
|
||||
.meal-item__icon--meat { background: var(--red-50); }
|
||||
.meal-item__icon--soup { background: var(--blue-50); }
|
||||
.meal-item__info { flex: 1; min-width: 0; }
|
||||
.meal-item__name-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
|
||||
.meal-item__name { font-size: 13px; font-weight: 600; color: #333; }
|
||||
.meal-item__badges { display: flex; gap: 3px; flex-shrink: 0; }
|
||||
.meal-badge { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; line-height: 1.4; flex-shrink: 0; }
|
||||
.meal-badge--low-sodium { background: #e6f7ff; color: #1677ff; }
|
||||
.meal-badge--low-purine { background: #f6ffed; color: #52c41a; }
|
||||
.meal-badge--local { background: #fff7e6; color: #d46b08; }
|
||||
.meal-item__desc { font-size: 10px; color: #999; }
|
||||
.meal-item__cooking { font-size: 10px; color: #1677ff; margin-top: 2px; display: flex; align-items: center; gap: 3px; }
|
||||
.meal-item__cooking::before { content: '💡'; font-size: 10px; flex-shrink: 0; }
|
||||
.meal-item__kcal { font-size: 12px; font-weight: 700; color: #6ee16e; flex-shrink: 0; text-align: right; }
|
||||
.meal-item__name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
|
||||
.meal-item__name { font-size: 13px; font-weight: 600; color: var(--text-body); }
|
||||
.meal-item__badges { display: flex; gap: 4px; flex-shrink: 0; }
|
||||
.meal-badge {
|
||||
font-size: 9px; padding: 2px 6px; border-radius: 4px;
|
||||
font-weight: 700; line-height: 1.4; flex-shrink: 0;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
.meal-badge--low-sodium { background: var(--blue-50); color: var(--blue-500); }
|
||||
.meal-badge--low-purine { background: var(--green-50); color: var(--green-600); }
|
||||
.meal-badge--local { background: var(--gold-50); color: var(--gold-600); }
|
||||
.meal-item__desc { font-size: 10px; color: var(--text-hint); }
|
||||
.meal-item__cooking-tip { font-size: 10px; color: var(--blue-500); margin-top: 3px; display: flex; align-items: center; gap: 3px; opacity: 0.8; }
|
||||
.meal-item__cooking-tip::before { content: '💡'; font-size: 10px; flex-shrink: 0; }
|
||||
.meal-item__kcal { font-size: 13px; font-weight: 700; color: var(--green-500); flex-shrink: 0; text-align: right; min-width: 48px; }
|
||||
.meal-item__arrow { flex-shrink: 0; font-size: 18px; color: #ccc; transition: all var(--transition); }
|
||||
.meal-item:hover .meal-item__arrow { color: var(--green-500); transform: translateX(2px); }
|
||||
|
||||
/* 食堂餐品详情入口箭头 */
|
||||
.meal-item__detail-link { flex-shrink: 0; font-size: 11px; color: #1677ff; cursor: pointer; display: flex; align-items: center; gap: 1px; white-space: nowrap; padding: 4px 0 4px 2px; font-weight: 500; }
|
||||
.meal-item__detail-link:hover { color: #0958d9; }
|
||||
.meal-item__detail-arrow { font-size: 14px; line-height: 1; }
|
||||
|
||||
/* 餐品详情弹窗 */
|
||||
.meal-detail-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; display: none; align-items: center; justify-content: center; }
|
||||
/* ================================================================
|
||||
4. 餐品详情弹窗
|
||||
================================================================ */
|
||||
.meal-detail-overlay {
|
||||
position: absolute; inset: 0; background: rgba(0,0,0,0.5);
|
||||
z-index: 300; display: none; align-items: center; justify-content: center;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.meal-detail-overlay.show { display: flex; }
|
||||
.meal-detail-modal { background: #fff; border-radius: 18px; width: 310px; max-height: 440px; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,0.25); position: relative; overflow: hidden; }
|
||||
.meal-detail-modal {
|
||||
background: var(--bg-card); border-radius: var(--radius-xl);
|
||||
width: 320px; max-height: 460px;
|
||||
display: flex; flex-direction: column;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative; overflow: hidden;
|
||||
animation: modalIn .25s ease;
|
||||
}
|
||||
@keyframes modalIn { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
|
||||
.meal-detail-modal__scroll { overflow-y: auto; flex: 1; }
|
||||
.meal-detail-modal__scroll::-webkit-scrollbar { display: none; }
|
||||
.meal-detail-modal__header { padding: 20px 20px 0; text-align: center; position: relative; }
|
||||
.meal-detail-modal__icon { font-size: 44px; margin-bottom: 6px; display: block; }
|
||||
.meal-detail-modal__name { font-size: 18px; font-weight: 800; color: #1a1a1a; }
|
||||
.meal-detail-modal__kcal { font-size: 15px; color: #6ee16e; font-weight: 700; margin-top: 2px; }
|
||||
.meal-detail-modal__qty { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
.meal-detail-modal__badges { display: flex; gap: 4px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
|
||||
.meal-detail-modal__body { padding: 14px 20px 20px; }
|
||||
.meal-detail-modal__section { margin-top: 12px; }
|
||||
.meal-detail-modal__header { padding: 24px 24px 0; text-align: center; position: relative; }
|
||||
.meal-detail-modal__icon { font-size: 48px; margin-bottom: 8px; display: block; }
|
||||
.meal-detail-modal__name { font-size: 18px; font-weight: 800; color: var(--text-title); }
|
||||
.meal-detail-modal__kcal { font-size: 16px; color: var(--green-500); font-weight: 700; margin-top: 4px; }
|
||||
.meal-detail-modal__qty { font-size: 12px; color: var(--text-hint); margin-top: 4px; }
|
||||
.meal-detail-modal__badges { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
|
||||
.meal-detail-modal__body { padding: 16px 24px 24px; }
|
||||
.meal-detail-modal__section { margin-top: 14px; }
|
||||
.meal-detail-modal__section:first-child { margin-top: 0; }
|
||||
.meal-detail-modal__label { font-size: 11px; color: #999; margin-bottom: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
|
||||
.meal-detail-modal__text { font-size: 14px; color: #333; line-height: 1.7; }
|
||||
.meal-detail-modal__cooking { background: #f0f5ff; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #1677ff; line-height: 1.6; }
|
||||
.meal-detail-modal__close { position: absolute; top: 12px; left: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: #666; z-index: 2; border: none; }
|
||||
.meal-detail-modal__close:hover { background: rgba(0,0,0,0.12); }
|
||||
.meal-detail-modal__dislike { position: absolute; top: 10px; right: 14px; cursor: pointer; padding: 4px 12px 5px; border-radius: 12px; background: #fff1f0; z-index: 2; border: none; display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
|
||||
.meal-detail-modal__dislike:active { background: #ffccc7; }
|
||||
.meal-detail-modal__dislike-label { font-size: 12px; color: #ff4d4f; font-weight: 600; }
|
||||
.meal-detail-modal__label {
|
||||
font-size: 10px; color: var(--text-hint); margin-bottom: 6px;
|
||||
font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
|
||||
}
|
||||
.meal-detail-modal__text { font-size: 13px; color: var(--text-body); line-height: 1.75; }
|
||||
.meal-detail-modal__cooking {
|
||||
background: #f0f5ff; border-radius: var(--radius-sm);
|
||||
padding: 10px 14px; font-size: 12px; color: var(--blue-500);
|
||||
line-height: 1.7;
|
||||
}
|
||||
.meal-detail-modal__close {
|
||||
position: absolute; top: 12px; left: 12px;
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
background: rgba(0,0,0,0.05); border: none;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; font-size: 18px; color: var(--text-secondary); z-index: 2;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.meal-detail-modal__close:hover { background: rgba(0,0,0,0.1); }
|
||||
.meal-detail-modal__dislike {
|
||||
position: absolute; top: 10px; right: 12px;
|
||||
cursor: pointer; padding: 5px 14px; border-radius: 14px;
|
||||
background: var(--red-50); z-index: 2; border: none;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
line-height: 1.3; transition: background var(--transition);
|
||||
}
|
||||
.meal-detail-modal__dislike:hover { background: var(--red-100); }
|
||||
.meal-detail-modal__dislike-label { font-size: 12px; color: var(--red-500); font-weight: 600; }
|
||||
.meal-detail-modal__dislike-hint { font-size: 9px; color: #ff9999; }
|
||||
|
||||
/* Toast 轻提示 */
|
||||
.meal-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.78); color: #fff; font-size: 14px; padding: 10px 20px; border-radius: 8px; z-index: 400; pointer-events: none; opacity: 0; transition: opacity .3s; white-space: nowrap; }
|
||||
/* Toast */
|
||||
.meal-toast {
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
|
||||
background: rgba(0,0,0,0.78); color: #fff; font-size: 13px;
|
||||
padding: 10px 22px; border-radius: var(--radius-sm);
|
||||
z-index: 400; pointer-events: none; opacity: 0;
|
||||
transition: opacity .3s ease; white-space: nowrap;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.meal-toast.show { opacity: 1; }
|
||||
|
||||
/* ===== 不喜欢二次确认弹窗 ===== */
|
||||
.dislike-confirm-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 500; display: none; align-items: center; justify-content: center; }
|
||||
/* 不喜欢二次确认弹窗 */
|
||||
.dislike-confirm-overlay {
|
||||
position: absolute; inset: 0; background: rgba(0,0,0,0.5);
|
||||
z-index: 500; display: none; align-items: center; justify-content: center;
|
||||
}
|
||||
.dislike-confirm-overlay.show { display: flex; }
|
||||
.dislike-confirm-modal { background: #fff; border-radius: 16px; width: 280px; padding: 24px 20px 20px; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,0.25); }
|
||||
.dislike-confirm-modal__icon { font-size: 36px; margin-bottom: 10px; }
|
||||
.dislike-confirm-modal__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; }
|
||||
.dislike-confirm-modal__input { width: 100%; border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #333; resize: none; outline: none; font-family: inherit; transition: border-color .2s; }
|
||||
.dislike-confirm-modal__input:focus { border-color: #667eea; }
|
||||
.dislike-confirm-modal__actions { display: flex; gap: 10px; margin-top: 16px; }
|
||||
.dislike-confirm-modal__btn { flex: 1; height: 40px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
|
||||
.dislike-confirm-modal__btn--cancel { background: #f5f5f5; color: #666; }
|
||||
.dislike-confirm-modal {
|
||||
background: var(--bg-card); border-radius: var(--radius-lg);
|
||||
width: 280px; padding: 28px 22px 22px; text-align: center;
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: modalIn .25s ease;
|
||||
}
|
||||
.dislike-confirm-modal__icon { font-size: 40px; margin-bottom: 12px; }
|
||||
.dislike-confirm-modal__title { font-size: 14px; font-weight: 700; color: var(--text-title); margin-bottom: 16px; line-height: 1.5; }
|
||||
.dislike-confirm-modal__input {
|
||||
width: 100%; border: 1.5px solid var(--border-normal); border-radius: var(--radius-sm);
|
||||
padding: 10px 14px; font-size: 13px; color: var(--text-body);
|
||||
resize: none; outline: none; font-family: inherit;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
.dislike-confirm-modal__input:focus { border-color: var(--purple-400); }
|
||||
.dislike-confirm-modal__actions { display: flex; gap: 10px; margin-top: 18px; }
|
||||
.dislike-confirm-modal__btn {
|
||||
flex: 1; height: 42px; border-radius: var(--radius-sm);
|
||||
border: none; font-size: 14px; font-weight: 600; cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.dislike-confirm-modal__btn--cancel { background: #f5f5f5; color: var(--text-secondary); }
|
||||
.dislike-confirm-modal__btn--cancel:active { background: #e8e8e8; }
|
||||
.dislike-confirm-modal__btn--confirm { background: #ff4d4f; color: #fff; }
|
||||
.dislike-confirm-modal__btn--confirm:active { background: #d9363e; }
|
||||
|
||||
/* ===== 一周食谱卡片 ===== */
|
||||
.week-meal-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; padding: 14px 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
|
||||
.week-meal-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.week-meal-card__title { font-size: 15px; font-weight: 800; color: #1a1a1a; }
|
||||
.week-meal-card__tip { font-size: 11px; color: #bbb; }
|
||||
.week-day-row { display: flex; gap: 3px; margin-bottom: 8px; }
|
||||
.week-day { flex: 1; text-align: center; padding: 5px 0; border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: 600; color: #999; background: #f7f8fa; transition: all .2s; }
|
||||
.week-day.active { background: #6ee16e; color: #fff; }
|
||||
.week-day__label { display: block; font-size: 9px; opacity: 0.7; }
|
||||
.week-detail { padding: 8px 0 0; }
|
||||
.dislike-confirm-modal__btn--confirm { background: var(--red-500); color: #fff; }
|
||||
.dislike-confirm-modal__btn--confirm:active { background: var(--red-600); transform: scale(0.97); }
|
||||
|
||||
/* ================================================================
|
||||
5. 一周食谱卡片
|
||||
================================================================ */
|
||||
.week-meal-card {
|
||||
background: var(--bg-card); border-radius: var(--radius-lg);
|
||||
margin: 12px 12px 0; padding: 16px 14px;
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
.week-meal-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.week-meal-card__title { font-size: 15px; font-weight: 800; color: var(--text-title); }
|
||||
.week-meal-card__tip { font-size: 11px; color: var(--text-placeholder); }
|
||||
.week-day-row { display: flex; gap: 4px; margin-bottom: 10px; }
|
||||
.week-day {
|
||||
flex: 1; text-align: center; padding: 8px 0; border-radius: 10px;
|
||||
cursor: pointer; font-size: 11px; font-weight: 600;
|
||||
color: var(--text-hint); background: var(--bg-subtle);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.week-day__label { display: block; font-size: 10px; opacity: 0.7; margin-bottom: 1px; }
|
||||
.week-day.active {
|
||||
background: var(--green-500); color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(82,196,26,0.25);
|
||||
}
|
||||
.week-day:active { transform: scale(0.94); }
|
||||
.week-detail { padding: 4px 0 0; }
|
||||
.week-detail__meals { display: flex; flex-direction: column; gap: 6px; }
|
||||
.week-detail__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
|
||||
.week-detail__total { font-size: 14px; font-weight: 800; color: #1a1a1a; }
|
||||
.week-detail__total span { font-size: 11px; color: #6ee16e; margin-left: 4px; }
|
||||
.week-detail__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.week-detail__total { font-size: 15px; font-weight: 800; color: var(--text-title); }
|
||||
.week-detail__total span { font-size: 11px; color: var(--green-500); margin-left: 4px; }
|
||||
/* 周食谱内的 meal-item 变体：不可点击 */
|
||||
.week-detail .meal-item { cursor: default; }
|
||||
.week-detail .meal-item:hover { background: var(--bg-item); border-color: transparent; }
|
||||
.week-detail .meal-item:active { transform: none; }
|
||||
|
||||
.tips-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.tips-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: #f9fafb; border-radius: 10px; }
|
||||
.tips-item__icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 800; color: #fff; }
|
||||
.tips-item__icon--warn { background: #faad14; }
|
||||
.tips-item__icon--good { background: #52c41a; }
|
||||
.tips-item__icon--info { background: #1677ff; }
|
||||
.tips-item__icon--danger { background: #ff4d4f; }
|
||||
.tips-item__text { font-size: 11px; color: #555; line-height: 1.6; flex: 1; }
|
||||
.tips-item__text strong { color: #333; }
|
||||
|
||||
.bottom-safe { height: 20px; flex-shrink: 0; }
|
||||
|
||||
/* 保存按钮 */
|
||||
.save-btn-wrap { padding: 12px 12px 8px; flex-shrink: 0; }
|
||||
.save-btn { width: 100%; height: 44px; border-radius: 10px; border: none; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 4px 14px rgba(102,126,234,0.3); }
|
||||
/* ================================================================
|
||||
6. 保存按钮
|
||||
================================================================ */
|
||||
.bottom-safe { height: 24px; flex-shrink: 0; }
|
||||
.save-btn-wrap { padding: 16px 12px 12px; flex-shrink: 0; }
|
||||
.save-btn {
|
||||
width: 100%; height: 46px; border-radius: 12px; border: none;
|
||||
font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
|
||||
background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%);
|
||||
box-shadow: 0 4px 14px rgba(82,196,26,0.3);
|
||||
transition: all var(--transition);
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
.save-btn:hover { box-shadow: 0 6px 20px rgba(82,196,26,0.4); }
|
||||
.save-btn:active { transform: scale(0.97); }
|
||||
|
||||
/* 打印样式：隐藏交互元素 */
|
||||
/* ================================================================
|
||||
7. 打印样式
|
||||
================================================================ */
|
||||
@media print {
|
||||
.status-bar, .nav-bar, .meal-detail-overlay, .meal-toast, .save-btn-wrap,
|
||||
.meal-item__detail-link, .meal-detail-modal__dislike, .meal-detail-modal__close, .dislike-confirm-overlay,
|
||||
.guide-overlay, .region-mask, .region-sheet { display: none !important; }
|
||||
.meal-item__arrow, .meal-detail-modal__dislike, .meal-detail-modal__close,
|
||||
.dislike-confirm-overlay, .guide-overlay, .region-mask, .region-sheet {
|
||||
display: none !important;
|
||||
}
|
||||
.phone-shell { box-shadow: none; border-radius: 0; width: 100%; height: auto; }
|
||||
.scroll-content { overflow: visible; }
|
||||
.meal-card, .week-meal-card, .calorie-goal, .alert-banner { box-shadow: none; break-inside: avoid; }
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
引导覆盖层 — 个性化偏好设置
|
||||
8. 引导覆盖层 — 个性化偏好设置
|
||||
================================================================ */
|
||||
.guide-overlay { position: absolute; inset: 0; z-index: 100; background: #f5f7fa; display: flex; flex-direction: column; overflow-y: auto; }
|
||||
.guide-overlay {
|
||||
position: absolute; inset: 0; z-index: 100;
|
||||
background: var(--bg-page); display: flex; flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.guide-overlay::-webkit-scrollbar { display: none; }
|
||||
.guide-overlay.hidden { display: none; }
|
||||
.guide__hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 32px 20px 24px; color: #fff; text-align: center; }
|
||||
.guide__hero-icon { font-size: 40px; margin-bottom: 8px; }
|
||||
.guide__hero-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
|
||||
.guide__hero-sub { font-size: 13px; opacity: 0.85; }
|
||||
.guide__body { flex: 1; padding: 16px 16px 0; display: flex; flex-direction: column; gap: 14px; }
|
||||
.guide__q { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
|
||||
.guide__q-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
.guide__q-num { width: 22px; height: 22px; border-radius: 50%; background: #667eea; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.guide__q-title { font-size: 14px; font-weight: 700; color: #1a1a1a; }
|
||||
.guide__q-required { font-size: 10px; color: #ff4d4f; margin-left: auto; }
|
||||
.guide__hero {
|
||||
background: linear-gradient(145deg, var(--purple-400) 0%, #764ba2 100%);
|
||||
padding: 36px 24px 28px; color: #fff; text-align: center;
|
||||
}
|
||||
.guide__hero-icon { font-size: 44px; margin-bottom: 10px; display: block; }
|
||||
.guide__hero-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; letter-spacing: .3px; }
|
||||
.guide__hero-sub { font-size: 13px; opacity: 0.8; line-height: 1.5; }
|
||||
.guide__body { flex: 1; padding: 18px 16px 0; display: flex; flex-direction: column; gap: 14px; }
|
||||
.guide__q { background: var(--bg-card); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-xs); }
|
||||
.guide__q-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
|
||||
.guide__q-num {
|
||||
width: 24px; height: 24px; border-radius: 50%;
|
||||
background: var(--purple-400); color: #fff;
|
||||
font-size: 12px; font-weight: 800;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.guide__q-title { font-size: 14px; font-weight: 700; color: var(--text-title); }
|
||||
.guide__q-required { font-size: 10px; color: var(--red-500); margin-left: auto; font-weight: 500; }
|
||||
|
||||
/* 底部sheet选择器（所在地区） */
|
||||
.guide__trigger { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 14px; background: #f7f8fa; border-radius: 10px; font-size: 13px; color: #bbb; cursor: pointer; }
|
||||
.guide__trigger--filled { color: #333; font-weight: 600; }
|
||||
.guide__trigger-arrow { color: #bbb; font-size: 12px; }
|
||||
/* 地区选择器 */
|
||||
.guide__trigger {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
height: 44px; padding: 0 16px;
|
||||
background: var(--bg-subtle); border-radius: var(--radius-sm);
|
||||
font-size: 13px; color: var(--text-placeholder); cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.guide__trigger:hover { border-color: var(--purple-400); }
|
||||
.guide__trigger--filled { color: var(--text-body); font-weight: 600; }
|
||||
.guide__trigger-arrow { color: var(--text-placeholder); font-size: 12px; }
|
||||
|
||||
/* Chip 标签选择 */
|
||||
/* Chip 标签 */
|
||||
.guide__chips { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.guide__chip { font-size: 13px; padding: 8px 16px; border-radius: 20px; font-weight: 600; cursor: pointer; border: 1.5px solid #e0e0e0; color: #666; background: #fff; transition: all .2s; }
|
||||
.guide__chip:hover { border-color: #91b8ff; background: #f5f9ff; }
|
||||
.guide__chip--active { border-color: #667eea; background: #f0f2ff; color: #667eea; }
|
||||
.guide__chip {
|
||||
font-size: 13px; padding: 8px 16px; border-radius: 20px;
|
||||
font-weight: 600; cursor: pointer;
|
||||
border: 1.5px solid var(--border-normal); color: var(--text-secondary);
|
||||
background: var(--bg-card);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.guide__chip:hover { border-color: #a0b8f0; background: #f8f9ff; }
|
||||
.guide__chip:active { transform: scale(0.95); }
|
||||
.guide__chip--active {
|
||||
border-color: var(--purple-400); background: #f0f2ff;
|
||||
color: var(--purple-400);
|
||||
}
|
||||
.guide__chip--active::before { content: '✓ '; font-size: 11px; }
|
||||
|
||||
/* 提交按钮 */
|
||||
.guide__footer { padding: 16px 16px 24px; flex-shrink: 0; }
|
||||
.guide__submit { width: 100%; height: 48px; border-radius: 24px; border: none; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; background: #d0d5e0; transition: all .25s; }
|
||||
.guide__submit--ready { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 6px 20px rgba(102,126,234,0.3); }
|
||||
.guide__footer { padding: 18px 16px 28px; flex-shrink: 0; }
|
||||
.guide__submit {
|
||||
width: 100%; height: 50px; border-radius: 25px; border: none;
|
||||
font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
|
||||
background: #d4d8e2;
|
||||
transition: all .25s ease;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
.guide__submit--ready {
|
||||
background: linear-gradient(135deg, var(--purple-400) 0%, #764ba2 100%);
|
||||
box-shadow: 0 6px 20px rgba(102,126,234,0.35);
|
||||
}
|
||||
.guide__submit--ready:hover { box-shadow: 0 8px 24px rgba(102,126,234,0.45); }
|
||||
.guide__submit--ready:active { transform: scale(0.97); }
|
||||
|
||||
/* ===== 地区选择底部 sheet（复用 basic-info 模式） ===== */
|
||||
/* ================================================================
|
||||
9. 地区选择底部 Sheet
|
||||
================================================================ */
|
||||
.region-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; display: none; }
|
||||
.region-mask.show { display: block; }
|
||||
.region-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; z-index: 201; transform: translateY(100%); transition: transform .25s ease; padding-bottom: 16px; }
|
||||
.region-sheet {
|
||||
position: absolute; left: 0; right: 0; bottom: 0;
|
||||
background: var(--bg-card); border-radius: 18px 18px 0 0;
|
||||
z-index: 201; transform: translateY(100%);
|
||||
transition: transform .3s cubic-bezier(.4,0,.2,1);
|
||||
padding-bottom: env(safe-area-inset-bottom, 16px);
|
||||
}
|
||||
.region-sheet.show { transform: translateY(0); }
|
||||
.region-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f0f0f0; }
|
||||
.region-sheet__cancel { font-size: 15px; color: #999; cursor: pointer; }
|
||||
.region-sheet__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.region-sheet__submit { font-size: 15px; color: #667eea; font-weight: 600; cursor: pointer; }
|
||||
.region-sheet__list { padding: 6px 0; max-height: 360px; overflow-y: auto; }
|
||||
.region-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
|
||||
.region-sheet__cancel { font-size: 15px; color: var(--text-hint); cursor: pointer; }
|
||||
.region-sheet__title { font-size: 16px; font-weight: 700; color: var(--text-title); }
|
||||
.region-sheet__submit { font-size: 15px; color: var(--purple-400); font-weight: 600; cursor: pointer; }
|
||||
.region-sheet__list { padding: 6px 0; max-height: 380px; overflow-y: auto; }
|
||||
.region-sheet__list::-webkit-scrollbar { display: none; }
|
||||
.region-sheet__item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 15px; color: #333; cursor: pointer; }
|
||||
.region-sheet__item.active { color: #667eea; font-weight: 600; background: #f0f2ff; }
|
||||
.region-sheet__check { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #d0d0d0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.region-sheet__item.active .region-sheet__check { background: #667eea; border-color: #667eea; }
|
||||
.region-sheet__item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 15px 20px; font-size: 15px; color: var(--text-body); cursor: pointer;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.region-sheet__item:active { background: #f5f5f5; }
|
||||
.region-sheet__item.active { color: var(--purple-400); font-weight: 600; background: #f0f2ff; }
|
||||
.region-sheet__check {
|
||||
width: 20px; height: 20px; border-radius: 50%;
|
||||
border: 2px solid var(--border-normal);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; transition: all var(--transition);
|
||||
}
|
||||
.region-sheet__item.active .region-sheet__check { background: var(--purple-400); border-color: var(--purple-400); }
|
||||
.region-sheet__check svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; display: none; }
|
||||
.region-sheet__item.active .region-sheet__check svg { display: block; }
|
||||
|
||||
/* 省-市级联视图 */
|
||||
.region-sheet__view { display: none; }
|
||||
.region-sheet__view.active { display: block; }
|
||||
.region-sheet__back { display: flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
|
||||
.region-sheet__back-arrow { font-size: 18px; line-height: 1; color: #667eea; }
|
||||
.region-sheet__back-label { color: #999; }
|
||||
.region-sheet__back-province { color: #1a1a1a; font-weight: 700; margin-left: auto; }
|
||||
.region-sheet__item--parent .region-sheet__sub { font-size: 13px; color: #bbb; font-weight: 600; display: flex; align-items: center; }
|
||||
.region-sheet__item--parent.active .region-sheet__sub { color: #667eea; }
|
||||
.region-sheet__back {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 12px 20px; font-size: 13px; cursor: pointer;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.region-sheet__back:hover { background: #fafafa; }
|
||||
.region-sheet__back-arrow { font-size: 20px; line-height: 1; color: var(--purple-400); }
|
||||
.region-sheet__back-label { color: var(--text-hint); }
|
||||
.region-sheet__back-province { color: var(--text-title); font-weight: 700; margin-left: auto; }
|
||||
.region-sheet__item--parent .region-sheet__sub { font-size: 13px; color: var(--text-placeholder); font-weight: 500; display: flex; align-items: center; }
|
||||
.region-sheet__item--parent.active .region-sheet__sub { color: var(--purple-400); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -398,10 +710,12 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
|
||||
<!-- 今日三餐推荐 -->
|
||||
<div class="meal-card" id="mealCard">
|
||||
<div class="meal-card__title">今日三餐推荐</div>
|
||||
<span class="meal-card__ai-reason" id="mealReason">— 根据你的偏好与健康目标个性化推荐</span>
|
||||
<div class="meal-card__tabs">
|
||||
<div class="meal-card" id="mealCard">
|
||||
<div class="meal-card__header-row">
|
||||
<div class="meal-card__title">今日三餐推荐</div>
|
||||
<span class="meal-card__ai-reason" id="mealReason">根据你的偏好与健康目标推荐</span>
|
||||
</div>
|
||||
<div class="meal-card__tabs">
|
||||
<div class="meal-tab active" onclick="switchMealTab('breakfast', this)">早餐</div>
|
||||
<div class="meal-tab" onclick="switchMealTab('lunch', this)">午餐</div>
|
||||
<div class="meal-tab" onclick="switchMealTab('dinner', this)">晚餐</div>
|
||||
@@ -907,37 +1221,38 @@ function renderCalorie() {
|
||||
if (!skip) filtered.push(items[i]);
|
||||
}
|
||||
|
||||
// 存储当前餐次数据，供弹窗使用
|
||||
window._currentMealItems = filtered;
|
||||
var html = '<div class="meal-list">';
|
||||
for (var j = 0; j < filtered.length; j++) {
|
||||
var it = filtered[j];
|
||||
html += '<div class="meal-item" onclick="openMealDetail(' + j + ')" style="cursor:pointer;">';
|
||||
html += '<div class="meal-item__info">';
|
||||
html += '<div class="meal-item__name-row">';
|
||||
html += '<span class="meal-item__name">' + it.name + '</span>';
|
||||
if (it.badges && it.badges.length) {
|
||||
html += '<span class="meal-item__badges">';
|
||||
for (var b = 0; b < it.badges.length; b++) {
|
||||
var badge = it.badges[b];
|
||||
var t = badge === 'low-sodium' ? '低钠' : badge === 'low-purine' ? '低嘌呤' : '食堂餐品';
|
||||
html += '<span class="meal-badge meal-badge--' + badge + '">' + t + '</span>';
|
||||
}
|
||||
html += '</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="meal-item__desc">' + getTotalWeight(it.qty) + '</div>';
|
||||
html += '</div>';
|
||||
html += '<div class="meal-item__kcal">' + it.kcal + '</div>';
|
||||
html += '<div class="meal-item__detail-link" onclick="event.stopPropagation();openMealDetail(' + j + ')"><span class="meal-item__detail-arrow">›</span></div>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
// 存储当前餐次数据，供弹窗使用
|
||||
window._currentMealItems = filtered;
|
||||
var html = '<div class="meal-list">';
|
||||
for (var j = 0; j < filtered.length; j++) {
|
||||
var it = filtered[j];
|
||||
html += '<div class="meal-item" onclick="openMealDetail(' + j + ')">';
|
||||
// 食材图标
|
||||
html += '<div class="meal-item__info">';
|
||||
html += '<div class="meal-item__name-row">';
|
||||
html += '<span class="meal-item__name">' + it.name + '</span>';
|
||||
if (it.badges && it.badges.length) {
|
||||
html += '<span class="meal-item__badges">';
|
||||
for (var b = 0; b < it.badges.length; b++) {
|
||||
var badge = it.badges[b];
|
||||
var t = badge === 'low-sodium' ? '低钠' : badge === 'low-purine' ? '低嘌呤' : '食堂餐品';
|
||||
html += '<span class="meal-badge meal-badge--' + badge + '">' + t + '</span>';
|
||||
}
|
||||
html += '</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="meal-item__desc">' + getTotalWeight(it.qty) + '</div>';
|
||||
html += '</div>';
|
||||
html += '<div class="meal-item__kcal">' + it.kcal + '</div>';
|
||||
html += '<span class="meal-item__arrow">›</span>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
document.getElementById('mealContent').innerHTML = html;
|
||||
|
||||
// 更新推荐理由
|
||||
var reason = '— 根据你的偏好与健康目标推荐';
|
||||
document.getElementById('mealReason').textContent = reason;
|
||||
// 更新推荐理由
|
||||
var reason = '根据你的偏好与健康目标推荐';
|
||||
document.getElementById('mealReason').textContent = reason;
|
||||
}
|
||||
|
||||
function switchMealTab(tab, el) {
|
||||
@@ -958,20 +1273,28 @@ function renderWeekDays() {
|
||||
}
|
||||
|
||||
function renderWeekDetail(dayIdx) {
|
||||
var plan = WEEK_PLANS[dayIdx];
|
||||
var html = '<div class="week-detail__header"><span class="week-detail__total">' + plan.total + '<span>千卡</span></span></div>';
|
||||
html += '<div class="week-detail__meals">';
|
||||
for (var i = 0; i < plan.meals.length; i++) {
|
||||
var item = plan.meals[i];
|
||||
html += '<div class="meal-item">';
|
||||
html += '<div class="meal-item__icon meal-item__icon--staple" style="font-size:13px;font-weight:700;color:#faad14;">' + item.meal + '</div>';
|
||||
html += '<div class="meal-item__info"><div class="meal-item__name">' + item.name + '</div></div>';
|
||||
html += '<div class="meal-item__kcal">' + item.kcal + 'kcal</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
document.getElementById('weekDetail').innerHTML = html;
|
||||
}
|
||||
var plan = WEEK_PLANS[dayIdx];
|
||||
var html = '<div class="week-detail__header"><span class="week-detail__total">' + plan.total + '<span>千卡</span></span></div>';
|
||||
html += '<div class="week-detail__meals">';
|
||||
var mealIcons = { '早餐':'🌅', '午餐':'☀️', '晚餐':'🌙', '加餐':'🍪' };
|
||||
var mealColors = { '早餐':'#faad14', '午餐':'#ff7a45', '晚餐':'#597ef7', '加餐':'#52c41a' };
|
||||
for (var i = 0; i < plan.meals.length; i++) {
|
||||
var item = plan.meals[i];
|
||||
var iconEmoji = mealIcons[item.meal] || '🍽️';
|
||||
var iconColor = mealColors[item.meal] || '#999';
|
||||
html += '<div class="meal-item">';
|
||||
html += '<div class="meal-item__info">';
|
||||
html += '<div class="meal-item__name-row">';
|
||||
html += '<span class="meal-item__name">' + item.name + '</span>';
|
||||
html += '</div>';
|
||||
html += '<div class="meal-item__desc" style="color:' + iconColor + ';font-weight:600;">' + item.meal + '</div>';
|
||||
html += '</div>';
|
||||
html += '<div class="meal-item__kcal">' + item.kcal + '<span style="font-size:10px;color:#999;"> kcal</span></div>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
document.getElementById('weekDetail').innerHTML = html;
|
||||
}
|
||||
|
||||
var currentWeekDay = 0;
|
||||
function switchWeekDay(dayIdx, el) {
|
||||
@@ -1000,31 +1323,31 @@ function openMealDetail(idx) {
|
||||
if (!it) return;
|
||||
_currentDetailItem = it;
|
||||
|
||||
// 渲染弹窗头部
|
||||
var headerHtml = '';
|
||||
headerHtml += '<div class="meal-detail-modal__name">' + it.name + '</div>';
|
||||
if (it.qty) headerHtml += '<div class="meal-detail-modal__qty">' + getTotalWeight(it.qty) + '</div>';
|
||||
headerHtml += '<div class="meal-detail-modal__kcal">' + it.kcal + '</div>';
|
||||
if (it.badges && it.badges.length) {
|
||||
headerHtml += '<div class="meal-detail-modal__badges">';
|
||||
for (var b = 0; b < it.badges.length; b++) {
|
||||
var badge = it.badges[b];
|
||||
var t = badge === 'low-sodium' ? '低钠' : badge === 'low-purine' ? '低嘌呤' : '食堂餐品';
|
||||
headerHtml += '<span class="meal-badge meal-badge--' + badge + '">' + t + '</span>';
|
||||
}
|
||||
headerHtml += '</div>';
|
||||
}
|
||||
document.getElementById('mealDetailHeader').innerHTML = headerHtml;
|
||||
// 渲染弹窗头部
|
||||
var headerHtml = '';
|
||||
headerHtml += '<div class="meal-detail-modal__name">' + it.name + '</div>';
|
||||
if (it.qty) headerHtml += '<div class="meal-detail-modal__qty">' + getTotalWeight(it.qty) + '</div>';
|
||||
headerHtml += '<div class="meal-detail-modal__kcal">' + it.kcal + '</div>';
|
||||
if (it.badges && it.badges.length) {
|
||||
headerHtml += '<div class="meal-detail-modal__badges">';
|
||||
for (var b = 0; b < it.badges.length; b++) {
|
||||
var badge = it.badges[b];
|
||||
var t = badge === 'low-sodium' ? '低钠' : badge === 'low-purine' ? '低嘌呤' : '食堂餐品';
|
||||
headerHtml += '<span class="meal-badge meal-badge--' + badge + '">' + t + '</span>';
|
||||
}
|
||||
headerHtml += '</div>';
|
||||
}
|
||||
document.getElementById('mealDetailHeader').innerHTML = headerHtml;
|
||||
|
||||
// 渲染弹窗正文
|
||||
var bodyHtml = '';
|
||||
if (it.desc) {
|
||||
bodyHtml += '<div class="meal-detail-modal__section">';
|
||||
bodyHtml += '<div class="meal-detail-modal__label">餐品描述</div>';
|
||||
bodyHtml += '<div class="meal-detail-modal__text">' + it.desc.replace(/\n/g, '<br>') + '</div>';
|
||||
bodyHtml += '</div>';
|
||||
}
|
||||
document.getElementById('mealDetailBody').innerHTML = bodyHtml;
|
||||
// 渲染弹窗正文
|
||||
var bodyHtml = '';
|
||||
if (it.desc) {
|
||||
bodyHtml += '<div class="meal-detail-modal__section">';
|
||||
bodyHtml += '<div class="meal-detail-modal__label">📋 餐品描述</div>';
|
||||
bodyHtml += '<div class="meal-detail-modal__text">' + it.desc.replace(/\n/g, '<br>') + '</div>';
|
||||
bodyHtml += '</div>';
|
||||
}
|
||||
document.getElementById('mealDetailBody').innerHTML = bodyHtml;
|
||||
|
||||
document.getElementById('mealDetailOverlay').classList.add('show');
|
||||
}
|
||||
@@ -1038,7 +1361,7 @@ function dislikeMeal() {
|
||||
if (!_currentDetailItem) return;
|
||||
var itemName = _currentDetailItem.name;
|
||||
// 显示二次确认弹窗
|
||||
document.getElementById('dislikeConfirmTitle').textContent = '确认移除【' + itemName + '】吗，后续将不再推荐该餐品';
|
||||
document.getElementById('dislikeConfirmTitle').textContent = '后续不再推荐【' + itemName + '】';
|
||||
document.getElementById('dislikeConfirmReason').value = '';
|
||||
document.getElementById('dislikeConfirmOverlay').classList.add('show');
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.questionnaire { flex: 1; overflow-y: auto; background: #f5f7fa; display: flex; flex-direction: column; }
|
||||
.questionnaire::-webkit-scrollbar { display: none; }
|
||||
|
||||
.questionnaire__hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 32px 20px 24px; color: #fff; text-align: center; flex-shrink: 0; }
|
||||
.questionnaire__hero { background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%); padding: 32px 20px 24px; color: #fff; text-align: center; flex-shrink: 0; }
|
||||
.questionnaire__hero-icon { font-size: 40px; margin-bottom: 8px; }
|
||||
.questionnaire__hero-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
|
||||
.questionnaire__hero-sub { font-size: 13px; opacity: 0.85; }
|
||||
@@ -28,7 +28,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.questionnaire__body { flex: 1; padding: 16px 16px 0; display: flex; flex-direction: column; gap: 14px; }
|
||||
.questionnaire__q { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
|
||||
.questionnaire__q-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
.questionnaire__q-num { width: 22px; height: 22px; border-radius: 50%; background: #667eea; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.questionnaire__q-num { width: 22px; height: 22px; border-radius: 50%; background: #52c41a; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.questionnaire__q-title { font-size: 14px; font-weight: 700; color: #1a1a1a; }
|
||||
.questionnaire__q-required { font-size: 10px; color: #ff4d4f; margin-left: auto; }
|
||||
|
||||
@@ -40,14 +40,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
/* Chip 标签选择 */
|
||||
.questionnaire__chips { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.questionnaire__chip { font-size: 13px; padding: 8px 16px; border-radius: 20px; font-weight: 600; cursor: pointer; border: 1.5px solid #e0e0e0; color: #666; background: #fff; transition: all .2s; }
|
||||
.questionnaire__chip:hover { border-color: #91b8ff; background: #f5f9ff; }
|
||||
.questionnaire__chip--active { border-color: #667eea; background: #f0f2ff; color: #667eea; }
|
||||
.questionnaire__chip:hover { border-color: #b7eb8f; background: #f6ffed; }
|
||||
.questionnaire__chip--active { border-color: #52c41a; background: #f6ffed; color: #52c41a; }
|
||||
.questionnaire__chip--active::before { content: '✓ '; font-size: 11px; }
|
||||
|
||||
/* 提交按钮 */
|
||||
.questionnaire__footer { padding: 16px 16px 24px; flex-shrink: 0; }
|
||||
.questionnaire__submit { width: 100%; height: 48px; border-radius: 24px; border: none; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; background: #d0d5e0; transition: all .25s; }
|
||||
.questionnaire__submit--ready { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 6px 20px rgba(102,126,234,0.3); }
|
||||
.questionnaire__submit { width: 100%; height: 48px; border-radius: 24px; border: none; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; background: #d9f7be; transition: all .25s; }
|
||||
.questionnaire__submit--ready { background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%); box-shadow: 0 6px 20px rgba(82,196,26,0.3); }
|
||||
.questionnaire__submit--ready:active { transform: scale(0.97); }
|
||||
|
||||
/* ===== 地区选择底部 Sheet（省-市级联） ===== */
|
||||
@@ -58,13 +58,13 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.region-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f0f0f0; }
|
||||
.region-sheet__cancel { font-size: 15px; color: #999; cursor: pointer; }
|
||||
.region-sheet__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.region-sheet__submit { font-size: 15px; color: #667eea; font-weight: 600; cursor: pointer; }
|
||||
.region-sheet__submit { font-size: 15px; color: #52c41a; font-weight: 600; cursor: pointer; }
|
||||
.region-sheet__list { padding: 6px 0; max-height: 360px; overflow-y: auto; }
|
||||
.region-sheet__list::-webkit-scrollbar { display: none; }
|
||||
.region-sheet__item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 15px; color: #333; cursor: pointer; }
|
||||
.region-sheet__item.active { color: #667eea; font-weight: 600; background: #f0f2ff; }
|
||||
.region-sheet__item.active { color: #52c41a; font-weight: 600; background: #f6ffed; }
|
||||
.region-sheet__check { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #d0d0d0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.region-sheet__item.active .region-sheet__check { background: #667eea; border-color: #667eea; }
|
||||
.region-sheet__item.active .region-sheet__check { background: #52c41a; border-color: #52c41a; }
|
||||
.region-sheet__check svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; display: none; }
|
||||
.region-sheet__item.active .region-sheet__check svg { display: block; }
|
||||
|
||||
@@ -72,11 +72,11 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.region-sheet__view { display: none; }
|
||||
.region-sheet__view.active { display: block; }
|
||||
.region-sheet__back { display: flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
|
||||
.region-sheet__back-arrow { font-size: 18px; line-height: 1; color: #667eea; }
|
||||
.region-sheet__back-arrow { font-size: 18px; line-height: 1; color: #52c41a; }
|
||||
.region-sheet__back-label { color: #999; }
|
||||
.region-sheet__back-province { color: #1a1a1a; font-weight: 700; margin-left: auto; }
|
||||
.region-sheet__item--parent .region-sheet__sub { font-size: 13px; color: #bbb; font-weight: 600; display: flex; align-items: center; }
|
||||
.region-sheet__item--parent.active .region-sheet__sub { color: #667eea; }
|
||||
.region-sheet__item--parent.active .region-sheet__sub { color: #52c41a; }
|
||||
|
||||
/* ===== 自定义规避食材底部 Sheet ===== */
|
||||
.custom-avoid-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; display: none; }
|
||||
@@ -86,15 +86,15 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.custom-avoid-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f0f0f0; }
|
||||
.custom-avoid-sheet__cancel { font-size: 15px; color: #999; cursor: pointer; }
|
||||
.custom-avoid-sheet__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.custom-avoid-sheet__submit { font-size: 15px; color: #667eea; font-weight: 600; cursor: pointer; }
|
||||
.custom-avoid-sheet__submit { font-size: 15px; color: #52c41a; font-weight: 600; cursor: pointer; }
|
||||
.custom-avoid-sheet__body { padding: 16px 18px; }
|
||||
.custom-avoid-sheet__input { width: 100%; height: 44px; border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 0 14px; font-size: 15px; outline: none; transition: border-color .2s; font-family: inherit; }
|
||||
.custom-avoid-sheet__input:focus { border-color: #667eea; }
|
||||
.custom-avoid-sheet__input:focus { border-color: #52c41a; }
|
||||
.custom-avoid-sheet__hint { font-size: 11px; color: #bbb; margin-top: 8px; }
|
||||
.custom-avoid-sheet__quick-label { font-size: 12px; color: #999; font-weight: 600; margin: 16px 0 8px; }
|
||||
.custom-avoid-sheet__quick { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.custom-avoid-sheet__quick-tag { font-size: 12px; padding: 5px 12px; border-radius: 16px; border: 1px solid #e0e0e0; color: #666; background: #fafafa; cursor: pointer; transition: all .2s; }
|
||||
.custom-avoid-sheet__quick-tag:hover { border-color: #91b8ff; background: #f5f9ff; }
|
||||
.custom-avoid-sheet__quick-tag:hover { border-color: #b7eb8f; background: #f6ffed; }
|
||||
.custom-avoid-sheet__quick-tag--added { border-color: #ffa39e; background: #fff1f0; color: #cf1322; }
|
||||
.custom-avoid-sheet__quick-tag--added::after { content: ' ✓'; }
|
||||
|
||||
@@ -104,7 +104,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.questionnaire__custom-tag:hover { background: #ffe9e7; }
|
||||
.questionnaire__custom-tag::after { content: '✕'; font-size: 10px; opacity: 0.7; }
|
||||
.questionnaire__chip--add { border-style: dashed !important; color: #bbb !important; border-color: #d0d0d0 !important; background: #fafafa !important; }
|
||||
.questionnaire__chip--add:hover { border-color: #667eea !important; color: #667eea !important; background: #f5f9ff !important; }
|
||||
.questionnaire__chip--add:hover { border-color: #52c41a !important; color: #52c41a !important; background: #f6ffed !important; }
|
||||
.questionnaire__chip--add::before { content: '+ ' !important; }
|
||||
|
||||
/* 底部 Sheet 滑入动画 */
|
||||
@@ -175,7 +175,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="questionnaire__q">
|
||||
<div class="questionnaire__q-header">
|
||||
<span class="questionnaire__q-num">3</span>
|
||||
<span class="questionnaire__q-title">规避食材（过敏 / 不喜欢）</span>
|
||||
<span class="questionnaire__q-title">饮食禁忌</span>
|
||||
<span class="questionnaire__q-required">选填</span>
|
||||
</div>
|
||||
<div class="questionnaire__chips" id="avoidChips"></div>
|
||||
|
||||
Reference in New Issue
Block a user