编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>知产卫士 - 品牌方服务中心</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif}
html,body{width:100%;height:100%;overflow:hidden;background:#f5f7fa}

/* ========== 微信扫码登录页 ========== */
#loginScreen{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:#0f1c2e;
  overflow:hidden
}

.login-container{
  position:relative;z-index:1;
  display:flex;gap:60px;align-items:center
}

/* 左侧品牌区 */
.brand-section{color:#fff;max-width:420px}
.brand-section .logo{
  display:flex;align-items:center;gap:16px;margin-bottom:40px
}
.brand-section .logo-icon{
  width:56px;height:56px;background:#1d4ed8;
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.3)
}
.brand-section .logo-icon svg{width:36px;height:36px;fill:#fff}
.brand-section .logo-text{font-size:32px;font-weight:700;letter-spacing:2px}
.brand-section h1{
  font-size:36px;font-weight:600;margin-bottom:16px;line-height:1.4
}
.brand-section h1 span{color:#93c5fd}
.brand-section p{
  font-size:18px;color:rgba(255,255,255,.75);line-height:1.8;margin-bottom:40px
}
.brand-features{display:flex;gap:32px}
.brand-features .feature{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.85)}
.brand-features .feature svg{width:20px;height:20px;fill:#60a5fd}

/* 右侧登录卡片 */
.login-card{
  width:400px;background:#fff;border-radius:8px;padding:40px;
  box-shadow:0 8px 40px rgba(0,0,0,.2)
}
.login-card h2{
  font-size:24px;color:#1e293b;margin-bottom:8px;text-align:center
}
.login-card .subtitle{
  font-size:14px;color:#64748b;text-align:center;margin-bottom:32px
}

/* 微信扫码区 */
.qrcode-section{text-align:center;margin-bottom:32px}
.qrcode-box{
  width:180px;height:180px;margin:0 auto 20px;
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;
  display:flex;align-items:center;justify-content:center;position:relative
}
.qrcode-box .placeholder{
  display:flex;flex-direction:column;align-items:center;gap:12px;color:#94a3b8
}
.qrcode-box .placeholder svg{width:48px;height:48px;fill:#cbd5e1}
.qrcode-box .placeholder span{font-size:14px}
.qrcode-box .qrcode-img{
  width:180px;height:180px;display:none
}
.qrcode-box.has-code .placeholder{display:none}
.qrcode-box.has-code .qrcode-img{display:block}

.qrcode-tips{font-size:13px;color:#64748b}
.qrcode-tips span{color:#16a34a;font-weight:500}

/* 登录按钮 */
.wechat-login-btn{
  width:100%;height:44px;background:#1a6b3a;color:#fff;border:none;border-radius:4px;
  font-size:15px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s;letter-spacing:1px
}
.wechat-login-btn:hover{background:#145530}
.wechat-login-btn svg{width:20px;height:20px;fill:#fff}

.divider{
  display:flex;align-items:center;gap:16px;margin:28px 0;
  color:#94a3b8;font-size:13px
}
.divider::before,.divider::after{
  content:'';flex:1;height:1px;background:#e2e8f0
}

.phone-login-btn{
  width:100%;height:44px;background:#fff;border:1px solid #cbd5e1;
  color:#475569;border-radius:4px;font-size:14px;font-weight:400;
  cursor:pointer;transition:border-color .2s,background .2s
}
.phone-login-btn:hover{border-color:#94a3b8;background:#f8fafc}

.login-footer{
  margin-top:28px;text-align:center;font-size:13px;color:#94a3b8;line-height:1.8
}
.login-footer a{color:#3b82f6;text-decoration:none}
.login-card h2{font-size:20px;color:#1e293b;margin-bottom:6px;text-align:center;font-weight:600}
.login-card .subtitle{font-size:13px;color:#64748b;text-align:center;margin-bottom:28px}

/* ========== 客户端主界面 ========== */
#app{display:none;width:100vw;height:100vh;flex-direction:column;overflow:hidden}

/* 顶部导航 */
.top-header{
  height:64px;background:#fff;border-bottom:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;flex-shrink:0
}
.top-header .brand{
  display:flex;align-items:center;gap:12px
}
.top-header .brand-icon{
  width:36px;height:36px;background:#1d4ed8;
  border-radius:6px;display:flex;align-items:center;justify-content:center
}
.top-header .brand-icon svg{width:22px;height:22px;fill:#fff}
.top-header .brand-name{font-size:18px;font-weight:600;color:#1e293b}

.top-header .nav-menu{
  display:flex;gap:8px
}
.top-header .nav-item{
  padding:8px 18px;border-radius:4px;font-size:14px;color:#64748b;
  cursor:pointer;transition:all .2s
}
.top-header .nav-item:hover{color:#1d4ed8;background:#f1f5f9}
.top-header .nav-item.active{color:#1d4ed8;background:#eff6ff;font-weight:500}

.top-header .user-info{
  display:flex;align-items:center;gap:16px
}
.top-header .user-info .notification{
  width:36px;height:36px;border-radius:6px;background:#f1f5f9;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;transition:all .2s
}
.top-header .user-info .notification:hover{background:#e2e8f0}
.top-header .user-info .notification svg{width:20px;height:20px;fill:#64748b}
.top-header .user-info .notification .badge{
  position:absolute;top:6px;right:6px;width:8px;height:8px;
  background:#ef4444;border-radius:50%
}
.top-header .user-info .user{
  display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all .2s
}
.top-header .user-info .user:hover{background:#f1f5f9}
.top-header .user-info .user-avatar{
  width:36px;height:36px;border-radius:50%;background:#1d4ed8;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600
}
.top-header .user-info .user-name{font-size:14px;color:#1e293b;font-weight:500}

/* 主内容区 */
.main-content{
  flex:1;overflow-y:auto;padding:24px 32px;background:#f5f7fa
}

/* 页面标题 */
.page-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:24px
}
.page-header h1{font-size:24px;color:#1e293b;font-weight:600}
.page-header .breadcrumb{
  display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b
}

/* 统计卡片 */
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px
}
.stat-card{
  background:#fff;border-radius:8px;padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.stat-card:hover{transform:translateY(-1px)}
.stat-card .stat-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px
}
.stat-card .stat-title{font-size:14px;color:#64748b}
.stat-card .stat-icon{
  width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center
}
.stat-card .stat-icon.blue{background:#eff6ff}
.stat-card .stat-icon.blue svg{fill:#3b82f6}
.stat-card .stat-icon.green{background:#f0fdf4}
.stat-card .stat-icon.green svg{fill:#22c55e}
.stat-card .stat-icon.orange{background:#fff7ed}
.stat-card .stat-icon.orange svg{fill:#f97316}
.stat-card .stat-icon.purple{background:#faf5ff}
.stat-card .stat-icon.purple svg{fill:#a855f7}
.stat-card .stat-icon svg{width:24px;height:24px}
.stat-card .stat-value{font-size:28px;font-weight:600;color:#1e293b;margin-bottom:4px}
.stat-card .stat-change{font-size:13px;color:#22c55e}
.stat-card .stat-change.down{color:#ef4444}

/* 内容卡片 */
.content-grid{
  display:grid;grid-template-columns:2fr 1fr;gap:20px
}
.card{
  background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden
}
.card-header{
  padding:16px 20px;border-bottom:1px solid #f1f5f9;
  display:flex;align-items:center;justify-content:space-between
}
.card-header h3{font-size:15px;color:#1e293b;font-weight:600}
.card-header .view-all{
  font-size:13px;color:#3b82f6;cursor:pointer;display:flex;align-items:center;gap:4px
}
.card-header .view-all:hover{text-decoration:underline}
.card-body{padding:20px 24px}

/* 资产列表 */
.asset-list{display:flex;flex-direction:column;gap:12px}
.asset-item{
  display:flex;align-items:center;gap:16px;padding:14px;
  background:#f8fafc;border-radius:6px
}
.asset-item:hover{background:#f1f5f9}
.asset-item .asset-icon{
  width:44px;height:44px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.asset-item .asset-icon.trademark{background:#eff6ff}
.asset-item .asset-icon.trademark svg{fill:#3b82f6}
.asset-item .asset-icon.copyright{background:#fdf4ff}
.asset-item .asset-icon.copyright svg{fill:#a855f7}
.asset-item .asset-icon.portrait{background:#fff7ed}
.asset-item .asset-icon.portrait svg{fill:#f97316}
.asset-item .asset-icon.patent{background:#f0fdf4}
.asset-item .asset-icon.patent svg{fill:#22c55e}
.asset-item .asset-icon svg{width:26px;height:26px}
.asset-item .asset-info{flex:1}
.asset-item .asset-info .asset-name{font-size:15px;color:#1e293b;font-weight:500;margin-bottom:4px}
.asset-item .asset-info .asset-meta{font-size:13px;color:#64748b}
.asset-item .asset-status{
  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500
}
.asset-item .asset-status.verified{background:#dcfce7;color:#16a34a}
.asset-item .asset-status.pending{background:#fef3c7;color:#d97706}
.asset-item .asset-status.expired{background:#fee2e2;color:#dc2626}

/* 投诉进度 */
.complaint-list{display:flex;flex-direction:column;gap:16px}
.complaint-item{padding:16px;background:#f8fafc;border-radius:6px}
.complaint-item .complaint-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px
}
.complaint-item .complaint-title{font-size:14px;color:#1e293b;font-weight:500}
.complaint-item .complaint-platform{
  padding:4px 10px;background:#e0e7ff;border-radius:6px;font-size:12px;color:#4f46e5
}
.complaint-item .complaint-progress{
  display:flex;align-items:center;gap:12px;margin-bottom:12px
}
.complaint-item .progress-bar{
  flex:1;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden
}
.complaint-item .progress-bar .progress-fill{height:100%;background:#1d4ed8;border-radius:3px}
.complaint-item .progress-text{font-size:12px;color:#64748b;white-space:nowrap}
.complaint-item .complaint-footer{
  display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#94a3b8
}

/* 备案状态 */
.record-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px
}
.record-item{
  padding:16px;background:#f8fafc;border-radius:6px;text-align:centerl .2s
}
.record-item:hover{background:#f1f5f9}
.record-item .record-platform{font-size:13px;color:#64748b;margin-bottom:8px}
.record-item .record-status{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500
}
.record-item .record-status.done{background:#dcfce7;color:#16a34a}
.record-item .record-status.done::before{content:'';width:6px;height:6px;background:#22c55e;border-radius:50%}
.record-item .record-status.pending{background:#fef3c7;color:#d97706}
.record-item .record-status.pending::before{content:'';width:6px;height:6px;background:#f59e0b;border-radius:50%}

/* 空状态 */
.empty-state{
  text-align:center;padding:48px 24px
}
.empty-state svg{width:80px;height:80px;fill:#cbd5e1;margin-bottom:16px}
.empty-state p{font-size:14px;color:#94a3b8}

/* 页面内容区 */
.page-content{display:none}
.page-content.active{display:block}

/* 响应式 */
@media(max-width:1200px){
  .content-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .login-container{flex-direction:column;gap:40px}
  .brand-section{text-align:center;max-width:100%}
  .brand-features{justify-content:center}
  .stats-row{grid-template-columns:1fr}
}
</style>
</head>
<body>

<!-- 微信扫码登录页 -->
<div id="loginScreen">
  <div class="login-container">
    <!-- 左侧品牌区 -->
    <div class="brand-section">
      <div class="logo">
        <div class="logo-icon">
          <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        </div>
        <div class="logo-text">知产卫士</div>
      </div>
      <h1>守护您的<br><span>知识产权</span></h1>
      <p>一站式侵权监测与维权服务平台，让您的品牌资产得到全方位保护</p>
      <div class="brand-features">
        <div class="feature">
          <svg viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          <span>全网监测</span>
        </div>
        <div class="feature">
          <svg viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          <span>快速维权</span>
        </div>
        <div class="feature">
          <svg viewBox="0 0 24 24"><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
          <span>数据安全</span>
        </div>
      </div>
    </div>
    
    <!-- 右侧登录卡片 -->
    <div class="login-card">
      <h2>微信扫码登录</h2>
      <p class="subtitle">请使用微信扫一扫快速登录</p>
      
      <div class="qrcode-section">
        <div class="qrcode-box" id="qrcodeBox">
          <div class="placeholder">
            <svg viewBox="0 0 24 24"><path d="M12 4a4 4 0 014 4c0 1.95-1.4 3.58-3.25 3.93L12.26 14H15v2H9v-2.73l2.35-2.35A2.01 2.01 0 0010 8a2 2 0 012-2V4zm-1 11h2v2h-2v-2zm7-9h-1V4h-2v2h-1v2h4V6zM6 6h4v2H6V6zm-2 4h2v2H4v-2zm2 4h2v2H6v-2zm-2 4h2v2H4v-2z"/></svg>
            <span>点击获取二维码</span>
          </div>
          <img class="qrcode-img" id="qrcodeImg" src="" alt="微信二维码">
        </div>
        <p class="qrcode-tips">打开微信 > 发现 > 扫一扫<br>扫码后点击<span>确认登录</span></p>
      </div>
      
      <button class="wechat-login-btn" onclick="generateQRCode()">
        <svg viewBox="0 0 24 24"><path d="M8.5 13.5l2.5 2.5 5-5M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>
        获取登录二维码
      </button>
      
      <div class="divider">或</div>
      
      <button class="phone-login-btn" onclick="showPhoneLogin()">手机号登录</button>
      
      <div class="login-footer">
        登录即表示同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a><br>
        遇到问题？<a href="#">联系客服</a>
      </div>
    </div>
  </div>
</div>

<!-- 客户端主界面 -->
<div id="app">
  <!-- 顶部导航 -->
  <header class="top-header">
    <div class="brand">
      <div class="brand-icon">
        <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
      </div>
      <div class="brand-name">知产卫士</div>
    </div>
    
    <nav class="nav-menu">
      <div class="nav-item active" onclick="switchPage('dashboard')">总览</div>
      <div class="nav-item" onclick="switchPage('assets')">我的权利</div>
      <div class="nav-item" onclick="switchPage('complaints')">投诉进度</div>
      <div class="nav-item" onclick="switchPage('records')">备案情况</div>
    </nav>
    
    <div class="user-info">
      <div class="notification">
        <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
        <div class="badge"></div>
      </div>
      <div class="user">
        <div class="user-avatar">客</div>
        <div class="user-name">客户</div>
      </div>
    </div>
  </header>
  
  <!-- 主内容区 -->
  <main class="main-content">
    <!-- 总览页 -->
    <div id="page-dashboard" class="page-content active">
      <div class="page-header">
        <h1>权利保护总览</h1>
        <div class="breadcrumb">首页 / 总览</div>
      </div>
      
      <!-- 统计卡片 -->
      <div class="stats-row">
        <div class="stat-card">
          <div class="stat-header">
            <div class="stat-title">知识产权总数</div>
            <div class="stat-icon blue">
              <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
            </div>
          </div>
          <div class="stat-value">28</div>
          <div class="stat-change">+3 本月新增</div>
        </div>
        <div class="stat-card">
          <div class="stat-header">
            <div class="stat-title">侵权线索</div>
            <div class="stat-icon orange">
              <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
            </div>
          </div>
          <div class="stat-value">156</div>
          <div class="stat-change">+12 本周新增</div>
        </div>
        <div class="stat-card">
          <div class="stat-header">
            <div class="stat-title">处理中投诉</div>
            <div class="stat-icon purple">
              <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </div>
          </div>
          <div class="stat-value">23</div>
          <div class="stat-change">8 个即将超时</div>
        </div>
        <div class="stat-card">
          <div class="stat-header">
            <div class="stat-title">维权成功率</div>
            <div class="stat-icon green">
              <svg viewBox="0 0 24 24"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></svg>
            </div>
          </div>
          <div class="stat-value">87%</div>
          <div class="stat-change">+5% 较上月</div>
        </div>
      </div>
      
      <!-- 内容网格 -->
      <div class="content-grid">
        <!-- 我的权利 -->
        <div class="card">
          <div class="card-header">
            <h3>我的知识产权</h3>
            <div class="view-all" onclick="switchPage('assets')">查看全部</div>
          </div>
          <div class="card-body">
            <div class="asset-list">
              <div class="asset-item">
                <div class="asset-icon trademark">
                  <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
                </div>
                <div class="asset-info">
                  <div class="asset-name">美力泉 MEILIQUAN</div>
                  <div class="asset-meta">商标 · 第3类 · 注册号：12345678</div>
                </div>
                <div class="asset-status verified">已备案</div>
              </div>
              <div class="asset-item">
                <div class="asset-icon copyright">
                  <svg viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
                </div>
                <div class="asset-info">
                  <div class="asset-name">品牌视觉设计图集</div>
                  <div class="asset-meta">著作权 · 登记号：国作登字-2024-XXXXX</div>
                </div>
                <div class="asset-status verified">已备案</div>
              </div>
              <div class="asset-item">
                <div class="asset-icon portrait">
                  <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>
                </div>
                <div class="asset-info">
                  <div class="asset-name">品牌形象代言人肖像</div>
                  <div class="asset-meta">肖像权 · 授权期限：2024.01-2026.01</div>
                </div>
                <div class="asset-status pending">待续期</div>
              </div>
              <div class="asset-item">
                <div class="asset-icon patent">
                  <svg viewBox="0 0 24 24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>
                </div>
                <div class="asset-info">
                  <div class="asset-name">产品外观设计专利</div>
                  <div class="asset-meta">专利 · 专利号：ZL2024XXXXXXXX</div>
                </div>
                <div class="asset-status verified">已备案</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 平台备案状态 -->
        <div class="card">
          <div class="card-header">
            <h3>平台备案状态</h3>
            <div class="view-all" onclick="switchPage('records')">查看详情</div>
          </div>
          <div class="card-body">
            <div class="record-grid">
              <div class="record-item">
                <div class="record-platform">淘宝/天猫</div>
                <div class="record-status done">已备案</div>
              </div>
              <div class="record-item">
                <div class="record-platform">京东</div>
                <div class="record-status done">已备案</div>
              </div>
              <div class="record-item">
                <div class="record-platform">拼多多</div>
                <div class="record-status done">已备案</div>
              </div>
              <div class="record-item">
                <div class="record-platform">抖音电商</div>
                <div class="record-status done">已备案</div>
              </div>
              <div class="record-item">
                <div class="record-platform">小红书</div>
                <div class="record-status pending">审核中</div>
              </div>
              <div class="record-item">
                <div class="record-platform">快手</div>
                <div class="record-status done">已备案</div>
              </div>
              <div class="record-item">
                <div class="record-platform">1688</div>
                <div class="record-status done">已备案</div>
              </div>
              <div class="record-item">
                <div class="record-platform">美团</div>
                <div class="record-status pending">待提交</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 投诉进度 -->
      <div class="card" style="margin-top:20px">
        <div class="card-header">
          <h3>近期投诉进度</h3>
          <div class="view-all" onclick="switchPage('complaints')">查看全部</div>
        </div>
        <div class="card-body">
          <div class="complaint-list">
            <div class="complaint-item">
              <div class="complaint-header">
                <div class="complaint-title">淘宝店铺侵权投诉 - 美力泉商标盗用</div>
                <div class="complaint-platform">淘宝</div>
              </div>
              <div class="complaint-progress">
                <div class="progress-bar">
                  <div class="progress-fill" style="width:75%"></div>
                </div>
                <div class="progress-text">平台审核中</div>
              </div>
              <div class="complaint-footer">
                <span>提交时间：2024-06-20</span>
                <span>预计处理：3-5个工作日</span>
              </div>
            </div>
            <div class="complaint-item">
              <div class="complaint-header">
                <div class="complaint-title">拼多多假冒商品投诉 - 产品图片盗用</div>
                <div class="complaint-platform">拼多多</div>
              </div>
              <div class="complaint-progress">
                <div class="progress-bar">
                  <div class="progress-fill" style="width:100%"></div>
                </div>
                <div class="progress-text">已下架</div>
              </div>
              <div class="complaint-footer">
                <span>提交时间：2024-06-15</span>
                <span>处理结果：商品已下架</span>
              </div>
            </div>
            <div class="complaint-item">
              <div class="complaint-header">
                <div class="complaint-title">抖音直播侵权投诉 - 肖像权侵权</div>
                <div class="complaint-platform">抖音</div>
              </div>
              <div class="complaint-progress">
                <div class="progress-bar">
                  <div class="progress-fill" style="width:30%"></div>
                </div>
                <div class="progress-text">待补充材料</div>
              </div>
              <div class="complaint-footer">
                <span>提交时间：2024-06-22</span>
                <span>需要补充：授权证明原件</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 我的权利页 -->
    <div id="page-assets" class="page-content">
      <div class="page-header">
        <h1>我的知识产权</h1>
        <div class="breadcrumb">首页 / 我的权利</div>
      </div>
      <div class="card">
        <div class="card-body">
          <div class="asset-list">
            <div class="asset-item">
              <div class="asset-icon trademark">
                <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
              </div>
              <div class="asset-info">
                <div class="asset-name">美力泉 MEILIQUAN</div>
                <div class="asset-meta">商标 · 第3类 · 注册号：12345678 · 有效期至：2030-05-15</div>
              </div>
              <div class="asset-status verified">已备案</div>
            </div>
            <div class="asset-item">
              <div class="asset-icon trademark">
                <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
              </div>
              <div class="asset-info">
                <div class="asset-name">美力泉 MEILIQUAN</div>
                <div class="asset-meta">商标 · 第5类 · 注册号：12345679 · 有效期至：2030-08-20</div>
              </div>
              <div class="asset-status verified">已备案</div>
            </div>
            <div class="asset-item">
              <div class="asset-icon copyright">
                <svg viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
              </div>
              <div class="asset-info">
                <div class="asset-name">品牌视觉设计图集</div>
                <div class="asset-meta">著作权 · 登记号：国作登字-2024-XXXXX · 登记日期：2024-01-15</div>
              </div>
              <div class="asset-status verified">已备案</div>
            </div>
            <div class="asset-item">
              <div class="asset-icon portrait">
                <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>
              </div>
              <div class="asset-info">
                <div class="asset-name">品牌形象代言人肖像</div>
                <div class="asset-meta">肖像权 · 授权期限：2024.01-2026.01 · 代言人：张某某</div>
              </div>
              <div class="asset-status pending">待续期</div>
            </div>
            <div class="asset-item">
              <div class="asset-icon patent">
                <svg viewBox="0 0 24 24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 017 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>
              </div>
              <div class="asset-info">
                <div class="asset-name">产品外观设计专利</div>
                <div class="asset-meta">专利 · 专利号：ZL2024XXXXXXXX · 有效期至：2034-03-10</div>
              </div>
              <div class="asset-status verified">已备案</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 投诉进度页 -->
    <div id="page-complaints" class="page-content">
      <div class="page-header">
        <h1>投诉进度追踪</h1>
        <div class="breadcrumb">首页 / 投诉进度</div>
      </div>
      <div class="card">
        <div class="card-body">
          <div class="complaint-list">
            <div class="complaint-item">
              <div class="complaint-header">
                <div class="complaint-title">淘宝店铺侵权投诉 - 美力泉商标盗用</div>
                <div class="complaint-platform">淘宝</div>
              </div>
              <div class="complaint-progress">
                <div class="progress-bar">
                  <div class="progress-fill" style="width:75%"></div>
                </div>
                <div class="progress-text">平台审核中</div>
              </div>
              <div class="complaint-footer">
                <span>投诉编号：CP-2024-001</span>
                <span>提交时间：2024-06-20</span>
                <span>预计处理：3-5个工作日</span>
              </div>
            </div>
            <div class="complaint-item">
              <div class="complaint-header">
                <div class="complaint-title">拼多多假冒商品投诉 - 产品图片盗用</div>
                <div class="complaint-platform">拼多多</div>
              </div>
              <div class="complaint-progress">
                <div class="progress-bar">
                  <div class="progress-fill" style="width:100%"></div>
                </div>
                <div class="progress-text">已下架</div>
              </div>
              <div class="complaint-footer">
                <span>投诉编号：CP-2024-002</span>
                <span>提交时间：2024-06-15</span>
                <span>处理结果：商品已下架</span>
              </div>
            </div>
            <div class="complaint-item">
              <div class="complaint-header">
                <div class="complaint-title">抖音直播侵权投诉 - 肖像权侵权</div>
                <div class="complaint-platform">抖音</div>
              </div>
              <div class="complaint-progress">
                <div class="progress-bar">
                  <div class="progress-fill" style="width:30%"></div>
                </div>
                <div class="progress-text">待补充材料</div>
              </div>
              <div class="complaint-footer">
                <span>投诉编号：CP-2024-003</span>
                <span>提交时间：2024-06-22</span>
                <span>需要补充：授权证明原件</span>
              </div>
            </div>
            <div class="complaint-item">
              <div class="complaint-header">
                <div class="complaint-title">京东店铺侵权投诉 - 专利侵权</div>
                <div class="complaint-platform">京东</div>
              </div>
              <div class="complaint-progress">
                <div class="progress-bar">
                  <div class="progress-fill" style="width:60%"></div>
                </div>
                <div class="progress-text">商家申诉中</div>
              </div>
              <div class="complaint-footer">
                <span>投诉编号：CP-2024-004</span>
                <span>提交时间：2024-06-18</span>
                <span>剩余反驳期：5天</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 备案情况页 -->
    <div id="page-records" class="page-content">
      <div class="page-header">
        <h1>平台备案情况</h1>
        <div class="breadcrumb">首页 / 备案情况</div>
      </div>
      <div class="card">
        <div class="card-body">
          <div class="record-grid" style="grid-template-columns:repeat(4,1fr)">
            <div class="record-item">
              <div class="record-platform">淘宝/天猫</div>
              <div class="record-status done">已备案</div>
              <div style="margin-top:8px;font-size:12px;color:#94a3b8">备案时间：2024-01-10</div>
            </div>
            <div class="record-item">
              <div class="record-platform">京东</div>
              <div class="record-status done">已备案</div>
              <div style="margin-top:8px;font-size:12px;color:#94a3b8">备案时间：2024-01-12</div>
            </div>
            <div class="record-item">
              <div class="record-platform">拼多多</div>
              <div class="record-status done">已备案</div>
              <div style="margin-top:8px;font-size:12px;color:#94a3b8">备案时间：2024-01-15</div>
            </div>
            <div class="record-item">
              <div class="record-platform">抖音电商</div>
              <div class="record-status done">已备案</div>
              <div style="margin-top:8px;font-size:12px;color:#94a3b8">备案时间：2024-02-01</div>
            </div>
            <div class="record-item">
              <div class="record-platform">小红书</div>
              <div class="record-status pending">审核中</div>
              <div style="margin-top:8px;font-size:12px;color:#94a3b8">提交时间：2024-06-20</div>
            </div>
            <div class="record-item">
              <div class="record-platform">快手</div>
              <div class="record-status done">已备案</div>
              <div style="margin-top:8px;font-size:12px;color:#94a3b8">备案时间：2024-03-05</div>
            </div>
            <div class="record-item">
              <div class="record-platform">1688</div>
              <div class="record-status done">已备案</div>
              <div style="margin-top:8px;font-size:12px;color:#94a3b8">备案时间：2024-01-20</div>
            </div>
            <div class="record-item">
              <div class="record-platform">美团</div>
              <div class="record-status pending">待提交</div>
              <div style="margin-top:8px;font-size:12px;color:#94a3b8">预计提交：2024-07-01</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<script>
// 生成二维码
function generateQRCode(){
  const box=document.getElementById('qrcodeBox');
  const img=document.getElementById('qrcodeImg');
  // 模拟二维码图片
  img.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNmZmZmZmYiLz48cmVjdCB4PSIyMCIgeT0iMjAiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgZmlsbD0iIzIyYzU1ZSIvPjxyZWN0IHg9IjgwIiB5PSIyMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjMjJjNTVlIi8+PHJlY3QgeD0iMTIwIiB5PSIyMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjMjJjNTVlIi8+PHJlY3QgeD0iMjAiIHk9IjgwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiMyMmM1NWUiLz48cmVjdCB4PSI2MCIgeT0iODAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzIyYzU1ZSIvPjxyZWN0IHg9IjEwMCIgeT0iODAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzIyYzU1ZSIvPjxyZWN0IHg9IjE2MCIgeT0iODAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzIyYzU1ZSIvPjxyZWN0IHg9IjgwIiB5PSIxMDAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzIyYzU1ZSIvPjxyZWN0IHg9IjEyMCIgeT0iMTAwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiMyMmM1NWUiLz48cmVjdCB4PSIyMCIgeT0iMTIwIiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIGZpbGw9IiMyMmM1NWUiLz48cmVjdCB4PSI5MCIgeT0iMTIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiMyMmM1NWUiLz48cmVjdCB4PSIxMjAiIHk9IjEyMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjMjJjNTVlIi8+PC9zdmc+';
  box.classList.add('has-code');
  // 3秒后模拟登录成功
  setTimeout(()=>{
    document.getElementById('loginScreen').style.display='none';
    document.getElementById('app').style.display='flex';
  },3000);
}

// 手机号登录
function showPhoneLogin(){
  alert('手机号登录功能开发中...');
}

// 切换页面
function switchPage(page){
  // 更新导航状态
  document.querySelectorAll('.nav-item').forEach(item=>item.classList.remove('active'));
  event.target.classList.add('active');
  
  // 切换页面内容
  document.querySelectorAll('.page-content').forEach(content=>content.classList.remove('active'));
  document.getElementById('page-'+page).classList.add('active');
  
  // 更新面包屑
  const breadcrumbs={
    dashboard:'首页 / 总览',
    assets:'首页 / 我的权利',
    complaints:'首页 / 投诉进度',
    records:'首页 / 备案情况'
  };
  document.querySelector('.breadcrumb').textContent=breadcrumbs[page];
}
</script>

</body>
</html>