From 1c1469402ad74ac52577708aebf9681eb9960e20 Mon Sep 17 00:00:00 2001 From: liuyunqin Date: Fri, 3 Jul 2026 16:39:32 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=86=B3=E9=A3=9F?= =?UTF-8?q?=E9=97=AE=E5=8D=B7=E9=A1=B5=E9=9D=A2=EF=BC=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E8=86=B3=E9=A3=9F=E5=BB=BA=E8=AE=AE=E5=92=8C=E4=BD=93=E9=87=8D?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../weight-management/diet-advice.html | 862 +++++++++++------- .../weight-management/diet-questionnaire.html | 592 ++++++++++++ .../doc/膳食建议模块需求文档.md | 442 +++++++++ .../weight-management/weight-main.html | 2 +- 4 files changed, 1543 insertions(+), 355 deletions(-) create mode 100644 employee-app/weight-management/diet-questionnaire.html create mode 100644 employee-app/weight-management/doc/膳食建议模块需求文档.md diff --git a/employee-app/weight-management/diet-advice.html b/employee-app/weight-management/diet-advice.html index 3c13077..e000e5b 100644 --- a/employee-app/weight-management/diet-advice.html +++ b/employee-app/weight-management/diet-advice.html @@ -18,18 +18,16 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; position: relative; } .scroll-content::-webkit-scrollbar { display: none; } -/* ===== 偏好标签行 ===== */ -.pref-bar { background: #fff; margin: 8px 12px 0; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); flex-wrap: wrap; } -.pref-bar__label { font-size: 11px; color: #999; flex-shrink: 0; font-weight: 500; } -.pref-tag { font-size: 11px; padding: 4px 10px; border-radius: 12px; font-weight: 600; background: #e6f7ff; color: #1677ff; display: flex; align-items: center; gap: 3px; white-space: nowrap; } -.pref-tag__dot { width: 5px; height: 5px; border-radius: 50%; background: #1677ff; flex-shrink: 0; } - -/* ===== 慢病提醒横幅 ===== */ -.alert-banner { background: linear-gradient(135deg, #fff7e6, #fffbe6); margin: 8px 12px 0; border-radius: 10px; padding: 8px 12px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid #ffe58f; } -.alert-banner--warn { background: linear-gradient(135deg, #fff1f0, #fff2f0); border-color: #ffa39e; } +/* ===== 膳食注意事项（可折叠） ===== */ +.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__text { font-size: 12px; color: #8c6d00; line-height: 1.5; flex: 1; } -.alert-banner--warn .alert-banner__text { color: #a8071a; } +.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; } +.alert-banner__arrow.collapsed { transform: rotate(180deg); } +.alert-banner__body { padding: 0 12px 10px; } +.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); } @@ -40,43 +38,18 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .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; background: rgba(255,255,255,0.2); border-radius: 6px; height: 8px; overflow: hidden; } -.calorie-goal__bar-fill { height: 100%; background: rgba(255,255,255,0.9); border-radius: 6px; transition: width .3s; } -.calorie-goal__bar-label { display: flex; justify-content: space-between; font-size: 11px; margin-top: 4px; opacity: 0.75; position: relative; z-index: 1; } - -/* ===== 营养素卡片 ===== */ -.nutri-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; padding: 14px 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); } -.nutri-card__title { font-size: 15px; font-weight: 800; color: #1a1a1a; margin-bottom: 10px; } -.nutri-card__subtitle { font-size: 11px; color: #999; font-weight: 400; } -.nutri-row { display: flex; gap: 8px; } -.nutri-item { flex: 1; text-align: center; } -.nutri-item__ring { position: relative; width: 64px; height: 64px; margin: 0 auto 4px; } -.nutri-item__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } -.nutri-item__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } -.nutri-item__center-val { font-size: 14px; font-weight: 800; color: #1a1a1a; line-height: 1; } -.nutri-item__center-unit { font-size: 9px; color: #999; margin-top: 1px; } -.nutri-item__name { font-size: 11px; font-weight: 600; color: #333; margin-top: 2px; } -.nutri-item__detail { font-size: 10px; color: #999; margin-top: 1px; } - -/* 慢病管控指标行 */ -.nutri-slow-row { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #f0f0f0; } -.nutri-slow-item { flex: 1; background: #fafafa; border-radius: 10px; padding: 10px 8px; text-align: center; } -.nutri-slow-item__head { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px; } -.nutri-slow-item__icon { font-size: 14px; } -.nutri-slow-item__label { font-size: 11px; font-weight: 700; color: #666; } -.nutri-slow-item__limit { font-size: 10px; color: #bbb; margin-left: 2px; } -.nutri-slow-item__progress { position: relative; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; margin-bottom: 4px; } -.nutri-slow-item__fill { height: 100%; border-radius: 3px; transition: width .3s; } -.nutri-slow-item__fill--sodium { background: linear-gradient(90deg, #ff9c6e, #ff4d4f); } -.nutri-slow-item__fill--purine { background: linear-gradient(90deg, #ffc53d, #fa8c16); } -.nutri-slow-item__val { font-size: 10px; color: #999; } -.nutri-slow-item__val span { font-weight: 700; color: #333; } -.nutri-slow-item__status { font-size: 10px; font-weight: 700; margin-top: 2px; } -.nutri-slow-item__status--ok { color: #52c41a; } -.nutri-slow-item__status--warn { color: #faad14; } -.nutri-slow-item__status--danger { color: #ff4d4f; } - - +.calorie-goal__bar-wrap { position: relative; z-index: 1; margin-top: 10px; display: flex; border-radius: 6px; height: 8px; overflow: hidden; gap: 2px; } +.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; } /* ===== 今日三餐卡片 ===== */ .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); } @@ -105,7 +78,56 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .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__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; } +.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__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__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__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; } +.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.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__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; } @@ -120,22 +142,6 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .week-detail__total { font-size: 14px; font-weight: 800; color: #1a1a1a; } .week-detail__total span { font-size: 11px; color: #6ee16e; margin-left: 4px; } -/* ===== 规避食材区 ===== */ -.dislike-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; padding: 14px 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); } -.dislike-card__title { font-size: 14px; font-weight: 800; color: #1a1a1a; margin-bottom: 2px; } -.dislike-card__sub { font-size: 11px; color: #bbb; margin-bottom: 8px; } -.dislike-tags { display: flex; gap: 6px; flex-wrap: wrap; } -.dislike-tag { font-size: 12px; padding: 5px 12px; border-radius: 16px; font-weight: 600; cursor: pointer; border: 1px solid #e0e0e0; color: #999; background: #fafafa; transition: all .2s; display: flex; align-items: center; gap: 4px; } -.dislike-tag--active { background: #fff1f0; border-color: #ffa39e; color: #cf1322; } -.dislike-tag--active::after { content: '✕'; font-size: 9px; color: #cf1322; } -.dislike-card__tip { font-size: 10px; color: #bbb; margin-top: 8px; } - -/* ===== 注意事项卡片 ===== */ -.tips-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; padding: 14px 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); } -.tips-card__title { font-size: 15px; font-weight: 800; color: #1a1a1a; margin-bottom: 8px; } -.tips-card__section { margin-bottom: 8px; } -.tips-card__section:last-child { margin-bottom: 0; } -.tips-card__section-title { font-size: 12px; font-weight: 700; color: #666; margin-bottom: 4px; } .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; } @@ -148,6 +154,21 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .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); } +.save-btn:active { transform: scale(0.97); } + +/* 打印样式：隐藏交互元素 */ +@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; } + .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; } +} + /* ================================================================ 引导覆盖层 — 个性化偏好设置 ================================================================ */ @@ -200,6 +221,16 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: .region-sheet__item.active .region-sheet__check { background: #667eea; border-color: #667eea; } .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; } @@ -285,8 +316,13 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: 羊肉 海鲜 动物内脏 + 花生 + 鸡蛋 + 牛奶 香菜 - 沙棘 + 辣椒 + 大蒜 + 菌菇 其他 @@ -297,7 +333,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: - +
@@ -305,30 +341,24 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items: 选择所在地区 确定
-
-
西安 · 西北地区
-
榆林 · 陕北地区
-
延安 · 陕北地区
-
汉中 · 陕南地区
-
安康 · 陕南地区
-
其他地区
+ +
+
+
+ +
+
+ ‹ + 返回选择省份 + +
+