驰旭鲜卤_H5/gen.py · 约 64700 字符
1#!/usr/bin/env python32# -*- coding: utf-8 -*-3"""生成驰旭鲜卤 H5 项目所有文件（8页：index/category/detail/cart/order/orders/member/mine）"""4import os5import re67OUT = os.path.dirname(os.path.abspath(__file__))89CSS = """/* 驰旭鲜卤 · 移动端 H5 样式（卤酱红+金主题） */10*{margin:0;padding:0;box-sizing:border-box}11body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:#fbf2ec;color:#3a241a;max-width:430px;margin:0 auto;min-height:100vh}12a{text-decoration:none;color:inherit}13ul{list-style:none}14:root{--primary:#a83218;--primary-dark:#7f2410;--primary-light:#fbe6dc;--secondary:#c0392b;--accent:#d99a2b;--gold:#c8851a;--dark:#5e1c0c;--gray:#b9a99f;--light-gray:#f6e9e1;--green:#16a34a;--blue:#2563eb;--orange:#ea580c;--red:#dc2626}15.header{background:linear-gradient(135deg,#7f2410,#a83218);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(94,28,12,.3)}16.header .back{font-size:22px;cursor:pointer;width:32px}17.header h1{font-size:17px;font-weight:600;flex:1;text-align:center}18.header .right{width:32px;text-align:right;font-size:14px}19.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;border-top:1px solid #eee;display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom)}20.tabbar a{flex:1;text-align:center;padding:8px 0;color:#999;font-size:11px}21.tabbar a.active{color:var(--primary)}22.tabbar a .icon{font-size:22px;display:block;margin-bottom:2px}23.card{background:#fff;border-radius:12px;margin:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.05)}24.section-title{font-size:16px;font-weight:700;margin:16px 16px 8px;display:flex;justify-content:space-between;align-items:center}25.section-title span{font-size:12px;color:#999;font-weight:400}26.btn{display:block;width:100%;padding:13px;border:none;border-radius:25px;font-size:15px;font-weight:600;cursor:pointer;text-align:center}27.btn-primary{background:linear-gradient(135deg,#7f2410,#a83218);color:#fff}28.btn-gold{background:linear-gradient(135deg,#c8851a,#e0a82e);color:#fff}29.btn-outline{background:#fff;border:1px solid var(--primary);color:var(--primary)}30.btn-red{background:linear-gradient(135deg,#dc2626,#ea580c);color:#fff}31.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}32.badge-hot{background:#fff1f0;color:#dc2626}33.badge-new{background:#eef2ff;color:var(--blue)}34.badge-sale{background:#fff7e6;color:var(--orange)}35.badge-org{background:var(--primary-light);color:var(--primary-dark)}36.tag{display:inline-block;padding:2px 6px;border-radius:4px;font-size:11px;background:var(--light-gray);color:#8a4a32;margin:2px 4px 0 0}37/* 首页 */38.banner{height:168px;margin:12px;border-radius:14px;background:linear-gradient(135deg,#a83218,#c0392b,#d99a2b);color:#fff;display:flex;align-items:center;padding:20px;position:relative;overflow:hidden}39.banner .bn-title{font-size:22px;font-weight:800;letter-spacing:1px}40.banner .bn-sub{font-size:12px;opacity:.94;margin-top:6px;line-height:1.7}41.banner .bn-badge{display:inline-block;background:rgba(255,255,255,.22);padding:4px 12px;border-radius:14px;font-size:11px;margin-top:10px}42.banner .bn-emoji{position:absolute;right:10px;font-size:68px;opacity:.95}43.search-box{margin:12px;background:#fff;border-radius:22px;padding:11px 16px;display:flex;align-items:center;gap:8px;box-shadow:0 1px 4px rgba(0,0,0,.05)}44.search-box .s-ico{font-size:18px}45.search-box input{border:none;outline:none;flex:1;font-size:13px;color:#3a241a}46.search-box .s-btn{background:linear-gradient(135deg,#7f2410,#a83218);color:#fff;padding:6px 14px;border-radius:16px;font-size:12px;font-weight:700}47.cert-bar{background:linear-gradient(135deg,#7f2410,#a83218);margin:12px;border-radius:14px;padding:14px;color:#fff;display:flex;align-items:center;gap:12px}48.cert-bar .cb-ico{font-size:34px}49.cert-bar .cb-body b{font-size:14px;display:block}50.cert-bar .cb-body span{font-size:11px;opacity:.9;display:block;margin-top:2px;line-height:1.6}51.cert-bar .cb-btn{margin-left:auto;background:rgba(255,255,255,.22);padding:7px 12px;border-radius:14px;font-size:11px;font-weight:700}52.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px}53.cat-grid a{background:#fff;border-radius:12px;padding:14px 4px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.04)}54.cat-grid a .c-emoji{font-size:28px;display:block}55.cat-grid a .c-name{font-size:12px;margin-top:6px;color:#8a4a32;font-weight:600}56.quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:16px 10px;background:#fff;margin:12px;border-radius:14px}57.quick-grid a{text-align:center;font-size:11px;color:#8a4a32}58.quick-grid a .qicon{width:44px;height:44px;margin:0 auto 5px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:22px}59.hot-list{background:#fff;border-radius:14px;margin:12px;padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.05)}60.hot-list .hl-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-bottom:6px}61.hot-list .hl-head .hl-tag{background:var(--primary-light);color:var(--primary-dark);font-size:11px;padding:2px 8px;border-radius:10px}62.hot-list .hl-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f3e7df;font-size:12px}63.hot-list .hl-item:last-child{border-bottom:none}64.hot-list .hl-item .hl-rank{width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}65.hot-list .hl-item:nth-child(2) .hl-rank{background:#e0a82e}66.hot-list .hl-item:nth-child(3) .hl-rank{background:#c0392b}67.hot-list .hl-item .hl-name{flex:1}68.hot-list .hl-item .hl-num{color:var(--primary-dark);font-weight:700}69.hot-list .hl-item .hl-chg{font-size:11px;color:#9a857a}70.seckill{background:#fff;border-radius:14px;margin:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}71.seckill .sk-head{background:linear-gradient(135deg,#dc2626,#ea580c);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px}72.seckill .sk-head b{font-size:15px}73.seckill .sk-head .sk-time{display:flex;gap:3px;margin-left:auto}74.seckill .sk-head .sk-time i{background:rgba(255,255,255,.25);padding:2px 6px;border-radius:4px;font-size:13px;font-style:normal;font-weight:700}75.seckill .sk-body{display:flex;gap:10px;padding:12px;overflow-x:auto;scrollbar-width:none}76.seckill .sk-item{width:96px;flex-shrink:0;text-align:center}77.seckill .sk-item .sk-img{height:72px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:36px}78.seckill .sk-item .sk-name{font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}79.seckill .sk-item .sk-price{color:var(--red);font-weight:800;font-size:14px;margin-top:2px}80.seckill .sk-item .sk-old{color:#c4b3a8;font-size:10px;text-decoration:line-through}81.lu-card{background:#fff;border-radius:14px;margin:10px 12px;padding:12px;display:flex;gap:12px;box-shadow:0 1px 4px rgba(0,0,0,.05)}82.lu-card .bc-img{width:92px;height:92px;border-radius:10px;background:linear-gradient(135deg,#fbe6dc,#f6cdb4);display:flex;align-items:center;justify-content:center;font-size:44px;flex-shrink:0}83.lu-card .bc-body{flex:1;min-width:0}84.lu-card .bc-name{font-size:14px;font-weight:700}85.lu-card .bc-desc{font-size:11px;color:#a78d80;margin-top:3px}86.lu-card .bc-meta{font-size:10px;color:#bba493;margin-top:3px}87.lu-card .bc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px}88.lu-card .bc-price{color:var(--red);font-weight:800;font-size:17px}89.lu-card .bc-price small{font-size:11px;color:#bba493;font-weight:400}90.lu-card .bc-add{background:linear-gradient(135deg,#7f2410,#a83218);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700}91/* 选购 */92.cat-tabs{display:flex;gap:8px;padding:0 12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;position:sticky;top:0;z-index:99;background:#fbf2ec}93.cat-tab{padding:8px 14px;border:1px solid #edcbbb;border-radius:20px;font-size:12px;cursor:pointer;background:#fff;white-space:nowrap;flex-shrink:0}94.cat-tab.sel{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark);font-weight:600}95.sort-bar{display:flex;gap:14px;padding:10px 12px;font-size:13px;color:#8a4a32}96.sort-bar span.on{color:var(--primary);font-weight:700}97.cart-float{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:100;gap:10px;box-shadow:0 -2px 8px rgba(0,0,0,.06)}98.cart-float .cf-cart{display:flex;align-items:center;gap:6px;font-size:12px;color:#8a4a32}99.cart-float .cf-cart .ico{font-size:24px;position:relative}100.cart-float .cf-cart .num{position:absolute;top:-6px;right:-10px;background:var(--red);color:#fff;border-radius:9px;font-size:9px;padding:1px 5px}101.cart-float .cf-total{flex:1;text-align:right;font-size:12px;color:#a78d80}102.cart-float .cf-total b{color:var(--red);font-size:18px}103.cart-float .cf-btn{background:linear-gradient(135deg,#7f2410,#a83218);color:#fff;border-radius:20px;padding:11px 22px;font-size:14px;font-weight:600}104/* 详情 */105.detail-img{height:230px;background:linear-gradient(135deg,#fbe6dc,#f6cdb4);display:flex;align-items:center;justify-content:center;font-size:84px;position:relative}106.detail-img .di-badge{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.45);color:#fff;padding:4px 10px;border-radius:12px;font-size:11px}107.detail-price{background:#fff;margin:12px;border-radius:14px;padding:16px}108.detail-price .dp-num{font-size:26px;font-weight:800;color:var(--red)}109.detail-price .dp-num small{font-size:12px;color:#999}110.detail-price .dp-meta{font-size:12px;color:#a78d80;margin-top:4px;line-height:1.7}111.detail-price .dp-row{display:flex;gap:8px;margin-top:10px}112.detail-price .dp-cell{flex:1;background:var(--light-gray);border-radius:10px;padding:8px;text-align:center;font-size:11px;color:#8a4a32}113.tier-box{background:#fff;margin:12px;border-radius:14px;padding:16px}114.tier-box .tb-title{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}115.tier-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f3e7df;font-size:13px}116.tier-row:last-child{border-bottom:none}117.tier-row .tr-label{width:96px;color:#8a4a32;flex-shrink:0}118.tier-row .tr-price{flex:1;text-align:right;font-weight:700;color:var(--primary-dark)}119.tier-row .tr-price b{font-size:16px}120.tier-row.cur{background:var(--primary-light);border-radius:8px;margin:0 -8px;padding:9px 8px}121.tier-row.cur .tr-label{color:var(--primary-dark);font-weight:700}122.spec-box{background:#fff;margin:12px;border-radius:14px;padding:16px}123.spec-box .sb-title{font-size:14px;font-weight:700;margin-bottom:10px}124.spec-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f3e7df}125.spec-row:last-child{border-bottom:none}126.spec-row .sr-label{width:70px;font-size:13px;color:#8a4a32;flex-shrink:0}127.spec-row .sr-opts{display:flex;gap:8px;flex:1;flex-wrap:wrap}128.spec-opt{padding:6px 12px;border:1px solid #edcbbb;border-radius:14px;font-size:12px;cursor:pointer;background:#fff}129.spec-opt.sel{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark);font-weight:600}130.spec-row .sr-num{display:flex;align-items:center;gap:8px;margin-left:auto}131.spec-row .sr-num i{width:26px;height:26px;border:1px solid #edcbbb;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;cursor:pointer}132.eval-card{background:#fff;border-radius:14px;margin:10px 12px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.05)}133.eval-card .ev-head{display:flex;align-items:center;gap:8px;font-size:12px}134.eval-card .ev-avatar{width:28px;height:28px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:14px}135.eval-card .ev-star{color:var(--accent);font-size:11px}136.eval-card .ev-text{font-size:12px;color:#5a463c;line-height:1.7;margin-top:6px}137.buy-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:100;gap:10px}138.buy-bar .bb-cart{display:flex;align-items:center;gap:6px;font-size:12px;color:#8a4a32}139.buy-bar .bb-cart .ico{font-size:24px;position:relative}140.buy-bar .bb-cart .num{position:absolute;top:-6px;right:-10px;background:var(--red);color:#fff;border-radius:9px;font-size:9px;padding:1px 5px}141.buy-bar .bb-btn{flex:1;border-radius:20px;padding:11px;text-align:center;color:#fff;font-size:14px;font-weight:600}142.buy-bar .bb-btn.buy{background:linear-gradient(135deg,#c8851a,#e0a82e)}143.buy-bar .bb-btn.now{background:linear-gradient(135deg,#7f2410,#a83218)}144/* 购物车 */145.cart-item{background:#fff;border-radius:14px;margin:10px 12px;padding:12px;display:flex;gap:12px;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,.05)}146.ci-check{width:22px;height:22px;border-radius:50%;border:2px solid #e0b6a4;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;background:#fff}147.ci-check.on,.cart-item.checked .ci-check{background:var(--primary);border-color:var(--primary)}148.cart-item .ci-img{width:70px;height:70px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0}149.cart-item .ci-body{flex:1;min-width:0}150.cart-item .ci-name{font-size:13px;font-weight:700}151.cart-item .ci-spec{font-size:11px;color:#a78d80;margin-top:2px}152.cart-item .ci-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px}153.cart-item .ci-price{color:var(--red);font-weight:800}154.cart-item .ci-num{display:flex;align-items:center;gap:8px}155.cart-item .ci-num i{width:24px;height:24px;border:1px solid #edcbbb;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px}156.settle-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:100;gap:10px}157.settle-bar .sb-all{display:flex;align-items:center;gap:6px;font-size:12px;color:#8a4a32}158.settle-bar .sb-total{flex:1;text-align:right;font-size:12px;color:#a78d80}159.settle-bar .sb-total b{color:var(--red);font-size:18px}160.settle-bar .sb-btn{background:linear-gradient(135deg,#7f2410,#a83218);color:#fff;border-radius:20px;padding:11px 26px;font-size:14px;font-weight:600}161.check-box{background:#fff;border-radius:14px;margin:12px;padding:16px}162.check-box .cb-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f3e7df;font-size:13px}163.check-box .cb-row:last-child{border-bottom:none}164.check-box .cb-label{width:86px;color:#8a4a32;flex-shrink:0}165.check-box .cb-val{flex:1;text-align:right;color:#3a241a}166.check-box .cb-val.dim{color:#bca797}167.check-box .cb-val .opt{padding:5px 10px;border:1px solid #edcbbb;border-radius:12px;font-size:12px;margin-left:6px}168.check-box .cb-val .opt.sel{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}169/* 提交订单 */170.pay-card{background:#fff;border-radius:14px;margin:12px;padding:16px}171.pay-card .pc-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f3e7df;font-size:13px}172.pay-card .pc-row:last-child{border-bottom:none}173.pay-card .pc-label{width:72px;color:#8a4a32;flex-shrink:0}174.pay-card .pc-val{flex:1;color:#3a241a}175.pay-card .pc-val.dim{color:#bca797}176.pay-way{background:#fff;border-radius:14px;margin:12px;padding:16px}177.pay-way .pw-title{font-size:14px;font-weight:700;margin-bottom:8px}178.pay-way .pw-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #f3e7df;font-size:14px}179.pay-way .pw-item:last-child{border-bottom:none}180.pay-way .pw-ico{font-size:24px}181.pay-way .pw-radio{margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid #e0b6a4;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px}182.pay-way .pw-item.sel .pw-radio{background:var(--primary);border-color:var(--primary)}183/* 订单/配送状态 */184.order-tabs{display:flex;background:#fff;border-bottom:1px solid #f3e7df;position:sticky;top:0;z-index:99}185.order-tabs a{flex:1;text-align:center;padding:12px 4px;font-size:13px;color:#8a4a32;position:relative}186.order-tabs a.active{color:var(--primary);font-weight:700}187.order-tabs a.active::after{content:"";position:absolute;bottom:0;left:25%;width:50%;height:3px;background:var(--primary);border-radius:3px}188.order-card{background:#fff;border-radius:14px;margin:10px 12px;padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.05)}189.order-card .oc-head{display:flex;justify-content:space-between;font-size:12px;color:#a78d80;padding-bottom:10px;border-bottom:1px solid #f3e7df}190.order-card .oc-head .st{color:var(--primary);font-weight:700}191.order-card .oc-goods{display:flex;gap:10px;padding:10px 0;align-items:center}192.order-card .oc-goods .og-img{width:52px;height:52px;border-radius:8px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:24px}193.order-card .oc-goods .og-name{font-size:13px;font-weight:600;flex:1}194.order-card .oc-goods .og-price{font-size:12px;color:#a78d80}195.order-card .oc-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#a78d80}196.order-card .oc-foot b{color:var(--red);font-size:15px}197.order-card .oc-ops{display:flex;gap:8px;margin-top:10px;justify-content:flex-end}198.order-card .oc-ops i{padding:6px 14px;border:1px solid #edcbbb;border-radius:15px;font-style:normal;font-size:12px}199.order-card .oc-ops i.main{background:linear-gradient(135deg,#7f2410,#a83218);color:#fff;border-color:transparent}200.call-bar{display:flex;gap:8px;margin:10px 12px}201.call-bar i{flex:1;text-align:center;padding:9px 0;border:1px solid #edcbbb;border-radius:14px;font-style:normal;font-size:12px;color:#8a4a32}202.call-bar i.main{background:var(--primary-light);color:var(--primary-dark);border-color:var(--primary);font-weight:600}203.status-line{background:#fff;border-radius:14px;margin:12px;padding:16px}204.status-line .sl-dot{display:flex;gap:12px;position:relative;padding-bottom:16px}205.status-line .sl-dot:last-child{padding-bottom:0}206.status-line .sl-c{width:14px;height:14px;border-radius:50%;background:#ecd9cf;flex-shrink:0;margin-top:2px;position:relative;z-index:1}207.status-line .sl-dot.done .sl-c{background:var(--green)}208.status-line .sl-dot.now .sl-c{background:var(--accent);box-shadow:0 0 0 4px #fbf0d8}209.status-line .sl-dot::before{content:"";position:absolute;left:6px;top:16px;bottom:-2px;width:2px;background:#f0e1d7}210.status-line .sl-dot:last-child::before{display:none}211.status-line .sl-title{font-size:13px;font-weight:600}212.status-line .sl-time{font-size:11px;color:#a78d80;margin-top:2px}213.track-bar{background:#fff;border-radius:14px;margin:12px;padding:16px;display:flex;align-items:center;gap:12px}214.track-bar .tb-ico{font-size:30px}215.track-bar .tb-body{flex:1}216.track-bar .tb-body b{font-size:14px}217.track-bar .tb-body span{font-size:11px;color:#a78d80;display:block;margin-top:2px}218.track-bar .tb-btn{background:var(--primary-light);color:var(--primary-dark);padding:8px 14px;border-radius:16px;font-size:12px;font-weight:700}219/* 会员中心 */220.vip-card{background:linear-gradient(135deg,#7f2410,#a83218,#c8851a);margin:12px;border-radius:16px;color:#fff;padding:20px;position:relative;overflow:hidden}221.vip-card::after{content:"卤";position:absolute;right:12px;top:10px;font-size:32px;font-weight:800;opacity:.18}222.vip-card .vc-level{font-size:13px;opacity:.9}223.vip-card .vc-name{font-size:20px;font-weight:800;margin-top:2px}224.vip-card .vc-exp{font-size:11px;opacity:.85;margin-top:4px}225.vip-card .vc-bar{height:6px;background:rgba(255,255,255,.25);border-radius:3px;margin-top:14px;position:relative}226.vip-card .vc-bar i{display:block;height:100%;width:64%;background:linear-gradient(90deg,#f6cdb4,#e0a82e);border-radius:3px}227.credit-box{background:linear-gradient(135deg,#a83218,#c0392b);margin:12px;border-radius:14px;padding:16px;color:#fff;display:flex;align-items:center;gap:12px}228.credit-box .cb-left{flex:1}229.credit-box .cb-left b{font-size:18px;display:block}230.credit-box .cb-left span{font-size:11px;opacity:.9}231.credit-box .cb-btn{background:rgba(255,255,255,.22);color:#fff;padding:8px 14px;border-radius:16px;font-size:12px;font-weight:700}232.assets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 12px}233.asset-item{background:#fff;border-radius:12px;text-align:center;padding:14px 4px;box-shadow:0 1px 4px rgba(0,0,0,.05)}234.asset-item b{display:block;font-size:19px;color:var(--primary-dark)}235.asset-item span{font-size:11px;color:#a78d80}236.sign-btn{background:linear-gradient(135deg,#c8851a,#e0a82e);color:#fff;border-radius:20px;padding:11px;text-align:center;font-size:14px;font-weight:700;margin:12px;cursor:pointer}237.sign-btn.done{background:#ecd9cf;color:#b07a5e}238.vip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 12px}239.vip-item{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.05)}240.vip-item .vi-emoji{font-size:26px}241.vip-item .vi-name{font-size:13px;font-weight:700;margin-top:4px}242.vip-item .vi-desc{font-size:10px;color:#a78d80;margin-top:2px;line-height:1.5}243.recharge-box{background:#fff;border-radius:14px;margin:12px;padding:16px}244.recharge-box .rb-title{font-size:14px;font-weight:700;margin-bottom:10px}245.recharge-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}246.recharge-opt{border:1px solid #edcbbb;border-radius:10px;text-align:center;padding:10px 4px;font-size:12px}247.recharge-opt.sel{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}248.recharge-opt b{display:block;font-size:14px}249.recharge-opt span{color:#bca797;font-size:10px}250.plan-box{background:#fff;border-radius:14px;margin:12px;padding:16px}251.plan-box .pb-title{font-size:14px;font-weight:700;margin-bottom:10px}252.plan-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f3e7df;font-size:13px}253.plan-item:last-child{border-bottom:none}254.plan-item .pi-day{width:80px;color:#8a4a32;flex-shrink:0}255.plan-item .pi-detail{flex:1;color:#5a463c}256.plan-item .pi-switch{width:42px;height:24px;border-radius:12px;background:var(--primary);position:relative;flex-shrink:0}257.plan-item .pi-switch i{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:#fff}258.plan-item.off .pi-switch{background:#ecd9cf}259.plan-item.off .pi-switch i{right:auto;left:2px}260/* 我的 */261.user-card{background:linear-gradient(135deg,#7f2410,#a83218);margin:12px;border-radius:14px;color:#fff;padding:18px;display:flex;align-items:center;gap:12px}262.user-card .uc-avatar{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:30px}263.user-card .uc-name{font-size:17px;font-weight:600}264.user-card .uc-level{font-size:12px;opacity:.9;margin-top:3px}265.order-entry{background:#fff;border-radius:12px;margin:12px;display:flex;padding:14px 0}266.order-entry a{flex:1;text-align:center;font-size:11px;color:#8a4a32}267.order-entry a .oe-ico{font-size:22px;display:block;margin-bottom:4px;position:relative}268.order-entry a .oe-num{position:absolute;top:-6px;right:-8px;background:var(--red);color:#fff;border-radius:8px;font-size:9px;padding:1px 4px}269.menu-list{background:#fff;border-radius:12px;margin:12px;overflow:hidden}270.menu-list a{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f3e7df;font-size:14px}271.menu-list a:last-child{border-bottom:none}272.menu-list a .ml-l{display:flex;align-items:center;gap:10px}273.menu-list a .ml-l .ico{font-size:20px}274.menu-list a .ml-r{color:#ccc;font-size:12px}275.empty{text-align:center;color:#bca797;font-size:13px;padding:40px 0}276.empty .e-icon{font-size:44px;display:block;margin-bottom:8px}277"""278279DATA = """// 驰旭鲜卤 · 演示数据280window.DATA = {281 categories: ["招牌鸭货", "卤香荤菜", "素食卤味", "锁鲜装", "卤味礼盒", "风味系列"],282 units: ["份", "盒", "袋"],283 products: [284 { id: 1, img: "🦆", name: "招牌卤鸭脖", cat: "招牌鸭货", price: 18, unit: "份", old: 22, sales: 23000, flavor: "麻辣", tags: ["当日现卤", "入味"], desc: "三十味香料老卤慢炖，麻辣鲜香透骨入味，追剧下酒一口上头", hot: true, new: false },285 { id: 2, img: "🍗", name: "卤鸭翅中", cat: "招牌鸭货", price: 16, unit: "份", old: 19, sales: 18000, flavor: "甜辣", tags: ["肉厚", "软糯"], desc: "翅中肉厚卤到软糯，甜辣口微麻，连骨头都想嚼碎", hot: true, new: false },286 { id: 3, img: "🦆", name: "黑鸭风味鸭锁骨", cat: "招牌鸭货", price: 14, unit: "份", old: 17, sales: 15000, flavor: "黑鸭", tags: ["先卤后酱", "回甜"], desc: "先卤后酱黑鸭工艺，表层亮红回甜，越啃越香", hot: false, new: false },287 { id: 4, img: "🐔", name: "藤椒卤凤爪", cat: "卤香荤菜", price: 22, unit: "份", old: 26, sales: 16000, flavor: "藤椒", tags: ["Q弹", "去骨可选"], desc: "藤椒清香微麻，凤爪卤到脱骨Q弹，去骨版更爽口", hot: true, new: true },288 { id: 5, img: "🐷", name: "五香卤猪蹄", cat: "卤香荤菜", price: 28, unit: "份", old: 33, sales: 12000, flavor: "五香", tags: ["胶原丰富", "软糯"], desc: "整只猪蹄卤足三小时，胶原满满筷子一戳就烂", hot: true, new: false },289 { id: 6, img: "🐂", name: "酱卤牛腱", cat: "卤香荤菜", price: 38, unit: "份", old: 45, sales: 9000, flavor: "酱卤", tags: ["筋花分明", "切片"], desc: "牛腱卤足火候筋花分明，冷藏后切薄片，下酒一绝", hot: false, new: false },290 { id: 7, img: "🥢", name: "夫妻肺片", cat: "卤香荤菜", price: 26, unit: "份", old: 30, sales: 11000, flavor: "麻辣", tags: ["大单品", "现拌"], desc: "牛肚牛心现卤现拌，红油藤椒双重浇头，川味经典", hot: true, new: false },291 { id: 8, img: "🥬", name: "麻辣卤藕片", cat: "素食卤味", price: 9, unit: "份", old: 12, sales: 14000, flavor: "麻辣", tags: ["脆爽", "解腻"], desc: "鲜藕切厚片卤到脆爽，麻辣挂汁，解腻下饭神器", hot: true, new: false },292 { id: 9, img: "🌿", name: "五香卤海带结", cat: "素食卤味", price: 8, unit: "份", old: 11, sales: 13000, flavor: "五香", tags: ["低卡", "入味"], desc: "海带结打结锁味，五香卤汁浸透，低卡健康小食", hot: false, new: false },293 { id: 10, img: "🍢", name: "酱卤腐竹", cat: "素食卤味", price: 10, unit: "份", old: 13, sales: 10000, flavor: "酱卤", tags: ["吸汁", "豆香"], desc: "手工腐竹卤到吸饱酱汁，外韧里嫩豆香十足", hot: false, new: false },294 { id: 11, img: "🎁", name: "锁鲜装鸭货礼盒", cat: "锁鲜装", price: 59, unit: "盒", old: 72, sales: 4200, flavor: "混装", tags: ["锁鲜装", "当日发"], desc: "鸭脖+鸭翅+锁骨三拼锁鲜装，当日现卤冷链发出", hot: true, new: true },295 { id: 12, img: "🎁", name: "卤味全家福", cat: "卤味礼盒", price: 88, unit: "盒", old: 108, sales: 3600, flavor: "混装", tags: ["六荤三素", "聚会"], desc: "鸭货荤菜素菜九宫格全家福，聚会下酒一盒搞定", hot: false, new: false },296 { id: 13, img: "🍗", name: "黑鸭卤鸡腿", cat: "卤香荤菜", price: 12, unit: "份", old: 15, sales: 17000, flavor: "黑鸭", tags: ["整只", "爆汁"], desc: "整只大鸡腿老卤慢浸，黑鸭酱色爆汁，小朋友也爱", hot: true, new: false },297 { id: 14, img: "🍱", name: "五香卤豆干", cat: "素食卤味", price: 7, unit: "份", old: 9, sales: 12500, flavor: "五香", tags: ["紧实", "耐嚼"], desc: "厚切豆干卤到紧实耐嚼，五香回甜，休闲零嘴", hot: false, new: false },298 { id: 15, img: "🦞", name: "麻辣卤小龙虾", cat: "风味系列", price: 68, unit: "份", old: 88, sales: 5400, flavor: "麻辣", tags: ["活虾现卤", "季限定"], desc: "活虾现卤十三香底，虾肉弹嫩吸满汤汁，夏夜限定", hot: true, new: true }299 ],300 combos: [301 { img: "🦆", name: "鸭货三人拼盘", price: 42, old: 56, desc: "鸭脖+鸭翅+锁骨 三拼组合装" },302 { img: "🍢", name: "下酒卤味包", price: 36, old: 48, desc: "凤爪+藕片+海带结 3 样组合" }303 ],304 seckills: [305 { img: "🦆", name: "招牌卤鸭脖", price: 12, old: 18 },306 { img: "🐔", name: "藤椒卤凤爪", price: 15, old: 22 },307 { img: "🐷", name: "五香卤猪蹄", price: 19, old: 28 },308 { img: "🥬", name: "麻辣卤藕片", price: 6, old: 9 }309 ],310 hotList: [311 { name: "招牌卤鸭脖", sales: "2.3 万份/月", tag: "麻辣入味" },312 { name: "藤椒卤凤爪", sales: "1.6 万份/月", tag: "Q弹脱骨" },313 { name: "黑鸭卤鸡腿", sales: "1.7 万份/月", tag: "爆汁整只" },314 { name: "五香卤猪蹄", sales: "1.2 万份/月", tag: "软糯胶原" }315 ],316 evals: [317 { avatar: "🍺", name: "夜宵党小王", star: "★★★★★", text: "鸭脖是真的入味，麻辣度刚好，追剧一下能吃两份，锁鲜装到家还是冰的，仪式感拉满。" },318 { avatar: "🏠", name: "居家主妇李姐", star: "★★★★★", text: "每周都买全家福，九宫格荤素都有，老公下酒孩子也能吃，比菜场现捞干净多了。" },319 { avatar: "💼", name: "公司行政阿May", star: "★★★★☆", text: "下午茶团建点过卤味包，分量足口味全，就是旺季得早点下单不然热门款会售罄。" }320 ],321 coupons: [322 { name: "新客无门槛券", val: "¥10", cond: "满 30 可用" },323 { name: "满减券", val: "¥20", cond: "满 88 可用" },324 { name: "自提券", val: "免运费", cond: "到店自提" }325 ],326 recharge: [327 { val: "100", gift: "送 15 元券" },328 { val: "300", gift: "送 50 元券" },329 { val: "500", gift: "送 100 元券" }330 ],331 stores: [332 { name: "城东鲜卤中央厨房店", dist: "1.6km", time: "09:00-23:00", addr: "东环路美食街 18 号" },333 { name: "西站锁鲜自提点", dist: "3.4km", time: "10:00-21:00", addr: "西客站便民服务区 B2" }334 ],335 creditLevels: [336 { level: "普通会员 · 散客", discount: "9.5 折", credit: "¥0", note: "偶发购买" },337 { level: "银卡 · 常客", discount: "9 折", credit: "¥500", note: "月均 3 单" },338 { level: "金卡 · 卤味控", discount: "8.5 折免运", credit: "¥2000", note: "月均 8 单+" },339 { level: "钻石 · 团宠", discount: "8 折协商价", credit: "¥10000", note: "聚会/团建集采" }340 ],341 regularPlans: [342 { day: "每周三", detail: "鸭货拼盘 + 卤味包 各 1 份", on: true },343 { day: "每周五", detail: "锁鲜装鸭货礼盒 1 盒", on: true },344 { day: "每周日", detail: "全家福 + 卤猪蹄 组合", on: false }345 ],346 orderStatus: [347 { title: "已接单 · 后厨现卤中", time: "18:12", done: true },348 { title: "已卤制装盒 · 锁鲜打包", time: "18:40", now: true },349 { title: "骑手取餐 · 冷链配送中", time: "预计 19:20", done: false },350 { title: "已签收 · 请确认收货", time: "待送达", done: false }351 ]352};353"""354355APP = """// 驰旭鲜卤 · 交互逻辑356document.addEventListener('click', function (e) {357 var t = e.target.closest('[data-toast]');358 if (t) { toast(t.getAttribute('data-toast')); }359 var ct = e.target.closest('.cat-tab');360 if (ct) {361 var wrap = ct.parentElement;362 [].forEach.call(wrap.children, function (x) { x.classList.remove('sel'); });363 ct.classList.add('sel');364 var kw = ct.textContent;365 var cards = document.querySelectorAll('.lu-card');366 [].forEach.call(cards, function (c) {367 c.style.display = (kw === '全部' || c.getAttribute('data-cat') === kw) ? 'flex' : 'none';368 });369 }370 var so = e.target.closest('.sort-bar span');371 if (so) {372 var w2 = so.parentElement;373 [].forEach.call(w2.children, function (x) { x.classList.remove('on'); });374 so.classList.add('on');375 }376 var sp = e.target.closest('.spec-opt');377 if (sp) {378 var grp = sp.parentElement;379 [].forEach.call(grp.children, function (x) { x.classList.remove('sel'); });380 sp.classList.add('sel');381 }382 var sn = e.target.closest('.sr-num i');383 if (sn) {384 var b = sn.parentElement.querySelector('b');385 var v = parseInt(b.textContent) || 1;386 v = sn.textContent === '+' ? v + 1 : Math.max(1, v - 1);387 b.textContent = v;388 }389 var ci = e.target.closest('.ci-num i');390 if (ci) {391 var b = ci.parentElement.querySelector('b');392 var v = parseInt(b.textContent) || 1;393 v = ci.textContent === '+' ? v + 1 : Math.max(1, v - 1);394 b.textContent = v;395 }396 var ck = e.target.closest('.ci-check');397 if (ck) { ck.parentElement.classList.toggle('checked'); ck.classList.toggle('on'); }398 var opt = e.target.closest('.cb-val .opt');399 if (opt) {400 var grp = opt.parentElement;401 [].forEach.call(grp.children, function (x) { x.classList.remove('sel'); });402 opt.classList.add('sel');403 }404 var pw = e.target.closest('.pw-item');405 if (pw) {406 var box = pw.parentElement;407 [].forEach.call(box.children, function (x) { x.classList.remove('sel'); });408 pw.classList.add('sel');409 }410 var sg = e.target.closest('.sign-btn');411 if (sg && !sg.classList.contains('done')) { sg.classList.add('done'); sg.textContent = '今日已签到 +10 积分'; toast('签到成功，积分 +10'); }412 var rg = e.target.closest('.recharge-opt');413 if (rg) {414 var grp = rg.parentElement;415 [].forEach.call(grp.children, function (x) { x.classList.remove('sel'); });416 rg.classList.add('sel');417 }418 var cp = e.target.closest('.cc-btn');419 if (cp) { cp.textContent = '已领取'; cp.style.opacity = '.6'; toast('优惠券已到账'); }420 var pl = e.target.closest('.pi-switch');421 if (pl) { pl.parentElement.classList.toggle('off'); }422});423// 秒杀倒计时424(function () {425 var box = document.querySelector('.sk-time');426 if (!box) return;427 var total = 2 * 3600 + 12 * 60 + 40;428 setInterval(function () {429 total--;430 if (total < 0) total = 86399;431 var h = Math.floor(total / 3600), m = Math.floor(total % 3600 / 60), s = total % 60;432 var z = function (n) { return n < 10 ? '0' + n : '' + n; };433 box.innerHTML = '<i>' + z(h) + '</i>:<i>' + z(m) + '</i>:<i>' + z(s) + '</i>';434 }, 1000);435})();436function toast(msg) {437 var d = document.createElement('div');438 d.style.cssText = 'position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(94,28,12,.92);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;z-index:999';439 d.textContent = msg;440 document.body.appendChild(d);441 setTimeout(function () { d.remove(); }, 1800);442}443"""444445def page(title, active, body, tabbar):446 inline_scripts = re.findall(r'<script>(.*?)</script>', body, re.S)447 body_clean = re.sub(r'<script>.*?</script>', '', body, flags=re.S)448 inline_html = "".join("<script>" + s + "</script>" for s in inline_scripts)449 return """<!DOCTYPE html>450<html lang="zh-CN">451<head>452<meta charset="UTF-8"/>453<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>454<title>""" + title + """</title>455<link rel="stylesheet" href="style.css"/>456</head>457<body>458""" + body_clean + """459""" + tabbar + """460<script src="data.js"></script>461""" + inline_html + """462<script src="app.js"></script>463</body>464</html>"""465466def tabbar(active):467 items = [468 ("index.html", "🏠", "首页"),469 ("category.html", "🍗", "选购"),470 ("cart.html", "🛒", "购物车"),471 ("member.html", "👑", "会员"),472 ("mine.html", "👤", "我的"),473 ]474 h = '<nav class="tabbar">'475 for href, icon, name in items:476 cls = ' active' if name == active else ''477 h += '<a class="' + cls + '" href="' + href + '"><span class="icon">' + icon + '</span>' + name + '</a>'478 return h + '</nav>'479480def header(title, back=True, right=""):481 b = '<a class="back" onclick="history.back()">‹</a>' if back else '<span class="back"></span>'482 return '<header class="header">' + b + '<h1>' + title + '</h1><span class="right">' + right + '</span></header>'483484INDEX = """485<div class="banner">486 <div>487 <div class="bn-title">驰旭鲜卤</div>488 <div class="bn-sub">三十味老卤 · 当日现卤 · 锁鲜冷链<br/>招牌鸭货卤香荤菜素卤全都有 · 到家还是冰鲜</div>489 <div class="bn-badge">🎁 新客首单立减 10 元</div>490 </div>491 <div class="bn-emoji">🍗</div>492</div>493<div class="search-box" data-toast="按口味/部位搜索：麻辣鸭脖、五香猪蹄…">494 <span class="s-ico">🔍</span>495 <input placeholder="搜索鸭脖 / 凤爪 / 猪蹄 / 卤藕片…"/>496 <span class="s-btn">搜索</span>497</div>498<div class="cert-bar">499 <div class="cb-ico">🔥</div>500 <div class="cb-body">501 <b>三十味老卤 · 当日现卤现卖</b>502 <span>中央厨房统一卤制，冷链锁鲜到家，每份可查卤制时间</span>503 </div>504 <div class="cb-btn" data-toast="已查看卤制工艺与溯源">查看工艺</div>505</div>506<div class="cat-grid">507 <a href="category.html"><span class="c-emoji">🦆</span><span class="c-name">招牌鸭货</span></a>508 <a href="category.html"><span class="c-emoji">🐔</span><span class="c-name">卤香荤菜</span></a>509 <a href="category.html"><span class="c-emoji">🥬</span><span class="c-name">素食卤味</span></a>510 <a href="category.html"><span class="c-emoji">🎁</span><span class="c-name">锁鲜装</span></a>511 <a href="category.html"><span class="c-emoji">🍱</span><span class="c-name">卤味礼盒</span></a>512 <a href="category.html"><span class="c-emoji">🌶️</span><span class="c-name">风味系列</span></a>513</div>514<div class="quick-grid">515 <a href="category.html"><div class="qicon">📦</div>招牌选购</a>516 <a data-toast="已为你开启每周卤味订阅"><div class="qicon">🔁</div>卤味订阅</a>517 <a href="member.html"><div class="qicon">💳</div>会员卡</a>518 <a href="cart.html"><div class="qicon">🛒</div>购物车</a>519 <a data-toast="邀请好友各得 10 元"><div class="qicon">🤝</div>分享有礼</a>520</div>521<div class="hot-list">522 <div class="hl-head">🔥 今日热卤榜 <span class="hl-tag">按月销</span></div>523 <div id="hotList"></div>524</div>525<div class="seckill">526 <div class="sk-head"><b>⚡ 限时秒杀 · 现卤特价</b><div class="sk-time"><i>02</i>:<i>12</i>:<i>40</i></div></div>527 <div class="sk-body" id="skList"></div>528</div>529<div class="coupon-card" style="background:linear-gradient(135deg,#7f2410,#a83218);margin:12px;border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;color:#fff">530 <div style="flex:1"><b style="font-size:18px;display:block">新客无门槛 10 元券</b><span style="font-size:11px;opacity:.9">全店通用 · 30 天内有效</span></div>531 <div class="cc-btn" data-toast="优惠券已到账" style="background:#fff;color:#7f2410;padding:8px 16px;border-radius:16px;font-size:12px;font-weight:700">立即领取</div>532</div>533<div class="section-title">🔥 招牌爆品 <span>月供数万份</span></div>534<div class="lu-card" data-toast="已加入购物车">535 <div class="bc-img">🦆</div>536 <div class="bc-body">537 <div class="bc-name">招牌卤鸭脖 <span class="badge badge-org">招牌</span></div>538 <div class="bc-desc">三十味老卤慢炖，麻辣鲜香透骨入味</div>539 <div class="bc-meta">月售 2.3 万份+ · 麻辣</div>540 <div class="bc-foot"><div class="bc-price">¥18<small> /份 原22</small></div><div class="bc-add">+</div></div>541 </div>542</div>543<div class="section-title">🎁 组合卤味包</div>544<div id="comboList"></div>545<div class="section-title">🏪 鲜卤自提 / 配送点</div>546<div id="storeList"></div>547<script>548 var hl = document.getElementById('hotList');549 var h0 = '';550 window.DATA.hotList.forEach(function (x, i) {551 h0 += '<div class="hl-item"><div class="hl-rank">' + (i + 1) + '</div>'552 + '<div class="hl-name">' + x.name + ' <span style="font-size:10px;color:#c0392b">' + x.tag + '</span></div>'553 + '<div class="hl-num">' + x.sales + '</div></div>';554 });555 hl.innerHTML = h0;556 var sk = document.getElementById('skList');557 var h = '';558 window.DATA.seckills.forEach(function (x) {559 h += '<div class="sk-item"><div class="sk-img">' + x.img + '</div><div class="sk-name">' + x.name + '</div>'560 + '<div class="sk-price">¥' + x.price + '</div><div class="sk-old">¥' + x.old + '</div></div>';561 });562 sk.innerHTML = h;563 var cl = document.getElementById('comboList');564 var h2 = '';565 window.DATA.combos.forEach(function (c) {566 h2 += '<div class="lu-card"><div class="bc-img">' + c.img + '</div><div class="bc-body">'567 + '<div class="bc-name">' + c.name + ' <span class="badge badge-sale">组合</span></div>'568 + '<div class="bc-desc">' + c.desc + '</div>'569 + '<div class="bc-foot"><div class="bc-price">¥' + c.price + '<small> /原' + c.old + '</small></div>'570 + '<div class="bc-add" data-toast="组合已加入购物车">+</div></div></div></div>';571 });572 cl.innerHTML = h2;573 var sl = document.getElementById('storeList');574 var h3 = '';575 window.DATA.stores.slice(0, 2).forEach(function (s) {576 h3 += '<div class="lu-card"><div class="bc-img">🏪</div><div class="bc-body">'577 + '<div class="bc-name">' + s.name + ' <span class="tag">' + s.dist + '</span></div>'578 + '<div class="bc-desc">' + s.addr + ' · 营业 ' + s.time + '</div>'579 + '<div class="bc-foot"><div class="bc-add" data-toast="已选择该自提点" style="width:auto;height:auto;border-radius:14px;padding:6px 14px;font-size:12px">选点</div></div></div></div>';580 });581 sl.innerHTML = h3;582</script>583"""584585CATEGORY = """586""" + header("招牌选购", back=False, right="🔍") + """587<div class="cat-tabs"></div>588<div class="sort-bar"><span class="on">综合排序</span><span>销量优先</span><span>价格从低到高</span></div>589<div id="catList"></div>590<div class="cart-float">591 <div class="cf-cart"><span class="ico">🛒<span class="num">5</span></span>购物车</div>592 <div class="cf-total"><b>¥96</b></div>593 <div class="cf-btn" data-toast="已跳转购物车">去结算</div>594</div>595<script>596 var ctw = document.querySelector('.cat-tabs');597 var h0 = '<div class="cat-tab sel">全部</div>';598 window.DATA.categories.forEach(function (c) {599 h0 += '<div class="cat-tab">' + c + '</div>';600 });601 ctw.innerHTML = h0;602 var cl = document.getElementById('catList');603 var h = '';604 window.DATA.products.forEach(function (b) {605 h += '<div class="lu-card" data-cat="' + b.cat + '"><div class="bc-img">' + b.img + '</div><div class="bc-body">'606 + '<div class="bc-name">' + b.name + (b.hot ? ' <span class="badge badge-hot">热卖</span>' : '') + (b.new ? ' <span class="badge badge-new">新品</span>' : '') + '</div>'607 + '<div class="bc-desc">' + b.desc + '</div>'608 + '<div class="bc-meta">月售 ' + b.sales.toLocaleString() + '+ · ' + b.flavor + ' · ' + b.tags.join('/') + '</div>'609 + '<div class="bc-foot"><div class="bc-price">¥' + b.price + '<small> /' + b.unit + (b.old ? ' 原' + b.old : '') + '</small></div>'610 + '<div class="bc-add" data-toast="已加入购物车">+</div></div></div></div>';611 });612 cl.innerHTML = h;613</script>614"""615616DETAIL = """617""" + header("商品详情") + """618<div class="detail-img"><div class="di-badge">📷 实拍 · 卤制时间可查</div>🦆</div>619<div class="detail-price">620 <div class="dp-num">¥18<small> /份</small> <span style="color:#dc2626;font-size:13px">会员 ¥15 起</span></div>621 <div class="dp-meta">招牌卤鸭脖 · 三十味老卤现卤 · 麻辣鲜香 · 锁鲜冷链 · 家庭聚会下酒</div>622 <div class="dp-row">623 <div class="dp-cell">🔥 当日现卤</div>624 <div class="dp-cell">🧊 锁鲜装</div>625 <div class="dp-cell">🚚 冷链达</div>626 <div class="dp-cell">⏱ 卤制可查</div>627 </div>628</div>629<div class="tier-box">630 <div class="tb-title">💎 一客一价 · 您的等级价</div>631 <div class="tier-row"><span class="tr-label">零售价</span><span class="tr-price">¥<b>18</b>/份</span></div>632 <div class="tier-row"><span class="tr-label">银卡价</span><span class="tr-price">¥<b>16</b>/份</span></div>633 <div class="tier-row cur"><span class="tr-label">金卡会员价</span><span class="tr-price">¥<b>15</b>/份</span></div>634 <div style="text-align:right;font-size:11px;color:#a78d80;margin-top:8px">采购量越大越优惠 · 当前显示金卡会员价</div>635</div>636<div class="spec-box">637 <div class="sb-title">选择规格</div>638 <div class="spec-row"><span class="sr-label">口味</span><div class="sr-opts"><div class="spec-opt sel">麻辣</div><div class="spec-opt">甜辣</div><div class="spec-opt">五香</div><div class="spec-opt">藤椒</div></div></div>639 <div class="spec-row"><span class="sr-label">包装</span><div class="sr-opts"><div class="spec-opt sel">散装(份)</div><div class="spec-opt">锁鲜装</div><div class="spec-opt">礼盒装</div></div></div>640 <div class="spec-row"><span class="sr-label">份量</span><div class="sr-num"><i>-</i><b>2</b><i>+</i></div></div>641</div>642<div class="section-title">📋 关于这锅卤</div>643<div class="card" style="margin-top:0;font-size:12px;color:#5a463c;line-height:2">644 老卤工艺：三十余味香辛料循环老卤，每日补料续卤，越卤越香<br/>645 现卤现卖：中央厨房当天卤制，每份标注卤制时间，拒绝隔夜陈货<br/>646 锁鲜冷链：真空锁鲜或冰袋保温，到家仍是冰鲜口感<br/>647 口味可选：麻辣 / 甜辣 / 五香 / 藤椒 多风味，微辣到特辣自由选<br/>648 干净卫生：明厨亮灶可直播看，食材溯源可查，吃得放心649</div>650<div class="section-title">💬 吃客评价（1200+）</div>651<div id="evalList"></div>652<div class="section-title">❤️ 猜你喜欢</div>653<div id="guessList" style="display:flex;gap:10px;overflow-x:auto;padding:0 12px;scrollbar-width:none"></div>654<div style="height:70px"></div>655<div class="buy-bar">656 <div class="bb-cart"><span class="ico">🛒<span class="num">5</span></span>购物车</div>657 <div class="bb-btn buy" data-toast="已加入购物车">加入购物车</div>658 <div class="bb-btn now" data-toast="订单提交成功">立即购买</div>659</div>660<script>661 var el = document.getElementById('evalList');662 var h = '';663 window.DATA.evals.forEach(function (x) {664 h += '<div class="eval-card"><div class="ev-head"><div class="ev-avatar">' + x.avatar + '</div>'665 + '<div>' + x.name + '</div><div class="ev-star">' + x.star + '</div>'666 + '</div><div class="ev-text">' + x.text + '</div></div>';667 });668 el.innerHTML = h;669 var gl = document.getElementById('guessList');670 var h2 = '';671 window.DATA.products.slice(1, 5).forEach(function (b) {672 h2 += '<div class="sk-item" style="width:110px"><div class="sk-img" style="height:80px">' + b.img + '</div>'673 + '<div class="sk-name">' + b.name + '</div><div class="sk-price">¥' + b.price + '</div></div>';674 });675 gl.innerHTML = h2;676</script>677"""678679CART = """680""" + header("购物车") + """681<div class="cart-item checked">682 <div class="ci-check on">✓</div>683 <div class="ci-img">🦆</div>684 <div class="ci-body">685 <div class="ci-name">招牌卤鸭脖 <span class="badge badge-org">招牌</span></div>686 <div class="ci-spec">麻辣 · 散装 · 会员价</div>687 <div class="ci-foot"><div class="ci-price">¥15/份</div><div class="ci-num"><i>-</i><b>2</b><i>+</i></div></div>688 </div>689</div>690<div class="cart-item checked">691 <div class="ci-img">🐔</div>692 <div class="ci-body">693 <div class="ci-name">藤椒卤凤爪 <span class="badge badge-new">新品</span></div>694 <div class="ci-spec">藤椒 · 散装 · 会员价</div>695 <div class="ci-foot"><div class="ci-price">¥19/份</div><div class="ci-num"><i>-</i><b>3</b><i>+</i></div></div>696 </div>697</div>698<div class="cart-item">699 <div class="ci-check"></div>700 <div class="ci-img">🐷</div>701 <div class="ci-body">702 <div class="ci-name">五香卤猪蹄 <span class="badge badge-hot">热卖</span></div>703 <div class="ci-spec">五香 · 散装 · 会员价</div>704 <div class="ci-foot"><div class="ci-price">¥25/份</div><div class="ci-num"><i>-</i><b>1</b><i>+</i></div></div>705 </div>706</div>707<div class="coupon-card" style="margin-top:12px;background:linear-gradient(135deg,#7f2410,#a83218);border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;color:#fff">708 <div style="flex:1"><b style="font-size:18px;display:block">满 88 减 20 券</b><span style="font-size:11px;opacity:.9">购物车金额 112 元 · 已自动可用</span></div>709 <div class="cc-btn" data-toast="已抵扣 20 元" style="background:#fff;color:#7f2410;padding:8px 16px;border-radius:16px;font-size:12px;font-weight:700">已用券</div>710</div>711<div class="check-box">712 <div class="cb-row"><span class="cb-label">自提/配送</span><span class="cb-val">城东鲜卤中央厨房店 <span class="tag">1.6km</span></span></div>713 <div class="cb-row"><span class="cb-label">取货方式</span><span class="cb-val"><span class="opt sel">🚚 冷链到家</span><span class="opt">🏪 到店自提</span><span class="opt">⏰ 定时取餐</span></span></div>714 <div class="cb-row"><span class="cb-label">预约时间</span><span class="cb-val dim">今日 19:00 前达 ›</span></div>715 <div class="cb-row"><span class="cb-label">订单备注</span><span class="cb-val dim">微辣 / 多给点卤汁 ›</span></div>716</div>717<div style="height:80px"></div>718<div class="settle-bar">719 <div class="sb-all"><span class="ci-check on">✓</span>全选</div>720 <div class="sb-total">合计 <b>¥112</b><br/>已含冷链费</div>721 <div class="sb-btn" data-toast="已跳转结算">去结算</div>722</div>723"""724725ORDER = """726""" + header("确认订单") + """727<div class="pay-card">728 <div class="pc-row"><span class="pc-label">自提点</span><span class="pc-val">城东鲜卤中央厨房店 · 东环路美食街 18 号 ›</span></div>729 <div class="pc-row"><span class="pc-label">取货方式</span><span class="pc-val">🚚 冷链到家（满 30 免冷链费）</span></div>730 <div class="pc-row"><span class="pc-label">预约时间</span><span class="pc-val">今日 19:00 前送达</span></div>731 <div class="pc-row"><span class="pc-label">订单备注</span><span class="pc-val dim">微辣 / 多给点卤汁 ›</span></div>732</div>733<div class="card" style="margin-top:-4px">734 <div style="display:flex;gap:10px;align-items:center;padding:6px 0"><div class="ci-img" style="width:48px;height:48px;border-radius:8px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:22px">🦆</div><div style="flex:1;font-size:13px;font-weight:600">招牌卤鸭脖 ×2 份（麻辣）</div><div style="font-size:12px;color:#bba493">¥30</div></div>735 <div style="display:flex;gap:10px;align-items:center;padding:6px 0"><div class="ci-img" style="width:48px;height:48px;border-radius:8px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:22px">🐔</div><div style="flex:1;font-size:13px;font-weight:600">藤椒卤凤爪 ×3 份</div><div style="font-size:12px;color:#bba493">¥57</div></div>736</div>737<div class="pay-card" style="margin-top:-4px">738 <div class="pc-row"><span class="pc-label">会员等级</span><span class="pc-val">金卡会员 · 9 折已享</span></div>739 <div class="pc-row"><span class="pc-label">优惠券</span><span class="pc-val" style="color:#dc2626">¥20 满减券 ▾</span></div>740 <div class="pc-row"><span class="pc-label">储值卡</span><span class="pc-val" style="color:var(--primary)">余额 ¥320 可抵 ▾</span></div>741 <div class="pc-row"><span class="pc-label">实付金额</span><span class="pc-val"><b style="font-size:20px;color:var(--red)">¥92</b></span></div>742</div>743<div class="pay-way">744 <div class="pw-title">选择支付方式</div>745 <div class="pw-item sel"><span class="pw-ico">💳</span>会员储值卡余额（¥320）<div class="pw-radio">✓</div></div>746 <div class="pw-item"><span class="pw-ico">📅</span>账期月结（授信 ¥2000）<div class="pw-radio"></div></div>747 <div class="pw-item"><span class="pw-ico">💚</span>微信支付<div class="pw-radio"></div></div>748 <div class="pw-item"><span class="pw-ico">💙</span>支付宝<div class="pw-radio"></div></div>749</div>750<div style="height:80px"></div>751<div class="settle-bar">752 <div class="sb-total" style="text-align:left">应付 <b>¥92</b></div>753 <div class="sb-btn" data-toast="下单成功，后厨开始现卤">提交订单 ¥92</div>754</div>755"""756757ORDERS = """758""" + header("配送订单") + """759<div class="order-tabs">760 <a class="active">进行中</a><a>配送中</a><a>已完成</a>761</div>762<div class="track-bar">763 <div class="tb-ico">🚚</div>764 <div class="tb-body"><b>冷链骑手 张师傅 已取餐</b><span>锁鲜箱配送 · 预计 19:20 送达城东门店</span></div>765 <div class="tb-btn" data-toast="已查看实时位置">查看轨迹</div>766</div>767<div class="order-card">768 <div class="oc-head"><span>城东店 · 2026-09-22 18:12 <span class="tag">单号 CX202609221812</span></span><span class="st">配送中</span></div>769 <div class="oc-goods"><div class="og-img">🦆</div><div class="og-name">招牌卤鸭脖 ×2 份<br/><span style="font-size:11px;color:#bba493">散装 · 麻辣 · 会员价</span></div><div class="og-price">¥30</div></div>770 <div class="oc-goods"><div class="og-img">🐔</div><div class="og-name">藤椒卤凤爪 ×3 份</div><div class="og-price">¥57</div></div>771 <div class="oc-foot"><span>共 2 种 · 实付</span><b>¥92</b></div>772 <div class="call-bar">773 <i data-toast="已发起缺货替代">🔄 缺货替代</i>774 <i data-toast="已催单">📞 催单</i>775 <i class="main" data-toast="已通知骑手拍照签收">📷 签收拍照</i>776 </div>777</div>778<div class="section-title">📡 订单实时进度</div>779<div class="status-line" id="statusList"></div>780<div class="order-card" style="margin-top:12px">781 <div class="oc-head"><span>城东店 · 2026-09-21 19:05</span><span class="st" style="color:#16a34a">已签收</span></div>782 <div class="oc-goods"><div class="og-img">🐷</div><div class="og-name">五香卤猪蹄 ×2 份<br/><span style="font-size:11px;color:#bba493">荤菜 · 五香</span></div><div class="og-price">¥50</div></div>783 <div class="oc-foot"><span>共 1 种 · 实付</span><b>¥50</b></div>784 <div class="oc-ops"><i class="main">去评价</i><i>再次购买</i></div>785</div>786<script>787 var sl = document.getElementById('statusList');788 var h = '';789 window.DATA.orderStatus.forEach(function (t) {790 var cls = t.now ? 'now' : (t.done ? 'done' : '');791 h += '<div class="sl-dot ' + cls + '"><div class="sl-c"></div><div>'792 + '<div class="sl-title">' + t.title + '</div><div class="sl-time">' + (t.time || '待处理') + '</div></div></div>';793 });794 sl.innerHTML = h;795</script>796"""797798MEMBER = """799""" + header("会员中心", back=False, right="⚙️") + """800<div class="vip-card">801 <div class="vc-level">👑 金卡会员 · 尊享 8.5 折免运</div>802 <div class="vc-name">驰旭·金卡卤味控</div>803 <div class="vc-exp">距离钻石会员还差 38 成长值 · 授信额度 ¥2000</div>804 <div class="vc-bar"><i></i></div>805</div>806<div class="credit-box">807 <div class="cb-left"><b>可用授信 ¥2000</b><span>本月已用 ¥920 · 30 日还款</span></div>808 <div class="cb-btn" data-toast="账期对账单已生成">查看对账</div>809</div>810<div class="assets">811 <div class="asset-item"><b>960</b><span>积分</span></div>812 <div class="asset-item"><b>¥320</b><span>储值余额</span></div>813 <div class="asset-item"><b>3 张</b><span>优惠券</span></div>814</div>815<div class="sign-btn">📅 每日签到 +10 积分</div>816<div class="section-title">💳 会员等级与权益</div>817<div class="recharge-box">818 <div class="rb-title">一客一价 · 等级越高价越低</div>819 <div id="creditList"></div>820</div>821<div class="section-title">🔁 卤味订阅计划</div>822<div class="plan-box">823 <div class="pb-title">到点自动生成订单，周末追剧卤味不断供</div>824 <div id="planList"></div>825</div>826<div class="section-title">🎁 储值多充多赠</div>827<div class="recharge-box">828 <div class="rb-title">预存多充多赠 · 全渠道通用</div>829 <div class="recharge-opts">830 <div class="recharge-opt sel"><b>¥100</b><span>送 15 元券</span></div>831 <div class="recharge-opt"><b>¥300</b><span>送 50 元券</span></div>832 <div class="recharge-opt"><b>¥500</b><span>送 100 元券</span></div>833 </div>834 <div class="btn btn-gold" style="margin-top:14px" data-toast="充值成功，券已到账">立即预存</div>835</div>836<div class="section-title">🚀 活动与邀请</div>837<div class="vip-grid">838 <div class="vip-item" data-toast="已发起邻里拼单"><div class="vi-emoji">👥</div><div class="vi-name">邻里拼单</div><div class="vi-desc">合并订单降冷链费</div></div>839 <div class="vip-item" data-toast="社区集采价已开启"><div class="vi-emoji">🏘️</div><div class="vi-name">社区集采</div><div class="vi-desc">集采享专属批发价</div></div>840 <div class="vip-item" data-toast="邀请好友得 10 元"><div class="vi-emoji">🤝</div><div class="vi-name">邀请返利</div><div class="vi-desc">好友下单返 5%</div></div>841 <div class="vip-item" data-toast="节日卤味礼盒预订"><div class="vi-emoji">🎁</div><div class="vi-name">节日礼盒</div><div class="vi-desc">中秋/年货预订</div></div>842</div>843<script>844 var cl = document.getElementById('creditList');845 var h = '';846 window.DATA.creditLevels.forEach(function (c) {847 h += '<div class="tier-row"><span class="tr-label">' + c.level + '</span><span class="tr-price" style="flex:1;text-align:right">' + c.discount + ' · 授信 ' + c.credit + '<br/><span style="font-size:10px;color:#a78d80;font-weight:400">' + c.note + '</span></span></div>';848 });849 cl.innerHTML = h;850 var pl = document.getElementById('planList');851 var h2 = '';852 window.DATA.regularPlans.forEach(function (p) {853 h2 += '<div class="plan-item' + (p.on ? '' : ' off') + '"><div class="pi-day">' + p.day + '</div><div class="pi-detail">' + p.detail + '</div><div class="pi-switch"><i></i></div></div>';854 });855 pl.innerHTML = h2;856</script>857"""858859MINE = """860<div class="user-card">861 <div class="uc-avatar">🧑🍳</div>862 <div>863 <div class="uc-name">驰旭·金卡卤味控</div>864 <div class="uc-level">👑 金卡会员 · 成长值 1962 · 累计省 ¥180</div>865 </div>866</div>867<div class="order-entry">868 <a data-toast="1 单配送中"><span class="oe-ico">🚚</span>配送中<span class="oe-num">1</span></a>869 <a data-toast="暂无待付款"><span class="oe-ico">💰</span>待付款</a>870 <a data-toast="1 单待签收"><span class="oe-ico">📦</span>待签收<span class="oe-num">1</span></a>871 <a data-toast="1 单待评价"><span class="oe-ico">⭐</span>待评价<span class="oe-num">1</span></a>872 <a data-toast="无退款"><span class="oe-ico">↩️</span>退款</a>873</div>874<div class="menu-list">875 <a href="orders.html"><span class="ml-l"><span class="ico">🧾</span>我的订单</span><span class="ml-r">›</span></a>876 <a href="member.html"><span class="ml-l"><span class="ico">👑</span>会员中心</span><span class="ml-r">›</span></a>877 <a data-toast="授信额度 ¥2000"><span class="ml-l"><span class="ico">💳</span>我的授信</span><span class="ml-r">¥2000</span></a>878 <a data-toast="储值余额 ¥320"><span class="ml-l"><span class="ico">🪙</span>储值余额</span><span class="ml-r">¥320</span></a>879 <a data-toast="积分 960"><span class="ml-l"><span class="ico">⭐</span>我的积分</span><span class="ml-r">960</span></a>880 <a data-toast="优惠券 3 张可用"><span class="ml-l"><span class="ico">🎟️</span>优惠券</span><span class="ml-r">3 张</span></a>881 <a data-toast="自提点 2 个"><span class="ml-l"><span class="ico">📍</span>自提配送点</span><span class="ml-r">2 个</span></a>882 <a data-toast="收藏 11 款卤味"><span class="ml-l"><span class="ico">❤️</span>我的收藏</span><span class="ml-r">11</span></a>883 <a data-toast="邀请好友各得 10 元券"><span class="ml-l"><span class="ico">🤝</span>邀请有礼</span><span class="ml-r">›</span></a>884 <a data-toast="客服在线 09:00-23:00"><span class="ml-l"><span class="ico">🎧</span>联系客服</span><span class="ml-r">400-618-2288</span></a>885</div>886"""887888README = """# 驰旭鲜卤（移动端 H5）889890卤味熟食专营平台，主打三十味老卤当日现卤、锁鲜冷链到家，功能对标头部卤味熟食 O2O（绝味、周黑鸭、紫燕百味鸡），纯原生零依赖，移动端优先（390×844）。891892## 页面（8 页）893- index.html 首页：品牌 Banner、老卤工艺溯源条、搜索/按口味筛选、六大分类导航、快捷入口（招牌选购/卤味订阅/会员卡/购物车/分享有礼）、今日热卤榜、限时秒杀、新客领券、招牌爆品、组合卤味包、鲜卤自提/配送点894- category.html 选购：六大分类切换（招牌鸭货/卤香荤菜/素食卤味/锁鲜装/卤味礼盒/风味系列）、综合/销量/价格排序、卤味卡（图/名/价/月售/口味/标签/加购）、底部购物车浮条895- detail.html 商品详情：一客一价三级定价表（零售/银卡/金卡会员价）、口味/包装/份量规格、数量步进、老卤工艺与锁鲜溯源、吃客评价、猜你喜欢、加入购物车/立即购买896- cart.html 购物车：多商品勾选、数量调整、满减券抵扣提示、自提点/取货方式/预约时间/备注、全选结算897- order.html 确认订单：取货信息确认、商品清单、会员折扣+满减券+储值卡、实付金额、支付方式（储值卡/账期月结/微信/支付宝）、提交订单898- orders.html 配送订单：进行中/配送中/已完成 Tab、实时冷链轨迹、订单卡（单号/缺货替代/催单/签收拍照）、实时进度时间线（已接单→已卤制装盒→配送中→已签收）899- member.html 会员中心：会员等级卡（成长值）、授信账期、积分/储值/券资产、每日签到、会员等级权益（一客一价）、卤味订阅计划、储值多充多赠、拼单/集采/邀请返利/节日礼盒900- mine.html 个人中心：会员卡、订单快捷入口（配送中/待付款/待签收/评价/退款）、授信/储值余额/积分/优惠券/自提点/收藏/邀请有礼/客服901902## 文件903- style.css 移动端优先样式（卤酱红+金主题）904- app.js 零依赖交互逻辑（秒杀倒计时/分类筛选/规格选择/数量步进/勾选/领券/签到账期选择/订阅计划开关/Toast）905- data.js 演示数据集中管理（商品/套餐/秒杀/热卤榜/评价/优惠券/预存档位/自提点/会员等级/订阅计划/订单状态）906"""907908def main():909 files = {910 "index.html": page("首页 · 驰旭鲜卤", "index", INDEX, tabbar("首页")),911 "category.html": page("招牌选购 · 驰旭鲜卤", "category", CATEGORY, tabbar("选购")),912 "detail.html": page("商品详情 · 驰旭鲜卤", "detail", DETAIL, tabbar("选购")),913 "cart.html": page("购物车 · 驰旭鲜卤", "cart", CART, tabbar("购物车")),914 "order.html": page("确认订单 · 驰旭鲜卤", "order", ORDER, tabbar("我的")),915 "orders.html": page("配送订单 · 驰旭鲜卤", "orders", ORDERS, tabbar("我的")),916 "member.html": page("会员中心 · 驰旭鲜卤", "member", MEMBER, tabbar("会员")),917 "mine.html": page("个人中心 · 驰旭鲜卤", "mine", MINE, tabbar("我的")),918 "style.css": CSS,919 "data.js": DATA,920 "app.js": APP,921 "README.md": README,922 }923 for name, content in files.items():924 with open(os.path.join(OUT, name), "w", encoding="utf-8") as f:925 f.write(content)926 print(" +", name)927928if __name__ == "__main__":929 main()930