编辑页面

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, sans-serif; background: #f5f5f5; max-width: 430px; margin: 0 auto; min-height: 100vh; overflow-x: hidden; }

/* 状态栏 */
.status-bar { background: linear-gradient(135deg, #ff6b35, #f7c948); color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; z-index: 1000; }
.status-bar .time { font-weight: 600; }
.status-icons { display: flex; gap: 4px; }

/* 页面容器 */
.page-container { position: relative; min-height: 100vh; padding-top: 40px; padding-bottom: 80px; }
.page { display: none; animation: slideIn 0.3s ease; }
.page.active { display: block; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* 顶部导航栏 */
.nav-bar { background: linear-gradient(135deg, #ff6b35, #f7c948); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 40px; z-index: 99; }
.nav-bar.transparent { background: transparent; position: absolute; top: 40px; left: 0; right: 0; }
.nav-back { display: flex; align-items: center; gap: 4px; font-size: 15px; cursor: pointer; }
.nav-title { font-size: 17px; font-weight: 600; }
.nav-right { font-size: 14px; cursor: pointer; }

/* 首页头部 */
.home-header { background: linear-gradient(135deg, #ff6b35, #f7c948); color: #fff; padding: 16px 20px 32px; border-radius: 0 0 24px 24px; }
.home-header h1 { font-size: 22px; margin-bottom: 4px; }
.home-header p { font-size: 12px; opacity: 0.9; }

/* 用户卡片 */
.user-card { background: #fff; margin: -16px 16px 16px; padding: 16px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); display: flex; align-items: center; gap: 12px; position: relative; z-index: 10; }
.avatar { width: 48px; height: 48px; background: linear-gradient(135deg, #ff6b35, #f7c948); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }
.user-info { flex: 1; }
.user-info h3 { font-size: 16px; color: #333; }
.user-info p { font-size: 12px; color: #999; margin-top: 2px; }
.badge { background: linear-gradient(135deg, #ff6b35, #f7c948); color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 11px; }

/* 数据概览 */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px; margin-bottom: 20px; }
.stat-item { background: #fff; padding: 12px 8px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.stat-item .num { font-size: 16px; font-weight: 700; color: #ff6b35; }
.stat-item .label { font-size: 10px; color: #999; margin-top: 4px; }

/* 快捷入口 */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px; margin-bottom: 20px; }
.quick-item { background: #fff; padding: 14px 8px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.quick-item:active { transform: scale(0.95); }
.quick-item .icon { font-size: 24px; margin-bottom: 6px; }
.quick-item .label { font-size: 11px; color: #333; }

/* 功能模块 */
.section-title { padding: 0 16px; margin-bottom: 12px; font-size: 16px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 8px; }
.section-title::before { content: ''; width: 4px; height: 16px; background: linear-gradient(135deg, #ff6b35, #f7c948); border-radius: 2px; }

.func-grid { padding: 0 16px; margin-bottom: 20px; }
.func-row { background: #fff; border-radius: 12px; margin-bottom: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.func-header { padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.func-header .icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.func-header .title { flex: 1; }
.func-header .title h4 { font-size: 15px; color: #333; }
.func-header .title p { font-size: 11px; color: #999; margin-top: 2px; }
.func-header .arrow { color: #ccc; transition: transform 0.3s; font-size: 14px; }
.func-header .arrow.expanded { transform: rotate(90deg); }

.func-items { display: none; padding: 0 16px 12px; background: #fafafa; }
.func-items.show { display: block; }
.func-item { display: flex; align-items: center; padding: 10px 12px; background: #fff; border-radius: 8px; margin-top: 8px; cursor: pointer; transition: background 0.2s; }
.func-item:active { background: #fff5f0; }
.func-item .item-icon { width: 28px; height: 28px; background: linear-gradient(135deg, #fff0e8, #fff8f5); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-right: 10px; }
.func-item .item-name { flex: 1; font-size: 13px; color: #444; }
.func-item .item-arrow { color: #ccc; font-size: 12px; }

/* 底部导航 */
.tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: #fff; display: flex; justify-content: space-around; padding: 8px 0 20px; box-shadow: 0 -2px 12px rgba(0,0,0,0.08); border-radius: 20px 20px 0 0; z-index: 100; }
.tab-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 12px; transition: color 0.2s; }
.tab-item .icon { font-size: 22px; }
.tab-item .label { font-size: 10px; color: #999; }
.tab-item.active .label { color: #ff6b35; }
.tab-item.active { color: #ff6b35; }

/* ========== 二级页面通用样式 ========== */
.page-header { background: #fff; padding: 16px; border-bottom: 1px solid #f0f0f0; }
.page-header h2 { font-size: 18px; color: #333; margin-bottom: 4px; }
.page-header p { font-size: 12px; color: #999; }

/* 卡片列表 */
.card-list { padding: 16px; }
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.card-title { font-size: 15px; color: #333; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.card-title .tag { background: #fff0e8; color: #ff6b35; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.card-desc { font-size: 13px; color: #666; line-height: 1.5; }
.card-meta { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f5f5f5; }
.card-meta .meta-item { font-size: 12px; color: #999; }
.card-meta .meta-item span { color: #ff6b35; font-weight: 600; }

/* 表单样式 */
.form-section { background: #fff; margin-bottom: 12px; }
.form-section-title { padding: 12px 16px; font-size: 14px; color: #999; background: #fafafa; }
.form-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; }
.form-item:last-child { border-bottom: none; }
.form-label { width: 90px; font-size: 14px; color: #333; }
.form-value { flex: 1; }
.form-input { width: 100%; border: none; font-size: 14px; color: #333; background: transparent; outline: none; }
.form-input::placeholder { color: #ccc; }
.form-arrow { color: #ccc; font-size: 14px; margin-left: 8px; }

/* 按钮 */
.btn { display: block; width: calc(100% - 32px); margin: 20px 16px; padding: 14px; background: linear-gradient(135deg, #ff6b35, #f7c948); color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: 600; text-align: center; cursor: pointer; }
.btn:active { opacity: 0.9; transform: scale(0.98); }
.btn-secondary { background: #fff; color: #ff6b35; border: 1px solid #ff6b35; margin-top: 10px; }

/* 数据统计卡片 */
.data-card { background: #fff; border-radius: 12px; padding: 16px; margin: 0 16px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.data-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.data-card-title { font-size: 14px; color: #666; }
.data-card-trend { font-size: 12px; color: #52c41a; }
.data-card-value { font-size: 28px; font-weight: 700; color: #333; }
.data-card-sub { font-size: 12px; color: #999; margin-top: 4px; }
.data-card-chart { height: 60px; display: flex; align-items: flex-end; gap: 4px; margin-top: 12px; }
.chart-bar { flex: 1; background: linear-gradient(to top, #ff6b35, #f7c948); border-radius: 4px 4px 0 0; min-height: 8px; }

/* 表格 */
.table { width: 100%; border-collapse: collapse; }
.table th { background: #fafafa; padding: 12px 8px; font-size: 12px; color: #999; font-weight: normal; text-align: left; }
.table td { padding: 14px 8px; font-size: 13px; color: #333; border-bottom: 1px solid #f5f5f5; }
.table tr:last-child td { border-bottom: none; }
.table .num { color: #ff6b35; font-weight: 600; }

/* 列表项 */
.list-item { display: flex; align-items: center; padding: 14px 16px; background: #fff; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
.list-item:active { background: #fafafa; }
.list-item .list-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; }
.list-item .list-content { flex: 1; }
.list-item .list-title { font-size: 14px; color: #333; }
.list-item .list-desc { font-size: 12px; color: #999; margin-top: 2px; }
.list-item .list-arrow { color: #ccc; font-size: 14px; }
.list-item .list-badge { background: #ff4d4f;color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 10px; }

/* 空状态 */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .empty-icon { font-size: 64px; margin-bottom: 16px; }
.empty-state .empty-text { font-size: 14px; color: #999; }

/* 筛选标签 */
.filter-tags { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; background: #fff; }
.filter-tag { padding: 6px 14px; border-radius: 16px; font-size: 12px; color: #666; background: #f5f5f5; white-space: nowrap; cursor: pointer; }
.filter-tag.active { background: linear-gradient(135deg, #ff6b35, #f7c948); color: #fff; }

/* 标签页 */
.tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; }
.tab { flex: 1; padding: 12px; text-align: center; font-size: 14px; color: #666; cursor: pointer; position: relative; }
.tab.active { color: #ff6b35; font-weight: 600; }
.tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: #ff6b35; border-radius: 2px; }

/* 步骤指示 */
.step-indicator { display: flex; justify-content: center; padding: 20px; }
.step { width: 8px; height: 8px; border-radius: 50%; background: #ddd; margin: 0 4px; }
.step.active { background: #ff6b35; width: 24px; border-radius: 4px; }

/* 上传区域 */
.upload-zone { border: 2px dashed #ddd; border-radius: 12px; padding: 30px; text-align: center; background: #fafafa; margin: 16px; cursor: pointer; }
.upload-zone:active { border-color: #ff6b35; background: #fff0e8; }
.upload-zone .upload-icon { font-size: 40px; margin-bottom: 8px; }
.upload-zone .upload-text { font-size: 14px; color: #666; }
.upload-zone .upload-hint { font-size: 12px; color: #999; margin-top: 4px; }

/* 预览网格 */
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; }
.preview-item { aspect-ratio: 1; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }

/* 通知列表 */
.notify-item { display: flex; padding: 14px 16px; background: #fff; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
.notify-item:active { background: #fafafa; }
.notify-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 12px; }
.notify-content { flex: 1; }
.notify-title { font-size: 14px; color: #333; margin-bottom: 4px; }
.notify-time { font-size: 11px; color: #999; }
.notify-desc { font-size: 12px; color: #666; margin-top: 4px; }

/* 金额展示 */
.amount-display { text-align: center; padding: 30px; background: linear-gradient(135deg, #ff6b35, #f7c948); color: #fff; margin: 16px; border-radius: 12px; }
.amount-label { font-size: 14px; opacity: 0.9; }
.amount-value { font-size: 36px; font-weight: 700; margin: 10px 0; }
.amount-sub { font-size: 12px; opacity: 0.8; }

/* 分页 */
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 20px; }
.pagination button { padding: 8px 16px; border: 1px solid #ddd; background: #fff; border-radius: 6px; font-size: 13px; cursor: pointer; }
.pagination button:active { background: #f5f5f5; }
.pagination span { font-size: 13px; color: #666; }

/* 订单卡片 */
.order-card { background: #fff; border-radius: 12px; margin: 0 16px 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.order-header { display: flex; justify-content: space-between; padding: 12px 16px; background: #fafafa; font-size: 12px; color: #999; }
.order-body { padding: 16px; display: flex; gap: 12px; }
.order-img { width: 70px; height: 70px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.order-info { flex: 1; }
.order-title { font-size: 14px; color: #333; margin-bottom: 4px; }
.order-spec { font-size: 12px; color: #999; margin-bottom: 8px; }
.order-price { font-size: 14px; color: #ff6b35; font-weight: 600; }
.order-footer { padding: 12px 16px; border-top: 1px solid #f5f5f5; display: flex; justify-content: flex-end; gap: 8px; }
.order-btn { padding: 6px 16px; border-radius: 16px; font-size: 12px; border: 1px solid #ddd; background: #fff; color: #666; }
.order-btn.primary { background: #ff6b35; color: #fff; border-color: #ff6b35; }

/* 优惠券卡片 */
.coupon-card { background: linear-gradient(135deg, #ff6b35, #ff8c5a); color: #fff; border-radius: 12px; margin: 0 16px 12px; padding: 16px; display: flex; }
.coupon-left { text-align: center; padding-right: 16px; border-right: 1px dashed rgba(255,255,255,0.5); margin-right: 16px; }
.coupon-value { font-size: 28px; font-weight: 700; }
.coupon-unit { font-size: 12px; opacity: 0.9; }
.coupon-right { flex: 1; }
.coupon-title { font-size: 14px; margin-bottom: 4px; }
.coupon-desc { font-size: 11px; opacity: 0.8; margin-bottom: 8px; }
.coupon-time { font-size: 10px; opacity: 0.7; }

/* 分销商卡片 */
.agent-card { background: #fff; border-radius: 12px; margin: 0 16px 12px; padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.agent-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #9b59b6, #8e44ad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }
.agent-info { flex: 1; }
.agent-name { font-size: 14px; color: #333; margin-bottom: 4px; }
.agent-stats { font-size: 12px; color: #999; }
.agent-stats span { color: #ff6b35; margin: 0 4px; }
.agent-badge { padding: 4px 10px; background: #fff0e8; color: #ff6b35; border-radius: 12px; font-size: 11px; }

/* 收益明细 */
.earning-item { display: flex; justify-content: space-between; padding: 14px 16px; background: #fff; border-bottom: 1px solid #f5f5f5; }
.earning-left .earning-title { font-size: 14px; color: #333; margin-bottom: 4px; }
.earning-left .earning-time { font-size: 11px; color: #999; }
.earning-right { text-align: right; }
.earning-amount { font-size: 15px; color: #ff6b35; font-weight: 600; }
.earning-balance { font-size: 11px; color: #999; margin-top: 2px; }
</style>
</head>
<body>
<!-- 状态栏 -->
<div class="status-bar">
  <span class="time">9:41</span>
  <div class="status-icons">
    <svg width="16" height="12" viewBox="0 0 16 12"><path d="M8 2.5C5.5 2.5 3.2 3.3 1.3 4.7.5 5.3 0 6.2 0 7.2c0 1 .5 1.9 1.3 2.5C2.7 10.7 5.2 11.5 8 11.5s5.3-.8 6.7-1.8c.8-.6 1.3-1.5 1.3-2.5 0-1-.5-1.9-1.3-2.5C12.8 3.3 10.5 2.5 8 2.5z" fill="#fff"/></svg>
    <svg width="14" height="10" viewBox="0 0 14 10"><rect x="0" y="2" width="12" height="6" rx="1.5" fill="none" stroke="#fff" stroke-width="1"/><path d="M12 4h1.5" stroke="#fff" stroke-width="1.5"/></svg>
    <svg width="25" height="12" viewBox="0 0 25 12"><rect x="0" y="1" width="20" height="10" rx="2" fill="none" stroke="#fff" stroke-width="1"/><rect x="2" y="3" width="14" height="6" rx="1" fill="#fff"/></svg>
  </div>
</div>

<div class="page-container">
  <!-- ========== 首页 ========== -->
  <div class="page active" id="page-home">
    <div class="home-header">
      <h1>商家工作台</h1>
      <p>短剧分销 · 入驻管理 · 数据分析</p>
    </div>

    <div class="user-card">
      <div class="avatar">商</div>
      <div class="user-info">
        <h3>星耀传媒旗舰店</h3>
        <p>商家ID: SD20240001 · 已认证</p>
      </div>
      <span class="badge">VIP商家</span>
    </div>

    <div class="stats-grid">
      <div class="stat-item" onclick="goPage('收益统计')">
        <div class="num">¥12.8万</div>
        <div class="label">今日收益</div>
      </div>
      <div class="stat-item" onclick="goPage('订单处理')">
        <div class="num">386</div>
        <div class="label">新订单</div>
      </div>
      <div class="stat-item" onclick="goPage('短剧数据统计')">
        <div class="num">1.2万</div>
        <div class="label">播放量</div>
      </div>
      <div class="stat-item" onclick="goPage('分销商管理')">
        <div class="num">86</div>
        <div class="label">分销商</div>
      </div>
    </div>

    <div class="quick-actions">
      <div class="quick-item" onclick="goPage('入驻申请')">
        <div class="icon">📝</div>
        <div class="label">入驻申请</div>
      </div>
      <div class="quick-item" onclick="goPage('短剧上传')">
        <div class="icon">🎬</div>
        <div class="label">短剧上传</div>
      </div>
      <div class="quick-item" onclick="goPage('商品发布')">
        <div class="icon">🛍️</div>
        <div class="label">商品发布</div>
      </div>
      <div class="quick-item" onclick="goPage('提现申请')">
        <div class="icon">💰</div>
        <div class="label">提现</div>
      </div>
    </div>

    <div class="section-title">功能模块</div>
    
    <div class="func-grid">
      <div class="func-row">
        <div class="func-header" onclick="toggleFunc(this)">
          <div class="icon" style="background: linear-gradient(135deg, #ff6b35, #f7c948);">🏢</div>
          <div class="title">
            <h4>商家入驻管理</h4>
            <p>入驻申请 · 审核查询 · 店铺信息</p>
          </div>
          <span class="arrow">›</span>
        </div>
        <div class="func-items">
          <div class="func-item" onclick="goPage('入驻申请')">
            <div class="item-icon">📝</div>
            <span class="item-name">入驻申请</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('入驻审核查询')">
            <div class="item-icon">🔍</div>
            <span class="item-name">入驻审核查询</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('店铺信息管理')">
            <div class="item-icon">⚙️</div>
            <span class="item-name">店铺信息管理</span>
            <span class="item-arrow">›</span>
</div>
        </div>
      </div>
    </div>

    <div class="func-grid">
      <div class="func-row">
        <div class="func-header" onclick="toggleFunc(this)">
          <div class="icon" style="background: linear-gradient(135deg, #e74c3c, #c0392b);">🎬</div>
          <div class="title">
            <h4>短剧管理</h4>
            <p>短剧上传 · 编辑 · 数据统计</p>
          </div>
          <span class="arrow">›</span>
        </div>
        <div class="func-items">
          <div class="func-item" onclick="goPage('短剧上传')">
            <div class="item-icon">⬆️</div>
            <span class="item-name">短剧上传</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('短剧编辑')">
            <div class="item-icon">✏️</div>
            <span class="item-name">短剧编辑</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('短剧数据统计')">
            <div class="item-icon">📊</div>
            <span class="item-name">短剧数据统计</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('评论管理')">
            <div class="item-icon">💬</div>
            <span class="item-name">评论管理</span>
            <span class="item-arrow">›</span>
          </div>
        </div>
      </div>
    </div>

    <div class="func-grid">
      <div class="func-row">
        <div class="func-header" onclick="toggleFunc(this)">
          <div class="icon" style="background: linear-gradient(135deg, #3498db, #2980b9);">🛒</div>
          <div class="title">
            <h4>商城商品管理</h4>
            <p>商品发布 · 订单处理 · 营销设置</p>
          </div>
          <span class="arrow">›</span>
        </div>
        <div class="func-items">
          <div class="func-item" onclick="goPage('商品发布')">
            <div class="item-icon">➕</div>
            <span class="item-name">商品发布</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('商品上下架')">
            <div class="item-icon">📦</div>
            <span class="item-name">商品上下架</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('订单处理')">
            <div class="item-icon">📋</div>
            <span class="item-name">订单处理</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('库存管理')">
            <div class="item-icon">📈</div>
            <span class="item-name">库存管理</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('营销设置')">
            <div class="item-icon">🎁</div>
            <span class="item-name">营销设置</span>
            <span class="item-arrow">›</span>
          </div>
        </div>
      </div>
    </div>

    <div class="func-grid">
      <div class="func-row">
        <div class="func-header" onclick="toggleFunc(this)">
          <div class="icon" style="background: linear-gradient(135deg, #9b59b6, #8e44ad);">🤝</div>
          <div class="title">
            <h4>分销推广管理</h4>
            <p>推广素材 · 分销数据 · 分销商</p>
          </div>
          <span class="arrow">›</span>
        </div>
        <div class="func-items">
          <div class="func-item" onclick="goPage('推广素材管理')">
            <div class="item-icon">📁</div>
            <span class="item-name">推广素材管理</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('分销数据查看')">
            <div class="item-icon">📊</div>
            <span class="item-name">分销数据查看</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('分销商管理')">
            <div class="item-icon">👥</div>
            <span class="item-name">分销商管理</span>
            <span class="item-arrow">›</span>
          </div>
        </div>
      </div>
    </div>

    <div class="func-grid">
      <div class="func-row">
        <div class="func-header" onclick="toggleFunc(this)">
          <div class="icon" style="background: linear-gradient(135deg, #1abc9c, #16a085);">📈</div>
          <div class="title">
            <h4>商家数据中心</h4>
            <p>收益统计 · 交易数据 · 用户数据</p>
          </div>
          <span class="arrow">›</span>
        </div>
        <div class="func-items">
          <div class="func-item" onclick="goPage('收益统计')">
            <div class="item-icon">💵</div>
            <span class="item-name">收益统计</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('交易数据')">
            <div class="item-icon">💳</div>
            <span class="item-name">交易数据</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('用户数据')">
            <div class="item-icon">👤</div>
            <span class="item-name">用户数据</span>
            <span class="item-arrow">›</span>
          </div>
        </div>
      </div>
    </div>

    <div class="func-grid" style="margin-bottom: 20px;">
      <div class="func-row">
        <div class="func-header" onclick="toggleFunc(this)">
          <div class="icon" style="background: linear-gradient(135deg, #e67e22, #d35400);">👛</div>
          <div class="title">
            <h4>商家账户管理</h4>
            <p>资金管理 · 提现申请 · 消息通知</p>
          </div>
          <span class="arrow">›</span>
        </div>
        <div class="func-items">
          <div class="func-item" onclick="goPage('资金管理')">
            <div class="item-icon">💰</div>
            <span class="item-name">资金管理</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('提现申请')">
            <div class="item-icon">🏧</div>
            <span class="item-name">提现申请</span>
            <span class="item-arrow">›</span>
          </div>
          <div class="func-item" onclick="goPage('消息通知')">
            <div class="item-icon">🔔</div>
            <span class="item-name">消息通知</span>
            <span class="item-arrow">›</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ========== 入驻申请 ========== -->
  <div class="page" id="page-入驻申请">
    <div class="nav-bar">
      <div class="nav-back" onclick="goBack()">‹ 返回</div>
      <div class="nav-title">入驻申请</div>
      <div class="nav-right"></div>
    </div>
    <div style="padding-top: 50px;">
      <div class="step-indicator">
        <div class="step active"></div>
        <div class="step active"></div>
        <div class="step active"></div>
      </div>
      <div class="form-section-title" style="text-align: center; background: transparent; color: #ff6b35; font-size: 16px; padding: 0 0 20px;">资料填写</div>
      <div class="form-section">
        <div class="form-item">
          <div class="form-label">入驻类型</div>
          <div class="form-value">
            <select class="form-input" style="width:100%; appearance:none;">
              <option>企业入驻</option>
              <option>个人入驻</option>
            </select>
          </div>
          <span class="form-arrow">›</span>
        </div>
        <div class="form-item">
          <div class="form-label">企业名称</div>
          <div class="form-value">
            <input type="text" class="form-input" placeholder="请输入企业全称">
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">统一社会信用代码</div>
          <div class="form-value">
            <input type="text" class="form-input" placeholder="请输入18位信用代码">
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">法人姓名</div>
          <div class="form-value">
            <input type="text" class="form-input" placeholder="请输入法人姓名">
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">联系电话</div>
          <div class="form-value">
            <input type="tel" class="form-input" placeholder="请输入手机号">
          </div>
        </div>
      </div>
      <div class="form-section-title">资质上传</div>
      <div class="form-section">
        <div class="form-item" onclick="alert('选择营业执照图片')">
          <div class="form-label">营业执照</div>
          <div class="form-value" style="color: #ccc;">点击上传</div>
          <span class="form-arrow">›</span>
        </div>
        <div class="form-item" onclick="alert('选择法人身份证')">
          <div class="form-label">法人身份证</div>
          <div class="form-value" style="color: #ccc;">点击上传</div>
          <span class="form-arrow">›</span>
        </div>
        <div class="form-item" onclick="alert('选择其他资质')">
          <div class="form-label">其他资质</div>
          <div class="form-value" style="color: #ccc;">点击上传</div>
          <span class="form-arrow">›</span>
        </div>
      </div>
      <div style="background: #fff; padding: 16px; margin: 16px; border-radius: 12px;">
        <label style="display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #666;">
          <input type="checkbox" checked style="width: 18px; height: 18px; accent-color: #ff6b35; margin-top: 2px;">
          <span>我已阅读并同意《商家入驻协议》《平台服务协议》及相关规则</span>
        </label>
      </div>
      <button class="btn" onclick="alert('提交成功，等待审核')">提交申请</button>
    </div>
  </div>

  <!-- ========== 入驻审核查询 ========== -->
  <div class="page" id="page-入驻审核查询">
    <div class="nav-bar">
      <div class="nav-back" onclick="goBack()">‹ 返回</div>
      <div class="nav-title">入驻审核查询</div>
      <div class="nav-right"></div>
    </div>
    <div style="padding-top: 50px;">
      <div class="card" style="margin: 16px; background: linear-gradient(135deg, #fff0e8, #fff8f5); border: 1px solid #ff6b35;">
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
          <div style="width: 48px; height: 48px; background: #ff6b35; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px;">✓</div>
          <div>
            <div style="font-size: 16px; color: #333; font-weight: 600;">审核通过</div>
            <div style="font-size: 12px; color: #999; margin-top: 4px;">通过时间: 2024-03-15 14:30</div>
          </div>
        </div>
        <div style="font-size: 13px; color: #666; line-height: 1.6; padding: 12px; background: #fff; border-radius: 8px;">
          恭喜！您的入驻申请已审核通过，现在可以开始使用商家工作台的所有功能了。
        </div>
      </div>
      
      <div class="section-title">审核记录</div>
      <div class="card" style="margin: 0 16px;">
        <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
          <span style="font-size: 14px; color: #52c41a;">✓ 入驻审核</span>
          <span style="font-size: 12px; color: #999;">2024-03-15</span>
        </div>
        <div style="font-size: 12px; color: #666; line-height: 1.5;">审核通过，资质齐全，符合入驻条件。</div>
      </div>
      <div class="card" style="margin: 12px 16px;">
        <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
          <span style="font-size: 14px; color: #ff6b35;">⏳ 资料复审</span>
          <span style="font-size: 12px; color: #999;">2024-03-14</span>
        </div>
        <div style="font-size: 12px; color: #666; line-height: 1.5;">资料复审中，请耐心等待。</div>
      </div>
      <div class="card" style="margin: 12px 16px;">
        <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
          <span style="font-size: 14px; color: #52c41a;">✓ 初步审核</span>
          <span style="font-size: 12px; color: #999;">2024-03-13</span>
        </div>
        <div style="font-size: 12px; color: #666; line-height: 1.5;">初步审核通过，进入复审阶段。</div>
      </div>
    </div>
  </div>

  <!-- ========== 店铺信息管理 ========== -->
  <div class="page" id="page-店铺信息管理">
    <div class="nav-bar">
      <div class="nav-back" onclick="goBack()">‹ 返回</div>
      <div class="nav-title">店铺信息管理</div>
      <div class="nav-right" onclick="alert('保存成功')">保存</div>
    </div>
    <div style="padding-top: 50px;">
      <div class="upload-zone" style="margin: 16px 16px 0;">
        <div style="width: 80px; height: 80px; background: #f5f5f5; border-radius: 12px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 36px;">🏪</div>
        <div style="font-size: 13px; color: #666;">点击更换店铺Logo</div>
      </div>
      <div class="form-section" style="margin-top: 16px;">
        <div class="form-item">
          <div class="form-label">店铺名称</div>
          <div class="form-value">
            <input type="text" class="form-input" value="星耀传媒旗舰店">
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">店铺简介</div>
          <div class="form-value">
            <textarea class="form-input" rows="3" placeholder="介绍一下您的店铺..." style="resize: none;">专注精品短剧内容创作，为用户提供优质观影体验
排名	分销商	订单数	佣金
1	张*明	328	¥6,560
2	李*芳	286	¥5,720
3	王*丽	245	¥4,900