feat: 食谱管理选择餐品弹窗增加营养信息展示,对齐食谱规划页弹窗样式
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -150,7 +150,7 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
/* ===== 餐品选择弹窗 ===== */
|
||||
.dish-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;display:none;align-items:center;justify-content:center;}
|
||||
.dish-modal-overlay.show{display:flex;}
|
||||
.dish-modal{background:#fff;border-radius:var(--radius-lg);width:480px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.18);}
|
||||
.dish-modal{background:#fff;border-radius:var(--radius-lg);width:540px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.18);}
|
||||
.dish-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
|
||||
.dish-modal__title{font-size:var(--font-base);font-weight:600;color:var(--text-primary);}
|
||||
.dish-modal__close{width:28px;height:28px;border:none;background:none;cursor:pointer;font-size:18px;color:var(--text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;}
|
||||
@@ -165,9 +165,12 @@ tbody tr:hover td.td-actions{background:#F8FBFF;}
|
||||
.dish-item__check{width:18px;height:18px;border:1.5px solid var(--border);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
|
||||
.dish-item.selected .dish-item__check{background:var(--primary);border-color:var(--primary);}
|
||||
.dish-item.selected .dish-item__check::after{content:'';display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);}
|
||||
.dish-item__info{display:flex;flex-direction:column;gap:2px;}
|
||||
.dish-item__info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
|
||||
.dish-item__name{font-size:var(--font-sm);color:var(--text-primary);}
|
||||
.dish-item__cat{font-size:var(--font-xs);color:var(--text-placeholder);}
|
||||
.dish-item__nutri{display:flex;gap:8px;margin-top:2px;}
|
||||
.dish-item__nutri span{font-size:var(--font-xs);color:var(--text-secondary);white-space:nowrap;}
|
||||
.dish-item__nutri span em{font-style:normal;color:var(--text-primary);font-weight:500;}
|
||||
.dish-modal__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);}
|
||||
.dish-modal__count{font-size:var(--font-sm);color:var(--text-secondary);}
|
||||
.dish-modal__actions{display:flex;gap:8px;}
|
||||
@@ -615,16 +618,26 @@ function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
/* ===== 餐品选择弹窗逻辑 ===== */
|
||||
(function(){
|
||||
var DISHES=[
|
||||
{id:1,name:'白米饭',cat:'主食/米饭'},{id:2,name:'杂粮饭',cat:'主食/米饭'},
|
||||
{id:3,name:'馒头',cat:'主食/面点'},{id:4,name:'花卷',cat:'主食/面点'},
|
||||
{id:5,name:'小米粥',cat:'主食/粥品'},{id:6,name:'皮蛋瘦肉粥',cat:'主食/粥品'},
|
||||
{id:7,name:'红烧肉',cat:'荤菜/猪肉'},{id:8,name:'糖醋排骨',cat:'荤菜/猪肉'},
|
||||
{id:9,name:'清蒸鲈鱼',cat:'荤菜/水产'},{id:10,name:'宫保鸡丁',cat:'荤菜/禽类'},
|
||||
{id:11,name:'西红柿炒蛋',cat:'素菜/蛋类'},{id:12,name:'清炒时蔬',cat:'素菜/叶菜'},
|
||||
{id:13,name:'麻婆豆腐',cat:'素菜/豆制品'},{id:14,name:'凉拌黄瓜',cat:'凉菜/蔬菜'},
|
||||
{id:15,name:'酸辣土豆丝',cat:'素菜/根茎'},{id:16,name:'紫菜蛋花汤',cat:'汤品/蛋汤'},
|
||||
{id:17,name:'冬瓜排骨汤',cat:'汤品/肉汤'},{id:18,name:'水果拼盘',cat:'甜品/水果'},
|
||||
{id:19,name:'绿豆汤',cat:'甜品/糖水'},{id:20,name:'煎饺',cat:'主食/面点'}
|
||||
{id:1,name:'白米饭',cat:'主食/米饭',kcal:116,protein:2.6,carb:25.9,fat:0.3},
|
||||
{id:2,name:'杂粮饭',cat:'主食/米饭',kcal:135,protein:4.1,carb:28.2,fat:1.0},
|
||||
{id:3,name:'馒头',cat:'主食/面点',kcal:221,protein:7.0,carb:44.2,fat:1.1},
|
||||
{id:4,name:'花卷',cat:'主食/面点',kcal:214,protein:6.4,carb:42.8,fat:1.3},
|
||||
{id:5,name:'小米粥',cat:'主食/粥品',kcal:46,protein:1.4,carb:8.4,fat:0.7},
|
||||
{id:6,name:'皮蛋瘦肉粥',cat:'主食/粥品',kcal:89,protein:5.2,carb:11.6,fat:2.4},
|
||||
{id:7,name:'红烧肉',cat:'荤菜/猪肉',kcal:286,protein:14.2,carb:6.8,fat:22.5},
|
||||
{id:8,name:'糖醋排骨',cat:'荤菜/猪肉',kcal:264,protein:16.8,carb:14.2,fat:15.6},
|
||||
{id:9,name:'清蒸鲈鱼',cat:'荤菜/水产',kcal:105,protein:18.6,carb:0.8,fat:3.2},
|
||||
{id:10,name:'宫保鸡丁',cat:'荤菜/禽类',kcal:198,protein:19.4,carb:8.6,fat:10.2},
|
||||
{id:11,name:'西红柿炒蛋',cat:'素菜/蛋类',kcal:126,protein:7.8,carb:5.4,fat:8.2},
|
||||
{id:12,name:'清炒时蔬',cat:'素菜/叶菜',kcal:62,protein:2.8,carb:4.6,fat:3.8},
|
||||
{id:13,name:'麻婆豆腐',cat:'素菜/豆制品',kcal:142,protein:9.6,carb:5.2,fat:9.4},
|
||||
{id:14,name:'凉拌黄瓜',cat:'凉菜/蔬菜',kcal:32,protein:1.2,carb:3.8,fat:1.4},
|
||||
{id:15,name:'酸辣土豆丝',cat:'素菜/根茎',kcal:96,protein:2.4,carb:16.2,fat:3.0},
|
||||
{id:16,name:'紫菜蛋花汤',cat:'汤品/蛋汤',kcal:38,protein:3.2,carb:2.4,fat:1.8},
|
||||
{id:17,name:'冬瓜排骨汤',cat:'汤品/肉汤',kcal:72,protein:5.6,carb:3.2,fat:4.0},
|
||||
{id:18,name:'水果拼盘',cat:'甜品/水果',kcal:56,protein:0.8,carb:13.2,fat:0.2},
|
||||
{id:19,name:'绿豆汤',cat:'甜品/糖水',kcal:68,protein:2.4,carb:14.8,fat:0.3},
|
||||
{id:20,name:'煎饺',cat:'主食/面点',kcal:198,protein:8.6,carb:22.4,fat:8.2}
|
||||
];
|
||||
|
||||
var overlay=document.getElementById('dishOverlay');
|
||||
@@ -663,8 +676,9 @@ function toggleSubgroup(header){header.parentElement.classList.toggle('open');}
|
||||
var sel=tempSelected.indexOf(d.id)!==-1;
|
||||
html+='<div class="dish-item'+(sel?' selected':'')+'" data-id="'+d.id+'">'
|
||||
+'<span class="dish-item__check"></span>'
|
||||
+'<span class="dish-item__info"><span class="dish-item__name">'+d.name+'</span><span class="dish-item__cat">'+d.cat+'</span></span>'
|
||||
+'</div>';
|
||||
+'<span class="dish-item__info"><span class="dish-item__name">'+d.name+'</span><span class="dish-item__cat">'+d.cat+'</span>'
|
||||
+'<div class="dish-item__nutri"><span>热量 <em>'+d.kcal+'</em>kcal</span><span>蛋白质 <em>'+d.protein+'</em>g</span><span>碳水 <em>'+d.carb+'</em>g</span><span>脂肪 <em>'+d.fat+'</em>g</span></div>'
|
||||
+'</span></div>';
|
||||
});
|
||||
if(!html) html='<div style="padding:24px;text-align:center;color:#999;font-size:13px;">无匹配餐品</div>';
|
||||
listEl.innerHTML=html;
|
||||
|
||||
Reference in New Issue
Block a user