console
<!DOCTYPE html>
<html>
<head>
<title>智能点餐推荐系统</title>
<style>
/* 样式部分保持不变 */
body {
font-family: "微软雅黑", Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #f5f5f5;
}
.control-panel {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
margin-bottom: 25px;
}
select, button {
padding: 12px 25px;
margin: 12px;
font-size: 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
background: white;
transition: all 0.3s;
}
button {
background: #00c853;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background: #009624;
transform: scale(1.05);
}
#result {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.dish-card {
padding: 15px;
margin: 12px 0;
background: #f8f9fa;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.price-tag {
background: #00c853;
color: white;
padding: 5px 12px;
border-radius: 15px;
font-weight: bold;
}
.total-section {
font-size: 22px;
margin-top: 25px;
padding-top: 20px;
border-top: 2px solid #eee;
display: flex;
justify-content: space-between;
}
.per-person {
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<div class="control-panel">
<h2>用餐人数选择</h2>
<select id="people">
<option value="1">1人</option>
<option value="2">2人</option>
<option value="3">3人</option>
<option value="4">4人</option>
<option value="5">5人</option>
<option value="6">6人</option>
<option value="7">7人</option>
<option value="8">8人</option>
<option value="9">9人</option>
<option value="10">10人</option>
</select>
<button onclick="generateOrder()">生成推荐方案</button>
</div>
<div id="result"></div>
<script>
// 完整菜单数据库（共129道菜品）
const menu = {
汤类: [
["西红柿鸡蛋汤", 12], ["紫菜蛋汤", 12], ["丝瓜蛋汤", 12],
["猪肝瘦肉汤", 15], ["鱼片豆腐汤", 15], ["三鲜汤", 12],
["苦瓜皮蛋汤", 13], ["煎荷包蛋汤", 13], ["金针菇瘦肉汤", 15]
],
热菜: [
// 第一页菜品
["茄子豆角",14],["空心菜炒肉",14],["酸辣白菜",11],["生菜炒肉",14],
["青菜",11],["红薯叶炒肉",14],["酸辣土豆丝",12],["麻婆豆腐",14],
["油麦菜炒肉",14],["地三鲜",12],["榨菜肉丝",14],["菜心炒肉",14],
["酸辣藕丁",12],["丝瓜炒蛋",14],["酸菜小笋炒肉",14],["空心菜梗炒肉",14],
["青椒炒皮蛋",15],["酸辣空心菜梗",12],["火腿炒蛋",14],["香干萝卜炒油渣",14],
["金针菇炒肉",15],["酸辣豆芽",12],["花菜炒肉",14],["腐竹炒蛋",14],
["小鱼小虾炒韭菜",15],["韭菜干张",12],["干张炒肉",14],["青椒炒油渣",14],
["小鱼小虾炒青椒",15],["手撕包菜",12],["白萝卜炒肉",14],["外婆菜炒油渣",14],
["空心菜梗炒虾米",15],["青瓜炒蛋",13],["空心菜杆炒油渣",14],["千叶豆腐（肉）",14],
["韭菜炒肉",15],["金针菇炒火腿",13],["金针菇油豆腐",14],["辛片炒肉",14],
["烟笋炒肉",15],["香菇炒肉",15],["青椒肉丝",16],["小炒肉",16],
["酸菜炒肉",14],["香辣鱼干",15],["一碗香",16],["茄子炒肉",14],
["虎皮青椒",15],["酸辣鸡杂",16],["香干回锅肉",14],["红烧鱼块",15],
["腊鸭腿包菜",16],["外婆菜炒蛋",13],["土豆肉丝",14],["干煸土豆丝",15],
["麻辣香肠炒青椒",16],["葱花煎蛋",13],["肉沫茄子",14],["干煸四季豆",15],
["青椒鸡杂",16],["洋葱炒蛋",13],["红烧茄子",14],["青椒荷包蛋",15],
["泡椒鸡杂",16],["空心菜梗炒鸡蛋",13],["咸鱼茄子",14],["外婆菜回锅肉",15],
["青椒炒猪头肉",16],["西红柿炒蛋",13],["油豆腐炒肉",14],["豆腐鱼块",15],
["榨菜炒猪头肉",16],["凉瓜炒蛋",13],["韭菜炒虾米",14],["腐竹炒肉",15],
["洋葱炒猪头肉",16],["青瓜火腿",13],["鱼香肉丝",14],["芹菜炒肉",15],
["豆皮炒肉",15],["麻辣土豆鸡",17],["泡椒猪肝",17],["金针菇日本豆腐",13],
["土豆片炒肉",14],["切丝四季豆炒肉",15],["辣子鸡",17],["清炒窝笋丝",13],
["酸豆角肉沫",14],["回锅肉",15],["小炒猪肝",17],["清炒丝瓜",13],
["冬瓜炒肉",14],["莴笋炒肉",15],["金针菇腊鸭腿",17],["清炒冬瓜",13],
["芹菜香干炒肉",14],["蒜苔炒肉",15],["香干腊肉",17],["清炒茄子",13],
["红烧日本豆腐",14],["木耳炒肉",15],["空心菜杆炒腊肉",17],["豆皮炒蛋",13],
["胡萝卜炒肉",14],["豆角炒肉",15],["莲藕炒肉",14],["青椒炒蛋",14],
["蒜苗炒肉",15],["丝瓜炒肉",15],["芋头红烧肉",22],["红烧猪脚",35],
["青椒炒鸡",18],["洋葱炒烤鸭",22],["香辣猪蹄",35],["干锅花菜",18],
["土豆烧鸡",18],["芋头烧猪脚",22],["香锅牛腩",38],["干锅千叶豆腐",20],
["蒜苗腊肉",18],["纯切烤鸭",22],["香辣虾",38],["干锅包菜",20],
["木耳炒鸡",18],["油豆乳猪脚",22],["红烧虾",38],["干锅香干腊肉",22],
["烟笋腊肉",18],["葛笋片炒牛肉",22],["土豆排骨",22],["干锅包菜腊肉",25],
["香菇滑鸡",18],["葛笋排骨",22],["干锅腊鸭腿",28],["蒜苔腊肉",18],
["干锅烟笋腊肉",30],["土豆红烧肉",18],["咸鱼茄子煲",28],["手干煸四季豆",22],
["干锅葛笋腊肉",38],["蒜苗炒猪头肉",18],["酸辣鸡杂",25],["腐竹红烧肉",18],
["老干妈回锅肉",25],["酸菜鱼（小份）",20],["红烧鱼块",28],["凉瓜牛肉",25],
["冬瓜焖鸭",20],["油豆腐红烧肉",20],["焖红烧肉",38],["水煮鱼（小份）",20],
["葛笋红烧肉",20],["爆炒猪头肉",28],["姜葱鸡（鸭）",22],["白萝卜牛肉",22],
["水煮牛肉（小份）",22],["腐竹牛腩",22],["小炒田鸡",22],["白萝卜牛腩",22],
["芹菜牛腩",22],["芋头烧牛腩",22],["红烧排骨",35],["麻辣猪脚",35],
["凉拌牛肉",32]
]
};
function generateOrder() {
const people = parseInt(document.getElementById("people").value);
const dishCount = Math.max(people, 2); // 至少2个菜
const selectedDishes = new Set();
// 必选1个汤
selectedDishes.add(JSON.stringify(getRandomDish("汤类")));
// 补充其他菜品
while(selectedDishes.size < dishCount) {
selectedDishes.add(JSON.stringify(getRandomDish("热菜")));
}
// 转换数据结构
const orderList = Array.from(selectedDishes).map(JSON.parse);
// 计算费用
const total = orderList.reduce((sum, dish) => sum + dish[1], 0);
const perPerson = (total / people).toFixed(1);
// 生成结果
const resultHTML = `
<h3>推荐 ${people} 人用餐方案（${dishCount}个菜品）：</h3>
${orderList.map(dish => `
<div class="dish-card">
<div>${dish[0]}</div>
<div class="price-tag">${dish[1]}元</div>
</div>
`).join("")}
<div class="total-section">
<div>
<div>预计总费用：<span style="color:#00c853;font-weight:bold;">${total}元</span></div>
<div class="per-person">人均费用：${perPerson}元/人</div>
</div>
</div>
`;
document.getElementById("result").innerHTML = resultHTML;
}
// 随机获取菜品
function getRandomDish(category) {
const dishes = menu[category];
return dishes[Math.floor(Math.random() * dishes.length)];
}
</script>
</body>
</html>