编辑页面

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%}

/* 报表统计 */
.report-tabs{
  display:flex;gap:8px;margin-bottom:24px;background:#fff;padding:8px;border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.report-tab{
  padding:10px 24px;border-radius:6px;font-size:14px;color:#64748b;
  cursor:pointer;transition:all .2s;font-weight:500;border:none;background:transparent
}
.report-tab:hover{color:#1d4ed8;background:#f1f5f9}
.report-tab.active{color:#fff;background:#1d4ed8}

.report-period-selector{
  display:flex;gap:12px;margin-bottom:24px;align-items:center
}
.report-period-selector select{
  padding:8px 16px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;
  background:#fff;color:#1e293b;cursor:pointer
}
.report-period-selector .period-label{font-size:14px;color:#64748b}

.report-chart-area{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px
}
.chart-card{
  background:#fff;border-radius:8px;padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.chart-card h4{font-size:15px;color:#1e293b;font-weight:600;margin-bottom:16px}
.chart-placeholder{
  height:220px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  color:#94a3b8;font-size:14px;border:1px dashed #e2e8f0
}

.report-table-wrap{
  background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:24px
}
.report-table{
  width:100%;border-collapse:collapse
}
.report-table th{
  padding:12px 16px;text-align:left;font-size:13px;font-weight:600;color:#64748b;
  background:#f8fafc;border-bottom:1px solid #e2e8f0
}
.report-table td{
  padding:14px 16px;font-size:14px;color:#1e293b;border-bottom:1px solid #f1f5f9
}
.report-table tr:last-child td{border-bottom:none}
.report-table tr:hover td{background:#f8fafc}

/* 维权建议 */
.suggestion-list{display:flex;flex-direction:column;gap:16px}
.suggestion-item{
  background:#fff;border-radius:8px;padding:20px;
  border-left:4px solid #1d4ed8;box-shadow:0 1px 3px rgba(0,0,0,.06)
}
.suggestion-item.warning{border-left-color:#f59e0b}
.suggestion-item.success{border-left-color:#22c55e}
.suggestion-item.danger{border-left-color:#ef4444}
.suggestion-item .suggestion-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px
}
.suggestion-item .suggestion-title{
  font-size:15px;font-weight:600;color:#1e293b;display:flex;align-items:center;gap:10px
}
.suggestion-item .suggestion-title .tag{
  padding:4px 10px;border-radius:4px;font-size:12px;font-weight:500
}
.suggestion-item .suggestion-title .tag.new{background:#dbeafe;color:#1d4ed8}
.suggestion-item .suggestion-title .tag.processing{background:#fef3c7;color:#d97706}
.suggestion-item .suggestion-title .tag.completed{background:#dcfce7;color:#16a34a}
.suggestion-item .suggestion-time{font-size:13px;color:#94a3b8}
.suggestion-item .suggestion-content{
  font-size:14px;color:#475569;line-height:1.8;margin-bottom:12px
}
.suggestion-item .suggestion-content p{margin-bottom:8px}
.suggestion-item .suggestion-content ul{margin:8px 0;padding-left:20px}
.suggestion-item .suggestion-content li{margin-bottom:4px}
.suggestion-item .suggestion-actions{
  display:flex;gap:12px
}
.suggestion-item .suggestion-actions button{
  padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;
  transition:all .2s;border:1px solid #e2e8f0;background:#fff;color:#475569
}
.suggestion-item .suggestion-actions button:hover{background:#f8fafc}
.suggestion-item .suggestion-actions button.primary{
  background:#1d4ed8;color:#fff;border-color:#1d4ed8
}
.suggestion-item .suggestion-actions button.primary:hover{background:#1e40af}

/* 导出按钮 */
.btn-export{
  padding:8px 16px;background:#1d4ed8;color:#fff;border:none;border-radius:6px;
  font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:background .2s
}
.btn-export:hover{background:#1e40af}
.btn-export svg{width:16px;height:16px;fill:#fff}

/* 页面内容区 */
.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)}
  .report-chart-area{grid-template-columns: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="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>
            <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>
      <div class="nav-item" onclick="switchPage('reports')">报表统计</div>
      <div class="nav-item" onclick="switchPage('suggestions')">维权建议</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>
    
    <!-- 报表统计页 -->
    <div id="page-reports" class="page-content">
      <div class="page-header">
        <h1>维权数据报表</h1>
        <div class="breadcrumb">首页 / 报表统计</div>
      </div>
      
      <!-- 报表类型切换 -->
      <div class="report-tabs">
        <button class="report-tab active" onclick="switchReportTab(this, 'week')">周报表</button>
        <button class="report-tab" onclick="switchReportTab(this, 'month')">月报表</button>
        <button class="report-tab" onclick="switchReportTab(this, 'quarter')">季度报表</button>
        <button class="report-tab" onclick="switchReportTab(this, 'year')">年度报表</button>
      </div>
      
      <!-- 时间周期选择 -->
      <div class="report-period-selector">
        <span class="period-label">选择周期：</span>
        <select id="weekSelect">
          <option>2024年第26周（06.24-06.30）</option>
          <option>2024年第25周（06.17-06.23）</option>
          <option>2024年第24周（06.10-06.16）</option>
        </select>
        <select id="monthSelect" style="display:none">
          <option>2024年6月</option>
          <option>2024年5月</option>
          <option>2024年4月</option>
        </select>
        <select id="quarterSelect" style="display:none">
          <option>2024年第二季度（4-6月）</option>
          <option>2024年第一季度（1-3月）</option>
        </select>
        <select id="yearSelect" style="display:none">
          <option>2024年</option>
          <option>2023年</option>
        </select>
        <button class="btn-export" onclick="exportReport()">
          <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
          导出报表
        </button>
      </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 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" id="reportClues">52</div>
          <div class="stat-change">+12.5% 较上周期</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" id="reportComplaints">35</div>
          <div class="stat-change">+5.2% 较上周期</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" id="reportRemoved">28</div>
          <div class="stat-change">+18.7% 较上周期</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="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
            </div>
          </div>
          <div class="stat-value" id="reportRate">80.0%</div>
          <div class="stat-change">+3.1% 较上周期</div>
        </div>
      </div>
      
      <!-- 图表区域 -->
      <div class="report-chart-area">
        <div class="chart-card">
          <h4>各平台维权数据趋势</h4>
          <div class="chart-placeholder">
            [折线图：展示各平台线索发现数、投诉提交数、成功下架数随时间变化趋势]
          </div>
        </div>
        <div class="chart-card">
          <h4>侵权类型分布</h4>
          <div class="chart-placeholder">
            [饼图：盗图 45% / 假冒 30% / 商标侵权 15% / 其他 10%]
          </div>
        </div>
      </div>
      
      <!-- 各平台数据明细 -->
      <div class="report-table-wrap">
        <div class="card-header">
          <h3>各平台维权数据明细</h3>
        </div>
        <table class="report-table">
          <thead>
            <tr>
              <th>平台</th>
              <th>新发现线索</th>
              <th>新提交投诉</th>
              <th>成功下架</th>
              <th>下架率</th>
              <th>主要侵权形式</th>
              <th>环比变化</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><strong>淘宝/天猫</strong></td>
              <td>12</td>
              <td>8</td>
              <td>7</td>
              <td><span style="color:#22c55e;font-weight:600">87.5%</span></td>
              <td>盗图为主</td>
              <td><span style="color:#22c55e">↑ 5.2%</span></td>
            </tr>
            <tr>
              <td><strong>拼多多</strong></td>
              <td>10</td>
              <td>7</td>
              <td>5</td>
              <td><span style="color:#f59e0b;font-weight:600">71.4%</span></td>
              <td>假冒+低价仿款</td>
              <td><span style="color:#22c55e">↑ 3.8%</span></td>
            </tr>
            <tr>
              <td><strong>抖音</strong></td>
              <td>8</td>
              <td>6</td>
              <td>5</td>
              <td><span style="color:#22c55e;font-weight:600">83.3%</span></td>
              <td>短视频+商品卡</td>
              <td><span style="color:#22c55e">↑ 8.1%</span></td>
            </tr>
            <tr>
              <td><strong>京东</strong></td>
              <td>8</td>
              <td>5</td>
              <td>4</td>
              <td><span style="color:#22c55e;font-weight:600">80.0%</span></td>
              <td>近似混淆</td>
              <td><span style="color:#ef4444">↓ 2.3%</span></td>
            </tr>
            <tr>
              <td><strong>1688</strong></td>
              <td>7</td>
              <td>4</td>
              <td>3</td>
              <td><span style="color:#f59e0b;font-weight:600">75.0%</span></td>
              <td>工厂盗图+代工</td>
              <td><span style="color:#22c55e">↑ 1.5%</span></td>
            </tr>
            <tr>
              <td><strong>快手</strong></td>
              <td>4</td>
              <td>3</td>
              <td>2</td>
              <td><span style="color:#f59e0b;font-weight:600">66.7%</span></td>
              <td>直播侵权</td>
              <td><span style="color:#ef4444">↓ 5.2%</span></td>
            </tr>
            <tr>
              <td><strong>小红书</strong></td>
              <td>3</td>
              <td>2</td>
              <td>2</td>
              <td><span style="color:#22c55e;font-weight:600">100%</span></td>
              <td>笔记种草+挂链</td>
              <td><span style="color:#22c55e">↑ 10.0%</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    
    <!-- 维权建议页 -->
    <div id="page-suggestions" class="page-content">
      <div class="page-header">
        <h1>系统维权建议</h1>
        <div class="breadcrumb">首页 / 维权建议</div>
      </div>
      
      <!-- 建议筛选 -->
      <div class="report-tabs" style="margin-bottom:20px">
        <button class="report-tab active" onclick="switchSuggestionTab(this, 'all')">全部建议</button>
        <button class="report-tab" onclick="switchSuggestionTab(this, 'new')">待处理</button>
        <button class="report-tab" onclick="switchSuggestionTab(this, 'processing')">处理中</button>
        <button class="report-tab" onclick="switchSuggestionTab(this, 'completed')">已完成</button>
      </div>
      
      <div class="card">
        <div class="card-header">
          <h3>基于数据分析的维权策略建议</h3>
        </div>
        <div class="card-body">
          <div class="suggestion-list">
            <!-- 建议1 -->
            <div class="suggestion-item success">
              <div class="suggestion-header">
                <div class="suggestion-title">
                  小红书平台维权效果分析
                  <span class="tag new">新建议</span>
                </div>
                <div class="suggestion-time">2024-06-28 14:30</div>
              </div>
              <div class="suggestion-content">
                <p>根据本周数据分析，小红书平台维权下架率达到100%，主要得益于笔记种草类侵权投诉路径清晰。</p>
                <p><strong>建议措施：</strong></p>
                <ul>
                  <li>继续保持当前维权策略，重点监控笔记种草类侵权内容</li>
                  <li>建议扩大在小红书平台的监测范围，增加关键词覆盖</li>
                  <li>针对高互动量笔记优先处理，提升维权效率</li>
                </ul>
              </div>
              <div class="suggestion-actions">
                <button class="primary" onclick="executeSuggestion(this)">执行建议</button>
                <button onclick="rejectSuggestion(this)">暂不执行</button>
              </div>
            </div>
            
            <!-- 建议2 -->
            <div class="suggestion-item warning">
              <div class="suggestion-header">
                <div class="suggestion-title">
                  快手直播侵权风险预警
                  <span class="tag processing">处理中</span>
                </div>
                <div class="suggestion-time">2024-06-27 09:15</div>
              </div>
              <div class="suggestion-content">
                <p>快手平台本周下架率仅为66.7%，低于平均水平。直播场景取证难度较大，导致部分投诉被驳回。</p>
                <p><strong>建议措施：</strong></p>
                <ul>
                  <li>加强直播录屏固证频率，确保取证完整性</li>
                  <li>缩短从发现到投诉的处理周期，建议控制在24小时内</li>
                  <li>针对高频侵权直播间建立专项监控机制</li>
                </ul>
              </div>
              <div class="suggestion-actions">
                <button class="primary" onclick="executeSuggestion(this)">执行建议</button>
                <button onclick="rejectSuggestion(this)">暂不执行</button>
              </div>
            </div>
            
            <!-- 建议3 -->
            <div class="suggestion-item danger">
              <div class="suggestion-header">
                <div class="suggestion-title">
                  拼多多假冒商品占比上升
                  <span class="tag new">新建议</span>
                </div>
                <div class="suggestion-time">2024-06-26 16:45</div>
              </div>
              <div class="suggestion-content">
                <p>拼多多平台直接假冒类侵权占比上升至45%，较上月增长12%，形势较为严峻。</p>
                <p><strong>建议措施：</strong></p>
                <ul>
                  <li>针对高频假冒店铺提交平台黑名单申请</li>
                  <li>考虑启动司法维权路径，发送律师函</li>
                  <li>加强与平台小二沟通，争取快速处理通道</li>
                </ul>
              </div>
              <div class="suggestion-actions">
                <button class="primary" onclick="executeSuggestion(this)">执行建议</button>
                <button onclick="rejectSuggestion(this)">暂不执行</button>
              </div>
            </div>
            
            <!-- 建议4 -->
            <div class="suggestion-item">
              <div class="suggestion-header">
                <div class="suggestion-title">
                  下周期维权重点工作规划
                  <span class="tag completed">已执行</span>
                </div>
                <div class="suggestion-time">2024-06-25 10:00</div>
              </div>
              <div class="suggestion-content">
                <p>基于当前维权数据及平台动态，制定下周期重点工作计划。</p>
                <p><strong>建议措施：</strong></p>
                <ul>
                  <li>加大抖音平台以图搜图监测频率，每日扫描新增商品</li>
                  <li>对重复侵权店铺启动司法维权，准备起诉材料</li>
                  <li>提前准备Q3季度维权报告数据，梳理典型案例</li>
                </ul>
              </div>
              <div class="suggestion-actions">
                <span style="font-size:13px;color:#22c55e;font-weight:500">您已选择执行此建议</span>
              </div>
            </div>
            
            <!-- 建议5 -->
            <div class="suggestion-item success">
              <div class="suggestion-header">
                <div class="suggestion-title">
                  淘宝平台维权策略优化
                  <span class="tag completed">已执行</span>
                </div>
                <div class="suggestion-time">2024-06-20 11:20</div>
              </div>
              <div class="suggestion-content">
                <p>淘宝平台本周维权下架率87.5%，较上月提升5.2%，策略调整效果明显。</p>
                <p><strong>已执行措施：</strong></p>
                <ul>
                  <li>优化投诉材料模板，提高审核通过率</li>
                  <li>建立重点店铺监控清单，每日更新</li>
                  <li>与阿里原创保护平台建立快速通道</li>
                </ul>
              </div>
              <div class="suggestion-actions">
                <span style="font-size:13px;color:#22c55e;font-weight:500">您已选择执行此建议</span>
              </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+PHJlY3QgeD0iMjAiIHk9IjgwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiMyMmM1NWUiLz48cmVjdCB4PSI2MCIgeT0iODAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzIyYzU1ZSIvPjxyZWN0IHg9IjEwMCIgeT0iODAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzIyYzU1ZSIvPjxyZWN0IHg9IjE2MCIgeT0iODAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzIyYzU1ZSIvPjxyZWN0IHg9IjgwIiB5PSIxMDAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iIzIyYzU1ZSIvPjxyZWN0IHg9IjEyMCIgeT0iMTAwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiMyMmM1NWUiLz48cmVjdCB4PSIyMCIgeT0iMTIwIiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIGZpbGw9IiMyMmM1NWUiLz48cmVjdCB4PSIxMjAiIHk9IjEyMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjMjJjNTVlIi8+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:'首页 / 备案情况',
    reports:'首页 / 报表统计',
    suggestions:'首页 / 维权建议'
  };
  document.querySelector('.breadcrumb').textContent=breadcrumbs[page];
}

// 切换报表类型
function switchReportTab(el, type){
  // 更新标签状态
  document.querySelectorAll('.report-tab').forEach(tab=>tab.classList.remove('active'));
  el.classList.add('active');
  
  // 显示对应的选择器
  document.getElementById('weekSelect').style.display = type === 'week' ? 'block' : 'none';
  document.getElementById('monthSelect').style.display = type === 'month' ? 'block' : 'none';
  document.getElementById('quarterSelect').style.display = type === 'quarter' ? 'block' : 'none';
  document.getElementById('yearSelect').style.display = type === 'year' ? 'block' : 'none';
  
  // 更新数据（模拟）
  updateReportData(type);
}

// 更新报表数据
function updateReportData(type){
  const data = {
    week: { clues: 52, complaints: 35, removed: 28, rate: '80.0%' },
    month: { clues: 218, complaints: 145, removed: 118, rate: '81.4%' },
    quarter: { clues: 612, complaints: 398, removed: 325, rate: '81.7%' },
    year: { clues: 1892, complaints: 1235, removed: 1008, rate: '81.6%' }
  };
  
  const d = data[type];
  document.getElementById('reportClues').textContent = d.clues;
  document.getElementById('reportComplaints').textContent = d.complaints;
  document.getElementById('reportRemoved').textContent = d.removed;
  document.getElementById('reportRate').textContent = d.rate;
}

// 导出报表
function exportReport(){
  alert('正在生成报表文件，请稍候...\n\n报表将包含：\n1. 核心维权指标\n2. 各平台数据明细\n3. 趋势分析图表\n\n文件格式：PDF / Excel');
}

// 切换建议标签
function switchSuggestionTab(el, type){
  document.querySelectorAll('.report-tab').forEach(tab=>tab.classList.remove('active'));
  el.classList.add('active');
  
  // 模拟筛选效果
  const items = document.querySelectorAll('.suggestion-item');
  items.forEach(item=>{
    if(type === 'all'){
      item.style.display = 'block';
    } else if(type === 'new'){
      item.style.display = item.querySelector('.tag.new') ? 'block' : 'none';
    } else if(type === 'processing'){
      item.style.display = item.querySelector('.tag.processing') ? 'block' : 'none';
    } else if(type === 'completed'){
      item.style.display = item.querySelector('.tag.completed') ? 'block' : 'none';
    }
  });
}

// 执行建议
function executeSuggestion(btn){
  const item = btn.closest('.suggestion-item');
  const tag = item.querySelector('.tag');
  const actions = item.querySelector('.suggestion-actions');
  
  tag.textContent = '已执行';
  tag.className = 'tag completed';
  
  // 替换按钮为状态文字
  actions.innerHTML = '<span style="font-size:13px;color:#22c55e;font-weight:500">您已选择执行此建议</span>';
  
  // 通知后台
  alert('已确认执行此建议，内部人员将收到您的反馈并开始执行。');
}

// 暂不执行建议
function rejectSuggestion(btn){
  const item = btn.closest('.suggestion-item');
  const tag = item.querySelector('.tag');
  const actions = item.querySelector('.suggestion-actions');
  
  tag.textContent = '已拒绝';
  tag.className = 'tag';
  tag.style.background = '#f1f5f9';
  tag.style.color = '#64748b';
  
  // 替换按钮为状态文字
  actions.innerHTML = '<span style="font-size:13px;color:#64748b;font-weight:500">您已选择暂不执行</span>';
  
  // 通知后台
  alert('已反馈暂不执行，内部人员将收到您的意见。');
}
</script>

</body>
</html>