编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>校服采购</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
        body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#f5f5f5;max-width:430px;margin:0 auto;min-height:100vh;position:relative}
        .page{display:none}.page.active{display:block}
        
        /* 状态栏 */
        .status-bar{height:24px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:12px;color:#333}
        
        /* 头部 */
        .header{background:#fff;padding:12px 16px;position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px}
        .search-box{flex:1;background:#f5f5f5;border-radius:20px;padding:8px 16px;display:flex;align-items:center;gap:8px;cursor:pointer}
        .search-input{width:16px;height:16px;border:2px solid #ccc;border-radius:50%;position:relative}
        .search-input::after{content:'';position:absolute;right:-4px;bottom:-4px;width:6px;height:2px;background:#ccc;transform:rotate(45deg)}
        .search-box input{border:none;background:transparent;flex:1;font-size:14px;outline:none}
        .back-btn{font-size:22px;color:#333;cursor:pointer;font-weight:300}
        .page-title{font-size:16px;font-weight:600;color:#333}
        
        /* 轮播图 */
        .banner{position:relative;height:150px;overflow:hidden;background:#fff}
        .banner-slide{position:absolute;width:100%;height:100%;opacity:0;transition:opacity 0.4s ease}
        .banner-slide.active{opacity:1}
        .banner-slide img{width:100%;height:100%;object-fit:cover}
        .banner-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
        .banner-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5)}
        .banner-dot.active{background:#fff}
        
        /* 通知栏 */
        .notice-bar{background:#fff;padding:10px 16px;display:flex;align-items:center;gap:10px;font-size:12px}
        .notice-icon{width:16px;height:16px;background:#e64340;border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:600}
        .notice-text{flex:1;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        
        /* 金刚区 */
        .category-grid{background:#fff;padding:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
        .category-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
        .category-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
        .category-item span{font-size:11px;color:#333}
        
        /* 区块 */
        .section{background:#fff;margin-top:10px}
        .section-header{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f0f0}
        .section-title{font-size:15px;font-weight:600;color:#333}
        .section-more{font-size:12px;color:#999;display:flex;align-items:center}
        .section-more::after{content:'';width:6px;height:6px;border-top:1px solid #999;border-right:1px solid #999;transform:rotate(45deg);margin-left:4px}
        
        /* 商品网格 */
        .product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px 16px}
        .product-card{background:#fff;border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
        .product-img{width:100%;aspect-ratio:1;background:#f5f5f5;overflow:hidden}
        .product-img img{width:100%;height:100%;object-fit:cover}
        .product-info{padding:10px}
        .product-name{font-size:13px;color:#333;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .product-price{color:#e64340;font-size:15px;font-weight:600;margin-top:6px}
        .product-price small{font-size:11px}
        
        /* 推荐海报 */
        .poster-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px}
        .poster-item{height:100px;border-radius:8px;overflow:hidden;cursor:pointer}
        .poster-item img{width:100%;height:100%;object-fit:cover}
        
        /* 分类页 */
        .category-layout{display:flex;height:calc(100vh - 140px)}
        .category-sidebar{width:75px;background:#f5f5f5;overflow-y:auto}
        .sidebar-item{padding:14px 8px;text-align:center;font-size:13px;color:#666;cursor:pointer;border-left:3px solid transparent}
        .sidebar-item.active{background:#fff;color:#e64340;border-left-color:#e64340;font-weight:500}
        .category-content{flex:1;padding:12px;overflow-y:auto;background:#fff}
        .sub-title{font-size:13px;color:#333;font-weight:500;margin-bottom:10px}
        .sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
        .sub-item{display:flex;flex-direction:column;align-items:center;gap:6px}
        .sub-img{width:50px;height:50px;border-radius:8px;overflow:hidden;background:#f5f5f5}
        .sub-img img{width:100%;height:100%;object-fit:cover}
        .sub-item span{font-size:11px;color:#666}
        
        /* 商品详情 */
        .detail-banner{height:300px;background:#f5f5f5;position:relative}
        .detail-banner img{width:100%;height:100%;object-fit:cover}
        .detail-indicator{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
        .detail-indicator span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.6)}
        .detail-indicator span.active{background:#fff}
        .detail-info{background:#fff;padding:16px}
        .detail-price{color:#e64340;font-size:22px;font-weight:600}
        .detail-name{font-size:15px;color:#333;margin-top:10px;line-height:1.5}
        .detail-sub{font-size:12px;color:#999;margin-top:6px}
        .size-section{background:#fff;margin-top:10px;padding:16px}
        .size-title{font-size:14px;font-weight:600;color:#333;margin-bottom:12px}
        .size-table{width:100%;border-collapse:collapse;font-size:12px}
        .size-table th,.size-table td{padding:8px 6px;text-align:center;border:1px solid #eee}
        .size-table th{background:#fafafa;color:#666;font-weight:500}
        .size-table td{color:#333}
        .desc-section{background:#fff;margin-top:10px;padding:16px}
        .desc-title{font-size:14px;font-weight:600;color:#333;margin-bottom:10px}
        .desc-content{font-size:13px;color:#666;line-height:1.8}
        .detail-footer{position:fixed;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;background:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee;z-index:20}
        .footer-cart{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 16px}
        .cart-icon{width:24px;height:24px;color:#666}
        .cart-icon svg{width:100%;height:100%;fill:currentColor}
        .cart-badge{position:absolute;top:-4px;right:8px;background:#e64340;color:#fff;font-size:10px;padding:2px 5px;border-radius:10px;min-width:16px;text-align:center}
        .cart-text{font-size:10px;color:#666}
        .add-cart-btn{background:#e64340;color:#fff;padding:10px 28px;border-radius:20px;font-size:14px;border:none;cursor:pointer}
        
        /* 规格选择 */
        .spec-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:none;align-items:flex-end;z-index:100}
        .spec-modal.active{display:flex}
        .spec-content{background:#fff;width:100%;max-height:75%;border-radius:16px 16px 0 0;padding:20px;overflow-y:auto}
        .spec-header{display:flex;gap:12px;margin-bottom:16px}
        .spec-img{width:80px;height:80px;border-radius:8px;overflow:hidden;background:#f5f5f5}
        .spec-img img{width:100%;height:100%;object-fit:cover}
        .spec-info{flex:1;padding-top:8px}
        .spec-price{color:#e64340;font-size:18px;font-weight:600}
        .spec-stock{font-size:12px;color:#999;margin-top:4px}
        .spec-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#999;cursor:pointer}
        .spec-section{margin-bottom:14px}
        .spec-title{font-size:13px;color:#333;margin-bottom:8px}
        .spec-options{display:flex;flex-wrap:wrap;gap:8px}
        .spec-option{padding:8px 16px;border:1px solid #ddd;border-radius:4px;font-size:13px;cursor:pointer;background:#fff}
        .spec-option.active{border-color:#e64340;color:#e64340;background:#fff5f5}
        .spec-confirm{background:#e64340;color:#fff;width:100%;padding:14px;border:none;border-radius:8px;font-size:15px;cursor:pointer}
        
        /* 采购清单 */
        .cart-list{background:#fff}
        .cart-item{display:flex;padding:14px 16px;gap:12px;border-bottom:1px solid #f5f5f5}
        .cart-img{width:75px;height:75px;border-radius:6px;overflow:hidden;background:#f5f5f5;flex-shrink:0}
        .cart-img img{width:100%;height:100%;object-fit:cover}
        .cart-info{flex:1}
        .cart-name{font-size:13px;color:#333;line-height:1.4}
        .cart-spec{font-size:11px;color:#999;margin-top:4px}
        .cart-price{color:#e64340;font-size:14px;font-weight:600;margin-top:6px}
        .cart-actions{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
        .cart-del{font-size:18px;color:#ccc;cursor:pointer}
        .cart-num{display:flex;align-items:center;gap:10px}
        .cart-num button{width:24px;height:24px;border:1px solid #ddd;border-radius:4px;background:#fff;font-size:14px;cursor:pointer}
        .cart-num span{min-width:20px;text-align:center;font-size:14px}
        .cart-footer{position:fixed;bottom:50px;left:0;right:0;max-width:430px;margin:0 auto;background:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee;z-index:20}
        .cart-total{font-size:14px;color:#333}
        .cart-total span{color:#e64340;font-size:18px;font-weight:600}
        .checkout-btn{background:#e64340;color:#fff;padding:10px 24px;border-radius:20px;font-size:14px;border:none;cursor:pointer}
        
        /* 订单确认 */
        .address-box{background:#fff;padding:16px;display:flex;align-items:center;justify-content:space-between}
        .address-info{flex:1}
        .address-top{display:flex;align-items:center;gap:8px}
        .address-name{font-size:15px;color:#333;font-weight:500}
        .address-phone{font-size:14px;color:#666}
        .address-detail{font-size:12px;color:#999;margin-top:4px;line-height:1.4}
        .address-arrow{color:#ccc;font-size:14px}
        .order-list{background:#fff;margin-top:10px}
        .order-shop{padding:12px 16px;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;gap:6px}
        .shop-name{font-size:13px;color:#333;font-weight:500}
        .order-item{padding:12px 16px;display:flex;gap:10px;border-bottom:1px solid #f5f5f5}
        .order-img{width:60px;height:60px;border-radius:6px;overflow:hidden;background:#f5f5f5;flex-shrink:0}
        .order-img img{width:100%;height:100%;object-fit:cover}
        .order-info{flex:1}
        .order-name{font-size:13px;color:#333;line-height:1.4}
        .order-spec{font-size:11px;color:#999;margin-top:4px}
        .order-bottom{display:flex;justify-content:space-between;margin-top:6px}
        .order-price{color:#e64340;font-size:14px}
        .order-num{color:#999;font-size:12px}
        .remark-box{background:#fff;margin-top:10px;padding:14px 16px}
        .remark-title{font-size:13px;color:#333;margin-bottom:8px}
        .remark-input{width:100%;border:none;font-size:13px;color:#333;outline:none;resize:none;height:50px}
        .order-footer{position:fixed;bottom:50px;left:0;right:0;max-width:430px;margin:0 auto;background:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee;z-index:20}
        .order-total{font-size:14px;color:#333}
        .order-total span{color:#e64340;font-size:18px;font-weight:600}
        .submit-btn{background:#e64340;color:#fff;padding:12px 32px;border-radius:24px;font-size:14px;border:none;cursor:pointer}
        
        /* 订单管理 */
        .order-tabs{background:#fff;padding:0 16px;display:flex;border-bottom:1px solid #f0f0f0}
        .order-tab{flex:1;padding:12px 0;text-align:center;font-size:13px;color:#666;cursor:pointer;position:relative}
        .order-tab.active{color:#e64340;font-weight:500}
        .order-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:40px;height:2px;background:#e64340;border-radius:2px}
        .order-card{background:#fff;border-radius:8px;margin:12px 16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
        .order-card-header{padding:12px 14px;display:flex;justify-content:space-between;border-bottom:1px solid #f5f5f5}
        .order-no{font-size:11px;color:#999}
        .order-status{font-size:12px;color:#e64340}
        .order-card-body{padding:12px 14px}
        .order-goods{display:flex;flex-direction:column;gap:10px}
        .order-good{display:flex;gap:10px}
        .goods-img{width:50px;height:50px;border-radius:4px;overflow:hidden;background:#f5f5f5;flex-shrink:0}
        .goods-img img{width:100%;height:100%;object-fit:cover}
        .goods-info{flex:1}
        .goods-name{font-size:12px;color:#333;line-height:1.3}
        .goods-spec{font-size:11px;color:#999;margin-top:2px}
        .goods-bottom{display:flex;justify-content:space-between;margin-top:4px}
        .goods-price{font-size:12px;color:#333}
        .goods-num{font-size:11px;color:#999}
        .order-card-footer{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f5f5f5}
        .total-price{font-size:12px;color:#333}
        .total-price span{color:#e64340;font-size:14px;font-weight:600}
        .order-btns{display:flex;gap:8px}
        .order-btn{padding:6px 12px;border-radius:4px;font-size:11px;cursor:pointer}
        .order-btn.default{border:1px solid #ddd;color:#666;background:#fff}
        .order-btn.primary{border:1px solid #e64340;color:#e64340;background:#fff}
        
        /* 我的页面 */
        .profile-header{background:linear-gradient(135deg,#f8d474 0%,#ffeaa7 100%);padding:30px 20px 35px;position:relative}
        .profile-info{display:flex;align-items:center;gap:14px}
        .profile-avatar{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
        .profile-text h3{font-size:17px;color:#333;font-weight:600}
        .profile-text p{font-size:12px;color:#999;margin-top:4px}
        .profile-assets{background:#fff;margin:-20px 16px 0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);position:relative;z-index:2}
        .asset-row{display:flex}
        .asset-item{flex:1;padding:16px;text-align:center}
        .asset-item:not(:last-child){border-right:1px solid #f5f5f5}
        .asset-value{font-size:16px;font-weight:600;color:#333}
        .asset-label{font-size:11px;color:#999;margin-top:4px}
        .order-quick{background:#fff;margin:12px 16px;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
        .quick-tabs{padding:14px 0;display:flex;justify-content:space-around}
        .quick-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
        .quick-icon{font-size:20px}
        .quick-item span{font-size:11px;color:#666}
        .menu-section{background:#fff;margin:0 16px 16px;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
        .menu-title{padding:14px 16px;font-size:14px;font-weight:600;color:#333;border-bottom:1px solid #f5f5f5}
        .menu-list{display:grid;grid-template-columns:repeat(4,1fr)}
        .menu-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;cursor:pointer}
        .menu-icon{font-size:20px}
        .menu-item span{font-size:11px;color:#666}
        
        /* 收货地址 */
        .address-list{background:#fff}
        .address-card{padding:14px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer}
        .address-card-top{display:flex;justify-content:space-between;margin-bottom:6px}
        .addr-name{font-size:15px;color:#333;font-weight:500}
        .addr-phone{font-size:14px;color:#666}
        .addr-detail{font-size:12px;color:#999;line-height:1.5}
        .addr-actions{display:flex;gap:16px;margin-top:10px}
        .addr-action{font-size:12px;color:#666;cursor:pointer}
        .add-addr-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px;color:#e64340;font-size:14px;cursor:pointer}
        
        /* 帮助中心 */
        .help-list{background:#fff}
        .help-item{padding:14px 16px;border-bottom:1px solid #f5f5f5;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#333;cursor:pointer}
        .help-item::after{content:'>';color:#ccc;font-size:14px}
        .help-detail{padding:14px 16px;background:#fff;font-size:13px;color:#666;line-height:1.8;display:none}
        
        /* 搜索页 */
        .search-header{display:flex;padding:10px 16px;background:#fff;align-items:center;gap:10px}
        .search-input-box{flex:1;display:flex;background:#f5f5f5;border-radius:20px;padding:8px 14px;align-items:center;gap:8px}
        .search-input-box input{border:none;flex:1;font-size:14px;background:transparent;outline:none}
        .cancel-btn{color:#666;font-size:14px;cursor:pointer}
        .hot-search{padding:16px}
        .hot-title{font-size:13px;color:#999;margin-bottom:10px}
        .hot-tags{display:flex;flex-wrap:wrap;gap:8px}
        .hot-tag{padding:6px 14px;background:#f5f5f5;border-radius:14px;font-size:12px;color:#333;cursor:pointer}
        
        /* 底部导航 */
        .bottom-nav{position:fixed;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;background:#fff;display:flex;justify-content:space-around;padding:6px 0;border-top:1px solid #eee;z-index:50}
        .nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 0}
        .nav-icon{width:22px;height:22px;color:#999}
        .nav-icon svg{width:100%;height:100%;fill:currentColor}
        .nav-item span{font-size:10px;color:#999}
        .nav-item.active .nav-icon,.nav-item.active span{color:#e64340}
        
        /* Toast */
        .toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.7);color:#fff;padding:12px 24px;border-radius:6px;font-size:14px;z-index:200;display:none}
        .toast.show{display:block}
        
        /* 空状态 */
        .empty-state{display:flex;flex-direction:column;align-items:center;padding:60px 20px;color:#999}
        .empty-icon{width:60px;height:60px;margin-bottom:16px}
        .empty-icon svg{width:100%;height:100%;fill:#ddd}
        .empty-state p{font-size:14px}
        
        /* 弹窗 */
        .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:100}
        .modal-overlay.active{display:flex}
        .modal-box{background:#fff;border-radius:12px;padding:24px;max-width:280px;text-align:center}
        .modal-title{font-size:16px;font-weight:600;color:#333;margin-bottom:10px}
        .modal-text{font-size:14px;color:#666;margin-bottom:20px}
        .modal-btns{display:flex;gap:12px}
        .modal-btn{flex:1;padding:10px;border-radius:6px;font-size:14px;border:none;cursor:pointer}
        .modal-btn.cancel{background:#f5f5f5;color:#666}
        .modal-btn.confirm{background:#e64340;color:#fff}
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="page-home" class="page active">
        <div class="status-bar"><span>9:41</span><span>5G</span></div>
        <div class="header">
            <div class="search-box" onclick="goPage('page-search')">
                <div class="search-input"></div>
                <input type="text" placeholder="搜索校服商品" readonly>
            </div>
        </div>
        <div class="banner">
            <div class="banner-slide active"><img src="imgs/img10.jpg" alt=""></div>
            <div class="banner-slide"><img src="imgs/img4.jpg" alt=""></div>
            <div class="banner-slide"><img src="imgs/img7.jpg" alt=""></div>
            <div class="banner-dots"><span class="banner-dot active"></span><span class="banner-dot"></span><span class="banner-dot"></span></div>
        </div>
        <div class="notice-bar">
            <div class="notice-icon">公告</div>
            <div class="notice-text">2026年秋季校服采购火热进行中，欢迎各位家长选购</div>
        </div>
        <div class="category-grid">
            <div class="category-item" onclick="goPage('page-category')"><div class="category-icon" style="background:#fff3e0;color:#ff6b00;">夏</div><span>夏季校服</span></div>
            <div class="category-item" onclick="goPage('page-category')"><div class="category-icon" style="background:#e3f2fd;color:#1976d2;">冬</div><span>冬季校服</span></div>
            <div class="category-item" onclick="goPage('page-category')"><div class="category-icon" style="background:#f3e5f5;color:#7b1fa2;">春</div><span>春秋校服</span></div>
            <div class="category-item" onclick="goPage('page-category')"><div class="category-icon" style="background:#e8f5e9;color:#388e3c;">动</div><span>运动装</span></div>
            <div class="category-item" onclick="goPage('page-category')"><div class="category-icon" style="background:#fff8e1;color:#f57c00;">套</div><span>校服套装</span></div>
        </div>
        <div class="section">
            <div class="section-header"><span class="section-title">店长推荐</span><span class="section-more" onclick="goPage('page-category')">更多</span></div>
            <div class="poster-grid">
                <div class="poster-item" onclick="goPage('page-detail')"><img src="imgs/img1.jpg" alt=""></div>
                <div class="poster-item" onclick="goPage('page-detail')"><img src="imgs/img3.jpg" alt=""></div>
            </div>
        </div>
        <div class="section">
            <div class="section-header"><span class="section-title">全部校服</span><span class="section-more">最新上架</span></div>
            <div class="product-grid">
                <div class="product-card" onclick="goPage('page-detail')">
                    <div class="product-img"><img src="imgs/img1.jpg" alt=""></div>
                    <div class="product-info"><div class="product-name">藏青红白拼接运动校服套装</div><div class="product-price"><small>¥</small>198</div></div>
                </div>
                <div class="product-card" onclick="goPage('page-detail')">
                    <div class="product-img"><img src="imgs/img2.jpg" alt=""></div>
                    <div class="product-info"><div class="product-name">红灰配色运动校服POLO衫</div><div class="product-price"><small>¥</small>128</div></div>
                </div>
                <div class="product-card" onclick="goPage('page-detail')">
                    <div class="product-img"><img src="imgs/img4.jpg" alt=""></div>
                    <div class="product-info"><div class="product-name">藏青酒红白三色冲锋衣校服</div><div class="product-price"><small>¥</small>268</div></div>
                </div>
                <div class="product-card" onclick="goPage('page-detail')">
                    <div class="product-img"><img src="imgs/img5.jpg" alt=""></div>
                    <div class="product-info"><div class="product-name">深蓝紫丁香配色三合一冲锋衣</div><div class="product-price"><small>¥</small>298</div></div>
                </div>
            </div>
        </div>
        <div style="height:50px;"></div>
    </div>

    <!-- 分类页 -->
    <div id="page-category" class="page">
        <div class="status-bar"><span>9:41</span><span>5G</span></div>
        <div class="header">
            <span class="back-btn" onclick="goBack()"><</span>
            <span class="page-title">全部分类</span>
            <span style="width:20px;"></span>
        </div>
        <div class="category-layout">
            <div class="category-sidebar">
                <div class="sidebar-item active" onclick="selectCate(this)">全部</div>
                <div class="sidebar-item" onclick="selectCate(this)">夏季校服</div>
                <div class="sidebar-item" onclick="selectCate(this)">冬季校服</div>
                <div class="sidebar-item" onclick="selectCate(this)">春秋校服</div>
                <div class="sidebar-item" onclick="selectCate(this)">运动装</div>
                <div class="sidebar-item" onclick="selectCate(this)">上装</div>
                <div class="sidebar-item" onclick="selectCate(this)">下装</div>
                <div class="sidebar-item" onclick="selectCate(this)">配件</div>
            </div>
            <div class="category-content">
                <div class="sub-title">热门分类</div>
                <div class="sub-grid">
                    <div class="sub-item" onclick="goPage('page-detail')"><div class="sub-img"><img src="imgs/img1.jpg" alt=""></div><span>运动套装</span></div>
                    <div class="sub-item" onclick="goPage('page-detail')"><div class="sub-img"><img src="imgs/img7.jpg" alt=""></div><span>冲锋衣</span></div>
                    <div class="sub-item" onclick="goPage('page-detail')"><div class="sub-img"><img src="imgs/img2.jpg" alt=""></div><span>POLO衫</span></div>
                    <div class="sub-item" onclick="goPage('page-detail')"><div class="sub-img"><img src="imgs/img5.jpg" alt=""></div><span>三合一</span></div>
                    <div class="sub-item" onclick="goPage('page-detail')"><div class="sub-img"><img src="imgs/img4.jpg" alt=""></div><span>加绒款</span></div>
                    <div class="sub-item" onclick="goPage('page-detail')"><div class="sub-img"><img src="imgs/img8.jpg" alt=""></div><span>棒球服</span></div>
                </div>
                <div class="sub-title" style="margin-top:16px;">新品推荐</div>
                <div class="sub-grid">
                    <div class="sub-item" onclick="goPage('page-detail')"><div class="sub-img"><img src="imgs/img6.jpg" alt=""></div><span>绿野之上</span></div>
                    <div class="sub-item" onclick="goPage('page-detail')"><div class="sub-img"><img src="imgs/img9.jpg" alt=""></div><span>丁香结</span></div>
                    <div class="sub-item" onclick="goPage('page-detail')"><div class="sub-img"><img src="imgs/img10.jpg" alt=""></div><span>雨后精灵</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品详情 -->
    <div id="page-detail" class="page">
        <div class="header" style="background:#fff;">
            <span class="back-btn" onclick="goBack()"><</span>
            <span class="page-title">商品详情</span>
            <span style="width:20px;"></span>
        </div>
        <div class="detail-banner">
            <img src="imgs/img1.jpg" alt="">
            <div class="detail-indicator"><span class="active"></span><span></span><span></span></div>
        </div>
        <div class="detail-info">
            <div class="detail-price">¥198</div>
            <div class="detail-name">藏青红白拼接运动校服套装 棒球服风格</div>
            <div class="detail-sub">面料：优质棉混纺 | 工艺：精细做工</div>
        </div>
        <div class="size-section">
            <div class="size-title">尺码对照表</div>
            <table class="size-table">
                <tr><th>尺码</th><th>身高范围</th><th>胸围</th><th>腰围</th></tr>
                <tr><td>110</td><td>105-115cm</td><td>60cm</td><td>54cm</td></tr>
                <tr><td>120</td><td>115-125cm</td><td>64cm</td><td>58cm</td></tr>
                <tr><td>130</td><td>125-135cm</td><td>68cm</td><td>62cm</td></tr>
                <tr><td>140</td><td>135-145cm</td><td>72cm</td><td>66cm</td></tr>
                <tr><td>150</td><td>145-155cm</td><td>76cm</td><td>70cm</td></tr>
                <tr><td>160</td><td>155-165cm</td><td>80cm</td><td>74cm</td></tr>
            </table>
        </div>
        <div class="desc-section">
            <div class="desc-title">商品详情</div>
            <div class="desc-content">
                <p>面料：优质棉混纺面料，透气舒适，耐磨耐洗</p>
                <p>工艺：精细做工，走线整齐，纽扣牢固</p>
                <p>洗涤说明：可机洗，建议30度水温，轻柔模式</p>
                <p>设计特点：经典棒球服风格，藏青与红白撞色设计，时尚大方</p>
            </div>
        </div>
        <div style="height:60px;"></div>
        <div class="detail-footer">
            <div class="footer-cart" onclick="goPage('page-cart')">
                <span class="cart-icon"><svg 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.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></span>
                <span class="cart-text">采购清单</span>
            </div>
            <button class="add-cart-btn" onclick="showSpecModal()">加入采购清单</button>
        </div>
    </div>

    <!-- 规格选择弹窗 -->
    <div id="spec-modal" class="spec-modal">
        <div class="spec-content">
            <div class="spec-header">
                <div class="spec-img"><img src="imgs/img1.jpg" alt=""></div>
                <div class="spec-info">
                    <div class="spec-price">¥198</div>
                    <div class="spec-stock">库存：500件</div>
                </div>
                <span class="spec-close" onclick="closeSpecModal()">×</span>
            </div>
            <div class="spec-section">
                <div class="spec-title">选择尺码</div>
                <div class="spec-options">
                    <span class="spec-option" onclick="selSpec(this)">110</span>
                    <span class="spec-option" onclick="selSpec(this)">120</span>
                    <span class="spec-option" onclick="selSpec(this)">130</span>
                    <span class="spec-option active" onclick="selSpec(this)">140</span>
                    <span class="spec-option" onclick="selSpec(this)">150</span>
                    <span class="spec-option" onclick="selSpec(this)">160</span>
                </div>
            </div>
            <div class="spec-section">
                <div class="spec-title">选择数量</div>
                <div class="spec-options">
                    <span class="spec-option active" onclick="selQty(this)">1</span>
                    <span class="spec-option" onclick="selQty(this)">2</span>
                    <span class="spec-option" onclick="selQty(this)">3</span>
                    <span class="spec-option" onclick="selQty(this)">4</span>
                    <span class="spec-option" onclick="selQty(this)">5</span>
                </div>
            </div>
            <button class="spec-confirm" onclick="addToCart()">确定加入</button>
        </div>
    </div>

    <!-- 采购清单 -->
    <div id="page-cart" class="page">
        <div class="status-bar"><span>9:41</span><span>5G</span></div>
        <div class="header">
            <span class="back-btn" onclick="goBack()"><</span>
            <span class="page-title">采购清单</span>
            <span style="width:20px;"></span>
        </div>
        <div class="cart-list" id="cart-list">
            <div class="cart-item">
                <div class="cart-img"><img src="imgs/img1.jpg" alt=""></div>
                <div class="cart-info">
                    <div class="cart-name">藏青红白拼接运动校服套装</div>
                    <div class="cart-spec">尺码：140</div>
                    <div class="cart-price">¥198</div>
                </div>
                <div class="cart-actions">
                    <span class="cart-del" onclick="delCart(this)">×</span>
                    <div class="cart-num"><button onclick="chgNum(this,-1)">-</button><span>1</span><button onclick="chgNum(this,1)">+</button></div>
                </div>
            </div>
            <div class="cart-item">
                <div class="cart-img"><img src="imgs/img2.jpg" alt=""></div>
                <div class="cart-info">
                    <div class="cart-name">红灰配色运动校服POLO衫</div>
                    <div class="cart-spec">尺码：150</div>
                    <div class="cart-price">¥128</div>
                </div>
                <div class="cart-actions">
                    <span class="cart-del" onclick="delCart(this)">×</span>
                    <div class="cart-num"><button onclick="chgNum(this,-1)">-</button><span>2</span><button onclick="chgNum(this,1)">+</button></div>
                </div>
            </div>
        </div>
        <div class="empty-state" id="cart-empty" style="display:none;">
            <div class="empty-icon"><svg 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.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></div>
            <p>采购清单是空的</p>
            <p style="margin-top:10px;color:#e64340;" onclick="goPage('page-home')">去逛逛</p>
        </div>
        <div style="height:60px;"></div>
        <div class="cart-footer">
            <div class="cart-total">合计：<span id="cart-total">454</span></div>
            <button class="checkout-btn" onclick="goPage('page-order')">去确认</button>
        </div>
    </div>

    <!-- 订单确认 -->
    <div id="page-order" class="page">
        <div class="status-bar"><span>9:41</span><span>5G</span></div>
        <div class="header">
            <span class="back-btn" onclick="goBack()"><</span>
            <span class="page-title">确认订单</span>
            <span style="width:20px;"></span>
        </div>
        <div class="address-box">
            <div class="address-info">
                <div class="address-top"><span class="address-name">王小明</span><span class="address-phone">138****8000</span></div>
                <div class="address-detail">三年级二班</div>
            </div>
            <span class="address-arrow">></span>
        </div>
        <div class="order-list">
            <div class="order-shop"><span class="shop-name">校服专营店</span></div>
            <div class="order-item">
                <div class="order-img"><img src="imgs/img1.jpg" alt=""></div>
                <div class="order-info">
                    <div class="order-name">藏青红白拼接运动校服套装</div>
                    <div class="order-spec">尺码：140 × 1</div>
                    <div class="order-bottom"><span class="order-price">¥198</span><span class="order-num">×1</span></div>
                </div>
            </div>
            <div class="order-item">
                <div class="order-img"><img src="imgs/img2.jpg" alt=""></div>
                <div class="order-info">
                    <div class="order-name">红灰配色运动校服POLO衫</div>
                    <div class="order-spec">尺码：150 × 2</div>
                    <div class="order-bottom"><span class="order-price">¥256</span><span class="order-num">×2</span></div>
                </div>
            </div>
        </div>
        <div class="remark-box">
            <div class="remark-title">订单备注</div>
            <textarea class="remark-input" placeholder="如有特殊尺码需求或其他要求，请在此说明">
编辑页面

点击登录账号
