编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>商业房产交易平台</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #1a1a1a; min-height: 100vh; overflow-x: hidden; }

/* 微信小程序容器 */
.mp-wrapper { width: 100%; min-height: 100vh; display: flex; justify-content: center; background: #f5f5f5; }
.mp-container { width: 375px; min-height: 100vh; background: #f5f5f5; position: relative; box-shadow: 0 0 20px rgba(0,0,0,0.3); overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* iPhone安全区域 */
.mp-safe-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }

.container { max-width: 375px; margin: 0 auto; padding: 12px; padding-bottom: 80px; }

/* 小程序顶部导航栏 */
.mp-navbar { background: #fff; height: 44px; display: flex; align-items: center; padding: 0 16px; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 375px; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.mp-navbar-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #333; }
.mp-navbar-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }

/* 下拉角色切换器 */
.role-selector { display: flex; align-items: center; gap: 6px; }
.role-selector select { appearance: none; background: rgba(0,0,0,0.1); border: none; border-radius: 12px; padding: 4px 24px 4px 10px; font-size: 12px; color: #333; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; }
.role-selector select:focus { outline: none; }

/* 首页内容 */
.page { display: none; }
.page.active { display: block; }

/* 首页banner */
.home-banner { background: linear-gradient(135deg,#1890ff, #096dd9); padding: 48px 16px 20px; color: #fff; width: 375px; margin: 0 auto; }
.banner-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.banner-subtitle { font-size: 13px; opacity: 0.85; }

/* 搜索区域 */
.search-wrap { background: #fff; margin: -10px 16px 12px; border-radius: 12px; padding: 12px 16px; display: flex; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.search-input { flex: 1; border: none; font-size: 14px; outline: none; }
.search-btn { background: #1890ff; color: #fff; border: none; padding: 6px 14px; border-radius: 16px; font-size: 13px; cursor: pointer; }

/* 分类标签 */
.filter-scroll { display: flex; gap: 10px; padding: 0 16px 12px; overflow-x: auto; white-space: nowrap; }
.filter-tag { padding: 6px 14px; background: #f5f5f5; border-radius: 16px; font-size: 13px; color: #666; flex-shrink: 0; }
.filter-tag.active { background: #1890ff; color: #fff; }

/* 功能模块网格 */
.module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 16px; margin-bottom: 16px; }
.module-cell { background: #fff; border-radius: 12px; padding: 16px 8px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.module-icon { width: 40px; height: 40px; border-radius: 10px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.module-icon svg { width: 22px; height: 22px; fill: #fff; }
.module-cell span { font-size: 12px; color: #333; }

/* 房源卡片 */
.house-card { background: #fff; border-radius: 12px; margin: 0 16px 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.house-img { height: 120px; display: flex; align-items: center; justify-content: center; }
.house-img svg { width: 40px; height: 40px; }
.house-info { padding: 12px; }
.house-title { font-size: 15px; color: #333; font-weight: 500; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.house-desc { font-size: 12px; color: #999; margin-bottom: 8px; }
.house-price { font-size: 16px; color: #ff4d4f; font-weight: 600; }

/* 区块标题 */
.section-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 8px; }
.section-title { font-size: 16px; color: #333; font-weight: 600; }
.section-more { font-size: 12px; color: #999; }

/* 底部导航 */
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 375px; background: #fff; display: flex; justify-content: space-around; padding: 6px 0; box-shadow: 0 -1px 8px rgba(0,0,0,0.06); z-index: 100; }
.nav-item { text-align: center; padding: 4px 8px; cursor: pointer; flex: 1; }
.nav-item svg { width: 22px; height: 22px; fill: #999; margin-bottom: 2px; }
.nav-item span { font-size: 10px; color: #999; display: block; }
.nav-item.active svg { fill: #1890ff; }
.nav-item.active span { color: #1890ff; }

/* 详情页头部 */
.detail-header { background: linear-gradient(135deg, #1890ff, #096dd9); padding: 50px 16px 20px; color: #fff; text-align: center; position: relative; }
.detail-header h1 { font-size: 18px; font-weight: 600; }
.back-btn { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 4px; }

/* 详情卡片 */
.detail-card { background: #fff; border-radius: 12px; margin: -10px 16px 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: relative; z-index: 1; }
.detail-title { font-size: 17px; color: #333; font-weight: 600; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.detail-desc { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 16px; }
.detail-info { background: #f8f9fa; border-radius: 8px; padding: 12px; }
.info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
.info-row:last-child { border-bottom: none; }
.info-row span:first-child { color: #999; font-size: 13px; }
.info-row span:last-child { color: #333; font-size: 13px; }

/* 列表卡片 */
.list-card { background: #fff; border-radius: 12px; margin: 0 16px 12px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.list-title { font-size: 15px; color: #333; font-weight: 500; }
.list-status { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.status-pending { background: #fff7e6; color: #fa8c16; }
.status-active { background: #e6f7ff; color: #1890ff; }
.status-done { background: #f6ffed; color: #52c41a; }
.list-content { font-size: 13px; color: #666; line-height: 1.6; }
.list-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; display: flex; justify-content: space-between; font-size: 11px; color: #999; }

/* 子功能列表 */
.sub-list { background: #fff; border-radius: 12px; margin: 0 16px 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.sub-item { padding: 14px 16px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; cursor: pointer; }
.sub-item:last-child { border-bottom: none; }
.sub-item:active { background: #fafafa; }
.sub-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; }
.sub-icon svg { width: 20px; height: 20px; fill: #fff; }
.sub-info { flex: 1; min-width: 0; }
.sub-info h5 { font-size: 14px; color: #333; margin-bottom: 2px; }
.sub-info p { font-size: 12px; color: #999; }
.sub-arrow { color: #ccc; font-size: 16px; margin-left: 8px; }

/* 表单样式 */
.form-group { margin-bottom: 14px; }
.form-label { font-size: 13px; color: #333; margin-bottom: 6px; display: block; }
.form-input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
.form-btn { width: 100%; background: #1890ff; color: #fff; border: none; padding: 12px; border-radius: 8px; font-size: 15px; cursor: pointer; margin-top: 8px; }
.form-btn:active { opacity: 0.85; }

/* 统计卡片 */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.stat-card { background: #fff; border-radius: 10px; padding: 14px 8px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.stat-value { font-size: 20px; color: #1890ff; font-weight: 700; }
.stat-label { font-size: 11px; color: #999; margin-top: 4px; }

/* Tab切换 */
.tab-bar { background: #fff; display: flex; padding: 0 16px; border-bottom: 1px solid #f0f0f0; }
.tab-item { padding: 12px 16px; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-item.active { color: #1890ff; border-bottom-color: #1890ff; }

/* 消息列表 */
.msg-item { background: #fff; border-radius: 12px; margin: 0 16px 12px; padding: 14px; display: flex; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.msg-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; }
.msg-icon svg { width: 20px; height: 20px; fill: #fff; }
.msg-content { flex: 1; }
.msg-title { font-size: 14px; color: #333; margin-bottom: 4px; }
.msg-text { font-size: 12px; color: #999; line-height: 1.5; }
.msg-time { font-size: 11px; color: #ccc; margin-top: 6px; }

/* 用户信息头部 */
.user-header { background: linear-gradient(135deg, #1890ff, #096dd9); padding: 50px 16px 24px; color: #fff; display: flex; align-items: center; }
.profile-avatar { width: 56px; height: 56px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 14px; }
.profile-avatar svg { width: 32px; height: 32px; fill: #1890ff; }
.profile-info h2 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.profile-info p { font-size: 13px; opacity: 0.85; }

/* 角色主题色 */
.theme-user { background: linear-gradient(135deg, #1890ff, #096dd9) !important; }
.theme-owner { background: linear-gradient(135deg, #52c41a, #389e0d) !important; }
.theme-agent { background: linear-gradient(135deg, #fa8c16, #d46b08) !important; }
.color-user { color: #1890ff !important; }
.color-owner { color:#52c41a !important; }
.color-agent { color: #fa8c16 !important; }
.fill-user { fill: #1890ff !important; }
.fill-owner { fill: #52c41a !important; }
.fill-agent { fill: #fa8c16 !important; }

/* 演示框 */
.demo-box { background: linear-gradient(135deg, #e6f7ff, #bae7ff); border-radius: 10px; padding: 18px; text-align: center; margin-top: 16px; }
.demo-box h5 { color: #1890ff; margin-bottom: 8px; font-size: 14px; }
.demo-box p { font-size: 12px; color: #666; margin-bottom: 12px; }
.demo-btn { background: #1890ff; color: #fff; border: none; padding: 10px 28px; border-radius: 20px; font-size: 14px; cursor: pointer; }
</style>
</head>
<body>

<!-- 微信小程序容器 -->
<div class="mp-wrapper">
<div class="mp-container">

<!-- ============ 首页（默认用户端） ============ -->
<div id="home" class="page active">
  <!-- 小程序导航栏 -->
  <div class="mp-navbar">
    <div class="role-selector">
      <select id="role-select" onchange="switchRole(this.value)">
        <option value="user">用户端</option>
        <option value="owner">业主端</option>
        <option value="agent">中介端</option>
      </select>
    </div>
    <div class="mp-navbar-title" id="nav-title">商业房产</div>
    <div class="mp-navbar-icon" onclick="showPage('user-profile')">
      <svg width="22" height="22" fill="#333" viewBox="0 0 24 24"><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>
  
  <!-- 用户端内容 -->
  <div id="content-user">
    <div class="home-banner theme-user">
      <div class="banner-title">商业房产交易平台</div>
      <div class="banner-subtitle">专注写字楼、商铺、厂房交易</div>
    </div>
    
    <div class="search-wrap">
      <input type="text" class="search-input" placeholder="搜索写字楼、商铺、厂房...">
      <button class="search-btn">搜索</button>
    </div>
    
    <div class="filter-scroll">
      <span class="filter-tag active" data-type="all" onclick="filterHouses('all', this)">全部</span>
      <span class="filter-tag" data-type="office" onclick="filterHouses('office', this)">写字楼</span>
      <span class="filter-tag" data-type="shop" onclick="filterHouses('shop', this)">商铺</span>
      <span class="filter-tag" data-type="factory" onclick="filterHouses('factory', this)">厂房</span>
      <span class="filter-tag" data-type="warehouse" onclick="filterHouses('warehouse', this)">仓库</span>
    </div>
    
    <div class="module-grid">
      <div class="module-cell" onclick="showPage('detail-search')">
        <div class="module-icon" style="background: linear-gradient(135deg, #1890ff, #096dd9);">
          <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 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>
        </div>
        <span>房源搜索</span>
      </div>
      <div class="module-cell" onclick="showPage('detail-contract')">
        <div class="module-icon" style="background: linear-gradient(135deg, #52c41a, #389e0d);">
          <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
        </div>
        <span>在线签合同</span>
      </div>
      <div class="module-cell" onclick="showPage('detail-entrust')">
        <div class="module-icon" style="background: linear-gradient(135deg, #fa8c16, #d46b08);">
          <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
        </div>
        <span>一键委托</span>
      </div>
      <div class="module-cell" onclick="showPage('user-appoint')">
        <div class="module-icon" style="background: linear-gradient(135deg, #eb2f96, #c41e7e);">
          <svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>
        </div>
        <span>预约看房</span>
      </div>
    </div>
    
    <div class="section-header">
      <span class="section-title">推荐房源</span>
      <span class="section-more" onclick="showPage('user-rent')">更多 ›</span>
    </div>
    
    <div class="house-card" data-type="office" onclick="showPage('detail-house')">
      <div class="house-img" style="background: linear-gradient(135deg, #e6f7ff, #bae7ff);">
        <svg fill="#1890ff" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
      </div>
      <div class="house-info">
        <div class="house-title">国贸CBD核心写字楼</div>
        <div class="house-desc">朝阳区建国路 | 500㎡ | 精装修</div>
        <div class="house-price">¥8.5万/月</div>
      </div>
    </div>
    
    <div class="house-card" data-type="shop" onclick="showPage('detail-house')">
      <div class="house-img" style="background: linear-gradient(135deg, #fff7e6, #ffd591);">
        <svg fill="#fa8c16" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
      </div>
      <div class="house-info">
        <div class="house-title">望京SOHO商铺</div>
        <div class="house-desc">朝阳区望京街道 | 120㎡ | 餐饮许可</div>
        <div class="house-price">¥5.2万/月</div>
      </div>
    </div>
    
    <div class="house-card" data-type="factory" onclick="showPage('detail-house')">
      <div class="house-img" style="background: linear-gradient(135deg, #f6ffed, #b7eb8f);">
        <svg fill="#52c41a" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
      </div>
      <div class="house-info">
        <div class="house-title">亦庄工业区厂房</div>
        <div class="house-desc">大兴区亦庄 | 2000㎡ | 可环评</div>
        <div class="house-price">¥18万/月</div>
      </div>
    </div>
  </div>
  
  <!-- 业主端内容 -->
  <div id="content-owner" style="display: none;">
    <div class="home-banner theme-owner">
      <div class="banner-title">业主委托平台</div>
      <div class="banner-subtitle">轻松委托，省心出租出售</div>
    </div>
    
    <div style="background: #fff; margin: -10px 16px 12px; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
      <div style="display: flex; align-items: center; margin-bottom: 14px;">
        <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #52c41a, #389e0d); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
          <svg width="28" height="28" fill="#fff" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
        </div>
        <div>
          <h3 style="font-size: 16px; color: #333;">李业主</h3>
          <p style="font-size: 12px; color: #999;">138****6666</p>
        </div>
      </div>
      <div class="stats-grid" style="margin: 0;">
        <div class="stat-card">
          <div class="stat-value color-owner">3</div>
          <div class="stat-label">托管房屋</div>
        </div>
        <div class="stat-card">
          <div class="stat-value color-owner">¥25.6万</div>
          <div class="stat-label">总收益</div>
        </div>
        <div class="stat-card">
          <div class="stat-value color-owner">2</div>
          <div class="stat-label">成交中</div>
        </div>
      </div>
    </div>
    
    <div class="sub-list">
      <div class="sub-item" onclick="showPage('owner-entrust')">
        <div class="sub-icon" style="background: linear-gradient(135deg, #52c41a, #389e0d);">
          <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
        </div>
        <div class="sub-info"><h5>一键委托</h5><p>委托出售/出租商业房产</p></div>
        <span class="sub-arrow">›</span>
      </div>
      <div class="sub-item" onclick="showPage('owner-house')">
        <div class="sub-icon" style="background: linear-gradient(135deg, #1890ff, #096dd9);">
          <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
        </div>
        <div class="sub-info"><h5>房屋管理</h5><p>查看名下托管房屋列表</p></div>
        <span class="sub-arrow">›</span>
      </div>
      <div class="sub-item" onclick="showPage('owner-deal')">
        <div class="sub-icon" style="background: linear-gradient(135deg, #fa8c16, #d46b08);">
          <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
        </div>
        <div class="sub-info"><h5>成交记录</h5><p>查看房屋成交记录</p></div>
        <span class="sub-arrow">›</span>
      </div>
      <div class="sub-item" onclick="showPage('owner-profit')">
        <div class="sub-icon" style="background: linear-gradient(135deg, #eb2f96, #c41e7e);">
          <svg viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
        </div>
        <div class="sub-info"><h5>收益查看</h5><p>查看租金收益/售房款</p></div>
        <span class="sub-arrow">›</span>
      </div>
    </div>
  </div>
  
  <!-- 中介端内容 -->
  <div id="content-agent" style="display: none;">
    <div class="home-banner theme-agent">
      <div class="banner-title">中介工作台</div>
      <div class="banner-subtitle">高效管理房源与客户</div>
    </div>
    
    <div style="background: #fff; margin: -10px 16px 12px; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
      <div style="display: flex; align-items: center; margin-bottom: 14px;">
        <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #fa8c16, #d46b08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
          <svg width="28" height="28" fill="#fff" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z"/></svg>
        </div>
        <div>
          <h3 style="font-size: 16px; color: #333;">张经理</h3>
          <p style="font-size: 12px; color: #999;">金牌中介</p>
        </div>
      </div>
      <div class="stats-grid" style="margin: 0;">
        <div class="stat-card">
          <div class="stat-value color-agent">5</div>
          <div class="stat-label">今日获客</div>
        </div>
        <div class="stat-card">
          <div class="stat-value fill-user">8</div>
          <div class="stat-label">待跟进</div>
        </div>
        <div class="stat-card">
          <div class="stat-value color-owner">¥128万</div>
          <div class="stat-label">本月业绩</div>
        </div>
      </div>
    </div>
    
    <div class="sub-list">
      <div class="sub-item" onclick="showPage('agent-property')">
        <div class="sub-icon" style="background: linear-gradient(135deg, #1890ff, #096dd9);">
          <svg viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9 8h2v8H9zm4 0h2v8h-2z"/></svg>
        </div>
        <div class="sub-info"><h5>上传房源</h5><p>上传商业房产信息</p></div>
        <span class="sub-arrow">›</span>
      </div>
      <div class="sub-item" onclick="showPage('agent-my-property')">
        <div class="sub-icon" style="background: linear-gradient(135deg, #52c41a, #389e0d);">
          <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
        </div>
        <div class="sub-info"><h5>我的房源</h5><p>查看自己上传的房源列表</p></div>
        <span class="sub-arrow">›</span>
      </div>
      <div class="sub-item" onclick="showPage('agent-customer')">
        <div class="sub-icon" style="background: linear-gradient(135deg, #fa8c16, #d46b08);">
          <svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
        </div>
        <div class="sub-info"><h5>客资管理</h5><p>客户列表、跟进状态</p></div>
        <span class="sub-arrow">›</span>
      </div>
      <div class="sub-item" onclick="showPage('agent-contract')">
        <div class="sub-icon" style="background: linear-gradient(135deg, #eb2f96, #c41e7e);">
          <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
        </div>
        <div class="sub-info"><h5>合同管理</h5><p>发起合同、跟进状态</p></div>
        <span class="sub-arrow">›</span>
      </div>
      <div class="sub-item" onclick="showPage('agent-stats')">
        <div class="sub-icon" style="background: linear-gradient(135deg, #722ed1, #531d93);">
          <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
        </div>
        <div class="sub-info"><h5>业绩统计</h5><p>个人成交业绩、收入统计</p></div>
        <span class="sub-arrow">›</span>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav" id="nav-user">
    <div class="nav-item active" onclick="showPage('home')">
      <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
      <span>首页</span>
    </div>
    <div class="nav-item" onclick="showPage('user-rent')">
      <svg viewBox="0 0 24 24"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9 8h2v8H9zm4 0h2v8h-2z"/></svg>
      <span>租房</span>
    </div>
    <div class="nav-item" onclick="showPage('user-buy')">
      <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
      <span>买房</span>
    </div>
    <div class="nav-item" onclick="showPage('user-contract')">
      <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
      <span>合同</span>
    </div>
    <div class="nav-item" onclick="showPage('user-profile')">
      <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
      <span>我的</span>
    </div>
  </div>
</div>

<!-- ============ 房源详情页 ============ -->
<div id="detail-house" class="page">
  <div class="detail-header">
    <button class="back-btn" onclick="goBack()">‹</button>
    <h1>房源详情</h1>
  </div>
  <div class="detail-card">
    <div style="background: linear-gradient(135deg, #e6f7ff, #bae7ff); border-radius: 10px; height: 160px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;">
      <svg width="50" height="50" fill="#1890ff" 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>
    </div>
    <div class="detail-title" style="border: none; margin-bottom: 8px; padding: 0;">国贸CBD核心写字楼</div>
    <div style="font-size: 22px; color: #ff4d4f; font-weight: 700; margin-bottom: 14px;">¥8.5万/月</div>
    <div class="detail-info">
      <div class="info-row"><span>面积</span><span>500㎡</span></div>
      <div class="info-row"><span>位置</span><span>朝阳区建国路88号</span></div>
      <div class="info-row"><span>楼层</span><span>15层/共32层</span></div>
      <div class="info-row"><span>装修</span><span>精装修</span></div>
      <div class="info-row"><span>类型</span><span>写字楼</span></div>
    </div>
    <h4 style="font-size: 14px; color: #333; margin: 16px 0 8px;">房源描述</h4>
    <p style="font-size: 13px; color: #666; line-height: 1.8;">位于国贸CBD核心地段，交通便利，地铁上盖。甲级写字楼，大堂气派，配套齐全。适合中型企业办公使用。</p>
  </div>
  
  <div class="sub-list" style="margin-top: 12px;">
    <div class="sub-item" onclick="showPage('detail-appoint')">
      <div class="sub-icon" style="background: linear-gradient(135deg, #1890ff, #096dd9);">
        <svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>
      </div>
      <div class="sub-info"><h5>预约看房</h5><p>选择时间，中介跟进服务</p></div>
      <span class="sub-arrow">›</span>
    </div>
    <div class="sub-item" onclick="showPage('detail-intent')">
      <div class="sub-icon" style="background: linear-gradient(135deg, #52c41a, #389e0d);">
        <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
      </div>
      <div class="sub-info"><h5>意向登记</h5><p>登记租房意向，推送给中介</p></div>
      <span class="sub-arrow">›</span>
    </div>
  </div>
</div>

<!-- ============ 预约看房页 ============ -->
<div id="detail-appoint" class="page">
  <div class="detail-header">
    <button class="back-btn" onclick="goBack()">‹</button>
    <h1>预约看房</h1>
  </div>
  <div class="detail-card">
    <div class="form-group">
      <label class="form-label">选择日期</label>
      <input type="date" class="form-input">
    </div>
    <div class="form-group">
      <label class="form-label">选择时间段</label>
      <div class="filter-scroll" style="padding: 0;">
        <span class="filter-tag active">09:00-11:00</span>
        <span class="filter-tag">14:00-16:00</span>
        <span class="filter-tag">16:00-18:00</span>
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">备注信息（选填）</label>
      <textarea class="form-input" rows="3" placeholder="如有特殊需求请备注">
编辑页面

意向登记

张三

我的预约

我的意向

我的合同

我的收藏

消息通知

选择委托类型

房源搜索

功能演示

在线签合同

功能演示

一键委托

功能演示
