编辑页面

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}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f5f5f5;max-width:430px;margin:0 auto;min-height:100vh;position:relative;overflow-x:hidden}
.page{display:none;min-height:100vh;padding-bottom:70px;background:#fff}
.page.active{display:block}

/* 状态栏 */
.status-bar{height:44px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:14px;font-weight:500}
.status-left{display:flex;align-items:center;gap:4px}

/* 底部导航 */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;height:60px;background:#fff;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #eee;z-index:100}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:#999;font-size:10px;cursor:pointer}
.nav-item svg{width:24px;height:24px}
.nav-item.active{color:#E60012}
.nav-item.active svg path{fill:#E60012}
.fab-btn{width:48px;height:48px;background:#E60012;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-20px;box-shadow:0 4px 12px rgba(230,0,18,0.3);cursor:pointer}
.fab-btn svg{width:24px;height:24px}

/* ==================== 首页新布局 ==================== */
.home-search{background:#E60012;padding:10px 16px 12px}
.home-search-bar{display:flex;align-items:center;gap:10px}
.city-btn{display:flex;align-items:center;gap:4px;color:#fff;font-size:13px;white-space:nowrap}
.city-btn svg{width:12px;height:12px}
.search-input-wrap{flex:1;display:flex;align-items:center;background:#fff;border-radius:18px;padding:8px 12px}
.search-input-wrap svg{width:16px;height:16px;color:#999;margin-right:8px}
.search-input{width:100%;border:none;outline:none;font-size:13px;background:transparent}
.noti-btn{margin-left:4px}
.noti-btn svg{width:22px;height:22px}

.banner-slider{position:relative;height:130px;margin:0}
.banner-slide{position:absolute;width:100%;height:100%;background:linear-gradient(135deg,#E60012,#ff4d5a);display:flex;align-items:center;padding:0 20px}
.banner-content{color:#fff}
.banner-content h2{font-size:20px;margin-bottom:6px;font-weight:600}
.banner-content p{font-size:12px;opacity:0.9}
.banner-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5)}
.dot.active{background:#fff;width:16px;border-radius:3px}

/* 四宫格入口 */
.biz-grid{padding:16px;display:flex;gap:12px}
.biz-grid-item{flex:1;background:#fff;border-radius:12px;padding:16px 8px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.06);cursor:pointer}
.biz-grid-item .icon-wrap{width:48px;height:48px;border-radius:12px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center}
.biz-grid-item.buy .icon-wrap{background:#FFF0F0}
.biz-grid-item.buy .icon-wrap svg{color:#E60012}
.biz-grid-item.sell .icon-wrap{background:#E8F4FF}
.biz-grid-item.sell .icon-wrap svg{color:#1890FF}
.biz-grid-item.lease .icon-wrap{background:#F0FFF4}
.biz-grid-item.lease .icon-wrap svg{color:#52C41A}
.biz-grid-item.service .icon-wrap{background:#FFF7E6}
.biz-grid-item.service .icon-wrap svg{color:#FA8C16}
.biz-grid-item .icon-wrap svg{width:24px;height:24px}
.biz-grid-item span{font-size:13px;color:#333;font-weight:500}

.filter-tabs{display:flex;padding:0 16px;background:#fff;border-bottom:1px solid #f0f0f0}
.filter-tab{flex:1;text-align:center;padding:12px 0;font-size:14px;color:#666;position:relative;cursor:pointer}
.filter-tab.active{color:#E60012;font-weight:500}
.filter-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:30px;height:2px;background:#E60012;border-radius:1px}

/* 商品列表新样式 */
.post-list{padding:10px 12px}
.post-card{display:flex;background:#fff;border-radius:8px;padding:12px;margin-bottom:10px;cursor:pointer}
.post-img{width:100px;height:100px;border-radius:6px;background:#f5f5f5;flex-shrink:0;margin-right:12px;display:flex;align-items:center;justify-content:center}
.post-img svg{width:40px;height:40px;color:#ddd}
.post-info{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.post-info-top .post-title{font-size:14px;color:#333;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-tags{display:flex;gap:6px;margin-bottom:6px}
.post-tag{display:inline-block;padding:2px 6px;border-radius:3px;font-size:10px}
.tag-supply{background:#FFF0F0;color:#E60012}
.tag-demand{background:#E8F4FF;color:#1890FF}
.tag-rent{background:#F0FFF4;color:#52C41A}
.post-meta{font-size:11px;color:#999;margin-bottom:6px}
.post-info-bottom{display:flex;align-items:flex-end;justify-content:space-between}
.post-price{font-size:16px;color:#E60012;font-weight:600}
.post-price span{font-size:11px;font-weight:400}
.post-actions{display:flex;gap:12px}
.post-action{display:flex;align-items:center;gap:3px;font-size:11px;color:#999}
.post-action svg{width:14px;height:14px}
.post-action.liked{color:#E60012}

/* 详情页 */
.detail-header{display:flex;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0}
.back-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.back-btn svg{width:20px;height:20px;color:#333}
.detail-header h2{flex:1;text-align:center;font-size:16px;font-weight:500;margin-right:32px}
.detail-banner{position:relative;height:200px;background:#f5f5f5}
.detail-banner img{width:100%;height:100%;object-fit:cover}
.image-count{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,0.5);color:#fff;font-size:11px;padding:3px 8px;border-radius:10px}
.detail-content{padding:16px}
.detail-title{font-size:16px;color:#333;line-height:1.5;margin-bottom:12px}
.detail-price{font-size:22px;color:#E60012;font-weight:600;margin-bottom:12px}
.detail-price span{font-size:13px}
.detail-meta{display:flex;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f0f0f0}
.meta-item{font-size:12px;color:#999}
.detail-desc{font-size:14px;color:#333;line-height:1.8;margin-bottom:16px}
.detail-tags{display:flex;flex-wrap:wrap;gap:8px}
.detail-tag{padding:4px 10px;background:#f5f5f5;border-radius:4px;font-size:12px;color:#666}
.seller-info{background:#fafafa;padding:16px;border-radius:10px;margin-top:16px}
.seller-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.seller-avatar{width:44px;height:44px;border-radius:50%;background:#E60012;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
.seller-name{font-size:14px;color:#333;font-weight:500}
.seller-title{font-size:11px;color:#999;margin-top:2px}
.seller-stats{display:flex;gap:20px}
.stat-item{text-align:center}
.stat-num{font-size:14px;color:#333;font-weight:600}
.stat-label{font-size:10px;color:#999;margin-top:2px}
.detail-actions{display:flex;gap:12px;padding:16px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;background:#fff;border-top:1px solid #f0f0f0}
.action-btn{flex:1;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;cursor:pointer}
.action-btn.secondary{border:1px solid #ddd;color:#666}
.action-btn.primary{background:#E60012;color:#fff}
.action-btn svg{width:18px;height:18px}

/* 发布选择页 */
.popup-overlay{position:fixed;top:0;left:50%;transform:translateX(-50%);width:430px;height:100%;background:rgba(0,0,0,0.5);z-index:200;display:none;align-items:flex-end;justify-content:center}
.popup-overlay.active{display:flex}
.popup-content{width:100%;background:#fff;border-radius:16px 16px 00;padding:24px;animation:slideUp .3s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.popup-title{text-align:center;font-size:16px;color:#333;margin-bottom:24px}
.popup-options{display:flex;gap:16px}
.popup-option{flex:1;height:120px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.popup-option.supply{background:#FFF5F5;border:1px solid #FFDADA}
.popup-option.demand{background:#F0F7FF;border:1px solid #D4E8FF}
.popup-option svg{width:40px;height:40px}
.popup-option span{font-size:14px;color:#333;font-weight:500}
.popup-close{width:40px;height:40px;background:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:20px auto 0;cursor:pointer}
.popup-close svg{width:20px;height:20px;color:#666}

/* 发布表单 */
.form-header{display:flex;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0}
.form-content{padding:16px}
.form-group{margin-bottom:20px}
.form-label{font-size:13px;color:#333;margin-bottom:8px;display:block}
.form-input{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none}
.form-input:focus{border-color:#E60012}
.form-textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none;resize:none;height:120px;font-family:inherit}
.form-textarea:focus{border-color:#E60012}
.upload-images{display:flex;flex-wrap:wrap;gap:10px}
.upload-btn{width:80px;height:80px;border:1px dashed #ddd;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.upload-btn svg{width:24px;height:24px;color:#999}
.upload-btn span{font-size:10px;color:#999}
.upload-preview{position:relative;width:80px;height:80px}
.upload-preview img{width:100%;height:100%;border-radius:8px;object-fit:cover}
.upload-preview .remove-btn{position:absolute;top:-6px;right:-6px;width:20px;height:20px;background:#666;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}
.form-select{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") right 12px center no-repeat}
.submit-btn{width:100%;height:48px;background:#E60012;color:#fff;border-radius:24px;font-size:16px;border:none;cursor:pointer;margin-top:20px}

/* 聊天页 */
.chat-header{display:flex;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #f0f0f0}
.chat-user{display:flex;align-items:center;gap:10px;flex:1}
.chat-user-avatar{width:36px;height:36px;border-radius:50%;background:#E60012;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.chat-user-name{font-size:14px;color:#333;font-weight:500}
.chat-user-status{font-size:11px;color:#999}
.chat-messages{padding:16px;padding-bottom:70px}
.chat-msg{margin-bottom:16px;display:flex}
.chat-msg.other{align-items:flex-start}
.chat-msg.my{align-items:flex-start;flex-direction:row-reverse}
.chat-msg-avatar{width:32px;height:32px;border-radius:50%;background:#E60012;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.chat-msg-content{max-width:70%}
.chat-msg-bubble{padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5}
.chat-msg.other .chat-msg-bubble{background:#f5f5f5;border-bottom-left-radius:2px}
.chat-msg.my .chat-msg-bubble{background:#E60012;color:#fff;border-bottom-right-radius:2px}
.chat-msg-time{font-size:10px;color:#999;margin-top:4px}
.chat-input-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;background:#fff;border-top:1px solid #f0f0f0;display:flex;align-items:center;gap:10px;padding:10px 16px}
.chat-input{flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:20px;font-size:14px;outline:none}
.chat-input:focus{border-color:#E60012}
.send-btn{width:40px;height:40px;background:#E60012;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.send-btn svg{width:20px;height:20px;color:#fff}

/* 个人中心 */
.profile-header{background:linear-gradient(135deg,#1a1a2e,#2d2d5a);padding:30px 16px 20px;color:#fff}
.profile-info{display:flex;align-items:center;gap:14px}
.profile-avatar{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:24px;border:2px solid rgba(255,255,255,0.3)}
.profile-name{font-size:18px;font-weight:500;margin-bottom:4px}
.profile-level{display:flex;align-items:center;gap:6px}
.vip-tag{background:linear-gradient(135deg,#ffd700,#ffaa00);color:#1a1a2e;font-size:10px;padding:2px 6px;border-radius:3px;font-weight:600}
.member-btn{display:inline-block;padding:4px 10px;background:rgba(255,255,255,0.2);border-radius:10px;font-size:11px;margin-left:8px}
.profile-stats{display:flex;justify-content:space-around;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.1)}
.profile-stat{text-align:center}
.profile-stat-num{font-size:18px;font-weight:600}
.profile-stat-label{font-size:11px;opacity:0.8;margin-top:2px}

.vip-banner{background:linear-gradient(135deg,#ffd700,#ffaa00);margin:16px;padding:16px;border-radius:10px;display:flex;align-items:center;justify-content:space-between}
.vip-banner-content h3{font-size:14px;color:#1a1a2e;margin-bottom:4px}
.vip-banner-content p{font-size:11px;color:#1a1a2e;opacity:0.8}
.vip-banner-btn{padding:8px 16px;background:#1a1a2e;color:#ffd700;border-radius:16px;font-size:12px;border:none;cursor:pointer}

.quick-links{display:flex;padding:0 16px;gap:12px;margin-bottom:16px}
.quick-link{flex:1;background:#fafafa;padding:16px;border-radius:10px;text-align:center;cursor:pointer}
.quick-link svg{width:28px;height:28px;margin-bottom:8px}
.quick-link span{display:block;font-size:12px;color:#333}

.menu-section{background:#fff;margin:0 16px;border-radius:10px;overflow:hidden}
.menu-item{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer}
.menu-item:last-child{border-bottom:none}
.menu-item svg{width:20px;height:20px;margin-right:12px;color:#666}
.menu-item span{flex:1;font-size:14px;color:#333}
.menu-item .arrow{color:#ccc;font-size:12px}
.menu-item .badge{background:#E60012;color:#fff;font-size:10px;padding:2px 6px;border-radius:10px}

/* 登录页 */
.login-header{display:flex;align-items:center;padding:12px 16px;background:#fff}
.login-content{padding:40px 24px}
.login-logo{text-align:center;margin-bottom:40px}
.login-logo h1{font-size:28px;color:#E60012;font-weight:600;margin-bottom:8px}
.login-logo p{font-size:13px;color:#999}
.login-form{margin-bottom:24px}
.login-input-group{margin-bottom:16px}
.login-input-group label{display:block;font-size:13px;color:#333;margin-bottom:8px}
.login-input{width:100%;padding:14px;border:1px solid #ddd;border-radius:8px;font-size:14px;outline:none}
.login-input:focus{border-color:#E60012}
.login-btn{width:100%;height:48px;background:#E60012;color:#fff;border-radius:24px;font-size:16px;border:none;cursor:pointer;margin-top:24px}
.login-btn.secondary{background:#fff;color:#E60012;border:1px solid #E60012;margin-top:12px}
.login-footer{display:flex;justify-content:space-between;font-size:12px;color:#999;margin-top:20px}
.login-footer a{color:#E60012;text-decoration:none}

/* 会员充值 */
.recharge-packages{display:flex;flex-wrap:wrap;gap:12px;padding:16px}
.recharge-item{width:calc(50% - 6px);padding:20px;border-radius:10px;text-align:center;cursor:pointer;border:1px solid #ddd}
.recharge-item.selected{border-color:#E60012;background:#FFF5F5}
.recharge-item.popular{position:relative}
.popular-tag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#E60012;color:#fff;font-size:10px;padding:2px 8px;border-radius:8px}
.recharge-price{font-size:24px;color:#E60012;font-weight:600;margin-bottom:4px}
.recharge-price span{font-size:13px}
.recharge-desc{font-size:11px;color:#999}
.recharge-features{background:#fff;margin:16px;padding:16px;border-radius:10px}
.recharge-features h3{font-size:14px;color:#333;margin-bottom:12px}
.feature-item{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13px;color:#666}
.feature-item svg{width:16px;height:16px;color:#E60012}

/* 我的收藏 */
.collection-list{padding:12px 16px}
.collection-item{display:flex;gap:12px;padding:12px;background:#fff;border-radius:10px;margin-bottom:12px;cursor:pointer}
.collection-item img{width:80px;height:80px;border-radius:8px;object-fit:cover}
.collection-info{flex:1;display:flex;flex-direction:column;justify-content:center}
.collection-title{font-size:14px;color:#333;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.collection-price{font-size:16px;color:#E60012;font-weight:500}
.collection-time{font-size:11px;color:#999;margin-top:4px}

/* 通知页 */
.notification-list{}
.notification-item{display:flex;gap:12px;padding:16px;border-bottom:1px solid #f5f5f5;cursor:pointer;background:#fff}
.notification-item.unread{background:#FFF8F8}
.notification-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notification-icon.like{background:#FFF0F0}
.notification-icon.comment{background:#F0F7FF}
.notification-icon.system{background:#F5F5F5}
.notification-icon svg{width:20px;height:20px}
.notification-content{flex:1}
.notification-title{font-size:14px;color:#333;margin-bottom:4px}
.notification-title strong{color:#E60012}
.notification-desc{font-size:12px;color:#666;margin-bottom:4px}
.notification-time{font-size:11px;color:#999}

/* 留言列表 */
.comment-section{background:#fff;margin-top:16px;border-radius:10px;padding:16px}
.comment-section h3{font-size:14px;color:#333;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f0f0f0}
.comment-item{display:flex;gap:10px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #f5f5f5}
.comment-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.comment-avatar{width:32px;height:32px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.comment-body{flex:1}
.comment-user{font-size:13px;color:#333;font-weight:500;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.comment-time{font-size:11px;color:#999;font-weight:400}
.comment-text{font-size:13px;color:#333;line-height:1.6}
.comment-actions{display:flex;gap:16px;margin-top:8px}
.comment-action{display:flex;align-items:center;gap:4px;font-size:11px;color:#999;cursor:pointer}
.comment-action svg{width:14px;height:14px}

/* 审核提示 */
.audit-notice{background:#FFF8E1;padding:12px 16px;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.audit-notice svg{width:20px;height:20px;color:#FF9800;flex-shrink:0}
.audit-notice p{font-size:12px;color:#FF9800;line-height:1.5}

/* 留言输入 */
.comment-input-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;background:#fff;border-top:1px solid #f0f0f0;display:flex;align-items:center;gap:10px;padding:10px 16px}
.comment-input{flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:20px;font-size:14px;outline:none}
.comment-input:focus{border-color:#E60012}
</style>
</head>
<body>

<!-- ==================== 首页 ==================== -->
<div id="page-home" class="page active">
  <!-- 顶部搜索栏 - 红色背景 -->
  <div class="home-search">
    <div class="home-search-bar">
      <div class="city-btn">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
        <span>北京</span>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:10px;height:10px"><polyline points="6 9 12 15 18 9"/></svg>
      </div>
      <div class="search-input-wrap">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
        <input type="text" class="search-input" placeholder="搜索你想要的商品">
      </div>
      <div class="noti-btn">
        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
      </div>
    </div>
  </div>
  
  <!-- Banner轮播 -->
  <div class="banner-slider">
    <div class="banner-slide">
      <div class="banner-content">
        <h2>同城信息社区</h2>
        <p>发现身边的闲置好物</p>
      </div>
    </div>
    <div class="banner-dots">
      <div class="dot active"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </div>
  
  <!-- 四宫格入口 -->
  <div class="biz-grid">
    <div class="biz-grid-item buy" onclick="showPage('page-publish-select')">
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      </div>
      <span>求购大厅</span>
    </div>
    <div class="biz-grid-item sell" onclick="showPage('page-publish-select')">
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-2 0v-4m-14 4v-4m144v-4M3 5h18m0 0v4M3 5v4"/></svg>
      </div>
      <span>供应大厅</span>
    </div>
    <div class="biz-grid-item lease" onclick="showPage('page-publish-select')">
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
      </div>
      <span>房屋出租</span>
    </div>
    <div class="biz-grid-item service" onclick="showPage('page-publish-select')">
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
      </div>
      <span>生活服务</span>
    </div>
  </div>
  
  <!-- 分类标签 -->
  <div class="filter-tabs">
    <div class="filter-tab active" onclick="switchFilter(this)">最新供应</div>
    <div class="filter-tab" onclick="switchFilter(this)">最新求购</div>
    <div class="filter-tab" onclick="switchFilter(this)">附近优先</div>
    <div class="filter-tab" onclick="switchFilter(this)">推荐</div>
  </div>
  
  <!-- 商品列表 - 左图右文 -->
  <div class="post-list" id="post-list">
    <div class="post-card" onclick="showPage('page-detail')">
      <div class="post-img">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
      </div>
      <div class="post-info">
        <div class="post-info-top">
          <div class="post-title">二手沙发转让，9成新，无破损皮质沙发</div>
          <div class="post-tags">
            <span class="post-tag tag-supply">供应</span>
          </div>
          <div class="post-meta">
            <span>浏览256次</span> · <span>10分钟前</span>
          </div>
        </div>
        <div class="post-info-bottom">
          <div class="post-price">¥800 <span style="font-size:11px;color:#999;font-weight:400">可议价</span></div>
          <div class="post-actions">
            <div class="post-action" onclick="toggleLike(this,event)">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
              <span>128</span>
            </div>
            <div class="post-action" onclick="showPage('page-detail');event.stopPropagation()">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
              <span>23</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="post-card" onclick="showPage('page-detail')">
      <div class="post-img">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
      </div>
      <div class="post-info">
        <div class="post-info-top">
          <div class="post-title">求购一台二手冰箱，容量150L以上</div>
          <div class="post-tags">
            <span class="post-tag tag-demand">求购</span>
          </div>
          <div class="post-meta">
            <span>浏览128次</span> · <span>30分钟前</span>
          </div>
        </div>
        <div class="post-info-bottom">
          <div class="post-price">¥500 <span style="font-size:11px;color:#999;font-weight:400">预算</span></div>
          <div class="post-actions">
            <div class="post-action" onclick="toggleLike(this,event)">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
              <span>56</span>
            </div>
            <div class="post-action" onclick="showPage('page-detail');event.stopPropagation()">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
              <span>8</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="post-card" onclick="showPage('page-detail')">
      <div class="post-img">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
      </div>
      <div class="post-info">
        <div class="post-info-top">
          <div class="post-title">九成新山地自行车，品牌捷安特</div>
          <div class="post-tags">
            <span class="post-tag tag-supply">供应</span>
          </div>
          <div class="post-meta">
            <span>浏览189次</span> · <span>1小时前</span>
          </div>
        </div>
        <div class="post-info-bottom">
          <div class="post-price">¥350</div>
          <div class="post-actions">
            <div class="post-action" onclick="toggleLike(this,event)">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
              <span>89</span>
            </div>
            <div class="post-action" onclick="showPage('page-detail');event.stopPropagation()">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
              <span>15</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="post-card" onclick="showPage('page-detail')">
      <div class="post-img">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
      </div>
      <div class="post-info">
        <div class="post-info-top">
          <div class="post-title">朝阳区整租一居室，精装修家具齐全</div>
          <div class="post-tags">
            <span class="post-tag tag-rent">出租</span>
          </div>
          <div class="post-meta">
            <span>浏览456次</span> · <span>2小时前</span>
          </div>
        </div>
        <div class="post-info-bottom">
          <div class="post-price">¥3200<span style="font-size:11px;color:#999;font-weight:400">/月</span></div>
          <div class="post-actions">
            <div class="post-action" onclick="toggleLike(this,event)">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
              <span>234</span>
            </div>
            <div class="post-action" onclick="showPage('page-detail');event.stopPropagation()">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
              <span>42</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="bottom-nav">
    <div class="nav-item active">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
      <span>首页</span>
    </div>
    <div class="fab-btn" onclick="showPage('page-publish-select')">
      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </div>
    <div class="nav-item" onclick="showPage('page-profile')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
      <span>我的</span>
    </div>
  </div>
</div>

<!-- ==================== 发布选择页 ==================== -->
<div id="page-publish-select" class="page">
  <div class="form-header">
    <div class="back-btn" onclick="hidePage()">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
    </div>
    <h2 style="flex:1;text-align:center;font-size:16px;font-weight:500;margin-right:32px">发布信息</h2>
  </div>
  
  <div style="padding:60px 40px;text-align:center">
    <h3 style="font-size:18px;color:#333;margin-bottom:40px">选择发布类型</h3>
    <div style="display:flex;gap:20px;justify-content:center">
      <div class="popup-option supply" onclick="showPage('page-publish-supply')" style="width:140px;height:140px;">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#E60012" stroke-width="2"><path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2m-2 0v-4m-14 4v-4m14 4v-4M3 5h18m0 0v4M3 5v4"/></svg>
        <span style="font-size:16px;color:#E60012;font-weight:500">发布供应</span>
      </div>
      <div class="popup-option demand" onclick="showPage('page-publish-demand')" style="width:140px;height:140px;">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#1890FF" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
        <span style="font-size:16px;color:#1890FF;font-weight:500">发布求购</span>
      </div>
    </div>
  </div>
  
  <div class="popup-close" onclick="hidePage()">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  </div>
</div>

<!-- ==================== 发布供应表单 ==================== -->
<div id="page-publish-supply" class="page">
  <div class="form-header">
    <div class="back-btn" onclick="showPage('page-publish-select')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
    </div>
    <h2 style="flex:1;text-align:center;font-size:16px;font-weight:500;margin-right:32px">发布供应</h2>
  </div>
  
  <div class="form-content">
    <div class="form-group">
      <label class="form-label">信息标题 *</label>
      <input type="text" class="form-input" placeholder="请输入信息标题，简洁明了">
    </div>
    
    <div class="form-group">
      <label class="form-label">详细信息 *</label>
      <textarea class="form-textarea" placeholder="详细描述物品或服务的情况，包括品牌、规格、成色等信息">
二手沙发转让，9成新，无破损
¥800 可议价
浏览256 次 10分钟前朝阳区
家里换新沙发，这套旧的低价转让。皮质良好，尺寸2米，适合小户型客厅使用。购买时花了3500元，现价800元转让，有兴趣的朋友可以联系看货。
家居家具二手转让可议价
李
李先生黄钻
156
在售商品
98%
好评率
3年
入驻时间
编辑页面

发布求购

详情

留言（23）

会员中心

会员新权益

会员中心

会员特权

我的收藏

我的通知

编辑页面

发布求购

详情

留言（23）

会员中心

会员新权益

登录/注册

同城社区

会员中心

会员特权

我的收藏

我的通知
