编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商城拾味 · 信息展示小程序交互原型</title>
<style>
  :root{
    --green:#22a85b; --green-dark:#178a49; --green-light:#e8f7ee;
    --orange:#ff7a2f; --orange-dark:#f4621a;
    --red:#ff4d4f;
    --bg:#f5f6f7; --card:#fff; --line:#f0f0f0;
    --text:#1f2329; --sub:#8a8f99;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#e9eef2;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
  .frame{width:390px;height:820px;background:var(--bg);border-radius:36px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25);border:8px solid #1f2329;display:flex;flex-direction:column;}
  .statusbar{height:28px;background:var(--card);display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:12px;color:#1f2329;flex:none;}
  .screen{flex:1;overflow:hidden;position:relative;}
  .page{position:absolute;inset:0;overflow-y:auto;background:var(--bg);display:none;}
  .page.active{display:block;animation:fadeIn .25s ease;}
  @keyframes fadeIn{from{opacity:.4;transform:translateX(12px)}to{opacity:1;transform:none}}
  .page::-webkit-scrollbar{display:none;}

  .nav{height:48px;background:var(--card);display:flex;align-items:center;padding:0 8px;position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line);}
  .nav .back{font-size:18px;padding:4px 10px;cursor:pointer;color:#1f2329;user-select:none;}
  .nav h2{flex:1;text-align:center;font-size:16px;color:var(--text);}
  .nav .sp{width:40px;}
  .card{background:var(--card);border-radius:14px;margin-bottom:12px;overflow:hidden;}
  .tag{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--green-light);color:var(--green-dark);font-weight:600;display:inline-block;}
  .tag.orange{background:#fff4ec;color:var(--orange);}
  .tag.red{background:#fff1f0;color:var(--red);}
  .tag.gray{background:#f2f3f5;color:var(--sub);}

  /* ========== 首页 ========== */
  .home-head{background:linear-gradient(135deg,#22a85b,#14904a 60%,#107a3d);padding:16px 16px 40px;color:#fff;position:relative;overflow:hidden;}
  .home-head::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08);}
  .home-head .ht{font-size:19px;font-weight:800;letter-spacing:1px;}
  .home-head .hs{font-size:11px;opacity:.9;margin-top:6px;line-height:1.7;}
  .home-stats{display:flex;gap:14px;margin-top:12px;}
  .home-stats div{flex:1;background:rgba(255,255,255,.14);border-radius:10px;padding:8px 10px;text-align:center;}
  .home-stats b{display:block;font-size:16px;}
  .home-stats span{font-size:9px;opacity:.9;}

  .cat-panel{background:var(--card);margin:-22px 12px 12px;border-radius:16px;padding:14px 10px;box-shadow:0 6px 18px rgba(0,0,0,.06);position:relative;z-index:2;}
  .cat-panel .cp-t{font-size:14px;font-weight:700;color:var(--text);padding:0 6px 12px;display:flex;align-items:center;gap:6px;}
  .cat-panel .cp-t::before{content:"";width:4px;height:14px;background:var(--green);border-radius:2px;}
  .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
  .cat-cell{border-radius:12px;padding:12px 4px;text-align:center;cursor:pointer;transition:transform .12s;}
  .cat-cell:active{transform:scale(.94);}
  .cat-cell .ci{width:44px;height:44px;border-radius:12px;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;font-size:24px;}
  .cat-cell .cn{font-size:12px;font-weight:600;color:var(--text);}
  .cat-cell .cs{font-size:9px;color:var(--sub);margin-top:2px;}

  .home-foot{padding:4px 0 20px;text-align:center;font-size:10px;color:#c0c4cc;}

  /* ========== 热门推荐（瀑布流） ========== */
  .hot-panel{background:var(--card);margin:0 12px 12px;border-radius:16px;padding:14px 10px;position:relative;z-index:2;}
  .hot-panel .hp-t{font-size:14px;font-weight:700;color:var(--text);padding:0 6px 12px;display:flex;align-items:center;gap:6px;}
  .hot-panel .hp-t::before{content:"";width:4px;height:14px;background:var(--orange);border-radius:2px;}
  .hot-panel .hp-t .hp-more{margin-left:auto;font-size:11px;color:var(--sub);font-weight:400;cursor:pointer;}
  .wf{column-count:2;column-gap:10px;}
  .wf-card{break-inside:avoid;background:var(--card);border-radius:12px;margin-bottom:10px;overflow:hidden;cursor:pointer;transition:transform .12s;box-shadow:0 2px 8px rgba(0,0,0,.04);}
  .wf-card:active{transform:scale(.96);}
  .wf-img{display:flex;align-items:center;justify-content:center;font-size:42px;position:relative;}
  .wf-img .wf-tag{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.35);color:#fff;font-size:9px;padding:2px 8px;border-radius:8px;}
  .wf-body{padding:10px;}
  .wf-title{font-size:13px;font-weight:700;color:var(--text);}
  .wf-desc{font-size:11px;color:var(--sub);line-height:1.6;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .wf-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
  .wf-price{color:var(--red);font-weight:700;font-size:13px;}
  .wf-price small{font-size:10px;font-weight:400;color:var(--sub);}

  /* ========== 企业列表 ========== */
  .list-head{background:var(--card);padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;}
  .list-head .li{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none;}
  .list-head b{font-size:15px;color:var(--text);display:block;}
  .list-head span{font-size:11px;color:var(--sub);margin-top:2px;display:block;}
  .sec{padding:0 12px;}
  .citem{background:var(--card);border-radius:14px;padding:14px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:transform .12s;}
  .citem:active{transform:scale(.97);}
  .citem .ca{width:52px;height:52px;border-radius:14px;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none;}
  .citem .cb{flex:1;min-width:0;}
  .citem .cname{font-size:14px;font-weight:700;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;}
  .citem .cdesc{font-size:11px;color:var(--sub);margin-top:4px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .citem .carrow{color:#c0c4cc;font-size:16px;flex:none;align-self:center;}
  .citem .ctag{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap;}

  /* ========== 一企一页 ========== */
  .qy-hero{background:linear-gradient(135deg,#22a85b,#14904a 70%,#0f7a40);color:#fff;padding:24px 18px 20px;position:relative;overflow:hidden;}
  .qy-hero::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.1);}
  .qy-hero .qi{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:12px;}
  .qy-hero h1{font-size:19px;font-weight:800;}
  .qy-hero .qsub{margin-top:6px;display:flex;gap:6px;align-items:center;}
  .qy-sec{margin:12px;background:var(--card);border-radius:14px;padding:4px 0;overflow:hidden;}
  .qy-sec .st{display:flex;align-items:center;gap:6px;padding:14px 16px 10px;font-size:14px;font-weight:700;color:var(--text);}
  .qy-sec .st::before{content:"";width:4px;height:14px;background:var(--green);border-radius:2px;}
  .qy-row{display:flex;padding:11px 16px;border-top:1px solid var(--line);font-size:13px;}
  .qy-row .k{color:var(--sub);width:76px;flex:none;line-height:1.5;}
  .qy-row .v{flex:1;color:var(--text);line-height:1.6;}
  .qy-row .v .chip{display:inline-block;background:var(--green-light);color:var(--green-dark);font-size:12px;border-radius:6px;padding:3px 8px;margin:2px 4px 2px 0;}
  .qy-row .v .price{color:var(--red);font-weight:700;font-size:13px;}
  .qy-btns{position:sticky;bottom:0;background:var(--card);padding:10px 14px;display:flex;gap:10px;border-top:1px solid var(--line);}
  .qy-btns .btn{flex:1;border:none;border-radius:20px;padding:11px 0;font-size:14px;font-weight:600;cursor:pointer;text-align:center;}
  .btn-ghost{background:#f2f3f5;color:var(--text);}
  .btn-green{background:linear-gradient(135deg,#22a85b,#14904a);color:#fff;}
  .btn-orange{background:linear-gradient(135deg,#ffa229,#ff7a2f);color:#fff;}
  .tip{margin:0 12px 12px;background:#fffbea;border:1px solid #ffe9a8;border-radius:12px;padding:12px;font-size:11px;color:#8a6d1a;line-height:1.7;}

  /* ========== 一品一页 ========== */
  .yp-hero{height:230px;display:flex;align-items:flex-end;padding:16px;color:#fff;position:relative;}
  .yp-hero .em{font-size:70px;position:absolute;right:24px;top:40px;opacity:.92;}
  .yp-hero .yp-info{position:relative;z-index:2;width:100%;}
  .yp-hero .yp-tag{display:flex;gap:6px;margin-bottom:8px;}
  .yp-hero h1{font-size:21px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.3);}
  .yp-hero .yp-sub{margin-top:5px;font-size:12px;opacity:.95;}
  .yp-sec{margin:12px;background:var(--card);border-radius:14px;padding:14px;overflow:hidden;}
  .yp-sec .st{font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
  .yp-sec .st::before{content:"";width:4px;height:14px;background:var(--orange);border-radius:2px;}
  .yp-para{font-size:13px;color:#4a4f57;line-height:1.9;}
  .yp-imgrow{display:flex;gap:8px;margin:12px 0 4px;}
  .yp-imgrow .yi{flex:1;height:86px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;}
  .ing-chips{display:flex;flex-wrap:wrap;gap:8px;}
  .ing-chips span{background:#f5f6f7;border-radius:16px;padding:6px 12px;font-size:12px;color:var(--text);}
  .yp-price{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;}
  .yp-price b{color:var(--red);font-size:20px;}

  /* ========== 一页一技 ========== */
  .js-hero{height:200px;display:flex;align-items:flex-end;padding:16px;color:#fff;position:relative;}
  .js-hero .em{font-size:64px;position:absolute;right:24px;top:34px;opacity:.92;}
  .js-hero h1{font-size:21px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.3);position:relative;z-index:2;}
  .js-hero .js-sub{margin-top:5px;font-size:12px;opacity:.95;position:relative;z-index:2;}
  .step{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line);}
  .step:last-child{border-bottom:none;}
  .step .no{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#22a85b,#14904a);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px;}
  .step .st-body{flex:1;}
  .step .st-t{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;}
  .step .st-d{font-size:12px;color:var(--sub);line-height:1.7;}
  .step .st-img{height:70px;border-radius:10px;margin-top:8px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;}

  /* ========== 顾客留言 ========== */
  .msg-input{margin:12px;background:var(--card);border-radius:14px;padding:12px;display:flex;gap:8px;align-items:center;}
  .msg-input .mi{flex:1;background:#f5f6f7;border-radius:18px;padding:9px 14px;font-size:12px;color:var(--sub);}
  .msg-input .send{background:linear-gradient(135deg,#22a85b,#14904a);color:#fff;border:none;border-radius:18px;padding:8px 18px;font-size:12px;font-weight:600;cursor:pointer;}
  .msg-card{background:var(--card);border-radius:14px;padding:14px;margin-bottom:10px;}
  .msg-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  .msg-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex:none;}
  .msg-name{font-size:13px;font-weight:600;color:var(--text);}
  .msg-time{font-size:10px;color:#c0c4cc;margin-top:2px;}
  .msg-stars{color:#ffa229;font-size:11px;letter-spacing:1px;margin-left:auto;}
  .msg-text{font-size:13px;color:#4a4f57;line-height:1.8;}
  .msg-goods{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;}
  .msg-goods span{background:var(--green-light);color:var(--green-dark);font-size:10px;padding:2px 8px;border-radius:10px;}
</style>
</head>
<body>
<div class="frame">
  <div class="statusbar"><span>9:41</span><span>📶 🔋 100%</span></div>
  <div class="screen" id="screen"></div>
</div>

<script>
/* ================= 数据 ================= */
var CATS=[
 {id:1,name:"粮油制品",sub:"生态种植·营养丰富",icon:"🌾",c1:"#fbe9c2",c2:"#c98c2a"},
 {id:2,name:"果蔬菌菇",sub:"口感鲜嫩·味道新鲜",icon:"🍆",c1:"#e8f7ee",c2:"#22a85b"},
 {id:3,name:"生鲜畜禽",sub:"散养家禽·营养安全",icon:"🐓",c1:"#fce8e8",c2:"#e06161"},
 {id:4,name:"水产制品",sub:"生鲜直达·冷链锁鲜",icon:"🐟",c1:"#e3f4fd",c2:"#2f9fd8"},
 {id:5,name:"腌腊制品",sub:"传统工艺·风味十足",icon:"🥓",c1:"#f2ece7",c2:"#a8795c"},
 {id:6,name:"淀粉豆腐",sub:"手工制作·爽滑细嫩",icon:"🫓",c1:"#f6f8e0",c2:"#b7bd3f"},
 {id:7,name:"泉水饮料",sub:"元素丰富·甜润可口",icon:"💧",c1:"#e0f0ff",c2:"#4a8cd8"},
 {id:8,name:"药食同源",sub:"药食两用·滋补养生",icon:"🌿",c1:"#e7f6e9",c2:"#3fae5c"},
 {id:9,name:"预制食品",sub:"许可生产·食品安全",icon:"🍱",c1:"#efeafd",c2:"#7d5cc4"},
 {id:10,name:"名菜名吃",sub:"大别美味·吃在商城",icon:"🍲",c1:"#fdeee6",c2:"#f0703c"},
 {id:11,name:"食材烹饪",sub:"传统技艺·省级非遗",icon:"👨‍🍳",c1:"#e8eefc",c2:"#4a6cc4"},
 {id:12,name:"顾客留言",sub:"真实评价·期待倾听",icon:"💬",c1:"#eef0f3",c2:"#7a8595"}
];

/* 第1-9类企业：一企一页（商城县本地特色） */
var COMP=[
 /* 1 粮油制品 */
 {id:101,cat:1,name:"商城野生山茶油合作社",icon:"🌰",desc:"大别山区野生油茶林，世代传承土法冷榨工艺，保留山茶油天然营养。",tags:["野生原料","冷榨工艺"],detail:{
   products:["野生山茶油","精炼山茶油","茶油礼盒"],
   capacity:"年产野生山茶油200吨，合作社社员260户",
   deadline:"5天内发货",
   price:"野生山茶油 78元/500ml · 礼盒装 168元/盒",
   address:"河南省信阳市商城县长竹园乡油茶产业园",
   contact:"139-3768-1101（陈社长）"
 }},
 {id:102,cat:1,name:"商城油挂面专业合作社",icon:"🍝",desc:"商城本地百年传承手艺，菜籽油和面，自然晾晒，挂面爽滑筋道。",tags:["传统手艺","菜籽油和面"],detail:{
   products:["油挂面","手工细面","鸡蛋面"],
   capacity:"年产油挂面800吨",
   deadline:"3天内发货",
   price:"油挂面 6.8元/斤 · 礼盒装 38元/盒",
   address:"河南省信阳市商城县上石桥镇双河村",
   contact:"138-3768-1102（李师傅）"
 }},
 {id:103,cat:1,name:"商城高山生态粮油基地",icon:"🌾",desc:"海拔500米以上冷凉山区种植，山泉水灌溉，产出生态大米、小米。",tags:["生态种植","山泉灌溉"],detail:{
   products:["商城高山生态米","商城黄小米","商城糯米"],
   capacity:"年产粮食600吨",
   deadline:"5天内发货",
   price:"生态米 6.5元/斤 · 黄小米 8.8元/斤",
   address:"河南省信阳市商城县金刚台镇高山粮油区",
   contact:"137-3768-1103（王经理）"
 }},

 /* 2 果蔬菌菇 */
 {id:201,cat:2,name:"商城高山老方瓜基地",icon:"🎃",desc:"商城高山特有老方瓜品种，粉糯香甜，是大别山区传统食材。",tags:["高山特有","粉糯香甜"],detail:{
   products:["高山老方瓜","老方瓜干","老方瓜粉"],
   capacity:"年产老方瓜1200吨",
   deadline:"3天内发货",
   price:"老方瓜 2.5元/斤 · 老方瓜干 18元/袋",
   address:"河南省信阳市商城县伏山乡高山蔬菜区",
   contact:"139-3768-1201（张社长）"
 }},
 {id:202,cat:2,name:"商城地豇豆合作社",icon:"🫛",desc:"商城大别山区传统地豇豆品种，肉厚无筋、味道鲜美，炖煮皆宜。",tags:["传统品种","肉厚无筋"],detail:{
   products:["地豇豆","干豇豆","腌豇豆"],
   capacity:"年产地豇豆400吨",
   deadline:"3天内发货",
   price:"鲜地豇豆 3.2元/斤 · 干豇豆 15元/斤",
   address:"河南省信阳市商城县达权店镇豇豆产业园",
   contact:"138-3768-1202（吴社长）"
 }},
 {id:203,cat:2,name:"商城松树菇基地",icon:"🍄",desc:"商城大别山松林下野生采集，生态原产地，松树菇香味浓郁、营养丰富。",tags:["生态原产","松林野生"],detail:{
   products:["商城松树菇（鲜）","松树菇干","松树菇礼盒"],
   capacity:"年产松树菇80吨（干鲜合计）",
   deadline:"鲜菇当日发，干菇3天内发货",
   price:"鲜松树菇 38元/斤 · 干松树菇 168元/斤",
   address:"河南省信阳市商城县黄柏山林场松林区",
   contact:"137-3768-1203（林场李主任）"
 }},

 /* 3 生鲜畜禽 */
 {id:301,cat:3,name:"商城麻鸭养殖合作社",icon:"🦆",desc:"商城麻鸭是大别山区国家地理标志产品，肉质细嫩、营养丰富。",tags:["地理标志","散养麻鸭"],detail:{
   products:["商城麻鸭（活鸭）","麻鸭白条","麻鸭蛋"],
   capacity:"存栏麻鸭15万只，年出栏80万只",
   deadline:"活鸭当日发货，白条冷链次日达",
   price:"麻鸭 18元/斤 · 白条 22元/斤",
   address:"河南省信阳市商城县河凤桥乡麻鸭产业园",
   contact:"139-3768-1301（赵社长）"
 }},
 {id:302,cat:3,name:"商城黄老母鸡合作社",icon:"🐔",desc:"大别山散养黄老母鸡，养殖周期12个月以上，炖汤味美滋补。",tags:["散养老母鸡","足期出栏"],detail:{
   products:["黄老母鸡（活鸡）","老母鸡白条","老母鸡蛋"],
   capacity:"年出栏老母鸡30万只",
   deadline:"3天内发货",
   price:"黄老母鸡 35元/斤 · 老母鸡白条 42元/只",
   address:"河南省信阳市商城县汪桥镇老母鸡养殖区",
   contact:"138-3768-1302（孙社长）"
 }},
 {id:303,cat:3,name:"商城黑猪生态养殖基地",icon:"🐖",desc:"商城大别山散养黑猪，林下放养+五谷喂养，出栏周期14个月，肉质紧实醇香。",tags:["生态散养","足期出栏"],detail:{
   products:["商城黑猪肉","黑猪五花肉","黑猪肋排","黑猪腊肉原料"],
   capacity:"年出栏黑猪2万头",
   deadline:"分部位定制，72小时内发货",
   price:"黑猪肉 32元/斤 · 五花肉 36元/斤",
   address:"河南省信阳市商城县苏仙石乡黑猪养殖基地",
   contact:"137-3768-1303（周场长）"
 }},
 {id:304,cat:3,name:"商城土鸡蛋合作社",icon:"🥚",desc:"大别山散养土鸡所产，蛋黄色泽金黄、蛋白浓稠，天然营养。",tags:["散养土鸡","新鲜直供"],detail:{
   products:["商城土鸡蛋","初生蛋","绿壳蛋"],
   capacity:"存栏蛋鸡8万只，日产蛋5万枚",
   deadline:"当日拣选，次日达",
   price:"土鸡蛋 1.5元/枚 · 绿壳蛋 2.0元/枚",
   address:"河南省信阳市商城县余集镇蛋鸡养殖区",
   contact:"136-3768-1304（杨社长）"
 }},
 {id:305,cat:3,name:"商城散养乌鸡合作社",icon:"🐦",desc:"大别山林下散养乌鸡，富含黑色素和氨基酸，炖汤滋补佳品。",tags:["林下散养","滋补养生"],detail:{
   products:["散养乌鸡","乌鸡蛋","乌鸡白条"],
   capacity:"年出栏乌鸡3万只",
   deadline:"48小时内发货",
   price:"整只乌鸡 48元/斤 · 乌鸡蛋 2.5元/枚",
   address:"河南省信阳市商城县冯店乡乌鸡养殖区",
   contact:"135-3768-1305（陈社长）"
 }},
 {id:306,cat:3,name:"商城青壳鸭蛋基地",icon:"🥚",desc:"商城麻鸭所产青壳鸭蛋，蛋壳青绿、蛋黄橘红，腌制后流油起沙。",tags:["青壳蛋","流油起沙"],detail:{
   products:["商城青壳鸭蛋","咸鸭蛋","松花蛋"],
   capacity:"日产青壳鸭蛋3万枚",
   deadline:"3天内发货",
   price:"青壳鸭蛋 2.0元/枚 · 咸鸭蛋 2.8元/枚",
   address:"河南省信阳市商城县丰集镇青壳蛋基地",
   contact:"134-3768-1306（刘社长）"
 }},

 /* 4 水产制品 */
 {id:401,cat:4,name:"商城鲢鱼（花鲢）合作社",icon:"🐟",desc:"商城大别山水库生态养殖鲢鱼（花鲢），生态原产地产品，肉质鲜嫩。",tags:["生态原产","水库直供"],detail:{
   products:["商城鲢鱼（花鲢）","花鲢鱼头","鲢鱼块"],
   capacity:"年捕捞量800吨",
   deadline:"活鱼12小时内送达",
   price:"花鲢 8元/斤 · 鱼头 12元/斤",
   address:"河南省信阳市商城县鲇鱼山水库养殖区",
   contact:"139-3768-1401（李社长）"
 }},
 {id:402,cat:4,name:"商城野生红鮹捕捞合作社",icon:"🐠",desc:"商城大别山水域野生红鮹（翘嘴红鲌），肉质细嫩、刺少味鲜。",tags:["野生捕捞","刺少味鲜"],detail:{
   products:["野生红鮹","冰鲜红鮹","红鮹鱼干"],
   capacity:"年捕捞量120吨",
   deadline:"冰鲜48小时内发货",
   price:"红鮹 25元/斤 · 红鮹鱼干 88元/斤",
   address:"河南省信阳市商城县铁佛寺水库野生捕捞队",
   contact:"138-3768-1402（吴队长）"
 }},
 {id:403,cat:4,name:"商城水库胖头鱼基地",icon:"🐡",desc:"商城大别山优质水库养殖胖头鱼，鱼头大、胶质厚，剁椒鱼头首选。",tags:["水库直供","鱼头肥美"],detail:{
   products:["水库胖头鱼","胖头鱼头","胖头鱼片"],
   capacity:"年产胖头鱼500吨",
   deadline:"活鱼12小时内送达",
   price:"胖头鱼 9元/斤 · 鱼头 15元/斤",
   address:"河南省信阳市商城县汤泉池水库胖头鱼养殖区",
   contact:"137-3768-1403（赵经理）"
 }},

 /* 5 腌腊制品 */
 {id:501,cat:5,name:"商城筒鲜鱼传统作坊",icon:"🐟",desc:"商城筒鲜鱼是大别山区传统腌腊美食，裹粉荷叶包制，咸香软嫩。",tags:["传统工艺","省级非遗"],detail:{
   products:["商城筒鲜鱼","小筒鲜鱼","筒鲜鱼礼盒"],
   capacity:"年产量50吨",
   deadline:"腌制周期15天，下单后20天内发货",
   price:"筒鲜鱼 38元/条 · 礼盒装 128元/盒",
   address:"河南省信阳市商城县吴河乡筒鲜鱼作坊",
   contact:"139-3768-1501（陈非遗传承人）"
 }},
 {id:502,cat:5,name:"商城板鸭合作社",icon:"🦆",desc:"商城板鸭是大别山传统腌腊制品，麻鸭为原料、盐卤腌制、自然风干。",tags:["传统腌制","自然风干"],detail:{
   products:["商城板鸭","板鸭礼盒","切块板鸭"],
   capacity:"年产商城板鸭30万只",
   deadline:"腌制风干周期20天，下单后25天内发货",
   price:"商城板鸭 68元/只 · 礼盒装 188元/盒",
   address:"河南省信阳市商城县长竹园乡板鸭产业园",
   contact:"138-3768-1502（王社长）"
 }},
 {id:503,cat:5,name:"商城腊味合作社",icon:"🥓",desc:"商城黑猪肉为原料，柴火慢熏，传统工艺与现代品控结合，腊味醇厚。",tags:["黑猪原料","柴火慢熏"],detail:{
   products:["商城腊肉","商城腊肠","腊排骨","腊猪耳"],
   capacity:"年产腊味150吨",
   deadline:"5天内发货",
   price:"商城腊肉 45元/斤 · 商城腊肠 52元/斤",
   address:"河南省信阳市商城县苏仙石乡腊味产业园",
   contact:"137-3768-1503（孙社长）"
 }},

 /* 6 淀粉豆腐 */
 {id:601,cat:6,name:"商城野生葛根粉合作社",icon:"🌿",desc:"大别山野生葛根，传统工艺水磨提取葛根粉，富含葛根素。",tags:["野生葛根","传统水磨"],detail:{
   products:["野生葛根粉","速溶葛根粉","葛根片"],
   capacity:"年产野生葛根粉200吨",
   deadline:"5天内发货",
   price:"野生葛根粉 38元/500g · 礼盒装 128元/盒",
   address:"河南省信阳市商城县长竹园乡葛根产业园",
   contact:"139-3768-1601（陈社长）"
 }},
 {id:602,cat:6,name:"商城红薯粉丝合作社",icon:"🍜",desc:"商城高山红薯为原料，纯红薯淀粉漏制，久煮不糊汤、爽滑筋道。",tags:["高山红薯","纯红薯粉"],detail:{
   products:["红薯粉条","红薯粉丝","宽粉"],
   capacity:"年产红薯粉丝300吨",
   deadline:"5天内发货",
   price:"红薯粉条 12元/斤 · 红薯粉丝 15元/斤",
   address:"河南省信阳市商城县汪桥镇红薯产业园",
   contact:"138-3768-1602（李社长）"
 }},
 {id:603,cat:6,name:"商城手工粉条坊",icon:"🥢",desc:"传承三代手工漏粉工艺，豌豆+红薯混合，凉拌热炒皆宜。",tags:["三代传承","豌豆红薯"],detail:{
   products:["手工粉条","酸辣粉专用粉","火锅宽粉"],
   capacity:"年产手工粉条120吨",
   deadline:"5天内发货",
   price:"手工粉条 14元/斤 · 酸辣粉 18元/袋",
   address:"河南省信阳市商城县上石桥镇手工粉条坊",
   contact:"137-3768-1603（赵师傅）"
 }},
 {id:604,cat:6,name:"商城二薄豆腐作坊",icon:"🫓",desc:"商城二薄豆腐是大别山传统豆制品，薄如纸、韧如皮，可鲜食可凉拌。",tags:["传统工艺","二薄豆腐"],detail:{
   products:["二薄豆腐（鲜）","二薄豆腐干","豆腐皮卷"],
   capacity:"日产二薄豆腐2吨",
   deadline:"当日生产当日配送",
   price:"二薄豆腐 6元/斤 · 豆腐皮卷 15元/卷",
   address:"河南省信阳市商城县双椿铺镇二薄豆腐村",
   contact:"136-3768-1604（吴师傅）"
 }},
 {id:605,cat:6,name:"商城豆筋合作社",icon:"🥖",desc:"商城传统豆筋工艺，豆浆挑皮卷制晾干，豆香浓郁、口感劲道。",tags:["传统工艺","豆香浓郁"],detail:{
   products:["商城豆筋","豆筋礼盒","即食豆筋"],
   capacity:"年产豆筋100吨",
   deadline:"5天内发货",
   price:"商城豆筋 18元/斤 · 礼盒装 68元/盒",
   address:"河南省信阳市商城县鄢岗镇豆筋产业园",
   contact:"135-3768-1605（钱社长）"
 }},
 {id:606,cat:6,name:"商城石磨豆腐坊",icon:"🧈",desc:"传统石磨磨浆、盐卤点浆，豆腐白嫩细腻、豆香浓郁。",tags:["石磨工艺","盐卤点浆"],detail:{
   products:["石磨老豆腐","嫩豆腐","冻豆腐","香干"],
   capacity:"日产石磨豆腐3吨",
   deadline:"当日生产次日达",
   price:"老豆腐 5元/斤 · 香干 9元/斤",
   address:"河南省信阳市商城县河凤桥乡石磨豆腐村",
   contact:"134-3768-1606（郑师傅）"
 }},

 /* 7 泉水饮料（新增） */
 {id:701,cat:7,name:"商城黄柏山矿泉水厂",icon:"💧",desc:"大别山黄柏山国家森林公园天然矿泉水，深岩裂隙水、低钠低矿化度。",tags:["天然矿泉","深层水源"],detail:{
   products:["黄柏山矿泉水550ml","矿泉水5L家庭装","矿泉水礼盒"],
   capacity:"年产矿泉水50万吨",
   deadline:"3天内发货",
   price:"550ml 1.5元/瓶 · 5L 12元/桶",
   address:"河南省信阳市商城县黄柏山林场矿泉水厂",
   contact:"139-3768-1701（林场李厂长）"
 }},
 {id:702,cat:7,name:"商城金刚台山泉水基地",icon:"⛰️",desc:"大别山金刚台山自然保护区天然山泉水，源头直采，富含偏硅酸。",tags:["源头直采","富含偏硅酸"],detail:{
   products:["金刚台山泉水","山泉水5L装","山泉水泡茶专用"],
   capacity:"年产山泉水30万吨",
   deadline:"3天内发货",
   price:"山泉水 2元/瓶 · 5L 15元/桶",
   address:"河南省信阳市商城县金刚台镇山泉水基地",
   contact:"138-3768-1702（吴经理）"
 }},
 {id:703,cat:7,name:"商城深山土蜂蜜合作社",icon:"🍯",desc:"大别山深山放养土蜂，传统压榨取蜜，0添加、0浓缩、自然成熟。",tags:["深山放养","自然成熟蜜"],detail:{
   products:["商城土蜂蜜","百花蜜","槐花蜜","蜂巢蜜"],
   capacity:"年产土蜂蜜50吨",
   deadline:"5天内发货",
   price:"土蜂蜜 88元/500g · 槐花蜜 108元/500g",
   address:"河南省信阳市商城县长竹园乡深山养蜂合作社",
   contact:"137-3768-1703（陈养蜂人）"
 }},

 /* 8 药食同源 */
 {id:801,cat:8,name:"商城天麻种植基地",icon:"🌱",desc:"大别山仿野生天麻种植，个大肥厚、质坚味浓，是商城道地药材。",tags:["道地药材","仿野生种植"],detail:{
   products:["商天麻（鲜）","商天麻（干）","天麻切片","天麻礼盒"],
   capacity:"年产商天麻200吨",
   deadline:"5天内发货",
   price:"鲜天麻 38元/斤 · 干天麻 168元/斤",
   address:"河南省信阳市商城县金刚台镇天麻产业园",
   contact:"139-3768-1801（何经理）"
 }},
 {id:802,cat:8,name:"商城茯苓合作社",icon:"🍄",desc:"大别山松林下仿野生茯苓，个大质实，是药食两用滋补佳品。",tags:["仿野生","松林种植"],detail:{
   products:["商茯苓","茯苓粉","茯苓糕","茯苓礼盒"],
   capacity:"年产商茯苓300吨",
   deadline:"5天内发货",
   price:"商茯苓 28元/斤 · 茯苓粉 68元/500g",
   address:"河南省信阳市商城县苏仙石乡茯苓产业园",
   contact:"138-3768-1802（周社长）"
 }},
 {id:803,cat:8,name:"商城百合金银花基地",icon:"🌼",desc:"大别山区种植百合与金银花，绿色生态，药食两用价值高。",tags:["绿色生态","药食两用"],detail:{
   products:["商城百合","百合干","金银花","金银花茶"],
   capacity:"年产百合80吨、金银花50吨",
   deadline:"5天内发货",
   price:"鲜百合 12元/斤 · 金银花 88元/斤",
   address:"河南省信阳市商城县冯店乡百合金银花基地",
   contact:"137-3768-1803（孙经理）"
 }},

 /* 9 预制食品 */
 {id:901,cat:9,name:"商城罐装老鸭汤公司",icon:"🥫",desc:"以商城麻鸭为原料，标准化生产、许可SC认证，开罐加热即食。",tags:["SC认证","加热即食"],detail:{
   products:["罐装商城老鸭汤","老鸭汤礼盒","老鸭汤面"],
   capacity:"日产罐装老鸭汤5万罐",
   deadline:"3天内发货",
   price:"罐装老鸭汤 28元/罐 · 礼盒装 98元/盒",
   address:"河南省信阳市商城县产业集聚区食品园",
   contact:"139-3768-1901（赵经理）"
 }},
 {id:902,cat:9,name:"商城绿豆丸加工厂",icon:"🟢",desc:"商城传统绿豆丸工艺，选用大别山绿豆，纯手工捏制，速冻锁鲜。",tags:["传统工艺","速冻锁鲜"],detail:{
   products:["商城绿豆丸","绿豆丸汤料包","绿豆丸礼盒"],
   capacity:"日产绿豆丸2吨",
   deadline:"冷链48小时内发货",
   price:"绿豆丸 18元/斤 · 礼盒装 58元/盒",
   address:"河南省信阳市商城县汪桥镇绿豆丸产业园",
   contact:"138-3768-1902（李经理）"
 }},
 {id:903,cat:9,name:"商城茶点心合作社",icon:"🍵",desc:"商城大别山茶文化衍生茶点心，绿茶+果仁配方，独立小包装。",tags:["茶文化","独立包装"],detail:{
   products:["商城绿茶酥","茶点心礼盒","绿茶薄脆","绿茶牛轧糖"],
   capacity:"年产茶点心200吨",
   deadline:"3天内发货",
   price:"茶点心 28元/盒 · 礼盒装 88元/盒",
   address:"河南省信阳市商城县苏仙石乡茶产业园",
   contact:"137-3768-1903（陈经理）"
 }}
];

/* 第10类：一品一页（名菜名吃 — 商城本地） */
var DISH=[
 {id:1001,cat:10,name:"商城老鸭汤",company:"商城·麻鸭产业园（合作企业）",icon:"🦆",price:"128元/只",tags:["商城一绝","滋补养生"],grad:"linear-gradient(135deg,#7a4a1a,#3d2410)",
  desc:"商城老鸭汤是大别山区传统滋补名菜，麻鸭慢炖四小时，汤色金黄、滋味醇厚。",
  sections:[
   {img:"🦆",t:"优选麻鸭",d:"选用商城散养18个月以上麻鸭，褪毛洗净剁块焯水。"},
   {img:"💧",t:"山泉慢炖",d:"加金刚台山泉水、配天麻茯苓等药食同源食材，大火烧开小火炖四小时。"},
   {img:"🍲",t:"原汤原味",d:"出锅前撒盐胡椒葱花，汤鲜味美无腥膻，老少皆宜。"}
  ],
  ings:["商城麻鸭","金刚台山泉水","商天麻","商茯苓","姜葱","盐","胡椒"],
  org:"商城麻鸭产业园出品，每日限量100只" },
 {id:1002,cat:10,name:"商城筒鲜鱼",company:"商城·吴河乡筒鲜鱼作坊（合作企业）",icon:"🐟",price:"158元/条",tags:["省级非遗","传统技艺"],grad:"linear-gradient(135deg,#a8714a,#5a3a1a)",
  desc:"商城筒鲜鱼是大别山区省级非物质文化遗产，荷叶裹粉腌制，蒸熟咸香软嫩。",
  sections:[
   {img:"🐟",t:"鲜活花鲢",d:"选用商城水库2-3斤花鲢，宰杀洗净切段晾干。"},
   {img:"🌿",t:"荷叶裹粉",d:"裹上米粉+食盐+花椒+辣椒粉，外包新鲜荷叶，竹筒定型。"},
   {img:"♨️",t:"密封蒸制",d:"入坛密封腌制15天，再上锅蒸熟，开坛荷叶清香扑鼻。"}
  ],
  ings:["商城花鲢","米粉","食盐","花椒","辣椒粉","新鲜荷叶","竹筒"],
  org:"商城吴河乡筒鲜鱼作坊出品，每日限量80条" },
 {id:1003,cat:10,name:"商城腊味锅",company:"商城·苏仙石乡腊味合作社（合作企业）",icon:"🥘",price:"98元/份",tags:["大别美味","吃在商城"],grad:"linear-gradient(135deg,#c2410c,#7a2c02)",
  desc:"商城腊味锅选用本地黑猪肉腊味，配高山笋干、黄老母鸡汤底，咸香醇厚、回味悠长。",
  sections:[
   {img:"🥓",t:"黑猪腊味",d:"商城黑猪五花腊肉、腊排骨、腊肠切片，柴火慢熏风味醇厚。"},
   {img:"🍲",t:"老母鸡汤底",d:"黄老母鸡慢炖三小时金黄汤底，配商天麻姜片提鲜。"},
   {img:"🎋",t:"高山配菜",d:"加入商城高山笋干、豆筋、葛根粉等配菜，一锅尽显大别美味。"}
  ],
  ings:["商城黑猪腊肉","腊排骨","腊肠","黄老母鸡","商天麻","高山笋干","商城豆筋","葛根粉"],
  org:"商城苏仙石乡腊味合作社出品，每日限量150份" }
];

/* 第11类：一页一技（食材烹饪 — 商城省级非遗） */
var SKILL=[
 {id:1101,cat:11,name:"商城筒鲜鱼腌制技艺",company:"商城非遗传承人·陈师傅（吴河乡筒鲜鱼作坊）",icon:"🐟",grad:"linear-gradient(135deg,#a8714a,#5a3a1a)",
  material:"出产特色食材：商城水库花鲢、新鲜荷叶",
  desc:"商城筒鲜鱼腌制技艺是河南省省级非物质文化遗产，工序讲究、时令严苛。",
  steps:[
   {t:"三伏腌制",d:"选用三伏天（农历六月），鱼段晾干后裹米粉、花椒、辣椒粉、盐。",img:"☀️"},
   {t:"荷叶竹筒",d:"外裹新鲜荷叶，放入专用竹筒定型压实，封口黄泥密封。",img:"🎋"},
   {t:"封坛发酵",d:"入坛码放整齐，密封发酵15天，开坛荷叶清香、鱼肉咸香软嫩。",img:"🫙"}
  ],
  tip:"非遗要点：必须三伏天腌制、必须商城本地荷叶、必须竹筒定型，三者缺一不可。" },
 {id:1102,cat:11,name:"商城老鸭汤炖制技艺",company:"商城麻鸭大厨·孙师傅（河凤桥乡）",icon:"🦆",grad:"linear-gradient(135deg,#7a4a1a,#3d2410)",
  material:"出产特色食材：商城散养18月以上麻鸭、金刚台山泉水",
  desc:"商城老鸭汤讲究“一鸭一泉四小时”，汤色金黄、鸭肉软烂、滋补不上火。",
  steps:[
   {t:"褪毛剁块",d:"活鸭宰杀后80℃热水褪毛，冷水冲洗，剁成3cm见方块，凉水下锅焯水。",img:"🦆"},
   {t:"山泉入锅",d:"加金刚台山泉水淹没鸭肉，配天麻茯苓姜片，大火烧开撇去浮沫。",img:"💧"},
   {t:"小火慢炖",d:"转小火保持微沸，炖足4小时至汤色金黄、鸭肉软烂不柴。",img:"♨️"}
  ],
  tip:"商城老鸭汤的灵魂在山泉，火候不可大，否则汤不清、鸭肉柴。" },
 {id:1103,cat:11,name:"商城腊肉柴火慢熏技艺",company:"商城腊味传承人·周师傅（苏仙石乡）",icon:"🥓",grad:"linear-gradient(135deg,#c2410c,#7a2c02)",
  material:"出产特色食材：商城黑猪后腿肉、商城松树菇碎木屑",
  desc:"商城腊肉柴火慢熏技艺是大别山区传统手艺，松木慢熏七日，腊香醇厚、回味悠长。",
  steps:[
   {t:"选肉腌制",d:"选用商城黑猪后腿肉，切条后用盐、花椒、白酒腌制5天。",img:"🥩"},
   {t:"风干醒肉",d:"挂在阴凉通风处风干3天，让肉表面形成干膜便于熏制。",img:"🌬️"},
   {t:"松木慢熏",d:"用商城松木碎屑柴火慢熏，每日熏2小时、阴凉放置、连续7天。",img:"🔥"}
  ],
  tip:"松木选用很重要，必须是商城大别山松木慢熏，才有独特的松脂香。" }
];

/* 第12类：顾客留言（商城本地用户反馈） */
var MSGS=[
 {av:"👩",c1:"#22a85b",name:"王女士（信阳）",time:"2026-08-22 09:24",stars:5,text:"商城麻鸭收到就炖了老鸭汤，汤色金黄、鸭肉软烂，老人孩子都爱喝，已经第三次回购！",goods:["商城麻鸭","商城老鸭汤"]},
 {av:"👨",c1:"#a8403a",name:"张先生（郑州）",time:"2026-08-21 18:45",stars:5,text:"在外的商城人，最想念的就是这口商城腊味！黑猪腊肉+腊肠柴火慢熏，儿时味道，五星好评。",goods:["商城黑猪腊肉","商城腊肠"]},
 {av:"👵",c1:"#f0a52e",name:"李阿姨（武汉）",time:"2026-08-20 14:12",stars:5,text:"筒鲜鱼第一次尝试就惊艳了！荷叶清香+鱼肉咸香，蒸一下就上桌，比饭店做的还地道。",goods:["商城筒鲜鱼"]},
 {av:"👦",c1:"#2f9fd8",name:"陈同学（杭州）",time:"2026-08-19 12:30",stars:4,text:"野生葛根粉冲出来很浓稠，爸妈说正宗。商城大别山特产在外地买着方便多了。",goods:["商城野生葛根粉"]},
 {av:"👨‍💼",c1:"#7d5cc4",name:"刘经理（上海）",time:"2026-08-18 20:18",stars:5,text:"商城天麻+茯苓组合礼盒送给客户，包装大气有面子，滋补养生佳品，已回购。",goods:["商天麻","商茯苓"]},
 {av:"👩‍🌾",c1:"#b7bd3f",name:"赵女士（南京）",time:"2026-08-17 11:08",stars:5,text:"高山老方瓜煮汤粉糯香甜，孩子喝了两碗！葛根粉条也爽滑筋道，商城食材真的赞。",goods:["高山老方瓜","葛根粉丝"]}
];

/* 热门推荐（数据取自各分类 — 商城本地特色） */
var HOT=[
 {em:"🎃",title:"高山老方瓜",cat:"果蔬菌菇",tag:"高山特有",imgH:110,grad:"linear-gradient(135deg,#fbe2a4,#f0a52e)",desc:"商城大别山高山老方瓜，粉糯香甜，传统粉蒸、炖煮皆宜。",price:"2.5元/斤",type:"comp",id:201},
 {em:"🐖",title:"商城黑猪肉",cat:"生鲜畜禽",tag:"生态散养",imgH:100,grad:"linear-gradient(135deg,#f0b9b9,#a8403a)",desc:"商城大别山散养黑猪，14个月足期出栏，肉质紧实醇香。",price:"32元/斤",type:"comp",id:303},
 {em:"🦆",title:"商城麻鸭",cat:"生鲜畜禽",tag:"地理标志",imgH:90,grad:"linear-gradient(135deg,#cfe7c4,#7fb86b)",desc:"商城麻鸭是国家地理标志产品，炖老鸭汤一绝。",price:"18元/斤",type:"comp",id:301},
 {em:"🐟",title:"商城鲢鱼（花鲢）",cat:"水产制品",tag:"生态原产",imgH:85,grad:"linear-gradient(135deg,#a8dcf2,#2f9fd8)",desc:"商城鲇鱼山水库生态花鲢，活鱼12小时送达，鱼头大、胶质厚。",price:"8元/斤",type:"comp",id:401},
 {em:"🥓",title:"商城腊味组合",cat:"腌腊制品",tag:"柴火慢熏",imgH:120,grad:"linear-gradient(135deg,#e8cbb3,#a8714a)",desc:"商城黑猪腊肉+腊肠+腊排骨，松木慢熏7日，腊香醇厚。",price:"45元/斤",type:"comp",id:503},
 {em:"🌿",title:"葛根粉+红薯粉丝",cat:"淀粉豆腐",tag:"商城特产",imgH:105,grad:"linear-gradient(135deg,#dde9c4,#9fb83f)",desc:"野生葛根粉+高山红薯粉丝，商城大别山地道组合。",price:"38元/500g",type:"comp",id:601},
 {em:"🫓",title:"二薄+豆筋组合",cat:"淀粉豆腐",tag:"传统工艺",imgH:80,grad:"linear-gradient(135deg,#f3b8cd,#e1789b)",desc:"商城二薄豆腐薄如纸、豆筋韧如皮，凉拌热炒皆宜。",price:"36元/组",type:"comp",id:604},
 {em:"🌱",title:"商天麻+商茯苓",cat:"药食同源",tag:"道地药材",imgH:95,grad:"linear-gradient(135deg,#a7e9c0,#3fae5c)",desc:"大别山仿野生天麻茯苓，商城道地药食同源珍品。",price:"168元/组",type:"comp",id:801},
 {em:"🍵",title:"商城茶点心组合",cat:"预制食品",tag:"茶文化",imgH:100,grad:"linear-gradient(135deg,#cbb4ea,#7d5cc4)",desc:"商城大别山绿茶酥+薄脆，独立小包装，茶余饭后好伴侣。",price:"28元/盒",type:"comp",id:903}
];

/* ================= 路由 ================= */
var stack=[{type:"home",title:"商城拾味"}];
var CURRENT_LIST=[];
function $(id){return document.getElementById(id);}

function render(){
  var page=stack[stack.length-1];
  var nav='<div class="nav"><span class="back" onclick="goBack()">'+(stack.length>1?'‹ 返回':'')+'</span><h2>'+page.title+'</h2><span class="sp"></span></div>';
  var body="";
  if(page.type=="home") body=renderHome();
  else if(page.type=="category") body=renderCategory(page.cat);
  else if(page.type=="company") body=renderCompany(page.company);
  else if(page.type=="dish") body=renderDish(page.dish);
  else if(page.type=="skill") body=renderSkill(page.skill);
  else if(page.type=="msg") body=renderMsgs();
  $("screen").innerHTML=body.replace('<div class="page">','<div class="page">'+nav);
  $("screen").querySelector(".page").classList.add("active");
  $("screen").querySelector(".page").scrollTop=0;
}
function go(page){stack.push(page);render();}
function goBack(){if(stack.length>1){stack.pop();render();}}

/* ================= 页面渲染 ================= */
function renderHome(){
  var h='<div class="page">';
  h+='<div class="home-head"><div class="ht">🌱 商城拾味</div><div class="hs">餐饮食材信息展示平台<br>聚合 10 大品类 · 商城本地特色食材一站直达</div>'
   +'<div class="home-stats"><div><b>33+</b><span>合作企业</span></div><div><b>10</b><span>大品类</span></div><div><b>98%</b><span>好评率</span></div></div></div>';
  h+='<div class="cat-panel"><div class="cp-t">全部分类</div><div class="cat-grid">';
  CATS.forEach(function(c){
    h+='<div class="cat-cell" onclick="openCat('+c.id+')"><div class="ci" style="background:'+c.c1+'">'+c.icon+'</div><div class="cn">'+c.name+'</div><div class="cs">'+c.sub+'</div></div>';
  });
  h+='</div></div>';
  h+='<div class="hot-panel"><div class="hp-t">热门推荐<span class="hp-more" onclick="alert(\'查看全部热门推荐（示例）\')">更多 ›</span></div><div class="wf">';
  HOT.forEach(function(x,i){
    h+='<div class="wf-card" onclick="openHot('+i+')">'
     +'<div class="wf-img" style="height:'+x.imgH+'px;background:'+x.grad+'"><span class="wf-tag">'+x.cat+'</span>'+x.em+'</div>'
     +'<div class="wf-body"><div class="wf-title">'+x.title+'</div><div class="wf-desc">'+x.desc+'</div>'
     +'<div class="wf-foot"><span class="wf-price">'+x.price+'</span><span class="tag">'+x.tag+'</span></div></div></div>';
  });
  h+='</div></div><div class="home-foot">商城拾味 · 信息展示交互原型 v1.0</div></div>';
  return h;
}

function openCompById(id){var c=COMP.find(function(x){return x.id==id;});if(c){go({type:"company",title:c.name,company:c});}}
function openDishById(id){var d=DISH.find(function(x){return x.id==id;});if(d){go({type:"dish",title:d.name,dish:d});}}
function openHot(i){var x=HOT[i];if(!x){return;}if(x.type=="dish"){openDishById(x.id);}else{openCompById(x.id);}}

function openCat(id){
  var c=CATS.find(function(x){return x.id==id;});
  if(id==12){go({type:"msg",title:"顾客留言"});return;}
  go({type:"category",title:c.name,cat:c});
}

function renderCategory(cat){
  var list=[];
  if(cat.id==10){list=DISH.map(function(d){return{icon:d.icon,name:d.name,desc:d.desc,tags:d.tags,go:function(){go({type:"dish",title:d.name,dish:d})}};});}
  else if(cat.id==11){list=SKILL.map(function(s){return{icon:s.icon,name:s.name,desc:s.desc,tags:[s.company.split("（")[0],"一页一技"],go:function(){go({type:"skill",title:s.name,skill:s})}};});}
  else{list=COMP.filter(function(c){return c.cat==cat.id;}).map(function(c){return{icon:c.icon,name:c.name,desc:c.desc,tags:c.tags,go:function(){go({type:"company",title:c.name,company:c})}};});}
  CURRENT_LIST=list;
  var c=CATS.find(function(x){return x.id==cat.id;});
  var h='<div class="page">';
  h+='<div class="list-head"><div class="li" style="background:'+c.c1+'">'+c.icon+'</div><div><b>'+c.name+'合作企业</b><span>'+list.length+' 家合作企业 · 点击查看详情</span></div></div>';
  h+='<div class="sec">';
  list.forEach(function(it,idx){
    h+='<div class="citem" onclick="openItem('+idx+')">';
    h+='<div class="ca">'+it.icon+'</div><div class="cb"><div class="cname">'+it.name+'</div><div class="cdesc">'+it.desc+'</div><div class="ctag">'+it.tags.map(function(t){return '<span class="tag">'+t+'</span>';}).join("")+'</div></div><div class="carrow">›</div></div>';
  });
  h+='</div></div>';
  return h;
}

function openItem(idx){
  if(CURRENT_LIST && CURRENT_LIST[idx] && CURRENT_LIST[idx].go){CURRENT_LIST[idx].go();}
}

function renderCompany(c){
  var d=c.detail;
  var h='<div class="page">';
  h+='<div class="qy-hero"><div class="qi">'+c.icon+'</div><h1>'+c.name+'</h1><div class="qsub"><span class="tag" style="background:rgba(255,255,255,.2);color:#fff">一企一页</span><span class="tag" style="background:rgba(255,255,255,.2);color:#fff">合作企业</span></div></div>';
  h+='<div class="qy-sec"><div class="st">企业档案</div>'
   +'<div class="qy-row"><div class="k">出产产品</div><div class="v">'+d.products.map(function(p){return '<span class="chip">'+p+'</span>';}).join("")+'</div></div>'
   +'<div class="qy-row"><div class="k">产品产能</div><div class="v">'+d.capacity+'</div></div>'
   +'<div class="qy-row"><div class="k">供货时限</div><div class="v">'+d.deadline+'</div></div>'
   +'<div class="qy-row"><div class="k">参考价格</div><div class="v"><span class="price">'+d.price+'</span></div></div>'
   +'<div class="qy-row"><div class="k">生产地址</div><div class="v">'+d.address+'</div></div>'
   +'<div class="qy-row"><div class="k">联系方式</div><div class="v">'+d.contact+'</div></div></div>';
  h+='<div class="tip">💡 提示：以上为示例展示数据，实际合作以签约企业公示信息为准。</div>';
  h+='<div class="qy-btns"><div class="btn btn-green" onclick="alert(\'拨打 '+d.contact+'（示例）\')">📞 拨打电话</div><div class="btn btn-orange" onclick="alert(\'已收藏该企业（示例）\')">☆ 收藏企业</div></div>';
  h+='</div>';
  return h;
}

function renderDish(d){
  var h='<div class="page">';
  h+='<div class="yp-hero" style="background:'+d.grad+'"><div class="em">'+d.icon+'</div><div class="yp-info"><div class="yp-tag">'+d.tags.map(function(t){return '<span class="tag" style="background:rgba(255,255,255,.22);color:#fff">'+t+'</span>';}).join("")+'</div><h1>'+d.name+'</h1><div class="yp-sub">'+d.company+'</div></div></div>';
  h+='<div class="yp-sec"><div class="st">菜品介绍</div><div class="yp-para">'+d.desc+'</div><div class="yp-imgrow"><div class="yi" style="background:linear-gradient(135deg,#fbd6c4,#f0703c)">'+d.sections[0].img+'</div><div class="yi" style="background:linear-gradient(135deg,#fde3c9,#f0a52e)">'+d.sections[1].img+'</div><div class="yi" style="background:linear-gradient(135deg,#cde8cf,#22a85b)">'+d.sections[2].img+'</div></div></div>';
  d.sections.forEach(function(s,idx){
    h+='<div class="yp-sec"><div class="st">图文详情 '+(idx+1)+'</div>'
     +'<div class="yp-imgrow"><div class="yi" style="height:150px;font-size:52px;background:'+d.grad+'">'+s.img+'</div></div>'
     +'<div class="yp-para" style="margin-top:10px"><b style="color:'+d.grad.split(",")[0].replace("linear-gradient(","")+'">'+s.t+'</b><br>'+s.d+'</div></div>';
  });
  h+='<div class="yp-sec"><div class="st">主要食材</div><div class="ing-chips">'+d.ings.map(function(i){return '<span>'+i+'</span>';}).join("")+'</div></div>';
  h+='<div class="yp-sec yp-price" style="margin-top:12px"><div><div style="font-size:11px;color:var(--sub)">参考价</div><b>'+d.price+'</b></div><div><div style="font-size:11px;color:var(--sub)">出品信息</div><div style="font-size:12px;color:var(--text);margin-top:4px">'+d.org+'</div></div></div>';
  h+='<div class="qy-btns"><div class="btn btn-green" onclick="alert(\'已下单 '+d.name+'（示例）\')">🛒 立即预订</div><div class="btn btn-ghost" onclick="alert(\'已收藏该菜品（示例）\')">☆ 收藏</div></div>';
  h+='</div>';
  return h;
}

function renderSkill(s){
  var h='<div class="page">';
  h+='<div class="js-hero" style="background:'+s.grad+'"><div class="em">'+s.icon+'</div><h1>'+s.name+'</h1><div class="js-sub">'+s.company+'</div></div>';
  h+='<div class="qy-sec"><div class="st">技法简介</div>'
   +'<div class="qy-row"><div class="k">技法名称</div><div class="v">'+s.name+'</div></div>'
   +'<div class="qy-row"><div class="k">推荐食材</div><div class="v">'+s.material+'</div></div>'
   +'<div class="qy-row"><div class="k">技法说明</div><div class="v">'+s.desc+'</div></div></div>';
  h+='<div class="qy-sec"><div class="st">技法步骤</div><div style="padding:4px 16px 14px">';
  s.steps.forEach(function(st,idx){
    h+='<div class="step"><div class="no">'+(idx+1)+'</div><div class="st-body"><div class="st-t">'+st.t+'</div><div class="st-d">'+st.d+'</div><div class="st-img" style="background:'+s.grad+'">'+st.img+'</div></div></div>';
  });
  h+='</div></div>';
  h+='<div class="tip">👨‍🍳 大师小贴士：'+s.tip+'</div>';
  h+='</div>';
  return h;
}

function renderMsgs(){
  var h='<div class="page">';
  h+='<div class="msg-input"><div class="mi">写下你的留言，告诉我们你的体验…</div><div class="send" onclick="alert(\'留言已提交（示例）\')">发布</div></div>';
  h+='<div class="sec">';
  MSGS.forEach(function(m){
    h+='<div class="msg-card"><div class="msg-top"><div class="msg-av" style="background:'+m.c1+'">'+m.av+'</div><div><div class="msg-name">'+m.name+'</div><div class="msg-time">'+m.time+'</div></div><div class="msg-stars">'+("★".repeat(m.stars))+'</div></div>'
     +'<div class="msg-text">'+m.text+'</div><div class="msg-goods">'+m.goods.map(function(g){return '<span>'+g+'</span>';}).join("")+'</div></div>';
  });
  h+='</div><div class="home-foot">共 '+MSGS.length+' 条留言 · 实时滚动更新</div></div>';
  return h;
}

render();
</script>
</body>
</html>