编辑页面

页面标题
有效期修改后将从当前时间重新计算过期时间
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>
<style>
:root {
  --primary: #07c160;
  --primary-dark: #05903c;
  --text: #333;
  --text-gray: #999;
  --text-light: #666;
  --bg: #f5f5f5;
  --white: #fff;
  --border: #eee;
  --warn: #ff6b35;
  --tag-hot: #e53935;
  --tag-new: #ff6b35;
  --tag-sale: #f06292;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; color:var(--text); background:var(--bg); }
button { border:none; cursor:pointer; font-family:inherit; }
img { max-width:100%; display:block; }

/* App Shell */
.app-shell { width:100%; max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg); position:relative; overflow:hidden; }
.page-content { display:none; height:100vh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-bottom:52px; }
.page-content.active { display:block; }

/* TabBar */
.tabbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; height:52px; background:var(--white); border-top:1px solid var(--border); z-index:100; display:flex; align-items:center; padding-bottom:var(--safe-bottom); }
.tab-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--text-gray); font-size:10px; padding:4px 0; }
.tab-item.active { color:var(--primary); }
.tab-item .tab-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.tab-item.active .tab-icon { background:#e8f5e9; }
.tab-item svg { width:22px; height:22px; fill:currentColor; }

/* Page Header */
.page-header { background:var(--white); padding:10px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:99; height:48px; }
.back-btn { width:30px; height:30px; border-radius:50%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }
.back-btn svg { width:18px; height:18px; fill:var(--text); }
.page-header-title { flex:1; font-size:16px; font-weight:600; text-align:center; }
.page-header-right { font-size:12px; color:var(--text-gray); cursor:pointer; }

/* ========== HOME ========== */
.home-header { background:linear-gradient(135deg, #07c160, #05903c); padding:20px 16px 16px; color:var(--white); }
.home-header .greeting { font-size:13px; opacity:0.9; }
.home-header .subtitle { font-size:22px; font-weight:700; margin-top:4px; }
.header-search { margin-top:12px; background:rgba(255,255,255,0.25); border-radius:22px; height:44px; display:flex; align-items:center; padding:0 16px; gap:10px; cursor:pointer; backdrop-filter:blur(4px); }
.header-search svg { width:16px; height:16px; fill:rgba(255,255,255,0.8); flex-shrink:0; }
.header-search input { flex:1; background:none; border:none; font-size:14px; color:#fff; outline:none; }
.header-search input::placeholder { color:rgba(255,255,255,0.7); }

/* Category Icons */
.category-row { background:var(--white); padding:16px 8px 12px; display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; }
.cat-item { display:flex; flex-direction:column; align-items:center; gap:6px; }
.cat-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.cat-name { font-size:11px; color:var(--text-light); }

/* Section */
.section-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; }
.section-title { font-size:16px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; }
.title-dot { width:4px; height:16px; background:var(--primary); border-radius:2px; flex-shrink:0; }
.section-more { font-size:12px; color:var(--text-gray); display:flex; align-items:center; gap:4px; }
.section-more svg { width:14px; height:14px; fill:var(--text-gray); }

/* Horizontal Scroll */
.h-scroll { display:flex; gap:10px; padding:0 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.h-scroll::-webkit-scrollbar { display:none; }

/* Product Card */
.product-card { background:var(--white); border-radius:12px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,0.06); flex-shrink:0; width:140px; }
.product-card img { width:100%; aspect-ratio:1; object-fit:cover; }
.product-info { padding:8px 10px 10px; }
.product-name { font-size:12px; line-height:1.4; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-price { color:var(--warn); font-size:14px; font-weight:600; margin-top:4px; }
.product-price .unit { font-size:10px; color:var(--text-gray); font-weight:400; margin-left:2px; }
.product-meta { font-size:11px; color:var(--text-gray); margin-top:2px; }
.product-tag { position:absolute; top:6px; left:6px; padding:2px 6px; border-radius:4px; font-size:10px; color:#fff; font-weight:500; }
.tag-hot { background:var(--tag-hot); }
.tag-new { background:var(--tag-new); }
.tag-sale { background:var(--tag-sale); }
.img-wrap { position:relative; }

/* Map Section */
.map-section { background:var(--white); margin:0 16px; border-radius:12px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,0.06); }
.map-placeholder { height:160px; background:linear-gradient(135deg, #e8f5e9, #c8e6c9); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.map-placeholder svg { width:36px; height:36px; fill:#4caf50; }
.map-placeholder span { font-size:12px; color:#2e7d32; }
.map-markers { display:flex; gap:8px; padding:10px 12px; overflow-x:auto; scrollbar-width:none; }
.map-markers::-webkit-scrollbar { display:none; }
.map-marker { flex-shrink:0; display:flex; align-items:center; gap:6px; background:#f5f5f5; border-radius:20px; padding:6px 10px; font-size:11px; color:var(--text); white-space:nowrap; }
.map-marker .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Product Grid */
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px; }
.grid-card { background:var(--white); border-radius:12px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,0.06); }
.grid-card .img-wrap img { width:100%; aspect-ratio:1; object-fit:cover; }
.grid-card .product-info { padding:8px 10px 10px; }

/* ========== CATEGORY ========== */
.cat-layout { display:flex; height:100%; }
.cat-left { width:80px; background:var(--white); overflow-y:auto; flex-shrink:0; border-right:1px solid var(--border); }
.cat-left::-webkit-scrollbar { display:none; }
.cat-left-item { padding:14px 10px; font-size:13px; color:var(--text); text-align:center; border-left:3px solid transparent; transition:all 0.2s; }
.cat-left-item.active { background:#f0f9f0; color:var(--primary); border-left-color:var(--primary); font-weight:600; }
.cat-right { flex:1; overflow-y:auto; padding:0 12px; }
.cat-right-banner { margin:12px 0; border-radius:10px; overflow:hidden; }
.cat-right-banner img { width:100%; height:80px; object-fit:cover; }
.cat-right-title { font-size:14px; font-weight:600; margin-bottom:10px; }
.sub-cat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; padding-bottom:20px; }
.sub-cat-item { display:flex; flex-direction:column; align-items:center; gap:6px; }
.sub-cat-icon { width:50px; height:50px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:24px; }
.sub-cat-name { font-size:11px; color:var(--text-light); text-align:center; }
.filter-bar { background:#f5f5f5; display:flex; align-items:center; padding:8px 12px; border-radius:8px; gap:16px; margin:12px 0; }
.filter-item { font-size:13px; color:var(--text); display:flex; align-items:center; gap:4px; }
.filter-item.active { color:var(--primary); }

/* ========== DETAIL ========== */
.detail-page { background:var(--white); }
.detail-swipe { position:relative; }
.detail-swipe img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.swipe-counter { position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,0.5); color:#fff; font-size:11px; padding:2px 8px; border-radius:10px; }
.detail-base { padding:14px 16px; }
.detail-price { color:var(--warn); font-size:24px; font-weight:700; }
.detail-price small { font-size:14px; font-weight:400; }
.detail-price .unit { font-size:12px; color:var(--text-gray); font-weight:400; margin-left:4px; }
.detail-name { font-size:16px; font-weight:600; margin-top:10px; line-height:1.5; }
.detail-spec { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; }
.spec-tag { background:#f0f9f0; color:var(--primary); font-size:12px; padding:4px 12px; border-radius:20px; cursor:pointer; border:1px solid transparent; }
.spec-tag.active { background:var(--primary); color:#fff; }
.detail-desc { font-size:13px; color:var(--text-light); margin-top:8px; line-height:1.6; }
.detail-divider { height:8px; background:var(--bg); }
.detail-shop { padding:14px 16px; display:flex; align-items:center; gap:12px; }
.shop-avatar { width:44px; height:44px; border-radius:50%; background:#e8f5e9; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.shop-info { flex:1; }
.shop-name { font-size:14px; font-weight:500; }
.shop-addr { font-size:12px; color:var(--text-gray); margin-top:3px; display:flex; align-items:center; gap:4px; }
.shop-addr svg { width:12px; height:12px; fill:var(--text-gray); }
.shop-actions { display:flex; gap:8px; }
.shop-call { width:36px; height:36px; border-radius:50%; background:#f0f9f0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.shop-call svg { width:18px; height:18px; fill:var(--primary); }
.shop-nav { width:36px; height:36px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.shop-nav svg { width:18px; height:18px; fill:#fff; }
.detail-gallery { padding:14px 16px; }
.detail-bottom-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; background:var(--white); border-top:1px solid var(--border); display:flex; align-items:center; padding:8px 16px; gap:10px; z-index:99; padding-bottom:calc(8px + var(--safe-bottom)); }
.action-icon-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 8px; cursor:pointer; }
.action-icon-btn svg { width:22px; height:22px; fill:var(--text-gray); }
.action-icon-btn span { font-size:10px; color:var(--text-gray); }
.action-icon-btn.faved svg { fill:var(--warn); }
.action-icon-btn.faved span { color:var(--warn); }
.detail-gallery img { width:100%; border-radius:8px; margin-bottom:10px; }
.detail-gallery p { font-size:13px; color:var(--text-gray); margin:10px 0; }

/* ========== SEARCH ========== */
.search-page { background:var(--white); min-height:100%; }
.search-bar { padding:8px 16px; display:flex; align-items:center; gap:10px; }
.search-box { flex:1; height:36px; background:#f2f2f2; border-radius:18px; display:flex; align-items:center; padding:0 14px; gap:8px; }
.search-box svg { width:16px; height:16px; fill:#999; flex-shrink:0; }
.search-box input { flex:1; border:none; background:none; font-size:14px; color:var(--text); outline:none; }
.search-box input::placeholder { color:#aaa; }
.search-cancel { color:var(--primary); font-size:14px; white-space:nowrap; }
.search-history { padding:14px 16px; }
.history-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.history-title { font-size:14px; font-weight:600; }
.history-clear { font-size:12px; color:var(--text-gray); display:flex; align-items:center; gap:4px; cursor:pointer; }
.history-tags { display:flex; flex-wrap:wrap; gap:8px; }
.history-tag { background:#f2f2f2; color:var(--text-light); font-size:12px; padding:5px 12px; border-radius:14px; cursor:pointer; }
.hot-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.hot-tag { background:#fef0e8; color:var(--warn); font-size:12px; padding:5px 12px; border-radius:14px; cursor:pointer; }
.search-results { padding:10px 16px; }
.result-hint { font-size:12px; color:var(--text-gray); margin-bottom:10px; }
.result-hint strong { color:var(--primary); }
.result-count-badge { background:var(--primary); color:#fff; font-size:10px; padding:1px 6px; border-radius:8px; margin-left:6px; }

/* ========== MY PRODUCTS ========== */
.mine-products-header { background:var(--white); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.stats-row { display:flex; gap:12px; margin:12px 16px; }
.stat-card { flex:1; background:var(--white); border-radius:12px; padding:12px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.stat-num { font-size:22px; font-weight:700; color:var(--primary); }
.stat-label { font-size:11px; color:var(--text-gray); margin-top:2px; }
.stat-num.off { color:var(--text-gray); }
.publish-list { padding:12px 16px; }
.publish-card { background:var(--white); border-radius:12px; overflow:hidden; margin-bottom:12px; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.publish-card img { width:100%; height:160px; object-fit:cover; }
.publish-card .info { padding:10px 12px; }
.publish-card .name { font-size:14px; font-weight:500; }
.publish-card .price { color:var(--warn); font-size:16px; font-weight:700; margin-top:4px; }
.status-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.publish-status { font-size:11px; padding:2px 8px; border-radius:4px; }
.status-on { background:#e8f5e9; color:var(--primary); }
.status-off { background:#f5f5f5; color:var(--text-gray); }
.toggle-wrap { display:flex; align-items:center; gap:6px; }
.toggle { width:36px; height:20px; border-radius:10px; background:#ddd; position:relative; transition:background 0.3s; cursor:pointer; }
.toggle.on { background:var(--primary); }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left 0.3s; box-shadow:0 1px 2px rgba(0,0,0,0.2); }
.toggle.on::after { left:18px; }
.toggle-label { font-size:11px; color:var(--text-gray); }
.edit-btn { font-size:12px; color:var(--primary); cursor:pointer; margin-right:8px; }
.delete-btn { font-size:12px; color:var(--text-gray); cursor:pointer; }

/* ========== FORM ========== */
.form-page { background:var(--bg); min-height:100%; }
.form-section { background:var(--white); margin-bottom:10px; }
.form-section-title { font-size:13px; color:var(--text-gray); padding:10px 16px 6px; }
.form-item { display:flex; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--border); }
.form-item:last-child { border-bottom:none; }
.form-label { width:90px; font-size:14px; color:var(--text); flex-shrink:0; padding-top:2px; }
.form-label.required::after { content:'*'; color:var(--warn); margin-left:2px; }
.form-input { flex:1; font-size:14px; color:var(--text); border:none; background:none; outline:none; line-height:1.5; }
.form-input::placeholder { color:#ccc; }
textarea.form-input { min-height:80px; resize:none; }
.form-hint { font-size:11px; color:var(--text-gray); margin-top:4px; }
.form-upload { display:flex; flex-wrap:wrap; gap:10px; padding:12px 16px; }
.upload-item { width:70px; height:70px; border-radius:8px; background:#f5f5f5; border:1px dashed #ddd; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; position:relative; }
.upload-item svg { width:24px; height:24px; fill:#aaa; }
.upload-item span { font-size:10px; color:#aaa; }
.upload-preview { position:relative; }
.upload-preview img { width:70px; height:70px; border-radius:8px; object-fit:cover; }
.upload-del { position:absolute; top:-6px; right:-6px; width:18px; height:18px; background:#e53935; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1; cursor:pointer; }
.form-submit { margin:20px 16px; }
.submit-btn { width:100%; height:46px; background:var(--primary); color:#fff; border-radius:23px; font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; }

/* ========== MINE / PERSONAL CENTER ========== */
.mine-header { background:linear-gradient(135deg, #07c160, #05903c); padding:30px 16px 24px; color:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mine-avatar { width:64px; height:64px; border-radius:50%; border:3px solid rgba(255,255,255,0.4); overflow:hidden; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:32px; }
.mine-avatar img { width:100%; height:100%; object-fit:cover; }
.mine-nickname { font-size:17px; font-weight:600; margin-top:10px; }
.mine-login-btn { background:rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.5); color:#fff; font-size:14px; padding:6px 20px; border-radius:20px; margin-top:10px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.mine-login-btn svg { width:16px; height:16px; fill:#fff; }
.mine-login-tip { font-size:11px; color:rgba(255,255,255,0.8); margin-top:6px; }

.mine-menu { background:var(--white); margin-top:-20px; border-radius:16px 16px 0 0; padding:0 16px; }
.menu-section { padding:16px 0; border-bottom:1px solid var(--border); }
.menu-section:last-child { border-bottom:none; }
.menu-item { display:flex; align-items:center; padding:12px 0; cursor:pointer; }
.menu-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-right:12px; flex-shrink:0; }
.menu-icon.green { background:#e8f5e9; }
.menu-icon.orange { background:#fff4e8; }
.menu-icon.blue { background:#e3f2fd; }
.menu-icon.purple { background:#f3e5f5; }
.menu-icon.red { background:#ffebee; }
.menu-label { flex:1; font-size:14px; color:var(--text); display:flex; align-items:center; gap:6px; }
.menu-arrow { width:16px; height:16px; fill:var(--text-gray); }
.menu-badge { background:var(--warn); color:#fff; font-size:10px; padding:1px 5px; border-radius:8px; }

/* ========== COLLECT / HISTORY ========== */
.collect-tabs { display:flex; background:var(--white); border-bottom:1px solid var(--border); }
.collect-tab { flex:1; text-align:center; padding:12px; font-size:14px; color:var(--text-gray); border-bottom:2px solid transparent; }
.collect-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.collect-list { padding:12px 16px; }
.collect-card { background:var(--white); border-radius:12px; padding:12px; display:flex; gap:12px; margin-bottom:10px; box-shadow:0 1px 4px rgba(0,0,0,0.05); cursor:pointer; }
.collect-card img { width:80px; height:80px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.collect-info { flex:1; display:flex; flex-direction:column; justify-content:center; }
.collect-name { font-size:14px; font-weight:500; color:var(--text); }
.collect-price { color:var(--warn); font-size:14px; font-weight:600; margin-top:4px; }
.collect-price small { font-size:11px; }
.collect-meta { font-size:11px; color:var(--text-gray); margin-top:4px; display:flex; align-items:center; gap:4px; }
.collect-meta svg { width:12px; height:12px; fill:var(--text-gray); }
.collect-del { color:var(--text-gray); font-size:12px; align-self:center; flex-shrink:0; }

/* ========== LOGIN ========== */
.login-page { background:var(--white); min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:40px 32px; }
.login-logo { font-size:60px; }
.login-title { font-size:22px; font-weight:700; margin-top:16px; color:var(--text); }
.login-subtitle { font-size:14px; color:var(--text-gray); margin-top:8px; text-align:center; line-height:1.6; }
.login-btn { width:100%; margin-top:40px; height:48px; background:#07c160; color:#fff; border-radius:24px; font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 12px rgba(7,193,96,0.3); cursor:pointer; }
.login-btn svg { width:24px; height:24px; fill:#fff; }
.login-agreement { font-size:12px; color:var(--text-gray); text-align:center; margin-top:16px; }
.login-agreement a { color:var(--primary); }
.login-features { margin-top:30px; width:100%; display:flex; flex-direction:column; gap:12px; }
.login-feature { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text-light); }
.login-feature .icon { width:32px; height:32px; border-radius:50%; background:#e8f5e9; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }

/* ========== SHOP ========== */
.shop-header { background:var(--white); padding:16px; display:flex; gap:12px; border-bottom:8px solid var(--bg); }
.shop-header img { width:60px; height:60px; border-radius:12px; object-fit:cover; }
.shop-header-info { flex:1; }
.shop-header-name { font-size:16px; font-weight:600; }
.shop-header-addr { font-size:12px; color:var(--text-gray); margin-top:4px; display:flex; align-items:center; gap:4px; }
.shop-header-phone { font-size:12px; color:var(--primary); margin-top:2px; }

/* ========== ABOUT ========== */
.about-page { padding:20px 16px; }
.about-logo { text-align:center; font-size:48px; margin-bottom:12px; }
.about-name { text-align:center; font-size:18px; font-weight:700; }
.about-version { text-align:center; font-size:12px; color:var(--text-gray); margin-top:4px; }
.about-card { background:var(--white); border-radius:12px; padding:16px; margin-top:20px; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.about-card-title { font-size:14px; font-weight:600; margin-bottom:10px; }
.about-card p { font-size:13px; color:var(--text-light); line-height:1.7; margin-bottom:8px; }
.about-divider { height:1px; background:var(--border); margin:16px 0; }
.about-links { display:flex; flex-direction:column; gap:12px; }
.about-link { display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--text); padding:4px 0; }
.about-link svg { width:16px; height:16px; fill:var(--text-gray); }

/* Empty State */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:12px; }
.empty-icon { font-size:60px; opacity:0.5; }
.empty-text { font-size:14px; color:var(--text-gray); }
.empty-sub { font-size:12px; color:var(--text-gray); margin-top:-4px; }
.empty-btn { background:var(--primary); color:#fff; padding:8px 20px; border-radius:20px; font-size:14px; margin-top:12px; cursor:pointer; }

/* Toast */
.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.75); color:#fff; font-size:14px; padding:12px 24px; border-radius:8px; z-index:1000; pointer-events:none; white-space:nowrap; }
</style>
</head>
<body>

<div class="app-shell" id="app">

  <!-- ==================== HOME ==================== -->
  <div class="page-content active" id="page-home">
    <div class="home-header">
      <div class="greeting">早上好 🌤️</div>
      <div class="subtitle">鲜享生活</div>
      <div class="header-search" onclick="goPage('search')">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <input placeholder="搜索商品/商家" readonly>
      </div>
    </div>

    <div class="category-row">
      <div class="cat-item" onclick="switchTab('category', this)"><div class="cat-icon" style="background:#e8f5e9;">🥬</div><div class="cat-name">蔬菜</div></div>
      <div class="cat-item" onclick="switchTab('category', this)"><div class="cat-icon" style="background:#fff3e0;">🍎</div><div class="cat-name">水果</div></div>
      <div class="cat-item" onclick="switchTab('category', this)"><div class="cat-icon" style="background:#fce4ec;">🍗</div><div class="cat-name">禽肉</div></div>
      <div class="cat-item" onclick="switchTab('category', this)"><div class="cat-icon" style="background:#fff8e1;">🌾</div><div class="cat-name">粮油</div></div>
      <div class="cat-item" onclick="switchTab('category', this)"><div class="cat-icon" style="background:#efebe9;">🍄</div><div class="cat-name">干货</div></div>
      <div class="cat-item" onclick="switchTab('category', this)"><div class="cat-icon" style="background:#f3e5f5;">🧂</div><div class="cat-name">副食</div></div>
      <div class="cat-item" onclick="switchTab('category', this)"><div class="cat-icon" style="background:#fce4ec;">💐</div><div class="cat-name">鲜花</div></div>
      <div class="cat-item" onclick="switchTab('category', this)"><div class="cat-icon" style="background:#e3f2fd;">🐟</div><div class="cat-name">海鲜</div></div>
    </div>

    <div class="section-header">
      <div class="section-title"><div class="title-dot"></div>本周应季推荐</div>
      <div class="section-more" onclick="switchTab('category', document.querySelectorAll('.tab-item')[1])">更多 <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></div>
    </div>
    <div class="h-scroll" style="padding-bottom:14px;">
      <div class="product-card" onclick="goPage('detail', 0)">
        <div class="img-wrap"><img src="https://images.unsplash.com/photo-1563122870-6b0b7e9a5b94?w=300&q=80" alt="">
          <span class="product-tag tag-hot">热卖</span>
        </div>
        <div class="product-info"><div class="product-name">8424西瓜</div><div class="product-price">¥8.8<span class="unit">/斤</span></div></div>
      </div>
      <div class="product-card" onclick="goPage('detail', 1)">
        <div class="img-wrap"><img src="https://images.unsplash.com/photo-1587132137056-bfbf0166836e?w=300&q=80" alt="">
          <span class="product-tag tag-new">新品</span>
        </div>
        <div class="product-info"><div class="product-name">妃子笑荔枝</div><div class="product-price">¥15.0<span class="unit">/斤</span></div></div>
      </div>
      <div class="product-card" onclick="goPage('detail', 2)">
        <div class="img-wrap"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=300&q=80" alt="">
          <span class="product-tag tag-sale">特惠</span>
        </div>
        <div class="product-info"><div class="product-name">有机叶菜套餐</div><div class="product-price">¥12.8<span class="unit">/份</span></div></div>
      </div>
      <div class="product-card" onclick="goPage('detail', 3)">
        <div class="img-wrap"><img src="https://images.unsplash.com/photo-1597362925123-77861d3fbac7?w=300&q=80" alt="">
          <span class="product-tag tag-hot">热卖</span>
        </div>
        <div class="product-info"><div class="product-name">智利车厘子</div><div class="product-price">¥68.0<span class="unit">/份</span></div></div>
      </div>
      <div class="product-card" onclick="goPage('detail', 4)">
        <div class="img-wrap"><img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?w=300&q=80" alt="">
          <span class="product-tag tag-new">新品</span>
        </div>
        <div class="product-info"><div class="product-name">阳光玫瑰青提</div><div class="product-price">¥22.0<span class="unit">/斤</span></div></div>
      </div>
    </div>

    <div class="section-header">
      <div class="section-title"><div class="title-dot"></div>附近商家分布</div>
    </div>
    <div class="map-section">
      <div class="map-placeholder">
        <svg viewBox="0 0 24 24"><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>
        <span>点击查看附近商家位置</span>
      </div>
      <div class="map-markers">
        <div class="map-marker"><div class="dot" style="background:#e53935;"></div>老张果园 · ¥8.8/斤</div>
        <div class="map-marker"><div class="dot" style="background:#fb8c00;"></div>惠民菜场 · ¥3.5/斤</div>
        <div class="map-marker"><div class="dot" style="background:#43a047;"></div>鲜达生鲜 · ¥12.0/斤</div>
        <div class="map-marker"><div class="dot" style="background:#1e88e5;"></div>绿野蔬菜 · ¥2.8/斤</div>
      </div>
    </div>

    <div class="section-header" style="margin-top:4px;">
      <div class="section-title"><div class="title-dot"></div>本周热卖</div>
      <div class="section-more" onclick="switchTab('category', document.querySelectorAll('.tab-item')[1])">全部 <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></div>
    </div>
    <div class="product-grid" style="padding-bottom:20px;">
      <div class="grid-card" onclick="goPage('detail', 0)">
        <div class="img-wrap"><img src="https://images.unsplash.com/photo-1563122870-6b0b7e9a5b94?w=400&q=80" alt=""><span class="product-tag tag-hot">热卖</span></div>
        <div class="product-info">
          <div class="product-name">8424西瓜 冰糖心 产地直发</div>
          <div class="product-meta">📍 惠民农贸市场A区</div>
          <div class="product-price">¥8.8<span class="unit">/斤</span></div>
        </div>
      </div>
      <div class="grid-card" onclick="goPage('detail', 1)">
        <div class="img-wrap"><img src="https://images.unsplash.com/photo-1587132137056-bfbf0166836e?w=400&q=80" alt=""><span class="product-tag tag-new">新品</span></div>
        <div class="product-info">
          <div class="product-name">妃子笑荔枝 新鲜当季</div>
          <div class="product-meta">📍 老李水果店</div>
          <div class="product-price">¥15.0<span class="unit">/斤</span></div>
        </div>
      </div>
      <div class="grid-card" onclick="goPage('detail', 2)">
        <div class="img-wrap"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=400&q=80" alt=""><span class="product-tag tag-sale">特惠</span></div>
        <div class="product-info">
          <div class="product-name">有机叶菜套餐 5种混搭</div>
          <div class="product-meta">📍 绿野蔬菜配送</div>
          <div class="product-price">¥12.8<span class="unit">/份</span></div>
        </div>
      </div>
      <div class="grid-card" onclick="goPage('detail', 3)">
        <div class="img-wrap"><img src="https://images.unsplash.com/photo-1597362925123-77861d3fbac7?w=400&q=80" alt=""><span class="product-tag tag-hot">热卖</span></div>
        <div class="product-info">
          <div class="product-name">智利车厘子 JJ级 2斤装</div>
          <div class="product-meta">📍 鲜达生鲜超市</div>
          <div class="product-price">¥68.0<span class="unit">/份</span></div>
        </div>
      </div>
    </div>
  </div>

  <!-- ==================== CATEGORY ==================== -->
  <div class="page-content" id="page-category">
    <div class="cat-layout">
      <div class="cat-left">
        <div class="cat-left-item active" onclick="setCategory(0, this)">蔬菜</div>
        <div class="cat-left-item" onclick="setCategory(1, this)">水果</div>
        <div class="cat-left-item" onclick="setCategory(2, this)">禽肉</div>
        <div class="cat-left-item" onclick="setCategory(3, this)">粮油</div>
        <div class="cat-left-item" onclick="setCategory(4, this)">干货</div>
        <div class="cat-left-item" onclick="setCategory(5, this)">副食</div>
        <div class="cat-left-item" onclick="setCategory(6, this)">鲜花</div>
        <div class="cat-left-item" onclick="setCategory(7, this)">海鲜</div>
        <div class="cat-left-item" onclick="setCategory(8, this)">乳品</div>
        <div class="cat-left-item" onclick="setCategory(9, this)">饮品</div>
      </div>
      <div class="cat-right" id="cat-right-content">
        <div class="cat-right-banner">
          <img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?w=600&q=80" alt="蔬菜专区">
        </div>
        <div class="cat-right-title">蔬菜分类</div>
        <div class="sub-cat-grid">
      <div class="sub-cat-item" onclick="showToast('📍 已筛选「叶菜类」')"><div class="sub-cat-icon">🥬</div><div class="sub-cat-name">叶菜类</div></div>
      <div class="sub-cat-item" onclick="showToast('📍 已筛选「根茎类」')"><div class="sub-cat-icon">🥕</div><div class="sub-cat-name">根茎类</div></div>
      <div class="sub-cat-item" onclick="showToast('📍 已筛选「瓜果类」')"><div class="sub-cat-icon">🍆</div><div class="sub-cat-name">瓜果类</div></div>
      <div class="sub-cat-item" onclick="showToast('📍 已筛选「玉米杂粮」')"><div class="sub-cat-icon">🌽</div><div class="sub-cat-name">玉米杂粮</div></div>
      <div class="sub-cat-item" onclick="showToast('📍 已筛选「菌菇类」')"><div class="sub-cat-icon">🍄</div><div class="sub-cat-name">菌菇类</div></div>
      <div class="sub-cat-item" onclick="showToast('📍 已筛选「豆制品」')"><div class="sub-cat-icon">🥦</div><div class="sub-cat-name">豆制品</div></div>
        </div>
        <div class="filter-bar">
          <div class="filter-item active" onclick="setSort(this)">综合</div>
          <div class="filter-item" onclick="setSort(this)">销量</div>
          <div class="filter-item" onclick="setSort(this)">价格↑</div>
          <div class="filter-item" onclick="setSort(this)">价格↓</div>
        </div>
        <div class="product-grid" style="padding-top:8px;">
          <div class="grid-card" onclick="goPage('detail', 4)">
            <div class="img-wrap"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=400&q=80" alt=""><span class="product-tag tag-hot">热卖</span></div>
            <div class="product-info"><div class="product-name">有机小白菜 农场直供</div><div class="product-meta">📍 绿野蔬菜</div><div class="product-price">¥4.5<span class="unit">/斤</span></div></div>
          </div>
          <div class="grid-card" onclick="goPage('detail', 5)">
            <div class="img-wrap"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=400&q=80" alt=""><span class="product-tag tag-new">新品</span></div>
            <div class="product-info"><div class="product-name">新鲜番茄 沙瓤多汁</div><div class="product-meta">📍 惠民菜场</div><div class="product-price">¥3.8<span class="unit">/斤</span></div></div>
          </div>
          <div class="grid-card" onclick="goPage('detail', 6)">
            <div class="img-wrap"><img src="https://images.unsplash.com/photo-1576045057995-568f588f82fb?w=400&q=80" alt=""><span class="product-tag tag-sale">特惠</span></div>
            <div class="product-info"><div class="product-name">胡萝卜 富含维生素</div><div class="product-meta">📍 鲜达生鲜</div><div class="product-price">¥2.8<span class="unit">/斤</span></div></div>
          </div>
          <div class="grid-card" onclick="goPage('detail', 7)">
            <div class="img-wrap"><img src="https://images.unsplash.com/photo-1508253730651-e5ace80a7025?w=400&q=80" alt=""><span class="product-tag tag-hot">热卖</span></div>
            <div class="product-info"><div class="product-name">土豆 黄心土豆</div><div class="product-meta">📍 惠民农贸市场</div><div class="product-price">¥2.5<span class="unit">/斤</span></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ==================== MY PRODUCTS ==================== -->
  <div class="page-content" id="page-products">
    <div class="page-header">
      <div class="back-btn" onclick="goBack()"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
      <div class="page-header-title">我的商品</div>
      <div class="page-header-right" style="color:var(--primary);" id="publish-btn" onclick="checkLoginAndPublish()">+ 发布</div>
    </div>
    <div class="mine-products-header">
      <div style="font-size:13px; color:var(--text-gray);">
        共 <strong id="my-product-total" style="color:var(--text);">3</strong> 件商品
      </div>
      <div style="font-size:12px; color:var(--text-gray);">在售 <strong id="my-product-on" style="color:var(--primary);">2</strong> 件</div>
    </div>
    <div style="padding:12px 16px; display:flex; gap:10px;">
      <div class="stat-card">
        <div class="stat-num" id="stat-on">2</div>
        <div class="stat-label">在售</div>
      </div>
      <div class="stat-card">
        <div class="stat-num off" id="stat-off">1</div>
        <div class="stat-label">已下架</div>
      </div>
      <div class="stat-card">
        <div class="stat-num off" id="stat-views">156</div>
        <div class="stat-label">浏览量</div>
      </div>
    </div>
    <div class="publish-list" id="my-products-list"></div>
  </div>

  <!-- ==================== MINE / PERSONAL CENTER ==================== -->
  <div class="page-content" id="page-mine">
    <div class="mine-header">
      <div class="mine-avatar" id="mine-avatar">
        <svg viewBox="0 0 24 24" fill="rgba(255,255,255,0.8)" width="32" height="32"><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>
      </div>
      <div class="mine-nickname" id="mine-nickname" style="display:none;"></div>
      <button class="mine-login-btn" id="login-btn" onclick="goPage('login')">
        <svg viewBox="0 0 24 24"><path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
        微信一键登录
      </button>
      <div class="mine-login-tip" id="mine-tip" style="display:none;">登录后可管理商品、查看收藏</div>
    </div>
    <div class="mine-menu">
      <div class="menu-section">
        <div class="menu-item" onclick="goPage('collect')">
          <div class="menu-icon green">❤️</div>
          <div class="menu-label">我的收藏</div>
          <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
        </div>
        <div class="menu-item" onclick="goPage('history')">
          <div class="menu-icon blue">📖</div>
          <div class="menu-label">浏览记录</div>
          <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
        </div>
      </div>
      <div class="menu-section">
        <div class="menu-item" onclick="goPage('about')">
          <div class="menu-icon purple">ℹ️</div>
          <div class="menu-label">关于我们</div>
          <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
        </div>
        <div class="menu-item" onclick="goPage('mine')">
          <div class="menu-icon red">⚙️</div>
          <div class="menu-label">设置</div>
          <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
        </div>
        <div class="menu-item" id="logout-item" style="display:none;" onclick="doLogout()">
          <div class="menu-icon orange">🚪</div>
          <div class="menu-label" style="color:var(--warn);">退出登录</div>
        </div>
      </div>
    </div>
  </div>

  <!-- ==================== DETAIL ==================== -->
  <div class="page-content" id="page-detail">
    <div class="page-header">
      <div class="back-btn" onclick="goBack()"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
      <div class="page-header-title">商品详情</div>
    </div>
    <div class="detail-page">
      <div class="detail-swipe">
        <img id="detail-img" src="https://images.unsplash.com/photo-1563122870-6b0b7e9a5b94?w=800&q=80" alt="">
        <div class="swipe-counter" id="detail-counter">1/5</div>
        <div class="detail-swipe-tip">👆 左右滑动查看更多图片</div>
      </div>
      <div class="detail-base">
        <div class="detail-price">¥<span id="detail-price">8.8</span><span class="unit" id="detail-unit">/斤</span></div>
        <div class="detail-name" id="detail-name">8424西瓜 冰糖心 产地直发</div>
        <div class="detail-spec" id="detail-specs"></div>
      </div>
      <div class="detail-shop" onclick="goPage('shop')">
        <div class="shop-avatar">🍉</div>
        <div class="shop-info">
          <div class="shop-name" id="shop-name">老张果园</div>
          <div class="shop-addr">
            <svg viewBox="0 0 24 24"><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>
            <span id="shop-addr">幸福路农贸市场A区12号</span>
          </div>
        </div>
        <div class="shop-actions">
          <div class="shop-call" onclick="event.stopPropagation();showToast('📞 拨打电话: 138-1234-5678')">
            <svg viewBox="0 0 24 24"><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>
          </div>
          <div class="shop-nav" onclick="event.stopPropagation();showToast('🗺️ 正在打开地图导航...')">
            <svg viewBox="0 0 24 24"><path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/></svg>
          </div>
        </div>
      </div>
      <div class="detail-divider"></div>
      <div class="detail-gallery">
        <img src="https://images.unsplash.com/photo-1589217157232-464b505b597f?w=800&q=80" alt="详情图">
        <p>📦 存储方式：常温保存，避免阳光直射</p>
        <p>🚚 配送说明：当日订单，当日或次日送达</p>
        <p>📞 售后电话：400-888-8888</p>
      </div>
    </div>
    <div style="height:20px;"></div>
  </div>

  <!-- ==================== SEARCH ==================== -->
  <div class="page-content" id="page-search">
    <div class="page-header">
      <div class="back-btn" onclick="goBack()"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
      <div style="flex:1; height:36px; background:#f2f2f2; border-radius:18px; display:flex; align-items:center; padding:0 14px; gap:8px;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="#999"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <input id="search-input" placeholder="搜索商品/商家" oninput="doSearch(this.value)" style="flex:1; border:none; background:none; font-size:14px; outline:none;">
      </div>
      <div class="search-cancel" onclick="goBack()">取消</div>
    </div>
    <div class="search-history" id="search-history">
      <div class="history-header">
        <div class="history-title">搜索历史</div>
        <div class="history-clear" onclick="clearHistory()">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
          清除
        </div>
      </div>
      <div class="history-tags">
        <span class="history-tag" onclick="setSearchInput(this)">西瓜</span>
        <span class="history-tag" onclick="setSearchInput(this)">荔枝</span>
        <span class="history-tag" onclick="setSearchInput(this)">有机蔬菜</span>
        <span class="history-tag" onclick="setSearchInput(this)">车厘子</span>
        <span class="history-tag" onclick="setSearchInput(this)">苹果</span>
      </div>
      <div class="history-header" style="margin-top:16px;">
        <div class="history-title">猜你想搜</div>
      </div>
      <div class="hot-tags">
        <span class="hot-tag" onclick="setSearchInput(this)">8424西瓜</span>
        <span class="hot-tag" onclick="setSearchInput(this)">妃子笑荔枝</span>
        <span class="hot-tag" onclick="setSearchInput(this)">智利车厘子</span>
        <span class="hot-tag" onclick="setSearchInput(this)">有机叶菜</span>
        <span class="hot-tag" onclick="setSearchInput(this)">榴莲</span>
        <span class="hot-tag" onclick="setSearchInput(this)">阳光玫瑰</span>
      </div>
    </div>
    <div class="search-results" id="search-results" style="display:none;">
      <div class="result-hint">找到 <strong id="result-count">24</strong> 件商品 <span class="result-count-badge">24</span></div>
      <div class="product-grid">
        <div class="grid-card" onclick="goPage('detail', 0)">
          <div class="img-wrap"><img src="https://images.unsplash.com/photo-1563122870-6b0b7e9a5b94?w=400&q=80" alt=""><span class="product-tag tag-hot">热卖</span></div>
          <div class="product-info"><div class="product-name">8424西瓜 冰糖心</div><div class="product-meta">📍 惠民农贸市场</div><div class="product-price">¥8.8<span class="unit">/斤</span></div></div>
        </div>
        <div class="grid-card" onclick="goPage('detail', 1)">
          <div class="img-wrap"><img src="https://images.unsplash.com/photo-1587132137056-bfbf0166836e?w=400&q=80" alt=""><span class="product-tag tag-new">新品</span></div>
          <div class="product-info"><div class="product-name">妃子笑荔枝</div><div class="product-meta">📍 老李水果店</div><div class="product-price">¥15.0<span class="unit">/斤</span></div></div>
        </div>
        <div class="grid-card" onclick="goPage('detail', 3)">
          <div class="img-wrap"><img src="https://images.unsplash.com/photo-1597362925123-77861d3fbac7?w=400&q=80" alt=""><span class="product-tag tag-sale">特惠</span></div>
          <div class="product-info"><div class="product-name">智利车厘子 JJ级</div><div class="product-meta">📍 鲜达生鲜</div><div class="product-price">¥68.0<span class="unit">/份</span></div></div>
        </div>
        <div class="grid-card" onclick="goPage('detail', 2)">
          <div class="img-wrap"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=400&q=80" alt=""><span class="product-tag tag-hot">热卖</span></div>
          <div class="product-info"><div class="product-name">有机叶菜套餐</div><div class="product-meta">📍 绿野蔬菜</div><div class="product-price">¥12.8<span class="unit">/份</span></div></div>
        </div>
      </div>
    </div>
  </div>

  <!-- ==================== LOGIN ==================== -->
  <div class="page-content" id="page-login">
    <div class="page-header">
      <div class="back-btn" onclick="goBack()"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
      <div class="page-header-title">登录</div>
    </div>
    <div class="login-page" style="padding-top:20px;">
      <div class="login-logo">🥬</div>
      <div class="login-title">鲜享生活</div>
      <div class="login-subtitle">新鲜直供 · 源头可溯<br>登录后享受完整服务</div>
      <button class="login-btn" onclick="doLogin()">
        <svg viewBox="0 0 24 24"><path d="M17.6 13.35c-.32-.27-.69-.5-1.09-.67L16.9 5l-2-2.95L11.8 5l-.05.5-2.11 4.05c-.4.17-.77.4-1.09.67C6.56 9.43 5.25 12.67 5.25 16c0 3.9 3.17 7.05 7.05 7.05s7.05-3.17 7.05-7.05c0-3.33-1.31-6.57-3.4-8.65zM15 11l-2-4h2.5l-2 4h1.5l2-4H21l-2 4h1.5l2-4H25l-2 4 2 4H23l-2-4h-1.5l2 4h-2.5l-2-4H18l2 4h-2l-2-4h-1.5l2 4z"/></svg>
        微信一键登录
      </button>
      <div class="login-agreement">
        登录即表示同意 <a href="#">《用户服务协议》</a> 和 <a href="#">《隐私政策》</a>
      </div>
      <div class="login-features">
        <div class="login-feature"><div class="icon">🔒</div><span>微信快速登录，保护隐私安全</span></div>
        <div class="login-feature"><div class="icon">❤️</div><span>收藏商品，记录浏览足迹</span></div>
        <div class="login-feature"><div class="icon">📦</div><span>商家用户可发布和管理商品</span></div>
        <div class="login-feature"><div class="icon">💬</div><span>提交意见反馈，帮助我们做得更好</span></div>
      </div>
    </div>
  </div>

  <!-- ==================== COLLECT ==================== -->
  <div class="page-content" id="page-collect">
    <div class="page-header">
      <div class="back-btn" onclick="goBack()"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
      <div class="page-header-title">我的收藏</div>
    </div>
    <div class="collect-tabs">
      <div class="collect-tab active" onclick="switchCollectTab(this, 'product')">商品收藏</div>
      <div class="collect-tab" onclick="switchCollectTab(this, 'shop')">商家收藏</div>
    </div>
    <div class="collect-list" id="collect-list"></div>
  </div>

  <!-- ==================== HISTORY ==================== -->
  <div class="page-content" id="page-history">
    <div class="page-header">
      <div class="back-btn" onclick="goBack()"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
      <div class="page-header-title">浏览记录</div>
      <div class="page-header-right" onclick="clearHistory()">清空</div>
    </div>
    <div class="collect-list" id="history-list">
      <div class="collect-card" onclick="goPage('detail', 2)">
        <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=200&q=80" alt="">
        <div class="collect-info">
          <div class="collect-name">有机叶菜套餐 5种混搭</div>
          <div class="collect-price">¥12.8<span style="font-size:11px;">/份</span></div>
          <div class="collect-meta">浏览于 今天 14:32</div>
        </div>
        <div class="collect-del" style="align-self:center;">✕</div>
      </div>
      <div class="collect-card" onclick="goPage('detail', 1)">
        <img src="https://images.unsplash.com/photo-1587132137056-bfbf0166836e?w=200&q=80" alt="">
        <div class="collect-info">
          <div class="collect-name">妃子笑荔枝</div>
          <div class="collect-price">¥15.0<span style="font-size:11px;">/斤</span></div>
          <div class="collect-meta">浏览于 今天 13:15</div>
        </div>
        <div class="collect-del" style="align-self:center;">✕</div>
      </div>
      <div class="collect-card" onclick="goPage('detail', 0)">
        <img src="https://images.unsplash.com/photo-1563122870-6b0b7e9a5b94?w=200&q=80" alt="">
        <div class="collect-info">
          <div class="collect-name">8424西瓜 冰糖心</div>
          <div class="collect-price">¥8.8<span style="font-size:11px;">/斤</span></div>
          <div class="collect-meta">浏览于 昨天 18:40</div>
        </div>
        <div class="collect-del" style="align-self:center;">✕</div>
      </div>
      <div class="collect-card" onclick="goPage('detail', 5)">
        <img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=200&q=80" alt="">
        <div class="collect-info">
          <div class="collect-name">新鲜番茄</div>
          <div class="collect-price">¥3.8<span style="font-size:11px;">/斤</span></div>
          <div class="collect-meta">浏览于 昨天 10:22</div>
        </div>
        <div class="collect-del" style="align-self:center;">✕</div>
      </div>
      <div class="collect-card" onclick="goPage('detail', 4)">
        <img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?w=200&q=80" alt="">
        <div class="collect-info">
          <div class="collect-name">阳光玫瑰青提</div>
          <div class="collect-price">¥22.0<span style="font-size:11px;">/斤</span></div>
          <div class="collect-meta">浏览于 前天 16:08</div>
        </div>
        <div class="collect-del" style="align-self:center;">✕</div>
      </div>
    </div>
  </div>

  <!-- ==================== ABOUT ==================== -->
  <div class="page-content" id="page-about">
    <div class="page-header">
      <div class="back-btn" onclick="goBack()"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
      <div class="page-header-title">关于我们</div>
    </div>
    <div class="about-page">
      <div class="about-logo">🥬</div>
      <div class="about-name">鲜享生活</div>
      <div class="about-version">Version 1.0.0</div>
      <div class="about-card">
        <div class="about-card-title">产品介绍</div>
        <p>鲜享生活是一款面向社区用户的果蔬零售小程序，致力于为用户提供新鲜、便捷、源头可追溯的果蔬购买体验。</p>
        <p>我们连接本地农户与商家，让您足不出户就能买到新鲜优质的果蔬产品。</p>
      </div>
      <div class="about-card">
        <div class="about-card-title">核心优势</div>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
          <div style="background:#f5f5f5; padding:12px; border-radius:10px; text-align:center;">
            <div style="font-size:22px;">🌿</div>
            <div style="font-size:12px; font-weight:600; margin-top:6px;">源头直供</div>
            <div style="font-size:11px; color:var(--text-gray); margin-top:4px;">农户/商家直接供货</div>
          </div>
          <div style="background:#f5f5f5; padding:12px; border-radius:10px; text-align:center;">
            <div style="font-size:22px;">⚡</div>
            <div style="font-size:12px; font-weight:600; margin-top:6px;">快速配送</div>
            <div style="font-size:11px; color:var(--text-gray); margin-top:4px;">当日或次日送达</div>
          </div>
          <div style="background:#f5f5f5; padding:12px; border-radius:10px; text-align:center;">
            <div style="font-size:22px;">✅</div>
            <div style="font-size:12px; font-weight:600; margin-top:6px;">品质保障</div>
            <div style="font-size:11px; color:var(--text-gray); margin-top:4px;">严格筛选优质商家</div>
          </div>
          <div style="background:#f5f5f5; padding:12px; border-radius:10px; text-align:center;">
            <div style="font-size:22px;">💰</div>
            <div style="font-size:12px; font-weight:600; margin-top:6px;">价格透明</div>
            <div style="font-size:11px; color:var(--text-gray); margin-top:4px;">实时报价无中间价</div>
          </div>
        </div>
      </div>
      <div class="about-card">
        <div class="about-card-title">联系我们</div>
        <div class="about-links">
          <div class="about-link" onclick="showToast('📧 反馈邮箱: hello@xianxianglife.com')">
            <span>意见反馈邮箱</span>
            <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
          </div>
          <div class="about-link" onclick="showToast('📞 客服电话: 400-888-8888')">
            <span>客服热线</span>
            <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
          </div>
          <div class="about-link">
            <span>隐私政策</span>
            <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
          </div>
          <div class="about-link">
            <span>用户服务协议</span>
            <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ==================== PUBLISH EDIT ==================== -->
  <div class="page-content" id="page-publish-edit">
    <div class="page-header">
      <div class="back-btn" onclick="goBack()"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
      <div class="page-header-title" id="publish-form-title">发布商品</div>
      <div class="page-header-right" style="color:var(--primary);" onclick="submitProduct()">保存</div>
    </div>
    <div class="form-page">
      <div class="form-section">
        <div class="form-section-title">📷 商品图片（最多9张，第一张为主图）</div>
        <div class="form-upload" id="upload-area">
          <div class="upload-item" onclick="addImage()">
            <svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
            <span>添加图片</span>
          </div>
        </div>
      </div>
      <div class="form-section">
        <div class="form-section-title">📋 基本信息</div>
        <div class="form-item">
          <div class="form-label required">商品名称</div>
          <input class="form-input" id="p-name" placeholder="请输入商品名称（最多50字）">
        </div>
        <div class="form-item">
          <div class="form-label">商家名称</div>
          <input class="form-input" id="p-shop-name" placeholder="请输入商家名称">
        </div>
        <div class="form-item">
          <div class="form-label">商品分类</div>
          <div style="flex:1; display:flex; align-items:center; gap:8px;">
            <select id="p-cat1" style="flex:1; padding:6px 10px; border:1px solid #eee; border-radius:6px; font-size:14px; color:var(--text);">
              <option value="">选择一级分类</option>
              <option value="vegetable">蔬菜</option>
              <option value="fruit">水果</option>
              <option value="meat">禽肉</option>
              <option value="grain">粮油</option>
              <option value="dried">干货</option>
              <option value="snack">副食</option>
              <option value="flower">鲜花</option>
              <option value="seafood">海鲜</option>
            </select>
            <select id="p-cat2" style="flex:1; padding:6px 10px; border:1px solid #eee; border-radius:6px; font-size:14px; color:var(--text);">
              <option value="">选择二级分类</option>
            </select>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label required">价格（元）</div>
          <input class="form-input" id="p-price" type="number" placeholder="0.00">
          <div style="font-size:14px; color:var(--text-gray); margin-left:4px;">元</div>
        </div>
        <div class="form-item">
          <div class="form-label">计量单位</div>
          <select id="p-unit" style="padding:6px 10px; border:1px solid #eee; border-radius:6px; font-size:14px; color:var(--text); margin-right:8px;">
            <option value="斤">斤</option>
            <option value="个">个</option>
            <option value="箱">箱</option>
            <option value="盒">盒</option>
            <option value="份">份</option>
          </select>
          <input class="form-input" id="p-spec" placeholder="规格（如：500g / 1kg）" style="flex:2;">
        </div>
        <div class="form-item">
          <div class="form-label required">库存数量</div>
          <input class="form-input" id="p-stock" type="number" placeholder="请输入库存数量" value="100">
        </div>
        <div class="form-item">
          <div class="form-label required">联系电话</div>
          <input class="form-input" id="p-phone" type="tel" placeholder="请输入商家联系电话">
        </div>
      </div>
      <div class="form-section">
        <div class="form-section-title">📍 商家位置</div>
        <div class="form-item">
          <div class="form-label">商家地址</div>
          <input class="form-input" id="p-address" placeholder="请输入详细地址（街道/市场/门牌号）">
        </div>
        <div class="form-item">
          <div class="form-label">地图定位</div>
          <div style="flex:1; display:flex; align-items:center; gap:8px;">
            <input class="form-input" id="p-location" readonly placeholder="点击地图图标获取位置" style="flex:1;">
            <button onclick="getLocation()" style="background:var(--primary); color:#fff; border-radius:6px; padding:6px 12px; font-size:12px; flex-shrink:0; cursor:pointer;">📍 定位</button>
          </div>
        </div>
        <div class="form-item">
          <div class="form-hint">经纬度示例: 121.4737, 31.2304（上海市中心）</div>
        </div>
      </div>
      <div class="form-section">
        <div class="form-section-title">📝 商品描述</div>
        <div class="form-item">
          <textarea class="form-input" id="p-desc" placeholder="请输入商品描述、产地信息、存储建议等">
商品标签：
热卖新品特惠有机源头直供