编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
<title>苏州广联通信 · 网络设备商城 - App Demo</title>
<style>
  :root{
    --primary:#1a73e8;
    --primary-dark:#185abc;
    --dark:#1f2937;
    --gray:#6b7280;
    --light:#f3f4f6;
    --border:#e7eaf0;
    --success:#16a34a;
    --radius:14px;
    --safe:env(safe-area-inset-bottom,0px);
  }
  *{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent;}
  body{background:#d7dade;color:var(--dark);}
  .app{max-width:480px;margin:0 auto;min-height:100vh;background:#f4f6f9;position:relative;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.28);}

  /* 顶部导航条 */
  .app-top{position:sticky;top:0;z-index:60;background:#fff;padding:10px 14px;border-bottom:1px solid var(--border);}
  .top-row{display:flex;align-items:center;gap:10px;}
  .logo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:16px;color:var(--primary);white-space:nowrap;}
  .logo-badge{width:30px;height:30px;border-radius:9px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
  .search-box{flex:1;display:flex;align-items:center;background:var(--light);border-radius:18px;padding:8px 12px;gap:6px;border:1px solid transparent;}
  .search-box:focus-within{border-color:var(--primary);background:#fff;}
  .search-box svg{width:15px;height:15px;fill:var(--gray);flex-shrink:0;}
  .search-box input{flex:1;border:none;outline:none;background:none;font-size:14px;}
  .cart-btn{position:relative;background:var(--light);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;flex-shrink:0;}
  .cart-btn .ico{width:20px;height:20px;fill:var(--dark);}
  .cart-btn .badge{position:absolute;top:-2px;right:-4px;background:#e5484d;color:#fff;font-size:10px;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:700;}

  /* 横幅 */
  .hero{background:linear-gradient(135deg,#1a73e8,#0f3d91);color:#fff;padding:22px 18px 18px;}
  .hero h1{font-size:20px;margin-bottom:6px;}
  .hero p{font-size:13px;opacity:.9;line-height:1.5;}

  /* 分类 chips 横滑 */
  .cat-row{display:flex;gap:8px;overflow-x:auto;padding:12px 14px;scrollbar-width:none;}
  .cat-row::-webkit-scrollbar{display:none;}
  .cat-chip{flex-shrink:0;padding:8px 16px;border-radius:20px;background:#fff;border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--gray);cursor:pointer;transition:.15s;}
  .cat-chip.active{background:var(--primary);color:#fff;border-color:var(--primary);}

  /* 内容 */
  .content{flex:1;padding:4px 14px 96px;}
  .section-title{font-size:16px;font-weight:700;margin:12px 2px;display:flex;align-items:center;gap:8px;}
  .section-title .sub{font-size:12px;color:var(--gray);font-weight:400;}
  .sort-row{display:flex;justify-content:space-between;align-items:center;margin:12px 0;}
  .sort-select{font-size:13px;border:1px solid var(--border);background:#fff;border-radius:10px;padding:7px 10px;outline:none;}

  /* 商品 2 列卡片 */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .card{background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border);}
  .card-img{height:110px;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;border-bottom:1px solid #f1f3f6;}
  .card-img img{max-width:100%;max-height:100%;object-fit:contain;}
  .card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1;}
  .card-tag{font-size:11px;color:var(--primary);background:#e8f0fe;padding:2px 8px;border-radius:10px;align-self:flex-start;font-weight:600;}
  .card-name{font-size:14px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;}
  .card-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;gap:6px;}
  .price{font-size:17px;font-weight:800;color:var(--primary);}
  .price small{font-size:11px;color:var(--gray);font-weight:400;}
  .nego{color:var(--gray);font-size:13px;}
  .empty-tip{text-align:center;color:var(--gray);padding:48px 20px;font-size:14px;grid-column:1/-1;}
  .foot-note{text-align:center;color:#9aa2b1;font-size:11px;padding:14px 20px 4px;line-height:1.8;}

  .btn{display:inline-block;padding:7px 12px;border-radius:16px;background:var(--primary);color:#fff;border:none;cursor:pointer;font-size:13px;font-weight:600;text-align:center;text-decoration:none;transition:.15s;}
  .btn:active{opacity:.85;}
  .btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary);}
  .btn-gray{background:#e5e7eb;color:#374151;}
  .btn-sm{padding:5px 12px;font-size:12px;border-radius:14px;}
  .btn-lg{width:100%;padding:13px;border-radius:12px;font-size:16px;}

  /* 详情 bottom sheet */
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;display:none;justify-content:center;align-items:flex-end;padding:0;}
  .overlay.show{display:flex;}
  .modal{background:#fff;width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:20px 16px 26px;position:relative;animation:slideup .28s;max-height:92vh;overflow:auto;}
  @keyframes slideup{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}
  .modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--light);border:none;font-size:16px;cursor:pointer;color:var(--gray);}
  .modal-head{display:flex;gap:14px;margin-bottom:14px;}
  .modal-img{width:96px;height:96px;flex-shrink:0;background:#fff;border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:6px;}
  .modal-img img{max-width:100%;max-height:100%;object-fit:contain;}
  .modal-title{font-size:17px;font-weight:700;margin-bottom:4px;line-height:1.3;}
  .modal-tag{font-size:11px;color:var(--primary);background:#e8f0fe;padding:2px 8px;border-radius:10px;display:inline-block;font-weight:600;margin-bottom:6px;}
  .modal-price{font-size:22px;font-weight:800;color:var(--primary);}
  .modal-price small{color:var(--gray);font-weight:400;font-size:12px;}
  .param-grid{background:var(--light);border-radius:10px;padding:10px 12px;margin:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px;}
  .param-grid b{color:var(--gray);font-weight:600;margin-right:5px;}
  .notice{background:#fff7ed;border:1px solid #fed7aa;color:#c2410c;border-radius:10px;padding:9px 12px;font-size:12px;margin:10px 0;line-height:1.5;}

  /* 选型配置 */
  .config-sec{margin-top:12px;}
  .config-sec h4{font-size:14px;margin-bottom:8px;}
  .config-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
  .opt{border:1px solid var(--border);border-radius:9px;padding:7px 11px;font-size:13px;background:#fff;cursor:pointer;transition:.15s;}
  .opt small{color:var(--gray);font-size:11px;font-weight:400;}
  .opt.selected{border-color:var(--primary);background:#e8f0fe;color:var(--primary);font-weight:600;}
  .qty-row{display:flex;align-items:center;gap:12px;margin:12px 0;}
  .qty-row label{font-weight:600;font-size:14px;}
  .qty-box{display:flex;align-items:center;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:#fff;}
  .qty-box button{width:34px;height:34px;border:none;background:var(--light);font-size:16px;cursor:pointer;}
  .qty-box input{width:44px;text-align:center;border:none;font-size:15px;height:34px;outline:none;}
  .total-line{background:var(--light);border-radius:10px;padding:12px;display:flex;justify-content:space-between;align-items:center;margin:6px 0;}
  .total-line .num{font-size:24px;color:var(--primary);font-weight:800;}
  .total-line .lbl{color:var(--gray);font-size:13px;}
  .actions-row{display:flex;gap:10px;margin-top:14px;}
  .actions-row .btn{flex:1;padding:12px;font-size:15px;border-radius:12px;}

  /* 合同表单 */
  .form-row{margin-bottom:12px;}
  .form-row label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;}
  .form-row input,.form-row select,.form-row textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;outline:none;background:#fff;font-family:inherit;}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

  /* 合同预览 */
  .contract{font-size:13px;line-height:1.8;color:#111;}
  .contract h2{text-align:center;font-size:19px;margin-bottom:4px;}
  .contract h3{text-align:center;color:var(--gray);font-weight:400;font-size:12px;margin-bottom:16px;}
  .contract table{width:100%;border-collapse:collapse;margin:14px 0;font-size:11px;}
  .contract table th,.contract table td{border:1px solid var(--border);padding:7px 6px;text-align:left;vertical-align:top;}
  .contract table th{background:var(--light);font-weight:600;}
  .full-modal{max-width:480px;height:100%;max-height:none;border-radius:0;padding:16px 16px 30px;}
  .action-bar{display:flex;gap:10px;margin-top:16px;}
  .action-bar .btn{flex:1;padding:12px;font-size:15px;border-radius:12px;}

  /* 购物车 bottom sheet */
  .cart-panel{position:fixed;left:50%;transform:translateX(-50%);bottom:-105%;width:100%;max-width:480px;height:78vh;background:#fff;border-radius:18px 18px 0 0;z-index:120;transition:.32s;display:flex;flex-direction:column;box-shadow:0 -10px 30px rgba(0,0,0,.18);}
  .cart-panel.open{bottom:0;}
  .cart-head{padding:16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700;}
  .cart-items{flex:1;overflow-y:auto;padding:6px 16px;}
  .cart-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
  .cart-item .ci-img{width:52px;height:52px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:4px;flex-shrink:0;}
  .cart-item .ci-img img{max-width:100%;max-height:100%;object-fit:contain;}
  .cart-item .ci-name{font-weight:600;font-size:13px;line-height:1.3;}
  .cart-item .ci-spec{font-size:11px;color:var(--gray);margin:3px 0;line-height:1.4;}
  .cart-item .ci-price{font-weight:700;color:var(--primary);font-size:14px;}
  .cart-item .ci-del{background:none;border:none;color:var(--gray);font-size:12px;cursor:pointer;}
  .cart-empty{text-align:center;color:var(--gray);padding:48px 20px;font-size:14px;}
  .cart-foot{padding:12px 16px;border-top:1px solid var(--border);background:#fff;padding-bottom:calc(12px + var(--safe));}
  .cart-total{display:flex;justify-content:space-between;font-size:15px;margin-bottom:10px;}
  .cart-total .n{font-size:20px;color:var(--primary);font-weight:800;}

  /* 底部 TabBar */
  .tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;background:#fff;border-top:1px solid var(--border);display:flex;z-index:80;padding-bottom:var(--safe);}
  .tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 0 6px;color:var(--gray);font-size:11px;gap:2px;background:none;border:none;cursor:pointer;}
  .tab .ti{width:22px;height:22px;fill:currentColor;}
  .tab.active{color:var(--primary);font-weight:600;}
  .tab .badge{position:absolute;top:3px;right:calc(50% - 22px);background:#e5484d;color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:700;}

  .toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:rgba(17,17,17,.92);color:#fff;padding:10px 20px;border-radius:20px;z-index:300;opacity:0;transition:.3s;font-size:13px;pointer-events:none;max-width:88%;text-align:center;}
  .toast.show{opacity:1;}

  /* ===== App 端新增样式 ===== */
  .status-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 18px 2px;font-size:12px;font-weight:600;color:var(--dark);background:#fff;flex-shrink:0;}
  .sb-icons{display:flex;align-items:center;gap:5px;}
  .card-spec{font-size:12px;color:var(--gray);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

  /* ===== 公司介绍 · 列表底部横幅 ===== */  .about-banner{background:linear-gradient(135deg,#0f3d91,#1a73e8);border-radius:14px;margin:14px 14px 0;padding:16px;color:#fff;text-align:center;}
  .about-banner .ab-t{font-size:15px;font-weight:800;margin-bottom:3px;}
  .about-banner .ab-s{font-size:11px;opacity:.85;margin-bottom:12px;}
  .about-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px;}
  .about-chips span{font-size:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:4px 10px;border-radius:14px;}
  .about-banner .btn{background:#fff;color:var(--primary);border-radius:20px;padding:9px 26px;font-size:13px;font-weight:800;}

  /* ===== 我的订单 / 合同 / 地址 ===== */
  .addr-inp{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;padding:11px 12px;font-size:14px;outline:none;background:#fff;color:var(--dark);font-family:inherit;}
  .addr-inp:focus{border-color:var(--primary);}
  .addr-inp::placeholder{color:#b6bcc7;}
  .ml-item{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid var(--border);gap:10px;}
  .ml-item:last-child{border-bottom:none;}
  .ml-code{font-size:13px;font-weight:700;color:var(--dark);}
  .ml-date{font-size:11px;color:var(--gray);margin-top:3px;}
  .ml-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .ml-amt{font-size:14px;font-weight:800;color:var(--primary);}
  .ml-status{font-size:11px;color:#fff;background:#f59e0b;border-radius:10px;padding:2px 8px;font-weight:600;}
  .ml-status.ship{background:#1a73e8;}
  .ml-status.sent{background:#7c3aed;}
  .ml-status.paid{background:#34a853;}
  .ml-status.done{background:#9aa2b1;}
  .ml-btn{font-size:12px;color:var(--primary);border:1px solid var(--primary);border-radius:14px;padding:4px 10px;background:#fff;cursor:pointer;font-weight:600;}
  .ml-empty{text-align:center;color:var(--gray);padding:40px 10px;font-size:13px;line-height:1.8;}

  /* ===== 我的页面（全屏视图） ===== */
  .page-head{display:flex;align-items:center;justify-content:center;position:relative;padding:12px 14px 8px;background:#fff;}
  .page-head.tall{height:100px;align-items:flex-end;padding:14px 14px 12px;box-sizing:border-box;}
  .page-head .ph-title{font-size:16px;font-weight:800;color:var(--dark);}
  .mine-wrap{padding:0 14px 24px;}
  .profile-card{background:linear-gradient(135deg,#1a73e8,#0f3d91);border-radius:14px;padding:18px 16px;color:#fff;display:flex;align-items:center;gap:13px;margin-top:12px;}
  .profile-avatar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex-shrink:0;}
  .profile-name{font-size:16px;font-weight:800;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .profile-phone{font-size:12px;opacity:.92;margin-top:4px;}
  .profile-edit{margin-left:auto;font-size:12px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);border-radius:14px;padding:5px 13px;color:#fff;cursor:pointer;flex-shrink:0;}
  .mine-menu{background:#fff;border-radius:14px;border:1px solid var(--border);margin-top:12px;overflow:hidden;}
  .m-cell{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--border);cursor:pointer;}
  .m-cell:last-child{border-bottom:none;}
  .m-cell .m-l{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--dark);}
  .m-cell .m-r{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gray);}
  .m-cell .m-r svg{width:12px;height:12px;fill:#c3c9d4;}
  .mine-note{font-size:11px;color:var(--gray);text-align:center;margin-top:18px;line-height:1.8;}

  /* ===== 合同/收货 分区表单 ===== */
  .form-block{background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:12px 12px 6px;margin-bottom:14px;}
  .fb-title{font-size:13px;font-weight:700;color:var(--dark);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
  .fb-title::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--primary);}
  .fb-tip{font-size:11px;color:var(--gray);font-weight:400;}

  /* ===== 付款 ===== */
  .pay-code{text-align:center;font-size:12px;color:var(--gray);margin:4px 0 2px;}
  .pay-amt{text-align:center;padding:8px 0 2px;}
  .pay-amt .lbl{font-size:12px;color:var(--gray);}
  .pay-amt .num{font-size:30px;font-weight:800;color:var(--dark);margin-top:2px;}
  .pay-methods{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
  .pay-method{display:flex;align-items:center;gap:11px;border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;}
  .pay-method.sel{border-color:var(--primary);background:#eef4ff;}
  .pay-method .pm-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex-shrink:0;}
  .pay-method b{font-size:14px;color:var(--dark);display:block;}
  .pay-method span{font-size:11px;color:var(--gray);}
  .pay-method .pm-radio{margin-left:auto;width:18px;height:18px;border-radius:50%;border:2px solid #d5dae3;flex-shrink:0;position:relative;}
  .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:24px 0 6px;}
  .pay-success .ok{width:64px;height:64px;border-radius:50%;background:#34a853;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;}
  .pay-success .t{font-size:18px;font-weight:800;margin-top:14px;color:var(--dark);}
  .pay-success .amt{font-size:24px;font-weight:800;color:var(--primary);margin-top:10px;}
  .pay-success .s{font-size:12px;color:var(--gray);margin-top:8px;line-height:1.8;padding:0 6px;}

  /* ===== 全屏子页面（订单/合同） ===== */
  .back-btn{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:var(--light);border:none;border-radius:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--dark);cursor:pointer;}
  .list-card{background:#fff;border-radius:14px;border:1px solid var(--border);margin:0 14px 14px;overflow:hidden;}
  .list-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
  .list-item:last-child{border-bottom:none;}
  .list-item .li-main{font-size:14px;font-weight:700;color:var(--dark);}
  .list-item .li-sub{font-size:11px;color:var(--gray);margin-top:4px;line-height:1.45;}
  .list-item .li-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}

  /* 订单状态时间线 */
  .timeline{display:flex;justify-content:space-between;align-items:flex-start;position:relative;margin:18px 0 24px;padding:0 6px;}
  .timeline::before{content:'';position:absolute;top:10px;left:24px;right:24px;height:2px;background:#e5e7eb;z-index:0;}
  .tl-step{position:relative;z-index:1;text-align:center;width:56px;}
  .tl-dot{width:22px;height:22px;border-radius:50%;background:#e5e7eb;color:#9aa2b1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin:0 auto 6px;border:2px solid #fff;}
  .tl-dot.active{background:var(--primary);color:#fff;}
  .tl-dot.done{background:#34a853;color:#fff;}
  .tl-name{font-size:11px;color:var(--gray);line-height:1.2;}
  .tl-step.active .tl-name,.tl-step.done .tl-name{color:var(--dark);font-weight:600;}

  /* 详情卡片 */
  .detail-card{background:#fff;border-radius:14px;border:1px solid var(--border);padding:16px;margin:0 14px 14px;}
  .detail-card h3{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
  .detail-card h3 svg{width:18px;height:18px;fill:var(--primary);}
  .kv-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f3f4f6;font-size:13px;}
  .kv-row:last-child{border-bottom:none;}
  .kv-row .k{color:var(--gray);}
  .kv-row .v{color:var(--dark);font-weight:600;max-width:60%;text-align:right;}
  .status-big{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#fff;background:#f59e0b;border-radius:20px;padding:5px 12px;font-weight:600;}
  .status-big.ship{background:#1a73e8;}
  .status-big.sent{background:#7c3aed;}
  .status-big.paid{background:#34a853;}
  .status-big.done{background:#9aa2b1;}
  .items-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px;}
  .items-table th,.items-table td{border:1px solid var(--border);padding:7px 6px;text-align:left;}
  .items-table th{background:var(--light);font-weight:600;}
  .track-box{background:#eef4ff;border:1px solid #cfe1fd;border-radius:10px;padding:12px;margin-top:10px;}
  .track-box .tk-title{font-size:12px;color:var(--primary);font-weight:700;margin-bottom:6px;}
  .track-box .tk-row{font-size:13px;color:var(--dark);line-height:1.6;}

  /* 合同正文全屏容器 */
  .contract-full{background:#fff;border-radius:14px;border:1px solid var(--border);padding:16px;margin:0 14px 20px;font-size:13px;line-height:1.8;color:#111;}
</style>
</head>
<body>

<!-- ============ App 框架 ============ -->
<div class="app">

  <!-- 状态栏（装饰） -->
  <div class="status-bar">
    <span>9:41</span>
    <span class="sb-icons">
      <svg width="15" height="11" viewBox="0 0 15 11"><path d="M1 8h2v2H1zM4.5 6h2v4h-2zM8 3.5h2v6.5H8zM11.5 1h2v9h-2z" fill="#1f2937"/></svg>
      <svg width="16" height="11" viewBox="0 0 16 11"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM8 4.5c1.7 0 3.2.7 4.3 1.8l-1.4 1.4A4.5 4.5 0 008 6.5c-1.2 0-2.4.5-3.2 1.2L3.4 6.3A6 6 0 018 4.5zm0-3c2.9 0 5.6 1.2 7.5 3.1l-1.4 1.4A8.5 8.5 0 008 3.5c-2.3 0-4.5.9-6.1 2.5L.5 4.6A10.5 10.5 0 018 1.5z" fill="#1f2937"/></svg>
      <svg width="24" height="11" viewBox="0 0 24 11"><rect x="0.5" y="1" width="19" height="9" rx="2.5" fill="none" stroke="#1f2937" stroke-width="1"/><rect x="1.5" y="2.5" width="14" height="6" rx="1.2" fill="#1f2937"/><path d="M21.5 3.5v4c1-.2 1.6-1 1.6-2s-.6-1.8-1.6-2z" fill="#1f2937"/></svg>
    </span>
  </div>

  <!-- ============ 首页视图 ============ -->
  <div id="viewHome">

  <!-- 顶部导航 -->
  <div class="app-top">
    <div class="top-row">
      <div class="logo"><span class="logo-badge">GL</span> 广联通信</div>
      <div class="search-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 type="text" id="searchBox" placeholder="搜索型号 / 品牌 / 参数" oninput="renderCards()">
      </div>
      <button class="cart-btn" onclick="openCart()" aria-label="选型清单">
        <svg class="ico" viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0020.25 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
        <span class="badge" id="cartCount">0</span>
      </button>
    </div>
  </div>

  <!-- 横幅 -->
  <div class="hero">
    <h1>苏州广联通信设备选型平台</h1>
    <p>专业从事网络设备销售与技术服务，覆盖交换机、服务器、路由器、网关等全系网络硬件。开放访问 · 即查即报 · 选型后一键自动生成合同。</p>
  </div>

  <!-- 分类 chips 横滑 -->
  <div class="cat-row" id="catRow">
    <div class="cat-chip active" data-cat="all">全部</div>
    <div class="cat-chip" data-cat="switch">交换机</div>
    <div class="cat-chip" data-cat="server">服务器</div>
    <div class="cat-chip" data-cat="router">路由器</div>
    <div class="cat-chip" data-cat="gateway">网关</div>
  </div>

  <!-- 商品列表 -->
  <div class="content">
    <div class="sort-row">
      <div class="section-title" style="margin:0;">设备选型 <span class="sub" id="countTip"></span></div>
      <select class="sort-select" id="sortSel" onchange="renderCards()">
        <option value="default">默认排序</option>
        <option value="low">价格从低到高</option>
        <option value="high">价格从高到低</option>
      </select>
    </div>
    <div class="grid" id="grid"></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" href="tel:051266888899">📞 咨询热线 0512-6688-8899</a>
    </div>

    <div class="foot-note">苏州广联通信科技有限公司 · 网络设备电商平台 Demo<br>© 2026 苏州广联通信科技有限公司 · 本页面为原型演示，实际合同以正式系统为准</div>
  </div>

  </div><!-- /viewHome -->

  <!-- ============ 我的页面 ============ -->
  <div id="viewMine" style="display:none;">
    <div class="page-head"><div class="ph-title">我的</div></div>
    <div class="mine-wrap">

      <!-- 客户信息卡（买方/甲方） -->
      <div class="profile-card">
        <div class="profile-avatar" id="pAvatar">客</div>
        <div style="min-width:0;">
          <div class="profile-name" id="pName">未设置</div>
          <div class="profile-phone" id="pPhone">完善资料后用于合同甲方与收货</div>
        </div>
        <button class="profile-edit" onclick="openAddr()">编辑</button>
      </div>

      <div class="mine-menu">
        <div class="m-cell" onclick="openOrderList()">
          <span class="m-l"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 9L12 4 2 9l10 5 10-5zM6 11v5c0 1.1 4 3 6 3s6-1.9 6-3v-5"/></svg>我的订单</span>
          <span class="m-r"><span id="orderCount">0 条</span><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></span>
        </div>
        <div class="m-cell" onclick="openContractList()">
          <span class="m-l"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/></svg>我的合同</span>
          <span class="m-r"><span id="contractCount">0 份</span><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></span>
        </div>
        <div class="m-cell" onclick="openAddr()">
          <span class="m-l"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>甲方信息 / 收货地址</span>
          <span class="m-r"><span id="addrStatus">未设置</span><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></span>
        </div>
      </div>

      <div class="mine-menu">
        <a class="m-cell" href="tel:051266888899" style="text-decoration:none;color:var(--dark);">
          <span class="m-l"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z"/></svg>客服热线</span>
          <span class="m-r"><span style="color:var(--primary);font-weight:600;">0512-6688-8899</span></span>
        </a>
        <div class="m-cell">
          <span class="m-l"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>版本信息</span>
          <span class="m-r"><span>App Demo V1.0</span></span>
        </div>
      </div>

      <div class="mine-note">以上为客户（买方）信息，仅用于本合同演示，保存在您的浏览器本地。<br>在苏州广联通信平台选型下单后，可在线付款。</div>
    </div>
  </div><!-- /viewMine -->

  <!-- ============ 我的订单列表页 ============ -->
  <div id="viewOrderList" style="display:none;">
    <div class="page-head tall"><button class="back-btn" onclick="backToMine()">←</button><div class="ph-title">我的订单</div></div>
    <div id="orderListBody"></div>
  </div>

  <!-- ============ 订单详情页 ============ -->
  <div id="viewOrderDetail" style="display:none;">
    <div class="page-head tall"><button class="back-btn" onclick="backToOrderList()">←</button><div class="ph-title">订单详情</div></div>
    <div id="orderDetailBody"></div>
  </div>

  <!-- ============ 我的合同列表页 ============ -->
  <div id="viewContractList" style="display:none;">
    <div class="page-head tall"><button class="back-btn" onclick="backToMine()">←</button><div class="ph-title">我的合同</div></div>
    <div id="contractListBody"></div>
  </div>

  <!-- ============ 合同详情页 ============ -->
  <div id="viewContractDetail" style="display:none;">
    <div class="page-head tall"><button class="back-btn" onclick="backToContractList()">←</button><div class="ph-title">合同详情</div></div>
    <div id="contractDetailBody"></div>
  </div>

  <!-- 底部 TabBar -->
  <div class="tabbar">
    <button class="tab active" data-page="home" onclick="switchTab('home',this)">
      <svg class="ti" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
      首页
    </button>
    <button class="tab" data-page="cart" onclick="openCart()">
      <svg class="ti" viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0020.25 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
      选型
    </button>
    <button class="tab" data-page="mine" onclick="switchTab('mine',this)">
      <svg class="ti" viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-3.9 0-7 2-7 4.5V20h14v-1.5c0-2.5-3.1-4.5-7-4.5z"/></svg>
      我的
    </button>
  </div>

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

<!-- 详情/选型弹窗 -->
<div class="overlay" id="detailOverlay">
  <div class="modal">
    <button class="modal-close" onclick="closeModal()">✕</button>
    <div class="modal-head">
      <div class="modal-img" id="dImg"></div>
      <div>
        <span class="modal-tag" id="dTag"></span>
        <div class="modal-title" id="dName"></div>
        <div class="modal-price">
          <span id="dPrice"></span>
          <small id="dUnit"></small>
        </div>
      </div>
    </div>
    <div class="param-grid" id="dParams"></div>
    <div class="notice">以下为可选配置项，选择后将联动更新报价。</div>
    <div class="config-sec" id="configArea"></div>
    <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="total-line">
      <span class="lbl">合计（含税）</span>
      <span class="num" id="dTotal">¥0</span>
    </div>
    <div style="display:flex;gap:12px;margin-top:18px;">
      <button class="btn btn-outline" style="flex:1;padding:12px;font-size:15px;border-radius:12px;" onclick="addToCart()">加入购物车</button>
      <button class="btn" style="flex:1;padding:12px;font-size:15px;border-radius:12px;" onclick="buildContractDirect()">立即生成合同</button>
    </div>
  </div>
</div>

<!-- 合同生成弹窗 -->
<div class="overlay" id="contractOverlay">
  <div class="modal">
    <button class="modal-close" onclick="document.getElementById('contractOverlay').classList.remove('show')">✕</button>
    <div id="contractFormArea">
      <div class="modal-title" style="font-size:20px;margin-bottom:16px;">生成采购合同</div>
      <div class="notice">客户信息已自动填入示例数据，可修改后点击"生成合同"，系统将根据选型自动生成完整合同。</div>
      <div class="form-block">
        <div class="fb-title">合同甲方信息<span class="fb-tip">用于合同正文的甲方</span></div>
        <div class="two-col">
          <div class="form-row"><label>客户/单位名称 *</label><input id="cName" placeholder="例如：某某科技有限公司"></div>
          <div class="form-row"><label>联系人 *</label><input id="cContact" placeholder="姓名"></div>
        </div>
        <div class="two-col">
          <div class="form-row"><label>联系电话 *</label><input id="cPhone" placeholder="手机号"></div>
          <div class="form-row"><label>电子邮箱</label><input id="cEmail" placeholder="邮箱"></div>
        </div>
        <div class="form-row"><label>合同甲方地址 *</label><textarea id="cContractAddr" rows="2" placeholder="用于合同正文的甲方地址">