编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>广联网络设备商城 · PC 版</title>
<style>
:root{
  --primary:#ff4400;
  --primary-2:#ff6a00;
  --primary-dark:#e63e00;
  --grad-main:linear-gradient(135deg,#ff6a00,#ff4400);
  --dark:#262626;
  --light:#f7f8fa;
  --gray:#999;
  --gray-2:#666;
  --border:#e8e8e8;
  --bg:#f5f5f5;
  --link:#1c63ff;
  --w:1190px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 6px 18px rgba(0,0,0,.09);
  --shadow-lg:0 16px 48px rgba(0,0,0,.16);
  --ring:0 0 0 3px rgba(255,68,0,.16);
  --radius:8px;
  --radius-lg:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
  background:var(--bg);color:var(--dark);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--dark);}
img{display:block;max-width:100%;}

/* ============ 桌面顶栏 ============ */
.site-head{position:sticky;top:0;z-index:300;background:#fff;}
.site-topbar{height:30px;background:#222;color:#a8a8a8;font-size:12px;}
.stb-wrap{max-width:var(--w);margin:0 auto;height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;}
.stb-wrap b{color:#ff7a45;font-weight:600;}
.stb-left{display:flex;gap:14px;align-items:center;}
.stb-link{padding:0 6px;cursor:pointer;transition:color .15s;}
.stb-link:hover,.stb-link.on{color:#fff;}
.stb-link + .stb-link{border-left:1px solid #444;}

/* 主头部 */
.main-header{height:106px;display:flex;align-items:center;}
.mh-wrap{max-width:var(--w);margin:0 auto;width:100%;padding:0 12px;display:flex;align-items:center;gap:60px;}
.mh-logo{display:flex;align-items:center;gap:12px;flex-shrink:0;cursor:pointer;}
.mh-logo .nb{width:52px;height:52px;border-radius:12px;background:var(--grad-main);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;box-shadow:0 6px 16px rgba(255,68,0,.32);}
.mh-logo .nt{font-size:26px;font-weight:800;color:#ff4400;letter-spacing:.5px;line-height:1.2;}
.mh-logo .nt small{display:block;font-size:11px;color:#a0a0a0;font-weight:500;letter-spacing:3px;}
.mh-search{flex:1;max-width:560px;}
.ms-box{display:flex;height:42px;border:2px solid var(--primary);border-radius:5px;overflow:hidden;background:#fff;}
.ms-box svg{width:18px;height:18px;fill:#aaa;align-self:center;margin-left:12px;flex-shrink:0;}
.ms-box input{flex:1;border:none;outline:none;padding:0 12px;font-size:14px;}
.ms-box button{background:var(--primary);color:#fff;width:96px;font-size:16px;font-weight:600;transition:background .15s;}
.ms-box button:hover{background:var(--primary-dark);}
.ms-hot{margin-top:8px;font-size:12px;color:#999;}
.ms-hot span{margin-right:14px;cursor:pointer;transition:color .15s;}
.ms-hot span:nth-child(1){color:#ff4400;}
.ms-hot span:nth-child(2){color:#ff6a2e;}
.ms-hot span:hover{color:var(--primary);}
.mh-actions{display:flex;gap:26px;flex-shrink:0;}
.ma{display:flex;align-items:center;gap:8px;font-size:13px;color:#666;}
.ma svg{width:26px;height:26px;fill:#ff4400;}

/* 分类导航条 */
.cat-navbar{border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;background:#fff;}
.cn-wrap{max-width:var(--w);margin:0 auto;padding:0 12px;display:flex;align-items:stretch;height:40px;}
.cn-cats{width:200px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s;}
.cn-cats:hover{background:var(--primary-dark);}
.cn-menu{display:flex;align-items:center;gap:2px;margin-left:6px;}
.cn-item{position:relative;padding:0 18px;height:40px;display:flex;align-items:center;font-size:15px;color:#333;font-weight:600;transition:color .15s;}
.cn-item:hover{color:var(--primary);}
.cn-item.active{color:var(--primary);}
.cn-item.active::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--primary);border-radius:2px 2px 0 0;}
.cn-item .nav-badge{position:absolute;top:6px;left:50%;margin-left:10px;min-width:16px;height:16px;border-radius:8px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.cn-user{margin-left:auto;display:flex;align-items:center;gap:10px;padding-left:18px;border-left:1px solid #f0f0f0;cursor:pointer;flex-shrink:0;}
.cn-user .u-av{width:30px;height:30px;border-radius:50%;background:var(--grad-main);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.cn-user .u-t{font-size:13px;font-weight:600;color:#333;}
.cn-user .u-t small{display:block;font-size:11px;color:#999;font-weight:400;}

/* ============ 主容器 ============ */
#app{max-width:var(--w);margin:0 auto;padding:14px 0 40px;min-height:100vh;}
.view{display:none;animation:fadeIn .22s ease;}
.view.on{display:block;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.page-head{display:flex;align-items:center;gap:12px;margin:4px 0 16px;}
.page-head .ph-title{font-size:20px;font-weight:700;color:#333;}
.page-head .ph-sub{color:var(--gray);font-size:12px;margin-top:2px;}
.btn-back{width:34px;height:34px;border-radius:8px;background:#fff;border:1px solid var(--border);color:#666;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.btn-back:hover{border-color:var(--primary);color:var(--primary);}

/* ============ 首页 ============ */
.home-top{display:grid;grid-template-columns:200px minmax(0,1fr) 250px;gap:12px;}
/* 左侧分类 */
.side-nav{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
  .sn-title{height:36px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;padding:0 16px;}
  #sideCats{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;padding:2px 0;}
.sn-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:13px;color:#333;cursor:pointer;transition:all .12s;border-bottom:1px solid #f5f5f5;}
.sn-item:last-child{border-bottom:none;}
.sn-item .sn-arrow{color:#ccc;font-size:12px;}
.sn-item:hover{background:#fff5f0;color:var(--primary);}
.sn-item:hover .sn-arrow{color:var(--primary);}
.sn-all{border-top:1px solid #f0f0f0;color:#999;margin-top:auto;}
.sn-all:hover{color:var(--primary);}
/* 中部 banner + 运营 */
.ht-center{display:flex;flex-direction:column;gap:12px;min-width:0;}
.home-banner{position:relative;height:185px;min-height:185px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
.hb-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.hb-slide{position:relative;flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#eaf2fb,#d9e7f5);}
  .hb-slide::before{content:'';position:absolute;right:-70px;top:-70px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,140,70,.28),transparent 65%);}
  .hb-slide img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1;filter:drop-shadow(0 12px 24px rgba(26,54,92,.28));}
.hb-mask{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.68));color:#fff;padding:10px 18px;display:flex;flex-direction:column;justify-content:flex-end;z-index:2;}
.hb-mask b{font-size:16px;letter-spacing:1px;}
.hb-mask span{font-size:11px;color:rgba(255,255,255,.85);margin-top:3px;}
.hb-dots{position:absolute;right:24px;bottom:18px;display:flex;gap:6px;z-index:3;}
.hb-dots i{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.4);cursor:pointer;transition:all .25s;}
.hb-dots i.on{width:22px;background:#ff4400;}
.op-banner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.opb{position:relative;border-radius:var(--radius-lg);min-height:90px;padding:16px 74px 16px 20px;color:#fff;font-weight:700;font-size:15px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;}
.opb::after{content:'';position:absolute;right:-22px;top:-26px;width:100px;height:100px;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);border-radius:50%;}
  .opb small{display:block;font-weight:400;font-size:11px;opacity:.9;margin-top:4px;color:#fff;position:relative;z-index:2;}
  .opb b{position:relative;z-index:2;}
  .opb b.hl{color:#ffe08a;}
  .opb-tag{position:absolute;right:0;top:0;background:rgba(255,255,255,.28);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-bottom-left-radius:10px;letter-spacing:1px;z-index:3;}
  .opb-img{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:54px;height:54px;object-fit:contain;background:#fff;border-radius:12px;padding:5px;box-shadow:0 6px 14px rgba(0,0,0,.22);z-index:2;}
  .opb-sk i{font-style:normal;font-variant-numeric:tabular-nums;background:rgba(0,0,0,.30);border-radius:6px;padding:1px 6px;margin-left:2px;letter-spacing:1px;}

/* ============ 限时秒杀专区 ============ */
.flash-zone{margin-top:10px;background:linear-gradient(135deg,#fffaf6 0%,#fff5ef 100%);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid #fde8d8;}
.flash-head{display:flex;align-items:center;gap:12px;padding:10px 16px;background:linear-gradient(90deg,#ff3131,#ff4d2e,#ff6a2e);color:#fff;position:relative;overflow:hidden;}
.flash-head::before{content:'';position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);}
.fh-left{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.fh-icon-flash{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:17px;}
.fh-title-flash b{font-size:18px;font-weight:800;letter-spacing:1px;display:block;line-height:1.2;}
.fh-title-flash small{display:block;font-size:11px;color:rgba(255,255,255,.85);margin-top:2px;}
.fh-timer{display:flex;align-items:center;gap:8px;margin-left:auto;}
.timer-tip{font-size:12px;color:rgba(255,255,255,.9);}
.t-box{display:flex;align-items:center;background:rgba(0,0,0,.32);border-radius:6px;padding:3px 7px;}
.t-box i{font-style:normal;font-variant-numeric:tabular-nums;background:#fff;color:#ff3131;font-weight:800;padding:1px 5px;border-radius:4px;font-size:14px;min-width:22px;text-align:center;}
.t-sep{background:transparent!important;color:#fff!important;font-weight:800!important;padding:0!important;min-width:auto!important;font-size:13px;}
.fh-more{margin-left:12px;font-size:12px;color:#fff;background:rgba(255,255,255,.18);padding:4px 12px;border-radius:16px;transition:all .15s;cursor:pointer;}
.fh-more:hover{background:rgba(255,255,255,.32);}
.flash-body{display:grid;grid-template-columns:300px 1fr;gap:8px;padding:8px;align-items:stretch;}
.flash-banner{position:relative;border-radius:var(--radius-lg);background:linear-gradient(160deg,#1f2733,#3a4453);color:#fff;padding:10px 12px;overflow:hidden;cursor:pointer;min-height:0;display:flex;flex-direction:column;}
.flash-banner::before{content:'';position:absolute;right:-50px;bottom:-50px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,68,0,.35),transparent 70%);}
.fb-tag{position:absolute;right:0;top:10px;background:linear-gradient(90deg,#ff3131,#ff8a00);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-top-left-radius:18px;border-bottom-left-radius:18px;letter-spacing:1px;z-index:2;}
.fb-title{font-size:16px;font-weight:800;line-height:1.3;margin-top:auto;position:relative;z-index:1;}
.fb-title .hl{color:#ffd54f;font-size:20px;}
.fb-sub{font-size:11px;color:rgba(255,255,255,.78);margin-top:3px;position:relative;z-index:1;}
.fb-img{position:absolute;right:8px;bottom:8px;width:88px;height:88px;object-fit:contain;background:#fff;border-radius:10px;padding:5px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:1;}
.fb-stats{display:flex;gap:8px;margin-top:4px;font-size:10px;color:rgba(255,255,255,.7);position:relative;z-index:1;}
.fb-stats span{display:flex;align-items:center;gap:4px;}
.flash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start;}
.deal-card{background:#fff;border-radius:var(--radius);overflow:hidden;cursor:pointer;border:1px solid #f0e6dc;transition:all .18s;position:relative;}
.deal-card:hover{border-color:#ff4400;transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,68,0,.14);}
.dc-img{position:relative;aspect-ratio:3/2;background:#fafafa;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.dc-img img{width:80%;height:80%;object-fit:contain;}
.dc-tag{position:absolute;left:0;top:0;background:linear-gradient(90deg,#ff3131,#ff6a2e);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-bottom-right-radius:8px;z-index:2;}
.dc-tag.cool{background:linear-gradient(90deg,#22a04c,#15803d);}
.dc-tag.hot{background:linear-gradient(90deg,#ff8a3d,#ff4400);}
.dc-body{padding:5px 8px 6px;}
.dc-name{font-size:12px;font-weight:600;line-height:1.3;height:18px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;color:#333;}
.dc-price{margin-top:3px;display:flex;align-items:baseline;gap:6px;}
.dc-price .now{color:var(--primary);font-size:15px;font-weight:800;}
.dc-price .now small{font-size:10px;font-weight:600;margin-right:1px;}
.dc-price .old{color:#999;font-size:10px;text-decoration:line-through;}
.dc-progress{margin-top:3px;}
.dp-line{height:5px;border-radius:2.5px;background:#ffe2d2;overflow:hidden;}
.dp-fill{height:100%;background:linear-gradient(90deg,#ff6a2e,#ff3131);border-radius:2.5px;transition:width .4s;}
.dc-progress small{display:flex;justify-content:space-between;font-size:10px;color:#999;margin-top:2px;}
.dc-progress small b{color:#ff3131;font-weight:700;}

/* ============ 优惠频道（淘宝频道卡风格） ============ */
.deal-cats{display:flex;flex-direction:column;gap:12px;margin-top:14px;background:transparent;box-shadow:none;border-radius:0;overflow:visible;border:none;}
.ch-row-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.ch{background:#fff;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;width:100%;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.ch:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.10);}
.ch-head{display:flex;align-items:center;padding:12px 14px 6px;gap:8px;}
.ch-logo{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;font-weight:800;flex-shrink:0;}
.ch-logo.l-red{background:linear-gradient(135deg,#ff5252,#ff3131);}
.ch-logo.l-orange{background:linear-gradient(135deg,#ffa726,#ff7043);}
.ch-logo.l-blue{background:linear-gradient(135deg,#42a5f5,#1e88e5);}
.ch-logo.l-green{background:linear-gradient(135deg,#66bb6a,#43a047);}
.ch-logo.l-purple{background:linear-gradient(135deg,#9575cd,#7e57c2);}
.ch-titles{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ch-titles b{font-size:17px;font-weight:800;color:#222;line-height:1.2;display:flex;align-items:center;gap:6px;}
.ch-titles b .ch-tag{display:inline-block;font-size:10px;color:#fff;background:linear-gradient(90deg,#ff3131,#ff6a2e);padding:2px 6px;border-radius:3px;font-weight:700;letter-spacing:.5px;}
.ch-titles small{font-size:12px;color:#999;line-height:1.2;}
.ch-more{margin-left:auto;font-size:12px;color:#999;display:flex;align-items:center;gap:2px;cursor:pointer;padding:4px 6px;border-radius:4px;transition:all .15s;}
.ch-more:hover{color:var(--primary);background:#fff7ef;}
.ch-body{display:grid;gap:6px;padding:6px 12px 12px;flex:1;}
.ch-item{position:relative;background:#fafafa;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .15s;}
.ch-item:hover{background:#fff7ef;}
.ch-item-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:8px;}
.ch-item-img img{width:100%;height:100%;object-fit:contain;}
.ch-item-price{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);background:linear-gradient(90deg,#ff6a2e,#ff3131);color:#fff;font-size:12px;font-weight:800;padding:2px 9px;border-radius:4px;white-space:nowrap;box-shadow:0 2px 6px rgba(255,60,0,.28);letter-spacing:.3px;}
.ch-item-price small{font-size:9px;font-weight:600;margin-right:1px;}

/* ============ 猜你喜欢（横排长图卡） ============ */
.like-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.lk-card{background:#fff;border-radius:var(--radius);overflow:hidden;cursor:pointer;border:1px solid #f0f0f0;transition:all .2s;}
.lk-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 8px 22px rgba(255,68,0,.12);}
.lk-card .lk-img{position:relative;aspect-ratio:16/12;background:#fafafa;display:flex;align-items:center;justify-content:center;}
.lk-card .lk-img img{width:85%;height:85%;object-fit:contain;}
.lk-card .lk-body{padding:10px 12px 12px;}
.lk-card .lk-tag{display:inline-block;font-size:10px;color:#fff;background:var(--primary);border-radius:3px;padding:1px 6px;margin-bottom:5px;font-weight:600;}
.lk-card .lk-tag.s{background:#22a04c;}
.lk-card .lk-tag.t{background:#b45309;}
.lk-card .lk-tag.f{background:#7c6fd0;}
.lk-card .lk-name{font-size:13px;font-weight:600;line-height:1.4;height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lk-card .lk-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.lk-card .lk-price{color:var(--primary);font-size:18px;font-weight:800;}
.lk-card .lk-price small{font-size:11px;font-weight:600;margin-right:1px;}
.lk-card .lk-buy{background:var(--primary);color:#fff;border-radius:14px;padding:4px 10px;font-size:11px;font-weight:600;}

/* 右侧栏 */
.ht-right{display:flex;flex-direction:column;gap:12px;min-width:0;}
.panel{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;}
.user-card{background:linear-gradient(135deg,#333,#1a1a1a);color:#fff;padding:10px 16px 8px;text-align:center;}
  .uc-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ff9a5a,#ff4400);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;margin:0 auto 6px;border:2px solid rgba(255,255,255,.5);}
.uc-name{font-size:14px;font-weight:700;}
.uc-sub{font-size:11px;color:rgba(255,255,255,.65);margin-top:2px;}
.uc-btn{display:inline-block;margin-top:8px;font-size:12px;color:#ff7a45;border:1px solid #ff7a45;border-radius:14px;padding:2px 14px;cursor:pointer;transition:all .15s;}
.uc-btn:hover{background:#ff4400;color:#fff;border-color:#ff4400;}
.uc-assets{display:grid;grid-template-columns:repeat(5,1fr);}
.uc-a{padding:6px 4px;text-align:center;cursor:pointer;transition:background .15s;}
.uc-a:hover{background:#fff5f0;}
.uc-a b{display:block;font-size:17px;font-weight:800;color:#333;}
.uc-a span{font-size:11px;color:#999;}
.sl-item{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:12px;color:#555;border-bottom:1px solid #f6f6f6;}
.sl-item:last-child{border-bottom:none;}
  .sl-dot{width:8px;height:8px;border-radius:3px;background:var(--primary);flex-shrink:0;}
  .sl-grid{display:grid;grid-template-columns:1fr 1fr;padding:4px 0;}
  .sl-grid .sl-item{border-bottom:none;border-right:1px solid #f6f6f6;padding:6px 10px;font-size:11px;}
  .sl-grid .sl-item:nth-child(2n){border-right:none;}
.nl-item{padding:4px 16px;font-size:12px;color:#666;display:flex;justify-content:space-between;gap:8px;cursor:pointer;border-bottom:1px solid #f6f6f6;}
.nl-item:last-child{border-bottom:none;}
.nl-item:hover{color:var(--primary);}
.nl-date{color:#bbb;flex-shrink:0;}

/* 快捷入口 */
.quick-nav{display:grid;grid-template-columns:repeat(8,1fr);background:#fff;border-radius:var(--radius-lg);margin:12px 0;box-shadow:var(--shadow-sm);padding:6px 0;}
.qn-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:8px;transition:background .15s;}
.qn-item:hover{background:#fff5f0;}
.qn-ic{width:42px;height:42px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.qn-t{font-size:12px;color:#555;}

/* 楼层 */
.floor{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-top:14px;overflow:hidden;}
.floor-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #f3f3f3;}
.fh-icon{width:26px;height:26px;background:var(--grad-main);color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.fh-title{font-size:18px;font-weight:700;color:#333;}
.fh-title small{font-weight:400;font-size:12px;color:var(--gray);margin-left:8px;}
.fh-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.cat-row{display:flex;gap:6px;}
.cat-chip{background:#f7f7f7;border:1px solid #f0f0f0;color:#555;padding:5px 14px;border-radius:5px;font-size:12px;cursor:pointer;transition:all .15s;}
.cat-chip:hover{border-color:var(--primary);color:var(--primary);}
.cat-chip.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.sort-select{border:1px solid var(--border);background:#fff;border-radius:5px;padding:6px 10px;font-size:12px;outline:none;cursor:pointer;color:#555;}
.floor-body{padding:14px;}

/* 商品网格(桌面 5 列) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;}
.card{background:#fff;border:1px solid #f0f0f0;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .18s;}
.card:hover{border-color:#ff4400;box-shadow:0 4px 14px rgba(255,68,0,.10);}
.card-img{position:relative;padding-top:68%;background:#fff;overflow:hidden;}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;transition:transform .35s;}
.card:hover .card-img img{transform:scale(1.04);}
.card-fav{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.10);transition:all .15s;}
.card-fav:hover{transform:scale(1.08);}
.card-fav svg{width:15px;height:15px;fill:#ccc;}
.card-fav.on svg{fill:var(--primary);}
.card-body{padding:10px 12px 12px;}
.card-tag{display:inline-block;font-size:10px;color:#ff4400;background:#fff2ec;border-radius:3px;padding:1px 6px;font-weight:600;margin-bottom:6px;}
.card-name{font-size:13px;font-weight:600;line-height:1.4;height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#333;}
.card-spec{font-size:12px;color:var(--gray);margin:5px 0 7px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.card-rate{display:flex;align-items:center;gap:5px;font-size:11px;color:#999;}
.star{color:#ffb800;font-size:12px;}
.star.off{color:#e3e6ee;}
.card-store{font-size:11px;color:#888;margin-top:5px;display:inline-flex;align-items:center;gap:4px;}
.card-store:hover{color:var(--primary);}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.card-foot .price{font-size:19px;font-weight:800;color:var(--primary);}
.card-foot .price small{font-size:11px;font-weight:600;margin-right:2px;}
.card-foot .price .up{font-size:11px;color:var(--gray);font-weight:400;}
.btn-cart{background:#fff;color:var(--primary);border:1px solid var(--primary);border-radius:5px;padding:5px 12px;font-size:12px;font-weight:600;transition:all .15s;}
.btn-cart:hover{background:var(--primary);color:#fff;}
.nego{font-size:18px;font-weight:800;color:#b45309;}
#storeSearch{margin-bottom:10px;}

/* 关于 */
.about-banner{background:linear-gradient(135deg,#262626,#111);border-radius:var(--radius-lg);color:#fff;padding:28px 34px;margin-top:14px;text-align:center;box-shadow:var(--shadow-sm);}
.ab-t{font-size:20px;font-weight:800;letter-spacing:1px;}
.ab-s{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;}
.about-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 20px;}
.about-chips span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:6px 16px;font-size:12px;font-weight:600;}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--grad-main);color:#fff;border-radius:6px;padding:9px 20px;font-size:13px;font-weight:600;transition:all .15s;}
.btn:hover{filter:brightness(1.05);}
.btn-lg{padding:12px 26px;font-size:14px;}
.btn-outline{background:#fff;color:#333;border:1px solid var(--border);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-gray{background:#f0f0f0;color:#666;}
.btn-sm{padding:6px 12px;font-size:12px;}

/* ============ 分类页 ============ */
.cat-layout{display:grid;grid-template-columns:220px 1fr;gap:14px;}
.cat-left{background:#fff;border-radius:var(--radius-lg);padding:8px;box-shadow:var(--shadow-sm);height:fit-content;position:sticky;top:190px;}
.cat-left .cl{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:8px;font-size:14px;color:#555;cursor:pointer;transition:all .15s;}
.cat-left .cl:hover{background:#f7f7f7;color:#333;}
.cat-left .cl.active{background:var(--grad-main);color:#fff;box-shadow:0 4px 12px rgba(255,68,0,.24);}
.cat-right h4{font-size:15px;font-weight:700;margin:2px 0 12px;}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px;}
.cr{background:#fff;border-radius:var(--radius);padding:14px 12px;display:flex;flex-direction:column;gap:5px;cursor:pointer;border:1px solid #f0f0f0;transition:all .15s;box-shadow:var(--shadow-sm);}
.cr:hover{border-color:var(--primary);transform:translateY(-2px);}
.cr-icon{width:34px;height:34px;border-radius:8px;background:#fff2ec;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin-bottom:3px;}
.cr b{font-size:13px;}
.row-ic{font-size:11px;color:var(--gray);}

/* ============ 店铺页 ============ */
.store-head{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#262626,#111);color:#fff;border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-sm);}
.store-head .sh-logo{width:60px;height:60px;border-radius:14px;background:rgba(255,255,255,.95);color:#262626;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:800;}
.sh-name{font-size:18px;font-weight:800;}
.sh-sub{font-size:12px;color:rgba(255,255,255,.7);margin-top:4px;}
.store-tag{display:inline-block;font-size:10px;background:var(--primary);border-radius:3px;padding:1px 6px;vertical-align:2px;font-weight:600;color:#fff;margin-left:6px;}
.store-tag.third{background:#fff;color:#ff4400;border:1px solid #ff4400;}
.st-follow{margin-left:auto;background:#fff;color:#333;border-radius:18px;padding:8px 18px;font-size:12px;font-weight:600;transition:all .15s;}
.st-follow.on{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);}
.store-meta{display:flex;background:#fff;border-radius:var(--radius-lg);margin-top:12px;box-shadow:var(--shadow-sm);overflow:hidden;}
.store-meta .sm{flex:1;text-align:center;padding:14px 8px;}
.store-meta .sm b{font-size:19px;font-weight:800;}
.store-meta .sm span{display:block;font-size:11px;color:var(--gray);margin-top:2px;}
.store-meta .sm + .sm{border-left:1px solid var(--border);}
.store-rate{display:flex;background:#fff;border-radius:var(--radius-lg);margin:12px 0 16px;box-shadow:var(--shadow-sm);overflow:hidden;}
.store-rate .rt{flex:1;text-align:center;padding:12px 8px;}
.store-rate .rt b{font-size:16px;font-weight:800;color:var(--primary);}
.store-rate .rt span{display:block;font-size:11px;color:var(--gray);margin-top:2px;}
.store-rate .rt + .rt{border-left:1px solid var(--border);}
.cs-btn{background:#fff;color:#333;border-radius:18px;padding:8px 18px;font-size:12px;font-weight:600;transition:all .15s;}
.cs-btn:hover{border:1px solid #ff4400;color:#ff4400;}

/* ============ 商品详情 ============ */
.detail-layout{display:grid;grid-template-columns:420px 1fr;gap:20px;align-items:start;}
.dp-left{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;position:sticky;top:190px;}
.dp-gallery{position:relative;}
.dp-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.dp-track::-webkit-scrollbar{display:none;}
.dp-slide{min-width:100%;scroll-snap-align:center;}
.dp-slide img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;}
.dp-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:2;}
.dp-dots i{width:8px;height:8px;border-radius:4px;background:rgba(0,0,0,.2);cursor:pointer;transition:all .2s;}
.dp-dots i.on{width:20px;background:#ff4400;}
.dp-fav{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.12);z-index:2;}
.dp-fav svg{width:18px;height:18px;fill:#ccc;}
.dp-fav.on svg{fill:var(--primary);}
/* 缩略图条 */
.dp-thumbs{display:flex;gap:8px;padding:12px 14px;background:#fff;border-top:1px solid #f4f5f7;}
.dp-thumbs img{width:60px;height:60px;border-radius:8px;object-fit:contain;border:2px solid #f0f0f0;cursor:pointer;transition:all .15s;background:#fff;}
.dp-thumbs img:hover{border-color:#ffb08f;}
.dp-thumbs img.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);}

.dp-right{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px 26px 26px;}
.dp-name{font-size:22px;font-weight:800;line-height:1.45;color:#1f2329;}
.dp-desc{font-size:13px;color:var(--gray-2);margin-top:8px;line-height:1.7;}
.dp-rating{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--gray-2);}
.dp-rate-line{display:flex;align-items:center;gap:6px;}
/* 促销价格条 */
.price-bar{margin-top:14px;border-radius:10px;background:linear-gradient(90deg,#ff3131,#ff7a1a);color:#fff;padding:13px 18px;position:relative;overflow:hidden;}
.price-bar::after{content:'';position:absolute;right:-34px;top:-46px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08);}
.pb-row1{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;position:relative;z-index:1;}
.pb-tag{font-size:12px;border:1px solid rgba(255,255,255,.85);border-radius:4px;padding:2px 8px;margin-bottom:7px;font-weight:600;white-space:nowrap;}
.pb-price{font-size:34px;font-weight:800;line-height:1;}
.pb-price small{font-size:18px;font-weight:700;}
.pb-unit{font-size:12px;opacity:.9;margin-bottom:7px;}
.pb-orig{font-size:13px;text-decoration:line-through;opacity:.75;margin-bottom:8px;}
.pb-row2{margin-top:9px;font-size:12px;opacity:.92;display:flex;gap:16px;position:relative;z-index:1;}
/* 领券区 */
.dp-coupons{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.cp-card{display:flex;align-items:center;gap:9px;border:1px dashed #ff9a6b;background:#fff7f0;border-radius:8px;padding:8px 12px;cursor:pointer;transition:all .15s;}
.cp-card:hover{border-color:var(--primary);box-shadow:0 2px 10px rgba(255,80,0,.12);}
.cp-val{font-size:22px;font-weight:800;color:var(--primary);line-height:1;}
.cp-val small{font-size:11px;font-weight:700;}
.cp-meta{font-size:11px;color:#8a5a3a;line-height:1.45;}
.cp-meta b{color:#333;font-size:12px;}
.cp-get{font-size:11px;color:var(--primary);border:1px solid var(--primary);border-radius:11px;padding:3px 10px;font-weight:600;flex-shrink:0;background:#fff;}
.cp-card.got .cp-get{color:#999;border-color:#ddd;background:#f5f5f5;}
/* 服务与配送 */
.service-bar{display:flex;gap:14px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);flex-wrap:wrap;}
.service-bar span{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gray-2);}
.sb-ic{color:#16a34a;font-weight:800;}
.dp-eta{margin-top:12px;padding:10px 14px;background:#fff7ef;border-radius:8px;font-size:12px;color:#b45309;display:flex;align-items:center;gap:8px;}
/* 选型配置 */
.cfg-summary{background:#fff7ef;border:1px solid #ffd9b8;border-radius:9px;padding:14px 16px;margin-top:14px;font-size:13px;color:#b45309;cursor:pointer;transition:all .15s;}
.cfg-summary:hover{border-color:var(--primary);}
.cfg-summary .cs-top{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:#333;margin-bottom:6px;}
.cfg-summary .cs-top .go{color:var(--primary);font-size:12px;}
.cfg-summary .cs-total{margin-top:8px;font-weight:700;color:#333;}
/* 数量选择 */
.dp-qty-row{display:flex;align-items:center;gap:12px;margin-top:16px;}
.dq-label{font-size:13px;color:var(--gray-2);}
.qty-stepper{display:flex;align-items:center;border:1px solid #dcdde0;border-radius:6px;overflow:hidden;}
.qty-stepper button{width:34px;height:32px;background:#f7f8fa;border:none;font-size:16px;color:#4b5563;cursor:pointer;transition:all .15s;}
.qty-stepper button:hover{background:#ffe9de;color:var(--primary);}
.qty-stepper input{width:52px;height:32px;border:none;border-left:1px solid #eee;border-right:1px solid #eee;text-align:center;font-size:14px;font-weight:600;outline:none;}
.dq-total{font-size:13px;color:var(--gray-2);margin-left:auto;}
.dq-total b{font-size:20px;color:var(--primary);font-weight:800;margin-left:4px;}
/* 大按钮 */
.detail-actions{display:flex;gap:12px;margin-top:18px;}
.btn-buy,.btn-cart{flex:1;padding:14px 0;font-size:17px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .15s;}
.btn-buy{background:linear-gradient(135deg,#ff5a2e,#ff3131);color:#fff;box-shadow:0 6px 16px rgba(255,60,0,.25);}
.btn-buy:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,60,0,.32);}
.btn-cart{background:linear-gradient(135deg,#ffb400,#ff9500);color:#fff;box-shadow:0 6px 16px rgba(255,150,0,.22);}
.btn-cart:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,150,0,.3);}
.dp-notice{margin-top:14px;background:#f6f7fb;color:#33437f;border-radius:8px;padding:11px 14px;font-size:12px;}
.dp-detail-desc{background:#fff;border-radius:var(--radius-lg);padding:24px 26px;margin:18px 0 0;box-shadow:var(--shadow-sm);}
.dd-title{font-size:16px;font-weight:700;margin-bottom:12px;}
.dd-feats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.dd-feat{background:#f7f7f7;border:1px solid var(--border);color:#33437f;border-radius:6px;padding:5px 11px;font-size:12px;}
.dd-text{font-size:13px;color:var(--gray-2);line-height:1.9;margin-bottom:10px;}
.dd-tip{font-size:12px;color:#b45309;background:#fff7ef;border-radius:8px;padding:9px 12px;}
.dd-imgs img{width:100%;border-radius:8px;margin:8px 0;}
.dd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
.df-img{border-radius:9px;padding:16px;color:#fff;min-height:92px;display:flex;flex-direction:column;justify-content:flex-end;}
.df-ic{font-size:20px;font-weight:800;}
.df-txt{font-size:13px;font-weight:700;margin-top:5px;}
.df-sub{font-size:11px;opacity:.85;margin-top:2px;}

/* ============ 评价 ============ */
.reviews-block{background:#fff;border-radius:var(--radius-lg);padding:22px 24px;margin-top:14px;box-shadow:var(--shadow-sm);}
.rate-sum{display:flex;align-items:center;gap:18px;margin-bottom:14px;}
.rs-num b{font-size:38px;font-weight:800;color:var(--primary);}
.rs-num span{display:block;font-size:12px;color:var(--gray);margin-top:2px;}
.rs-tag span{display:inline-block;background:#f7f7f7;border-radius:6px;padding:6px 14px;font-size:12px;color:var(--gray-2);margin-right:8px;}
.rv-tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.rv-tab{padding:9px 16px;font-size:13px;color:var(--gray-2);border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;}
.rv-tab.on{color:var(--primary);border-color:var(--primary);font-weight:600;}
.rv-tab i{font-style:normal;font-size:11px;color:var(--gray);margin-left:3px;}
.rate-item{padding:15px 0;border-bottom:1px solid #f2f3f7;}
.rate-item:last-child{border-bottom:none;}
.ri-u{font-size:13px;font-weight:700;}
.ri-u small{color:#a2a9b8;font-weight:400;font-size:12px;}
.ri-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray);margin:5px 0;}
.ri-txt{font-size:13px;color:#3a4351;line-height:1.7;}
.ri-imgs img{width:88px;height:88px;object-fit:cover;border-radius:8px;margin-top:8px;cursor:zoom-in;border:1px solid var(--border);}
.empty-tip{text-align:center;color:var(--gray);font-size:13px;padding:30px 20px;}
.ft-clear{margin-left:auto;padding:6px 16px;border-radius:16px;font-size:12px;color:var(--primary);border:1px solid var(--primary);background:#fff;cursor:pointer;transition:all .15s;font-weight:600;}
.ft-clear:hover{background:var(--primary);color:#fff;}

/* ============ 选型配置页 ============ */
.config-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;}
.config-main{display:flex;flex-direction:column;gap:12px;}
.config-sec{background:#fff;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);border:1px solid #f0f0f0;}
.config-sec h4{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.config-sec h4 .mix-tip{font-size:11px;color:var(--gray);font-weight:400;}
.config-options{display:flex;flex-wrap:wrap;gap:9px;}
.opt{position:relative;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--gray-2);cursor:pointer;transition:all .15s;background:#fff;}
.opt:hover{border-color:var(--primary);color:var(--primary);}
.opt.selected{border-color:var(--primary);color:var(--primary);background:#fff5f0;font-weight:600;box-shadow:0 0 0 1px var(--primary);}
.opt small{display:block;font-size:11px;color:#b45309;margin-top:2px;}
.opt.selected small{color:var(--primary);}
.mix-modes{display:flex;gap:8px;margin-bottom:12px;}
.mix-mode{border:1px solid var(--border);border-radius:6px;padding:6px 14px;font-size:12px;color:var(--gray-2);cursor:pointer;transition:all .15s;}
.mix-mode.on{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600;}
.mix-item .mi-brand{display:inline-block;background:#eef1f8;border-radius:4px;padding:1px 7px;font-size:11px;color:#33437f;font-weight:700;margin-right:5px;}
.mix-compat{background:#e9f6ef;color:#1e5f3a;border-radius:8px;padding:12px 15px;font-size:12px;border:1px solid #c8e8d4;display:flex;gap:8px;align-items:flex-start;}
.mix-compat .mc-ic{font-weight:800;color:#16a34a;flex-shrink:0;}
.custom-opt{background:#fff7ef;border-style:dashed;}
.custom-opt small{color:var(--gray);font-weight:400;}
.config-side{position:sticky;top:190px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:18px;border:1px solid #f0f0f0;}
.config-side .cs-name{font-size:14px;font-weight:700;line-height:1.5;margin-bottom:14px;}
.config-side .cs-linear{display:flex;justify-content:space-between;padding:7px 0;font-size:12px;color:var(--gray-2);border-bottom:1px dashed #eef0f4;}
.config-side .cs-linear b{color:var(--dark);}
.config-side .cs-total{margin-top:14px;font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--border);}
.config-side .cs-total .num{color:var(--primary);font-size:22px;}
.qty-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.qty-row label{font-size:13px;color:var(--gray-2);font-weight:600;width:44px;}
.qty-box{display:flex;align-items:center;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff;}
.qty-box button{width:30px;height:32px;font-size:15px;color:var(--gray-2);background:#f7f7f7;transition:all .15s;}
.qty-box button:hover{background:#e8e8e8;color:#333;}
.qty-box input{width:50px;height:32px;text-align:center;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);outline:none;font-size:14px;}

/* ============ 购物车(桌面表格) ============ */
.cart-panel{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.cart-group+.cart-group{margin-top:12px;}
.cg-head{display:flex;align-items:center;gap:12px;padding:14px 22px 6px;border-top:1px solid var(--border);}
.cart-group:first-of-type .cg-head{border-top:none;}
.cg-logo{width:32px;height:32px;border-radius:8px;background:#fff2ec;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.cg-store{font-size:14px;font-weight:700;}
.cg-sub{font-size:12px;color:var(--gray);margin-left:6px;}
.cart-tbl-head{display:grid;grid-template-columns:minmax(0,2fr) 130px 150px 130px 80px;gap:10px;padding:12px 22px;background:#f7f7f7;border-bottom:1px solid var(--border);font-size:12px;color:var(--gray-2);text-align:center;}
.cart-tbl-head span:nth-child(1){text-align:left;}
.cart-item{display:grid;grid-template-columns:minmax(0,2fr) 130px 150px 130px 80px;gap:10px;align-items:center;padding:16px 22px;}
.cart-item + .cart-item{border-top:1px dashed #eef0f4;}
.ci-goods{display:flex;align-items:center;gap:14px;min-width:0;}
.ci-img{width:74px;height:74px;border-radius:8px;background:#fff;overflow:hidden;flex-shrink:0;border:1px solid var(--border);}
.ci-img img{width:100%;height:100%;object-fit:contain;}
.ci-main{min-width:0;}
.ci-name{font-size:14px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ci-spec{font-size:12px;color:var(--gray);margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.ci-price{font-size:13px;color:var(--gray-2);text-align:center;}
.ci-price small{font-size:11px;color:var(--gray);margin-right:3px;}
.ci-subtotal{text-align:center;}
.ci-subtotal b{color:var(--primary);font-size:15px;}
.ci-del{font-size:12px;color:#e53e3e;text-align:center;border:1px solid #f3c7c7;border-radius:5px;padding:5px 0;width:56px;margin:0 auto;background:#fff;cursor:pointer;transition:all .15s;}
.ci-del:hover{background:#e53e3e;color:#fff;}
.cart-head{padding:14px 22px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px;}
.cart-foot-panel{display:flex;align-items:center;justify-content:flex-end;gap:22px;padding:16px 22px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-top:12px;}
.cf-left .lbl{font-size:13px;color:var(--gray-2);}
.cf-left .num{font-size:26px;font-weight:800;color:var(--primary);}
.cf-left .cnt{font-size:12px;color:var(--gray);margin-left:8px;}
.cart-empty{text-align:center;padding:70px 20px;color:var(--gray);}
.cart-empty .big{font-size:44px;margin-bottom:10px;}
.cart-empty .t{font-size:16px;font-weight:700;color:#4a5268;}
.cart-empty .s{font-size:12px;color:#a0a7b6;margin:6px 0 16px;}

/* ============ 列表卡(订单/合同/收藏) ============ */
.list-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.list-card + .list-card{margin-top:10px;}
.order-group{margin-bottom:18px;}
.og-head{font-size:12px;font-weight:700;color:var(--gray-2);margin-bottom:8px;padding-left:4px;}
.list-item{display:flex;align-items:center;gap:14px;padding:16px 22px;cursor:pointer;transition:background .15s;border-bottom:1px solid #f5f5f5;}
.list-item:last-child{border-bottom:none;}
.list-item:hover{background:#fafafa;}
.li-main{font-size:15px;font-weight:700;}
.li-sub{font-size:12px;color:var(--gray);margin-top:3px;}
.li-right{margin-left:auto;text-align:right;flex-shrink:0;}
.li-right .ml-status{font-size:12px;font-weight:600;}
.ml-status{} 
.ml-status.ship{color:#b45309;}
.ml-status.sent{color:#33437f;}
.ml-status.paid{color:#16a34a;}
.ml-amt{font-size:17px;font-weight:800;color:#333;margin-left:12px;}
.ml-btn{border:1px solid var(--border);background:#fff;border-radius:5px;padding:6px 14px;font-size:12px;color:var(--gray-2);cursor:pointer;transition:all .15s;}
.ml-btn:hover{border-color:var(--primary);color:var(--primary);}
.order-tabs{display:flex;gap:8px;margin-bottom:16px;}
.order-tabs .ot{padding:6px 18px;border-radius:5px;font-size:13px;color:var(--gray-2);cursor:pointer;transition:all .15s;background:#fff;box-shadow:var(--shadow-sm);border:1px solid #f0f0f0;}
.order-tabs .ot.active{background:var(--grad-main);color:#fff;border-color:transparent;}
.order-tabs .ot:hover:not(.active){border-color:var(--primary);color:var(--primary);}

/* ============ 详情视图 ============ */
.detail-card{background:#fff;border-radius:var(--radius);padding:18px 22px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.detail-card h3{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.detail-card h3 svg{width:16px;height:16px;fill:#666;}
.kv-row{display:flex;gap:16px;padding:7px 0;font-size:13px;}
.kv-row .k{width:110px;color:var(--gray);flex-shrink:0;}
.kv-row .v{flex:1;color:var(--dark);word-break:break-all;}
.items-table{width:100%;border-collapse:collapse;font-size:13px;}
.items-table th{background:#f7f7f7;text-align:left;padding:9px 12px;font-weight:600;color:var(--gray-2);}
.items-table td{padding:9px 12px;border-top:1px solid #f2f3f7;}
.status-big{font-size:20px;font-weight:800;color:var(--primary);}
.status-big.ship{color:#b45309;}
.status-big.sent{color:#33437f;}
.status-big.paid{color:#16a34a;}
.timeline{display:flex;background:#fff;border-radius:var(--radius);padding:18px 22px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.tl-step{flex:1;text-align:center;position:relative;font-size:12px;color:var(--gray);}
.tl-step::before{content:'';position:absolute;top:15px;left:0;right:0;height:2px;background:#e8eaef;}
.tl-step:first-child::before{left:50%;}
.tl-step:last-child::before{right:50%;}
.tl-dot{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #d8dce4;color:var(--gray);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin:0 auto 6px;position:relative;z-index:1;}
.tl-step.done .tl-dot{background:#ff4400;border-color:#ff4400;color:#fff;}
.tl-step.active .tl-dot{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 4px rgba(255,68,0,.12);}
.tl-step.done .tl-name{color:var(--dark);font-weight:700;}
.tl-step.active .tl-name{color:var(--primary);font-weight:700;}
.track-box{background:#f0f7ff;border:1px solid #d6e7fb;border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;font-size:13px;}
.tk-title{font-weight:700;margin-bottom:8px;}
.tk-row{font-size:12px;color:var(--gray-2);}
.logi-timeline{margin-top:12px;}
.lt{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--gray-2);position:relative;padding-left:4px;padding-bottom:12px;}
.lt:last-child{padding-bottom:0;}
.lt .lt-dot{width:16px;height:16px;border-radius:50%;border:2px solid #c9d6e8;flex-shrink:0;margin-top:1px;}
.lt.done .lt-dot{background:#16a34a;border-color:#16a34a;color:#fff;}
.lt .lt-t{font-weight:600;color:var(--dark);}
.contract-full{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:30px 36px;font-size:13px;line-height:1.9;color:#222;margin-bottom:14px;}
.contract-full table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px;}
.contract-full table th,.contract-full table td{border:1px solid #ccc;padding:7px 10px;}
.contract-full table th{background:#f5f5f5;}
.contract-full h2{text-align:center;font-size:20px;margin-bottom:2px;}
.contract-full h3{text-align:center;font-weight:400;font-size:13px;color:#555;margin-bottom:16px;}

/* ============ 消息 ============ */
.msg-layout{display:grid;grid-template-columns:320px 1fr;gap:16px;height:calc(100vh - 200px);}
.msg-list-panel{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;}
.msg-list-head{padding:14px 18px;font-weight:700;font-size:15px;border-bottom:1px solid var(--border);}
.msg-list-body{flex:1;overflow-y:auto;padding:10px;}
.msg-item{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:8px;cursor:pointer;transition:all .15s;position:relative;}
.msg-item:hover{background:#f7f7f7;}
.msg-item.sel{background:#fff1ea;}
.mi-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:800;font-size:16px;flex-shrink:0;}
.mi-avatar img{width:100%;height:100%;object-fit:cover;}
.mi-main{flex:1;min-width:0;}
.mi-top{display:flex;align-items:center;gap:7px;}
.mi-name{font-size:14px;font-weight:700;}
.mi-tag{font-size:10px;background:#fff1ea;color:var(--primary);border-radius:4px;padding:1px 6px;font-weight:600;}
.mi-time{font-size:11px;color:var(--gray);margin-left:auto;}
.mi-last{font-size:12px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px;}
.mi-badge{position:absolute;top:10px;right:12px;min-width:16px;height:16px;border-radius:8px;background:var(--primary);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.chat-panel{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;}
.chat-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
.chat-head .ch-name{font-size:15px;font-weight:700;}
.chat-head .ch-state{font-size:12px;color:#16a34a;display:flex;align-items:center;gap:6px;}
.ch-state-dot{width:7px;height:7px;border-radius:50%;background:#16a34a;}
.chat-body{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.kf-msgs{flex:1;overflow-y:auto;padding:18px;background:#f7f7f7;display:flex;flex-direction:column;gap:10px;}
.kf-msg{max-width:62%;padding:10px 14px;border-radius:13px;font-size:13px;line-height:1.6;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.kf-msg:not(.kf-mine){background:#fff;border-bottom-left-radius:4px;align-self:flex-start;}
.kf-msg.kf-mine{background:var(--grad-main);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;box-shadow:0 3px 10px rgba(255,68,0,.18);}
.kf-msg .kf-t{font-size:10px;color:var(--gray);margin-top:5px;}
.kf-msg.kf-mine .kf-t{color:rgba(255,255,255,.7);}
.kf-quick{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px;background:#fff;border-top:1px solid #eef0f4;flex-shrink:0;}
.kf-quick span{background:#f1f3f9;border:1px solid #e2e6f1;color:var(--primary);border-radius:18px;padding:7px 14px;font-size:12px;cursor:pointer;transition:all .15s;font-weight:600;}
.kf-quick span:hover{background:#fff;}
.kf-input{display:flex;gap:10px;padding:12px 16px;background:#fff;border-top:1px solid #eef0f4;flex-shrink:0;}
.kf-input input{flex:1;border:1px solid var(--border);border-radius:18px;padding:10px 16px;font-size:13px;outline:none;}
.kf-input input:focus{border-color:rgba(255,68,0,.5);}
.kf-input button{background:var(--grad-main);color:#fff;border-radius:18px;padding:10px 22px;font-size:13px;font-weight:600;}
.chat-empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--gray);font-size:14px;flex-direction:column;gap:10px;}
.chat-empty .ic{font-size:44px;}

/* ============ 我的 ============ */
.mine-layout{display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:start;}
.mine-left{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;position:sticky;top:190px;}
.profile-card{padding:22px;background:linear-gradient(135deg,#262626,#111);color:#fff;display:flex;flex-direction:column;gap:8px;}
.profile-card .pc-top{display:flex;align-items:center;gap:14px;}
.pc-av{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;}
.pc-name{font-size:16px;font-weight:800;}
.pc-phone{font-size:12px;color:rgba(255,255,255,.7);}
.profile-card .pc-edit{background:rgba(255,255,255,.14);border-radius:14px;padding:6px 14px;font-size:12px;color:#fff;align-self:flex-start;margin-top:4px;transition:all .15s;}
.profile-card .pc-edit:hover{background:rgba(255,255,255,.26);}
.mine-left .m-cell{display:flex;align-items:center;gap:12px;padding:14px 20px;cursor:pointer;border-top:1px solid #f4f5f9;transition:background .15s;}
.mine-left .m-cell:hover{background:#fafafa;}
.mine-left .m-cell .m-ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.mine-left .m-cell .m-l{font-size:14px;font-weight:600;flex:1;}
.mine-left .m-cell .m-r{color:var(--gray);font-size:12px;}
.mine-left .m-cell .m-r .cnt{color:var(--primary);font-weight:700;margin-right:6px;}
.mine-right{display:flex;flex-direction:column;gap:14px;}
.grid-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
.mine-shortcut{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.mso{background:#fff;border-radius:var(--radius);padding:16px 8px;text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .15s;border:1px solid #f0f0f0;}
.mso:hover{border-color:var(--primary);}
.mso .num{font-size:24px;font-weight:800;color:#333;}
.mso .txt{font-size:12px;color:var(--gray-2);margin-top:2px;}

/* ============ 通用弹窗 ============ */
.overlay{position:fixed;inset:0;background:rgba(15,18,25,.5);backdrop-filter:blur(3px);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:60px 20px 40px;overflow-y:auto;}
.overlay.show{display:flex;}
.modal{background:#fff;border-radius:12px;width:640px;max-width:100%;padding:26px 28px;box-shadow:var(--shadow-lg);animation:popIn .22s ease;}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(8px);}to{opacity:1;transform:none;}}
.modal-lg{width:900px;}
.modal-close{position:absolute;right:16px;top:14px;width:30px;height:30px;border-radius:50%;background:#f4f5f9;color:var(--gray-2);font-size:15px;display:flex;align-items:center;justify-content:center;}
.modal-title{font-size:19px;font-weight:700;margin-bottom:6px;}
.modal{position:relative;}
.form-row{margin-bottom:12px;}
.form-row label{display:block;font-size:12px;color:var(--gray-2);font-weight:600;margin-bottom:5px;}
.form-row input,.form-row select,.form-row textarea,.addr-inp{width:100%;border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-size:13px;outline:none;transition:all .15s;background:#fff;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus,.addr-inp:focus{border-color:rgba(255,68,0,.45);box-shadow:var(--ring);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-block{background:#f7f7f7;border-radius:8px;padding:16px 18px;margin-bottom:14px;}
.fb-title{font-size:13px;font-weight:700;margin-bottom:12px;}
.fb-tip{font-size:11px;color:var(--gray);font-weight:400;margin-left:6px;}
.notice{background:#fff7ef;color:#b45309;border:1px solid #ffdfc4;border-radius:8px;padding:10px 14px;font-size:12px;margin:12px 0;line-height:1.7;}
.notice b{font-weight:700;}

/* 支付 */
.pay-code{text-align:center;font-size:12px;color:var(--gray);margin:14px 0 4px;}
.pay-amt{text-align:center;margin:6px 0 18px;}
.pay-amt .lbl{font-size:12px;color:var(--gray);}
.pay-amt .num{font-size:34px;font-weight:800;color:var(--primary);margin-top:4px;}
.pay-methods{display:flex;flex-direction:column;gap:10px;}
.pay-method{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:9px;padding:14px 16px;cursor:pointer;transition:all .15s;}
.pay-method.sel{border-color:var(--primary);background:#fff7f2;box-shadow:0 0 0 1px var(--primary);}
.pay-method .pm-ico{width:38px;height:38px;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;}
.pay-method b{font-size:14px;display:block;}
.pay-method span{font-size:11px;color:var(--gray);}
.pm-radio{margin-left:auto;width:18px;height:18px;border-radius:50%;border:2px solid #d8dce4;position:relative;flex-shrink:0;}
.pay-method.sel .pm-radio{border-color:var(--primary);}
.pay-method.sel .pm-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--primary);}
.pay-success{text-align:center;padding:18px 0 6px;}
.pay-success .ok{width:64px;height:64px;border-radius:50%;background:#e9f6ef;color:#16a34a;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.pay-success .t{font-size:19px;font-weight:800;}
.pay-success .amt{font-size:22px;font-weight:800;color:var(--primary);margin-top:4px;}
.pay-success .s{font-size:12px;color:var(--gray);margin-top:6px;}

/* Toast */
.toast{position:fixed;top:76px;left:50%;transform:translateX(-50%) translateY(-12px);background:rgba(23,28,42,.92);color:#fff;border-radius:10px;padding:11px 22px;font-size:13px;z-index:900;opacity:0;pointer-events:none;transition:all .25s;box-shadow:0 8px 26px rgba(0,0,0,.2);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* 页脚 */
.site-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);text-align:center;color:var(--gray);font-size:12px;line-height:2;}

/* 滚动条 */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#d5d9e2;border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:#b9bfcc;}
::-webkit-scrollbar-track{background:transparent;}
</style>
</head>
<body>
<div class="site-head">
  <!-- 顶栏 -->
  <div class="site-topbar">
    <div class="stb-wrap">
      <div class="stb-left">
        <span>广联网络设备商城 · <b>企业采购就上广联</b></span>
        <span class="stb-link" onclick="navView('viewMine', document.querySelector('.nav-item[data-page=mine]'))">请登录</span>
        <span class="stb-link on" onclick="navView('viewMine', document.querySelector('.nav-item[data-page=mine]'))">免费注册</span>
      </div>
      <div class="stb-left">
        <span class="stb-link" onclick="navView('viewOrderList', document.querySelector('.nav-item[data-page=order]'))">我的订单</span>
        <span class="stb-link" onclick="navView('viewCart', document.querySelector('.nav-item[data-page=cart]'))">购物车</span>
        <span class="stb-link" onclick="navView('viewMsgList', document.querySelector('.nav-item[data-page=msg]'))">消息中心</span>
        <span class="stb-link" onclick="openKfOfficial()">联系客服</span>
        <span class="stb-link" onclick="showView('viewContractList')">商家保障</span>
        <span class="stb-link" href="tel:051266888899">客服热线 0512-6688-8899</span>
      </div>
    </div>
  </div>

  <!-- 主头部 -->
  <div class="main-header">
    <div class="mh-wrap">
      <div class="mh-logo" onclick="showView('viewHome')">
        <div class="nb">GL</div>
        <div class="nt">广联网络商城<small>NETWORK DEVICE MALL</small></div>
      </div>
      <div class="mh-search">
        <div class="ms-box">
          <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/></svg>
          <input id="searchBox" placeholder="搜索型号 / 品牌 / 参数" oninput="renderCards()" onkeydown="if(event.key==='Enter'){showView('viewHome');renderCards()}">
          <button onclick="showView('viewHome');renderCards()">搜 索</button>
        </div>
        <div class="ms-hot">
          <span>交换机</span><span>R740 服务器</span><span>万兆核心</span><span>出口路由器</span><span>安全网关</span>
        </div>
      </div>
      <div class="mh-actions">
        <span class="ma"><svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>担保交易</span>
        <span class="ma"><svg viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM5 19h14v-2H5v2zm0-4h14v-1H5v1zm0-3h14v-2H5v2zm0-4h14V7H5v1z"/></svg>在线选型</span>
      </div>
    </div>
  </div>

  <!-- 分类导航条 -->
  <div class="cat-navbar">
    <div class="cn-wrap">
      <div class="cn-cats" onclick="navView('viewCategory', document.querySelector('.nav-item[data-page=category]'))">☰ 全部商品分类</div>
      <div class="cn-menu">
        <a class="nav-item cn-item on" data-page="home" onclick="navView('viewHome',this)">首页</a>
        <a class="nav-item cn-item" data-page="category" onclick="navView('viewCategory',this)">分类</a>
        <a class="nav-item cn-item" data-page="order" onclick="navView('viewOrderList',this)">订单<span class="nav-badge" id="navOrderBadge" style="display:none">0</span></a>
        <a class="nav-item cn-item" data-page="contract" onclick="navView('viewContractList',this)">合同</a>
        <a class="nav-item cn-item" data-page="msg" onclick="navView('viewMsgList',this)">消息<span class="nav-badge" id="navMsgBadge" style="display:none">0</span></a>
        <a class="nav-item cn-item" data-page="cart" onclick="navView('viewCart',this)">购物车<span class="nav-badge" id="navCartBadge" style="display:none">0</span></a>
        <a class="nav-item cn-item" data-page="mine" onclick="navView('viewMine',this)">我的</a>
      </div>
      <div class="cn-user" onclick="navView('viewMine', document.querySelector('.nav-item[data-page=mine]'))">
        <div class="u-av" id="navAvatar">客</div>
        <div class="u-t" id="navUserName">我的账户</div>
      </div>
    </div>
  </div>
</div>

<div id="app">

  <!-- ============ 首页 ============ -->
  <div class="view on" id="viewHome">
    <div class="home-top">
      <!-- 左侧类目 -->
      <div class="side-nav">
        <div class="sn-title">商品分类</div>
        <div id="sideCats"></div>
        <div class="sn-item sn-all" onclick="showView('viewCategory')">全部宝贝<span class="sn-arrow">»</span></div>
      </div>

      <!-- 中部 Banner + 运营 -->
      <div class="ht-center">
        <div class="home-banner" id="homeBanner">
          <div class="hb-track" id="hbTrack">
            <div class="hb-slide"><img id="hbImg0" alt="banner"><div class="hb-mask"><b>企业采购季 · 满 10 台阶梯价</b><span>交换机 / 服务器批量采购享阶梯报价，详询专属客服</span></div></div>
            <div class="hb-slide"><img id="hbImg1" alt="banner"><div class="hb-mask"><b>组件级选配 · 即查即报</b><span>CPU / 内存 / 硬盘跨品牌混配，实时联动计价</span></div></div>
            <div class="hb-slide"><img id="hbImg2" alt="banner"><div class="hb-mask"><b>一单一合同 · 担保交易</b><span>下单自动生成购销合同，确认收货再向商家放款</span></div></div>
          </div>
          <div class="hb-dots" id="hbDots"><i class="on"></i><i></i><i></i></div>
        </div>
        <!-- 限时秒杀专区 -->
        <div class="flash-zone">
          <div class="flash-head">
            <div class="fh-left">
              <span class="fh-icon-flash">⚡</span>
              <div class="fh-title-flash">
                <b>限时秒杀</b>
                <small>大牌网络设备 · 限时直降 · 抢完即止</small>
              </div>
            </div>
            <div class="fh-timer">
              <span class="timer-tip">距本场结束</span>
              <div class="t-box"><i id="fskH">00</i><i class="t-sep">:</i><i id="fskM">00</i><i class="t-sep">:</i><i id="fskS">00</i></div>
            </div>
            <span class="fh-more" onclick="toast('查看更多秒杀商品')">更多秒杀 ›</span>
          </div>
          <div class="flash-body">
            <div class="flash-banner" onclick="toast('凌晨场 · 限时秒杀进行中')">
              <div class="fb-tag">正在秒杀</div>
              <div class="fb-title">企业采购狂欢节<br><small style="font-size:13px;font-weight:500;color:rgba(255,255,255,.85);">直降立减</small> <span class="hl">40%</span></div>
              <div class="fb-sub">凌晨限时专场 · 库存紧张</div>
              <div class="fb-stats">
                <span>● 已抢 1.2万+</span>
                <span>● 仅剩 86 件</span>
              </div>
              <img class="fb-img" data-img-key="server-dell" alt="秒杀主图">
            </div>
            <div class="flash-grid" id="flashGrid"></div>
          </div>
        </div>
      </div>

      <!-- 右侧栏 -->
      <div class="ht-right">
        <div class="panel user-card">
          <div class="uc-av" id="ucAvatar">客</div>
          <div class="uc-name" id="ucName">我的账户</div>
          <div class="uc-sub">登录后享专属采购价与合同服务</div>
          <span class="uc-btn" onclick="navView('viewMine', document.querySelector('.nav-item[data-page=mine]'))">登录 / 注册</span>
        </div>
        <div class="panel"><div class="uc-assets">
          <div class="uc-a" onclick="navView('viewOrderList', document.querySelector('.nav-item[data-page=order]'))"><b>0</b><span>订单</span></div>
          <div class="uc-a" onclick="openCouponList()"><b id="couponCount">2</b><span>优惠券</span></div>
          <div class="uc-a" onclick="navView('viewCart', document.querySelector('.nav-item[data-page=cart]'))"><b>0</b><span>购物车</span></div>
          <div class="uc-a" onclick="openFavList()"><b>0</b><span>收藏</span></div>
          <div class="uc-a" onclick="showView('viewContractList')"><b>0</b><span>合同</span></div>
        </div></div>
        <div class="panel sl-grid">
          <div class="sl-item"><span class="sl-dot"></span>平台担保交易 · 确认收货再打款</div>
          <div class="sl-item"><span class="sl-dot" style="background:#3b7cff"></span>在线选型 · 实时联动报价</div>
          <div class="sl-item"><span class="sl-dot" style="background:#22a04c"></span>一单一合同 · 原厂正品直供</div>
          <div class="sl-item"><span class="sl-dot" style="background:#b45309"></span>全国联保 · 7×24 售后</div>
        </div>
        <div class="panel">
          <div style="padding:8px 16px;font-weight:700;font-size:13px;border-bottom:1px solid #f3f3f3;">平台公告</div>
          <div class="nl-item"><span>企业采购季满减活动进行中</span><span class="nl-date">今天</span></div>
          <div class="nl-item"><span>自营现货专区次日达</span><span class="nl-date">昨天</span></div>
          <div class="nl-item"><span>组件级跨品牌混配已上线</span><span class="nl-date">08-10</span></div>
        </div>
      </div>
    </div>

    <!-- 优惠频道 · 淘宝频道卡风格 -->
    <div class="deal-cats" id="dealCats">
      <!-- 由 renderChannels() 动态渲染 -->
    </div>

    <div class="quick-nav">
      <button class="qn-item" onclick="navView('viewCategory',document.querySelector('.nav-item[data-page=category]'))"><span class="qn-ic" style="background:linear-gradient(135deg,#ff6b1a,#ff4400);">分</span><span class="qn-t">分类选型</span></button>
      <button class="qn-item" onclick="showStoreList()"><span class="qn-ic" style="background:linear-gradient(135deg,#ff9800,#ff7a2e);">店</span><span class="qn-t">品牌店铺</span></button>
      <button class="qn-item" onclick="openFavList()"><span class="qn-ic" style="background:linear-gradient(135deg,#ff4d4f,#e53a3e);">藏</span><span class="qn-t">我的收藏</span></button>
      <button class="qn-item" onclick="navView('viewOrderList',document.querySelector('.nav-item[data-page=order]'))"><span class="qn-ic" style="background:linear-gradient(135deg,#22a04c,#15803d);">单</span><span class="qn-t">我的订单</span></button>
      <button class="qn-item" onclick="openKf('s1')"><span class="qn-ic" style="background:linear-gradient(135deg,#7c6fd0,#5b4bc4);">客</span><span class="qn-t">专属客服</span></button>
      <button class="qn-item" onclick="showView('viewContractList')"><span class="qn-ic" style="background:linear-gradient(135deg,#26a69a,#00897b);">同</span><span class="qn-t">我的合同</span></button>
      <button class="qn-item" onclick="openAddr()"><span class="qn-ic" style="background:linear-gradient(135deg,#3b7cff,#1c5ae8);">址</span><span class="qn-t">收货地址</span></button>
      <button class="qn-item" onclick="openKfOfficial()"><span class="qn-ic" style="background:linear-gradient(135deg,#b06e3a,#8b4f22);">保</span><span class="qn-t">售后保障</span></button>
    </div>

    <!-- 楼层：设备选型 -->
    <div class="floor">
      <div class="floor-head">
        <span class="fh-icon">选</span>
        <span class="fh-title">设备选型<small id="countTip"></small></span>
        <div class="fh-right">
          <div class="cat-row" id="catRow"></div>
          <select class="sort-select" id="sortSel" onchange="renderCards()">
            <option value="default">默认排序</option>
            <option value="low">价格从低到高</option>
            <option value="high">价格从高到低</option>
          </select>
        </div>
      </div>
      <div class="floor-body">
        <div id="storeSearch"></div>
        <div class="grid" id="grid"></div>
      </div>
    </div>

    <!-- 楼层：交换机专区 -->
    <div class="floor">
      <div class="floor-head">
        <span class="fh-icon">交</span>
        <span class="fh-title">交换机专区<small>企业级 / 数据中心交换设备</small></span>
      </div>
      <div class="floor-body"><div class="grid" id="floorSwitch"></div></div>
    </div>

    <!-- 楼层：服务器专区 -->
    <div class="floor">
      <div class="floor-head">
        <span class="fh-icon">服</span>
        <span class="fh-title">服务器专区<small>机架式 / 存储 / 国产化</small></span>
      </div>
      <div class="floor-body"><div class="grid" id="floorServer"></div></div>
    </div>

    <!-- 楼层：猜你喜欢 -->
    <div class="floor">
      <div class="floor-head">
        <span class="fh-icon">荐</span>
        <span class="fh-title">猜你喜欢<small>为你量身推荐</small></span>
        <span class="lk-tabs" style="margin-left:auto;display:flex;gap:18px;align-items:center;">
          <a style="font-size:14px;color:#ff4400;font-weight:700;position:relative;padding-bottom:4px;border-bottom:2px solid #ff4400;cursor:pointer;">猜你喜欢</a>
          <a style="font-size:14px;color:#999;cursor:pointer;">我的关注</a>
          <a style="font-size:14px;color:#999;cursor:pointer;">最近浏览</a>
        </span>
      </div>
      <div class="floor-body"><div class="like-grid" id="likeGrid"></div></div>
    </div>

    <div class="about-banner">
      <div class="ab-t">为什么选择广联通信</div>
      <div class="ab-s">一站式网络设备选型、采购与技术服务</div>
      <div class="about-chips">
        <span>原厂正品 · 渠道直供</span>
        <span>在线选型 · 即查即报</span>
        <span>一键生成采购合同</span>
        <span>全国联保 · 售后无忧</span>
      </div>
      <a class="btn btn-lg" href="tel:051266888899">咨询热线 0512-6688-8899</a>
    </div>
  </div>

  <!-- ============ 分类 ============ -->
  <div class="view" id="viewCategory">
    <div class="page-head">
      <div class="ph-title">全部分类<span class="ph-sub">按设备类型快速筛选</span></div>
    </div>
    <div class="cat-layout">
      <div class="cat-left" id="catLeft"></div>
      <div class="cat-right" id="catRight"></div>
    </div>
  </div>

  <!-- ============ 店铺列表 ============ -->
  <div class="view" id="viewStoreList">
    <div class="page-head">
      <div class="ph-title">品牌店铺<span class="ph-sub">厂商店铺 · 官方授权直供</span></div>
    </div>
    <div id="storeListGrid" class="grid"></div>
  </div>

  <!-- ============ 店铺主页 ============ -->
  <div class="view" id="viewStore">
    <div id="storeBody"></div>
  </div>

  <!-- ============ 商品详情 ============ -->
  <div class="view" id="viewDetail">
    <div class="page-head">
      <button class="btn-back" onclick="backFromDetail()">←</button>
      <div class="ph-title">商品详情</div>
    </div>
    <div class="detail-layout">
      <div class="dp-left">
        <div class="dp-gallery">
          <div class="dp-track" id="dTrack"></div>
          <div class="dp-dots" id="dDots"></div>
          <button class="dp-fav" id="dFav" onclick="toggleFavDetail()" title="收藏"><svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg></button>
        </div>
        <div class="dp-thumbs" id="dThumbs"></div>
      </div>
      <div class="dp-right">
        <div class="dp-name" id="dName"></div>
        <div class="dp-desc" id="dDesc"></div>
        <div class="dp-rating">
          <span class="star-row" id="dStars"></span>
          <span id="dRatingTxt"></span>
        </div>
        <div class="price-bar">
          <div class="pb-row1">
            <span class="pb-tag">促销价</span>
            <span class="pb-price"><small>¥</small><b id="dPrice"></b></span>
            <span class="pb-unit" id="dUnit"></span>
            <span class="pb-orig" id="dOrig"></span>
          </div>
          <div class="pb-row2" id="dMeta"></div>
        </div>
        <div class="dp-coupons" id="dCoupons"></div>
        <div class="service-bar" id="dService"></div>
        <div class="dp-eta" id="dEta"></div>
        <div class="cfg-summary" onclick="openConfigPage()">
          <div class="cs-top"><span>选型配置</span><span class="go">去选配 ›</span></div>
          <div id="dCfgSummary" style="font-size:12px;color:#b45309;line-height:1.7;"></div>
          <div class="cs-total">合计（含税）：<span id="dTotal" style="color:var(--primary);font-size:18px;">¥0</span></div>
        </div>
        <div class="dp-qty-row">
          <span class="dq-label">数量</span>
          <div class="qty-stepper">
            <button type="button" onclick="chgQty(-1)">−</button>
            <input type="number" id="dQty2" value="1" min="1" onchange="qtyInput(this)">
            <button type="button" onclick="chgQty(1)">+</button>
          </div>
          <span class="dq-total">小计：<b id="dSubTotal">¥0</b></span>
        </div>
        <div class="detail-actions">
          <button class="btn-buy" onclick="buyNow()">立即购买</button>
          <button class="btn-cart" onclick="addToCart()">加入购物车</button>
        </div>
        <div class="dp-notice">本平台交易走 <b>担保交易</b>：买家付款后资金由平台冻结，确认收货后再打款给商家。</div>
      </div>
    </div>
    <div class="dp-detail-desc" id="dDetailDesc"></div>
    <div style="margin-top:14px;" id="dReviews"></div>
  </div>

  <!-- ============ 选型配置 ============ -->
  <div class="view" id="viewConfig">
    <div class="page-head">
      <button class="btn-back" onclick="backFromConfig()">←</button>
      <div class="ph-title">选型配置<span class="ph-sub">选择配置后将联动更新报价</span></div>
    </div>
    <div class="config-layout">
      <div class="config-main">
        <div class="config-sec" style="display:flex;align-items:center;gap:16px;">
          <img id="cfgImg" style="width:64px;height:64px;border-radius:8px;object-fit:contain;border:1px solid var(--border);" alt="">
          <div>
            <div class="config-sec-title" id="cfgName" style="font-weight:700;font-size:15px;"></div>
            <div style="font-size:12px;color:var(--gray);margin-top:3px;" id="cfgTag"></div>
          </div>
        </div>
        <div class="config-sec" id="configArea"></div>
        <div class="config-sec">
          <div class="qty-row"><label>数量</label>
            <div class="qty-box">
              <button onclick="chgQty(-1)">−</button>
              <input type="number" id="dQty" value="1" min="1" onchange="calcDetail()">
              <button onclick="chgQty(1)">+</button>
            </div>
          </div>
          <div class="mix-compat"><span class="mc-ic">✓</span>组件级选配，所选配置将与整机固件确认兼容，跨品牌部件随整机统一交付，维保由本店打包承担。</div>
        </div>
      </div>
      <div class="config-side">
        <div class="cs-name" id="cfgSideName"></div>
        <div class="cs-total"><span>单价（含税）</span><span class="num" id="cfgPriceSide">¥0</span></div>
        <div id="cfgSideLines" style="margin-top:10px;font-size:12px;color:var(--gray-2);"></div>
        <div class="cs-total" style="margin-top:10px;border-top:none;padding-top:4px;"><span>合计（含税）</span><span class="num" id="cfgTotal">¥0</span></div>
        <div style="display:flex;gap:10px;margin-top:18px;">
          <button class="btn btn-outline" style="flex:1;background:#fff;color:var(--primary);border:2px solid var(--primary);" onclick="addToCart()">加入购物车</button>
          <button class="btn" style="flex:1;" onclick="buyNow()">立即购买</button>
        </div>
        <div class="notice" style="margin:14px 0 0;background:#f1f3fa;border-color:#dde3f2;color:#33437f;">定制设备：非标需求请先联系客服确认方案，再下单。</div>
      </div>
    </div>
  </div>

  <!-- ============ 购物车 ============ -->
  <div class="view" id="viewCart">
    <div class="page-head">
      <div class="ph-title">购物车<span class="ph-sub" id="cartHeadCount"></span></div>
    </div>
    <div id="cartWrap"></div>
  </div>
<!-- ============ 我的订单 ============ -->
  <div class="view" id="viewOrderList">
    <div class="page-head">
      <button class="btn-back" onclick="backToMine()">←</button>
      <div class="ph-title">我的订单</div>
    </div>
    <div class="order-tabs" id="orderTabs">
      <div class="ot active" data-tab="待付款" onclick="setOrderTab(this)">待付款</div>
      <div class="ot" data-tab="待发货" onclick="setOrderTab(this)">待发货</div>
      <div class="ot" data-tab="待收货" onclick="setOrderTab(this)">待收货</div>
      <div class="ot" data-tab="已完成" onclick="setOrderTab(this)">已完成</div>
      <div class="ot" data-tab="all" onclick="setOrderTab(this)">全部</div>
    </div>
    <div id="orderListBody"></div>
  </div>

  <!-- ============ 订单详情 ============ -->
  <div class="view" id="viewOrderDetail">
    <div class="page-head">
      <button class="btn-back" onclick="backToOrderList()">←</button>
      <div class="ph-title">订单详情</div>
    </div>
    <div id="orderDetailBody"></div>
  </div>

  <!-- ============ 我的合同 ============ -->
  <div class="view" id="viewContractList">
    <div class="page-head">
      <button class="btn-back" onclick="backToMine()">←</button>
      <div class="ph-title">我的合同</div>
    </div>
    <div id="contractListBody"></div>
  </div>

  <!-- ============ 合同详情 ============ -->
  <div class="view" id="viewContractDetail">
    <div class="page-head">
      <button class="btn-back" onclick="backToContractList()">←</button>
      <div class="ph-title">合同详情</div>
    </div>
    <div id="contractDetailBody"></div>
  </div>

  <!-- ============ 收藏 ============ -->
  <div class="view" id="viewFavList">
    <div class="page-head">
      <button class="btn-back" onclick="backToMine()">←</button>
      <div class="ph-title">我的收藏</div>
    </div>
    <div class="grid" id="favGrid"></div>
  </div>

  <!-- ============ 浏览足迹 ============ -->
  <div class="view" id="viewFootprint">
    <div class="page-head">
      <button class="btn-back" onclick="backToMine()">←</button>
      <div class="ph-title">浏览足迹<span class="ph-sub">最近看过的商品 · 最多保留 30 条</span></div>
      <button class="ft-clear" onclick="clearFootprints()">清空足迹</button>
    </div>
    <div class="grid" id="ftGrid"></div>
  </div>

  <!-- ============ 消息（IM 布局） ============ -->
  <div class="view" id="viewMsgList">
    <div class="page-head">
      <div class="ph-title">消息中心<span class="ph-sub">官方客服 · 各品牌店铺专属服务</span></div>
    </div>
    <div class="msg-layout">
      <div class="msg-list-panel">
        <div class="msg-list-head">会话列表</div>
        <div class="msg-list-body" id="msgList"></div>
      </div>
      <div class="chat-panel">
        <div class="chat-head">
          <div class="mi-avatar" id="chAv" style="font-size:15px;">客</div>
          <div>
            <div class="ch-name" id="chatName">选择会话开始沟通</div>
            <div class="ch-state"><span class="ch-state-dot"></span><span id="chatState">在线 · 通常 1 分钟内回复</span></div>
          </div>
        </div>
        <div class="chat-body">
          <div class="chat-empty" id="chatEmpty"><div class="ic">💬</div>从左侧选择一个会话开始沟通</div>
          <div class="kf-msgs" id="chatMsgs" style="display:none;"></div>
          <div class="kf-quick" id="chatQuick" style="display:none;"></div>
          <div class="kf-input" id="chatInputWrap" style="display:none;">
            <input id="chatInput" placeholder="请输入您想咨询的问题…" onkeydown="if(event.key==='Enter')sendChat()">
            <button onclick="sendChat()">发送</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ============ 我的 ============ -->
  <div class="view" id="viewMine">
    <div class="page-head">
      <div class="ph-title">个人中心<span class="ph-sub">客户（买方）资料 · 已保存在浏览器本地</span></div>
    </div>
    <div class="mine-layout">
      <div class="mine-left">
        <div class="profile-card">
          <div class="pc-top">
            <div class="pc-av" id="pAvatar">客</div>
            <div>
              <div class="pc-name" id="pName">未设置</div>
              <div class="pc-phone" id="pPhone">完善资料后用于合同甲方与收货</div>
            </div>
          </div>
          <button class="pc-edit" onclick="openAddr()">编辑资料</button>
        </div>
        <div class="m-cell" onclick="navView('viewOrderList',document.querySelector('.nav-item[data-page=order]'))">
          <span class="m-ic" style="background:linear-gradient(135deg,#ff9f43,#f97316);color:#fff;">单</span>
          <span class="m-l">我的订单</span><span class="m-r"><span class="cnt" id="orderCount">0 条</span></span>
        </div>
        <div class="m-cell" onclick="navView('viewContractList',document.querySelector('.nav-item[data-page=contract]'))">
          <span class="m-ic" style="background:linear-gradient(135deg,#5c7cfa,#3b5bdb);color:#fff;">同</span>
          <span class="m-l">我的合同</span><span class="m-r"><span class="cnt" id="contractCount">0 份</span></span>
        </div>
        <div class="m-cell" onclick="openAddr()">
          <span class="m-ic" style="background:linear-gradient(135deg,#26a69a,#00897b);color:#fff;">址</span>
          <span class="m-l">甲方信息 / 收货地址</span><span class="m-r" id="addrStatusTxt">未设置</span>
        </div>
        <div class="m-cell" onclick="openFollowedStores()">
          <span class="m-ic" style="background:linear-gradient(135deg,#7c6fd0,#5b4bc4);color:#fff;">店</span>
          <span class="m-l">我关注的店铺</span><span class="m-r"><span class="cnt" id="followCount">0 家</span></span>
        </div>
        <div class="m-cell" onclick="openFavList()">
          <span class="m-ic" style="background:linear-gradient(135deg,#ff4d6d,#e53a5c);color:#fff;">藏</span>
          <span class="m-l">我的收藏</span><span class="m-r"><span class="cnt" id="favCount">0 件</span></span>
        </div>
        <div class="m-cell" onclick="openFootprint()">
          <span class="m-ic" style="background:linear-gradient(135deg,#f7971e,#d35400);color:#fff;">迹</span>
          <span class="m-l">浏览足迹</span><span class="m-r"><span class="cnt" id="ftCount">0 条</span></span>
        </div>
        <div class="m-cell"><a href="tel:051266888899" style="display:flex;align-items:center;gap:12px;color:inherit;width:100%;">
          <span class="m-ic" style="background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;">话</span>
          <span class="m-l">客服热线</span><span class="m-r" style="color:var(--primary);font-weight:700;">0512-6688-8899</span>
        </a></div>
      </div>
      <div class="mine-right">
        <div>
          <div class="section-bar"><h2>我的订单<span class="sub">快捷入口</span></h2></div>
          <div class="mine-shortcut">
            <div class="mso" onclick="openOrderList('待付款')"><div class="num" id="osPay">0</div><div class="txt">待付款</div></div>
            <div class="mso" onclick="openOrderList('待发货')"><div class="num" id="osShip">0</div><div class="txt">待发货</div></div>
            <div class="mso" onclick="openOrderList('待收货')"><div class="num" id="osRecv">0</div><div class="txt">待收货</div></div>
            <div class="mso" onclick="openOrderList('已完成')"><div class="num" id="osDone">0</div><div class="txt">已完成</div></div>
            <div class="mso" onclick="openOrderList('all')"><div class="num" id="osAll">0</div><div class="txt">全部</div></div>
          </div>
        </div>
        <div>
          <div class="section-bar"><h2>猜你喜欢<span class="sub">为你精选</span></h2></div>
          <div class="grid-mini" id="mineLikeGrid"></div>
        </div>
        <div class="dp-notice" style="margin-top:0;">以上为客户（买方）信息，仅用于本合同演示，保存在您的浏览器本地。在苏州广联通信平台选型下单后，可在线付款。</div>
      </div>
    </div>
  </div>

</div><!-- /app -->

<!-- ============ 甲方信息 / 收货地址 ============ -->
<div class="overlay" id="addrOverlay">
  <div class="modal">
    <button class="modal-close" onclick="$('addrOverlay').classList.remove('show')">✕</button>
    <div class="modal-title">甲方信息 / 收货地址</div>
    <div style="font-size:12px;color:var(--gray);margin-bottom:16px;">合同甲方地址与收货地址可分别填写，二者可能不同。</div>
    <div class="form-block">
      <div class="fb-title">合同甲方信息<span class="fb-tip">用于合同正文</span></div>
      <div class="form-row"><input class="addr-inp" id="addrName" placeholder="客户 / 单位名称 *"></div>
      <div class="two-col">
        <div class="form-row"><input class="addr-inp" id="addrContact" placeholder="联系人 *"></div>
        <div class="form-row"><input class="addr-inp" id="addrPhone" placeholder="联系电话 *"></div>
      </div>
      <div class="form-row"><input class="addr-inp" id="addrEmail" placeholder="电子邮箱"></div>
      <div class="form-row"><textarea class="addr-inp" id="addrContractAddr" rows="2" placeholder="合同甲方地址 *（将写入合同正文的甲方地址）">