中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
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> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="app"> <!-- 首页 --> <div id="home" class="page active"> <div class="product-header"> <img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=750&h=750&fit=crop" alt="特价苹果" class="product-image"> <div class="product-badge">特价促销</div> <button class="back-btn">←</button> </div> <div class="product-info"> <div class="product-price"> <span class="current-price">¥19.9</span> <span class="original-price">¥39.9</span> <span class="discount-tag">5折</span> </div> <h1 class="product-title">【特价特卖】陕西红富士苹果 脆甜多汁 新鲜当季水果 5斤装</h1> <div class="product-tags"> <span>7天无理由退换</span> <span>正品保证</span> <span>极速发货</span> </div> </div> <div class="product-detail"> <div class="detail-title">商品详情</div> <div class="detail-content"> <img src="https://images.unsplash.com/photo-1579613832125-5d34a13ffe2a?w=750&h=500&fit=crop" alt="苹果详情1"> <img src="https://images.unsplash.com/photo-1584306670957-acf935f5033c?w=750&h=600&fit=crop" alt="苹果详情2"> <img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=750&h=400&fit=crop" alt="苹果详情3"> </div> </div> <div class="product-footer"> <div class="footer-left"> <div class="service-btn"> <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg> <span>客服</span> </div> <div class="collect-btn"> <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg> <span>收藏</span> </div> </div> <div class="footer-right"> <button class="add-cart-btn">加入购物车</button> <button class="buy-now-btn">立即购买</button> </div> </div> </div> <!-- 消息页面 --> <div id="message" class="page"> <div class="page-header"> <h1>消息通知</h1> </div> <div class="message-tabs"> <div class="tab-item active" data-tab="delivery">发货通知</div> <div class="tab-item" data-tab="order">下单成功</div> </div> <div class="message-list" id="delivery-list"> <div class="message-item"> <div class="message-icon delivery-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M18 18.5V17h-12v1.5h12zm0-3.5V13.5h-12v1.5h12zm0-3.5V10h-12v1.5h12zm-6 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm6.19 3.49l-1.12-.56C15.78 20.68 14.26 21 13 21c-3.31 0-6-2.69-6-6 0-1.87.86-3.55 2.2-4.67L9.84 10c-.22-.27-.38-.58-.5-.9C8.53 7.62 8 6.35 8 5c0-3.31 2.69-6 6-6s6 2.69 6 6c0 1.35-.53 2.62-1.34 4.1-.12.32-.28.63-.5.9l-.66.33V6h2v12h-1.67z"/></svg> </div> <div class="message-content"> <div class="message-title">您的订单已发货</div> <div class="message-desc">订单号：DD20260422001 顺丰快递 SF1234567890</div> <div class="message-time">10:30</div> </div> </div> <div class="message-item"> <div class="message-icon delivery-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M18 18.5V17h-12v1.5h12zm0-3.5V13.5h-12v1.5h12zm0-3.5V10h-12v1.5h12zm-6 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm6.19 3.49l-1.12-.56C15.78 20.68 14.26 21 13 21c-3.31 0-6-2.69-6-6 0-1.87.86-3.55 2.2-4.67L9.84 10c-.22-.27-.38-.58-.5-.9C8.53 7.62 8 6.35 8 5c0-3.31 2.69-6 6-6s6 2.69 6 6c0 1.35-.53 2.62-1.34 4.1-.12.32-.28.63-.5.9l-.66.33V6h2v12h-1.67z"/></svg> </div> <div class="message-content"> <div class="message-title">您的订单已发货</div> <div class="message-desc">订单号：DD20260421045 中通快递 ZT9876543210</div> <div class="message-time">昨天 15:22</div> </div> </div> <div class="message-item"> <div class="message-icon delivery-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M18 18.5V17h-12v1.5h12zm0-3.5V13.5h-12v1.5h12zm0-3.5V10h-12v1.5h12zm-6 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm6.19 3.49l-1.12-.56C15.78 20.68 14.26 21 13 21c-3.31 0-6-2.69-6-6 0-1.87.86-3.55 2.2-4.67L9.84 10c-.22-.27-.38-.58-.5-.9C8.53 7.62 8 6.35 8 5c0-3.31 2.69-6 6-6s6 2.69 6 6c0 1.35-.53 2.62-1.34 4.1-.12.32-.28.63-.5.9l-.66.33V6h2v12h-1.67z"/></svg> </div> <div class="message-content"> <div class="message-title">您的订单已发货</div> <div class="message-desc">订单号：DD20260419088 圆通快递 YT5678901234</div> <div class="message-time">4月19日</div> </div> </div> </div> <div class="message-list hidden" id="order-list"> <div class="message-item"> <div class="message-icon order-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"/></svg> </div> <div class="message-content"> <div class="message-title">下单成功</div> <div class="message-desc">感谢您的购买！订单号：DD20260422015</div> <div class="message-time">09:15</div> </div> </div> <div class="message-item"> <div class="message-icon order-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"/></svg> </div> <div class="message-content"> <div class="message-title">下单成功</div> <div class="message-desc">感谢您的购买！订单号：DD20260421032</div> <div class="message-time">昨天 18:45</div> </div> </div> <div class="message-item"> <div class="message-icon order-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"/></svg> </div> <div class="message-content"> <div class="message-title">下单成功</div> <div class="message-desc">感谢您的购买！订单号：DD20260420056</div> <div class="message-time">4月20日</div> </div> </div> </div> </div> <!-- 我的页面 --> <div id="profile" class="page"> <div class="profile-header"> <div class="user-info"> <div class="avatar"> <img src="https://picsum.photos/120/120?random=10" alt="头像"> </div> <div class="user-detail"> <div class="user-name">张小明</div> <div class="vip-badge"> <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <span>黄金会员</span> </div> </div> </div> <button class="edit-btn">编辑资料</button> </div> <div class="vip-card"> <div class="vip-left"> <div class="vip-title">会员权益</div> <div class="vip-desc">专享折扣 · 积分翻倍 · 专属客服</div> </div> <button class="vip-btn">立即升级</button> </div> <div class="order-section"> <div class="section-header"> <span class="section-title">我的订单</span> <span class="section-more">全部订单 ></span> </div> <div class="order-status"> <div class="status-item"> <div class="status-icon"> <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg> </div> <span>待付款</span> </div> <div class="status-item"> <div class="status-icon"> <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M18 18.5V17h-12v1.5h12zm0-3.5V13.5h-12v1.5h12zm0-3.5V10h-12v1.5h12zm-6 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg> </div> <span>待发货</span> </div> <div class="status-item"> <div class="status-icon"> <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> </div> <span>待收货</span> </div> <div class="status-item"> <div class="status-icon"> <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> </div> <span>待评价</span> </div> </div> </div> <div class="menu-section"> <div class="menu-item" onclick="showSubPage('address')"> <div class="menu-icon address-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg> </div> <span>我的地址</span> <svg class="arrow-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </div> <div class="menu-item" onclick="showSubPage('coupon')"> <div class="menu-icon coupon-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/></svg> </div> <span>优惠券</span> <span class="badge">3</span> <svg class="arrow-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </div> <div class="menu-item" onclick="showSubPage('pickup')"> <div class="menu-icon pickup-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M3 5v14h18V5H3zm16 12H5V7h14v10zM7 9h2v2H7V9zm0 4h2v2H7v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"/></svg> </div> <span>提货二维码</span> <svg class="arrow-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </div> <div class="menu-item" onclick="showSubPage('service')"> <div class="menu-icon service-icon"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg> </div> <span>联系客服</span> <svg class="arrow-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </div> </div> </div> <!-- 子页面：地址管理 --> <div id="address-page" class="sub-page"> <div class="sub-header"> <button class="back-btn" onclick="hideSubPage()">←</button> <h1>收货地址</h1> <button class="add-btn">新增</button> </div> <div class="address-list"> <div class="address-item default"> <div class="address-main"> <div class="address-user"> <span>张小明</span> <span class="default-tag">默认</span> </div> <div class="address-phone">138****8888</div> <div class="address-detail">广东省深圳市南山区科技园南区高新南七道R2-B栋3楼</div> </div> <button class="edit-address-btn">编辑</button> </div> <div class="address-item"> <div class="address-main"> <div class="address-user">李小红</div> <div class="address-phone">139****6666</div> <div class="address-detail">北京市朝阳区望京SOHO T3 20层</div> </div> <button class="edit-address-btn">编辑</button> </div> <div class="address-item"> <div class="address-main"> <div class="address-user">王大力</div> <div class="address-phone">137****5555</div> <div class="address-detail">上海市浦东新区陆家嘴环路1000号</div> </div> <button class="edit-address-btn">编辑</button> </div> </div> </div> <!-- 子页面：优惠券 --> <div id="coupon-page" class="sub-page"> <div class="sub-header"> <button class="back-btn" onclick="hideSubPage()">←</button> <h1>我的优惠券</h1> </div> <div class="coupon-tabs"> <div class="coupon-tab active">可用(3)</div> <div class="coupon-tab">已用(1)</div> <div class="coupon-tab">已过期(2)</div> </div> <div class="coupon-list"> <div class="coupon-card"> <div class="coupon-left"> <div class="coupon-price">¥<span>20</span></div> <div class="coupon-condition">满99可用</div> </div> <div class="coupon-right"> <div class="coupon-name">新人专享券</div> <div class="coupon-time">有效期至 2026.05.01</div> <div class="coupon-desc">全品类通用</div> </div> <div class="coupon-use">立即使用</div> </div> <div class="coupon-card"> <div class="coupon-left"> <div class="coupon-price">¥<span>50</span></div> <div class="coupon-condition">满299可用</div> </div> <div class="coupon-right"> <div class="coupon-name">会员专属券</div> <div class="coupon-time">有效期至 2026.05.15</div> <div class="coupon-desc">指定商品可用</div> </div> <div class="coupon-use">立即使用</div> </div> <div class="coupon-card"> <div class="coupon-left"> <div class="coupon-price">¥<span>10</span></div> <div class="coupon-condition">无门槛</div> </div> <div class="coupon-right"> <div class="coupon-name">限时秒杀券</div> <div class="coupon-time">有效期至 2026.04.25</div> <div class="coupon-desc">仅限秒杀商品</div> </div> <div class="coupon-use">立即使用</div> </div> </div> </div> <!-- 子页面：提货二维码 --> <div id="pickup-page" class="sub-page"> <div class="sub-header"> <button class="back-btn" onclick="hideSubPage()">←</button> <h1>提货二维码</h1> </div> <div class="pickup-content"> <div class="pickup-info"> <p>请将此二维码出示给门店工作人员扫描</p> <p class="pickup-code">会员码：V88888888</p> </div> <div class="qrcode"> <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=V88888888" alt="提货二维码"> </div> <button class="refresh-btn">刷新二维码</button> </div> </div> <!-- 子页面：联系客服 --> <div id="service-page" class="sub-page"> <div class="sub-header"> <button class="back-btn" onclick="hideSubPage()">←</button> <h1>联系客服</h1> </div> <div class="service-content"> <div class="service-info"> <div class="service-avatar"> <img src="https://picsum.photos/100/100?random=20" alt="客服头像"> </div> <div class="service-name">在线客服小优</div> <div class="service-status">在线 · 随时为您服务</div> </div> <div class="service-buttons"> <button class="service-btn-item"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg> <span>在线聊天</span> </button> <button class="service-btn-item"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg> <span>电话客服</span> </button> <button class="service-btn-item"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg> <span>常见问题</span> </button> </div> <div class="service-hotline"> <div class="hotline-title">客服热线</div> <div class="hotline-number">400-888-8888</div> <div class="hotline-time">服务时间：9:00 - 21:00</div> </div> </div> </div> <!-- 底部导航 --> <div class="tab-bar"> <div class="tab-item active" data-page="home"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg> <span>首页</span> </div> <div class="tab-item" data-page="message"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg> <span>消息</span> <span class="msg-badge">5</span> </div> <div class="tab-item" data-page="profile"> <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> <span>我的</span> </div> </div> </div> <script src="js/main.js"></script> </body> </html>
保存更改
取消
访问码:
p68tth5g
复制链接
重新生成