编辑页面

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}
:root{--primary:#1890ff;--success:#52c41a;--warning:#faad14;--danger:#ff4d4f;--bg:#f0f2f5;--white:#fff;--text:#333;--text-light:#999;--border:#e8e8e8}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{display:flex;min-height:100vh}
/*侧边栏*/
.sidebar{width:220px;background:var(--white);border-right:1px solid var(--border);position:fixed;height:100vh;overflow-y:auto;z-index:100}
.logo{padding:20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.logo-icon{width:36px;height:36px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;font-size:18px}
.logo-text{font-size:16px;font-weight:600;color:var(--text)}
.nav-list{list-style:none;padding:10px 0}
.nav-item{padding:12px 20px;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--text);transition:all .3s;border-left:3px solid transparent}
.nav-item:hover{background:#f5f5f5;color:var(--primary)}
.nav-item.active{background:#e6f7ff;color:var(--primary);border-left-color:var(--primary)}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.sub-nav{display:none;padding-left:48px;background:#fafafa}
.sub-nav.show{display:block}
.sub-nav-item{padding:8px 20px;font-size:13px;color:var(--text-light);cursor:pointer}
.sub-nav-item:hover{color:var(--primary)}
.sub-nav-item.active{color:var(--primary)}
/*主内容区*/
.main{margin-left:220px;flex:1}
.header{background:var(--white);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.header-left{display:flex;align-items:center;gap:20px}
.breadcrumb{color:var(--text-light);font-size:14px}
.search-box{display:flex;align-items:center;background:#f5f5f5;border-radius:4px;padding:8px 12px;gap:8px}
.search-box input{border:none;background:transparent;outline:none;width:200px;font-size:14px}
.header-right{display:flex;align-items:center;gap:20px}
.header-icon{position:relative;cursor:pointer}
.header-icon svg{width:20px;height:20px;color:var(--text-light)}
.badge{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:10px;padding:2px 5px;border-radius:10px}
.avatar{width:36px;height:36px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;cursor:pointer}
/*内容区*/
.content{padding:24px}
.page{display:none}
.page.active{display:block}
/*统计卡片*/
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}
.stat-card{background:var(--white);padding:20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.stat-label{color:var(--text-light);font-size:14px}
.stat-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.stat-icon.blue{background:#e6f7ff;color:var(--primary)}
.stat-icon.green{background:#f6ffed;color:var(--success)}
.stat-icon.orange{background:#fff7e6;color:var(--warning)}
.stat-icon.red{background:#fff1f0;color:var(--danger)}
.stat-value{font-size:28px;font-weight:600;margin-bottom:4px}
.stat-change{font-size:12px;color:var(--success)}
/*图表区*/
.chart-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:24px}
.chart-card{background:var(--white);padding:20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.chart-title{font-size:16px;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.chart-placeholder{height:250px;background:linear-gradient(135deg,#e6f7ff 0%,#bae7ff 100%);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--text-light);flex-direction:column;gap:8px}
.chart-placeholder svg{width:48px;height:48px;opacity:.5}
/*表格*/
.table-card{background:var(--white);padding:20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.table-title{font-size:16px;font-weight:600}
.table-actions{display:flex;gap:12px}
.search-input{display:flex;align-items:center;background:#f5f5f5;border-radius:4px;padding:6px 12px;gap:8px}
.search-input input{border:none;background:transparent;outline:none;width:180px;font-size:13px}
.btn{padding:8px 16px;border-radius:4px;border:none;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--primary);color:#fff}
.btn-default{background:#f5f5f5;color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-sm{padding:4px 12px;font-size:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}
th{background:#fafafa;font-weight:500;color:var(--text-light)}
tr:hover{background:#fafafa}
.user-cell{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;background:#e6f7ff;color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}
.tag{padding:2px 8px;border-radius:4px;font-size:11px}
.tag-primary{background:#e6f7ff;color:var(--primary)}
.tag-success{background:#f6ffed;color:var(--success)}
.tag-warning{background:#fff7e6;color:var(--warning)}
.tag-danger{background:#fff1f0;color:var(--danger)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.status-dot.active{background:var(--success)}
.status-dot.inactive{background:var(--danger)}
.action-link{color:var(--primary);cursor:pointer;margin:0 4px}
.action-link:hover{text-decoration:underline}
/*分页*/
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.pagination-info{color:var(--text-light);font-size:13px}
.pagination-btns{display:flex;gap:4px}
.page-btn{padding:4px 10px;border:1px solid var(--border);background:#fff;cursor:pointer;border-radius:4px;font-size:12px}
.page-btn:hover{background:#f5f5f5}
.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
/*模态框*/
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.modal.show{display:flex}
.modal-content{background:#fff;border-radius:8px;width:500px;max-width:90%;max-height:90vh;overflow:hidden}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-title{font-size:16px;font-weight:600}
.modal-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-light)}
.modal-close:hover{color:var(--text)}
.modal-body{padding:20px;max-height:60vh;overflow-y:auto}
.modal-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:12px}
/*表单*/
.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:8px;font-size:13px;font-weight:500}
.form-input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:4px;font-size:13px;outline:none}
.form-input:focus{border-color:var(--primary)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-select{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:4px;font-size:13px;outline:none;background:#fff}
textarea.form-input{resize:vertical;min-height:80px}
/*Toast*/
.toast{position:fixed;top:80px;right:24px;background:#fff;padding:12px 20px;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;align-items:center;gap:10px;z-index:2000}
.toast.show{display:flex}
.toast-icon{width:20px;height:20px}
.toast.success .toast-icon{color:var(--success)}
.toast.error .toast-icon{color:var(--danger)}
/*Tab切换*/
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px}
.tab{padding:12px 20px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--primary)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
/*筛选区*/
.filter-bar{background:#fff;padding:16px;border-radius:8px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.filter-item{display:flex;align-items:center;gap:8px}
.filter-label{font-size:13px;color:var(--text-light)}
.filter-select{padding:6px 12px;border:1px solid var(--border);border-radius:4px;font-size:13px}
/*详情页*/
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.detail-card{background:#fff;padding:16px;border-radius:8px}
.detail-label{color:var(--text-light);font-size:12px;margin-bottom:4px}
.detail-value{font-size:16px;font-weight:500}
/*时间线*/
.timeline{padding:20px 0}
.timeline-item{display:flex;gap:16px;position:relative;padding-bottom:24px}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{width:12px;height:12px;background:var(--primary);border-radius:50%;flex-shrink:0;margin-top:4px;position:relative;z-index:1}
.timeline-item:not(:last-child) .timeline-dot::after{content:'';position:absolute;left:50%;transform:translateX(-50%);top:12px;width:2px;height:calc(100% - 12px);background:var(--border)}
.timeline-content{flex:1}
.timeline-title{font-weight:500;margin-bottom:4px}
.timeline-desc{color:var(--text-light);font-size:13px;margin-bottom:4px}
.timeline-time{color:var(--text-light);font-size:12px}
/*登录页*/
.login-container{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.login-box{background:#fff;padding:40px;border-radius:12px;width:400px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.login-title{text-align:center;font-size:24px;font-weight:600;margin-bottom:32px}
.login-form .form-group{margin-bottom:20px}
.login-form .form-input{font-size:14px;padding:12px}
.login-btn{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:4px;font-size:16px;cursor:pointer}
.login-btn:hover{background:#40a9ff}
/*响应式*/
@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr}}
@media(max-width:768px){.sidebar{display:none}.main{margin-left:0}.stats-grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<!--Toast提示-->
<div class="toast" id="toast"><span class="toast-icon">✓</span><span class="toast-msg"></span></div>

<!--登录页-->
<div class="login-container" id="loginPage">
<div class="login-box">
<div class="login-title">一站式服务平台</div>
<form class="login-form" onsubmit="handleLogin(event)">
<div class="form-group"><input type="text" class="form-input" placeholder="请输入管理员账号" value="admin"></div>
<div class="form-group"><input type="password" class="form-input" placeholder="请输入密码" value="123456"></div>
<div class="form-group"><input type="text" class="form-input" placeholder="请输入验证码"></div>
<div class="form-group"><button type="submit" class="login-btn">登录</button></div>
</form>
</div>
</div>

<!--主界面-->
<div class="container" id="mainContainer" style="display:none">
<!--侧边栏-->
<aside class="sidebar">
<div class="logo"><div class="logo-icon">E</div><span class="logo-text">一站式服务平台</span></div>
<ul class="nav-list">
<li class="nav-item active" onclick="showPage('dashboard')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>首页数据</li>
<li class="nav-item" onclick="showPage('users')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>用户管理</li>
<li class="nav-item" onclick="showPage('agents')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>城市代理</li>
<li class="nav-item" onclick="showPage('promoters')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>推广员管理</li>
<li class="nav-item" onclick="toggleSubNav('business')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>业务管理 ▾</li>
<ul class="sub-nav" id="businessSubNav">
<li class="sub-nav-item" onclick="showPage('charging')">充电管理</li>
<li class="sub-nav-item" onclick="showPage('oil')">加油管理</li>
<li class="sub-nav-item" onclick="showPage('food')">外卖管理</li>
<li class="sub-nav-item" onclick="showPage('express')">快递管理</li>
<li class="sub-nav-item" onclick="showPage('shortvideo')">短剧管理</li>
<li class="sub-nav-item" onclick="showPage('eldercare')">养老管理</li>
</ul>
<li class="nav-item" onclick="showPage('rebate')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>返现管理</li>
<li class="nav-item" onclick="showPage('coupon')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>优惠券管理</li>
<li class="nav-item" onclick="showPage('finance')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>财务管理</li>
<li class="nav-item" onclick="showPage('ad')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>广告管理</li>
<li class="nav-item" onclick="showPage('system')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>系统设置</li>
</ul>
</aside>

<!--主内容区-->
<main class="main">
<header class="header">
<div class="header-left">
<div class="breadcrumb" id="breadcrumb">首页数据</div>
</div>
<div class="header-right">
<div class="header-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="badge">5</span></div>
<div class="avatar" onclick="showToast('退出登录成功')">A</div>
</div>
</header>

<div class="content">
<!--首页数据-->
<div class="page active" id="page-dashboard">
<div class="stats-grid">
<div class="stat-card"><div class="stat-header"><span class="stat-label">总订单数</span><div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div></div><div class="stat-value">128,456</div><div class="stat-change">↑ 12.5% 较上月</div></div>
<div class="stat-card"><div class="stat-header"><span class="stat-label">总GMV</span><div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div></div><div class="stat-value">¥5,234,890</div><div class="stat-change">↑ 8.2% 较上月</div></div>
<div class="stat-card"><div class="stat-header"><span class="stat-label">总用户数</span><div class="stat-icon orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div></div><div class="stat-value">89,234</div><div class="stat-change">↑ 15.8% 较上月</div></div>
<div class="stat-card"><div class="stat-header"><span class="stat-label">活跃用户</span><div class="stat-icon red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></div></div><div class="stat-value">45,678</div><div class="stat-change">↑ 5.3% 较上月</div></div>
</div>
<div class="chart-grid">
<div class="chart-card"><div class="chart-title">业务趋势</div><div class="chart-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg><span>折线图展示</span></div></div>
<div class="chart-card"><div class="chart-title">业务占比</div><div class="chart-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg><span>饼图展示</span></div></div>
</div>
<div class="table-card">
<div class="table-header"><span class="table-title">待处理事项</span></div>
<table>
<thead><tr><th>类型</th><th>内容</th><th>时间</th><th>操作</th></tr></thead>
<tbody>
<tr><td><span class="tag tag-danger">退款</span></td><td>用户张三申请充电订单退款 ¥45.00</td><td>2024-04-23 14:30</td><td><span class="action-link" onclick="showModal('refund')">处理</span></td></tr>
<tr><td><span class="tag tag-warning">申诉</span></td><td>用户李四投诉加油订单金额异常</td><td>2024-04-23 14:15</td><td><span class="action-link" onclick="showModal('appeal')">处理</span></td></tr>
<tr><td><span class="tag tag-primary">代理</span></td><td>新代理申请：上海代理商</td><td>2024-04-23 13:50</td><td><span class="action-link" onclick="showModal('agent')">审核</span></td></tr>
<tr><td><span class="tag tag-primary">推广员</span></td><td>新推广员申请：王五</td><td>2024-04-23 13:20</td><td><span class="action-link" onclick="showModal('promoter')">审核</span></td></tr>
<tr><td><span class="tag tag-warning">提现</span></td><td>推广员赵六申请提现 ¥2,500.00</td><td>2024-04-23 12:45</td><td><span class="action-link" onclick="showModal('withdraw')">处理</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--用户管理-->
<div class="page" id="page-users">
<div class="table-card">
<div class="table-header">
<span class="table-title">用户列表</span>
<div class="table-actions">
<div class="search-input"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="搜索用户..."></div>
<button class="btn btn-default btn-sm">导出</button>
</div>
</div>
<table>
<thead><tr><th>用户</th><th>手机号</th><th>等级</th><th>积分</th><th>注册时间</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td><div class="user-cell"><div class="user-avatar">张</div><span>张三</span></div></td><td>138****5678</td><td><span class="tag tag-warning">VIP</span></td><td>12,580</td><td>2024-01-15</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">禁用</span></td></tr>
<tr><td><div class="user-cell"><div class="user-avatar">李</div><span>李四</span></div></td><td>139****1234</td><td><span class="tag tag-primary">普通</span></td><td>3,200</td><td>2024-02-20</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">禁用</span></td></tr>
<tr><td><div class="user-cell"><div class="user-avatar">王</div><span>王五</span></div></td><td>137****8888</td><td><span class="tag tag-warning">VIP</span></td><td>28,900</td><td>2023-11-08</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">禁用</span></td></tr>
<tr><td><div class="user-cell"><div class="user-avatar">赵</div><span>赵六</span></div></td><td>136****6666</td><td><span class="tag tag-primary">普通</span></td><td>850</td><td>2024-04-10</td><td><span class="status-dot inactive"></span>已禁用</td><td><span class="action-link">详情</span><span class="action-link">启用</span></td></tr>
<tr><td><div class="user-cell"><div class="user-avatar">陈</div><span>陈七</span></div></td><td>135****9999</td><td><span class="tag tag-primary">普通</span></td><td>5,600</td><td>2024-03-22</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">禁用</span></td></tr>
</tbody>
</table>
<div class="pagination">
<div class="pagination-info">共 89,234 条记录，每页 10 条</div>
<div class="pagination-btns"><button class="page-btn">上一页</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">...</button><button class="page-btn">8924</button><button class="page-btn">下一页</button></div>
</div>
</div>
</div>

<!--城市代理-->
<div class="page" id="page-agents">
<div class="table-card">
<div class="table-header">
<span class="table-title">城市代理列表</span>
<div class="table-actions"><button class="btn btn-primary btn-sm" onclick="showModal('addAgent')">添加代理</button></div>
</div>
<table>
<thead><tr><th>代理名称</th><th>负责人</th><th>联系电话</th><th>城市</th><th>等级</th><th>累计收益</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>上海新能源代理</td><td>张经理</td><td>138****5678</td><td>上海市</td><td><span class="tag tag-danger">一级</span></td><td>¥128,500</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">分红设置</span><span class="action-link">禁用</span></td></tr>
<tr><td>北京充电服务代理</td><td>李经理</td><td>139****1234</td><td>北京市</td><td><span class="tag tag-danger">一级</span></td><td>¥256,800</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">分红设置</span><span class="action-link">禁用</span></td></tr>
<tr><td>广州能源代理</td><td>王经理</td><td>137****8888</td><td>广州市</td><td><span class="tag tag-warning">二级</span></td><td>¥89,200</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">分红设置</span><span class="action-link">禁用</span></td></tr>
<tr><td>深圳充电桩代理</td><td>赵经理</td><td>136****6666</td><td>深圳市</td><td><span class="tag tag-warning">二级</span></td><td>¥67,500</td><td><span class="status-dot inactive"></span>已禁用</td><td><span class="action-link">详情</span><span class="action-link">分红设置</span><span class="action-link">启用</span></td></tr>
<tr><td>成都新能源代理</td><td>陈经理</td><td>135****9999</td><td>成都市</td><td><span class="tag tag-primary">三级</span></td><td>¥23,100</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">分红设置</span><span class="action-link">禁用</span></td></tr>
</tbody>
</table>
<div class="pagination">
<div class="pagination-info">共 45 条记录</div>
<div class="pagination-btns"><button class="page-btn">上一页</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">下一页</button></div>
</div>
</div>
</div>

<!--推广员管理-->
<div class="page" id="page-promoters">
<div class="table-card">
<div class="table-header"><span class="table-title">推广员列表</span></div>
<table>
<thead><tr><th>推广员</th><th>手机号</th><th>邀请人数</th><th>累计收益</th><th>注册时间</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td><div class="user-cell"><div class="user-avatar">周</div><span>周推广</span></div></td><td>138****5678</td><td>256人</td><td>¥12,580</td><td>2024-01-15</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">收益设置</span><span class="action-link">禁用</span></td></tr>
<tr><td><div class="user-cell"><div class="user-avatar">吴</div><span>吴经理</span></div></td><td>139****1234</td><td>128人</td><td>¥8,920</td><td>2024-02-20</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">收益设置</span><span class="action-link">禁用</span></td></tr>
<tr><td><div class="user-cell"><div class="user-avatar">郑</div><span>郑分销</span></div></td><td>137****8888</td><td>89人</td><td>¥5,600</td><td>2024-03-08</td><td><span class="status-dot active"></span>正常</td><td><span class="action-link">详情</span><span class="action-link">收益设置</span><span class="action-link">禁用</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--充电管理-->
<div class="page" id="page-charging">
<div class="tabs"><div class="tab active" onclick="switchTab(this,'chargeStations')">充电站管理</div><div class="tab" onclick="switchTab(this,'chargeOrders')">充电订单</div><div class="tab" onclick="switchTab(this,'chargeStats')">充电统计</div></div>
<div id="chargeStations" class="tab-content">
<div class="table-card">
<div class="table-header"><span class="table-title">充电站列表</span><div class="table-actions"><button class="btn btn-primary btn-sm" onclick="showModal('addStation')">添加充电站</button></div></div>
<table>
<thead><tr><th>充电站名称</th><th>地址</th><th>桩数</th><th>空闲</th><th>使用中</th><th>故障</th><th>电价</th><th>操作</th></tr></thead>
<tbody>
<tr><td>上海浦东充电站</td><td>上海市浦东新区张江路123号</td><td>20</td><td><span class="tag tag-success">12</span></td><td><span class="tag tag-primary">6</span></td><td><span class="tag tag-danger">2</span></td><td>¥1.2/度</td><td><span class="action-link">编辑</span><span class="action-link">电价设置</span></td></tr>
<tr><td>北京朝阳充电中心</td><td>北京市朝阳区建国路456号</td><td>30</td><td><span class="tag tag-success">18</span></td><td><span class="tag tag-primary">10</span></td><td><span class="tag tag-danger">2</span></td><td>¥1.5/度</td><td><span class="action-link">编辑</span><span class="action-link">电价设置</span></td></tr>
<tr><td>广州天河充电站</td><td>广州市天河区珠江新城789号</td><td>15</td><td><span class="tag tag-success">8</span></td><td><span class="tag tag-primary">5</span></td><td><span class="tag tag-danger">2</span></td><td>¥1.3/度</td><td><span class="action-link">编辑</span><span class="action-link">电价设置</span></td></tr>
</tbody>
</table>
</div>
</div>
<div id="chargeOrders" class="tab-content" style="display:none">
<div class="table-card">
<div class="table-header"><span class="table-title">充电订单列表</span></div>
<table>
<thead><tr><th>订单号</th><th>用户</th><th>充电站</th><th>时长</th><th>电量</th><th>费用</th><th>状态</th><th>时间</th></tr></thead>
<tbody>
<tr><td>CD20240423001</td><td>张三</td><td>上海浦东充电站</td><td>2小时30分</td><td>35.6度</td><td>¥42.72</td><td><span class="tag tag-success">已完成</span></td><td>2024-04-23 14:30</td></tr>
<tr><td>CD20240423002</td><td>李四</td><td>北京朝阳充电中心</td><td>1小时45分</td><td>25.2度</td><td>¥37.80</td><td><span class="tag tag-primary">进行中</span></td><td>2024-04-23 14:15</td></tr>
<tr><td>CD20240423003</td><td>王五</td><td>广州天河充电站</td><td>3小时20分</td><td>48.5度</td><td>¥63.05</td><td><span class="tag tag-success">已完成</span></td><td>2024-04-23 13:50</td></tr>
</tbody>
</table>
</div>
</div>
<div id="chargeStats" class="tab-content" style="display:none">
<div class="stats-grid">
<div class="stat-card"><div class="stat-header"><span class="stat-label">今日订单</span></div><div class="stat-value">1,256</div></div>
<div class="stat-card"><div class="stat-header"><span class="stat-label">今日收入</span></div><div class="stat-value">¥45,890</div></div>
<div class="stat-card"><div class="stat-header"><span class="stat-label">本月订单</span></div><div class="stat-value">35,678</div></div>
<div class="stat-card"><div class="stat-header"><span class="stat-label">本月收入</span></div><div class="stat-value">¥1,256,800</div></div>
</div>
</div>
</div>
</div>

<!--加油管理-->
<div class="page" id="page-oil">
<div class="table-card">
<div class="table-header"><span class="table-title">油站列表</span><div class="table-actions"><button class="btn btn-primary btn-sm">添加油站</button></div></div>
<table>
<thead><tr><th>油站名称</th><th>地址</th><th>92#油价</th><th>95#油价</th><th>98#油价</th><th>今日订单</th><th>操作</th></tr></thead>
<tbody>
<tr><td>中石化浦东加油站</td><td>上海市浦东新区张江路123号</td><td>¥7.50</td><td>¥8.00</td><td>¥8.80</td><td>156单</td><td><span class="action-link">编辑</span><span class="action-link">油价设置</span></td></tr>
<tr><td>中石油朝阳加油站</td><td>北京市朝阳区建国路456号</td><td>¥7.45</td><td>¥7.95</td><td>¥8.75</td><td>203单</td><td><span class="action-link">编辑</span><span class="action-link">油价设置</span></td></tr>
<tr><td>中海油天河加油站</td><td>广州市天河区珠江新城789号</td><td>¥7.55</td><td>¥8.05</td><td>¥8.85</td><td>89单</td><td><span class="action-link">编辑</span><span class="action-link">油价设置</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--外卖管理-->
<div class="page" id="page-food">
<div class="table-card">
<div class="table-header"><span class="table-title">商家列表</span></div>
<table>
<thead><tr><th>商家名称</th><th>联系人</th><th>电话</th><th>地址</th><th>订单数</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>湘菜馆</td><td>王老板</td><td>138****5678</td><td>上海市浦东新区张江路123号</td><td>1,256单</td><td><span class="status-dot active"></span>营业中</td><td><span class="action-link">详情</span><span class="action-link">下架</span></td></tr>
<tr><td>粤式餐厅</td><td>李老板</td><td>139****1234</td><td>北京市朝阳区建国路456号</td><td>980单</td><td><span class="status-dot active"></span>营业中</td><td><span class="action-link">详情</span><span class="action-link">下架</span></td></tr>
<tr><td>川味火锅</td><td>张老板</td><td>137****8888</td><td>广州市天河区珠江新城789号</td><td>756单</td><td><span class="status-dot active"></span>营业中</td><td><span class="action-link">详情</span><span class="action-link">下架</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--快递管理-->
<div class="page" id="page-express">
<div class="table-card">
<div class="table-header"><span class="table-title">驿站列表</span></div>
<table>
<thead><tr><th>驿站名称</th><th>地址</th><th>负责人</th><th>电话</th><th>今日取件</th><th>今日寄件</th><th>操作</th></tr></thead>
<tbody>
<tr><td>菜鸟驿站浦东店</td><td>上海市浦东新区张江路123号</td><td>王师傅</td><td>138****5678</td><td>256件</td><td>45件</td><td><span class="action-link">编辑</span></td></tr>
<tr><td>菜鸟驿站朝阳店</td><td>北京市朝阳区建国路456号</td><td>李师傅</td><td>139****1234</td><td>312件</td><td>68件</td><td><span class="action-link">编辑</span></td></tr>
<tr><td>菜鸟驿站天河店</td><td>广州市天河区珠江新城789号</td><td>张师傅</td><td>137****8888</td><td>189件</td><td>32件</td><td><span class="action-link">编辑</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--短剧管理-->
<div class="page" id="page-shortvideo">
<div class="table-card">
<div class="table-header"><span class="table-title">短剧列表</span><div class="table-actions"><button class="btn btn-primary btn-sm">添加短剧</button></div></div>
<table>
<thead><tr><th>短剧名称</th><th>分类</th><th>集数</th><th>播放量</th><th>积分规则</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>霸道总裁爱上我</td><td>都市言情</td><td>50集</td><td>1,256,800</td><td>每集10积分</td><td><span class="tag tag-success">已上线</span></td><td><span class="action-link">编辑</span><span class="action-link">剧集管理</span><span class="action-link">下架</span></td></tr>
<tr><td>穿越时空只为遇见你</td><td>古装穿越</td><td>80集</td><td>2,156,900</td><td>每集15积分</td><td><span class="tag tag-success">已上线</span></td><td><span class="action-link">编辑</span><span class="action-link">剧集管理</span><span class="action-link">下架</span></td></tr>
<tr><td>都市修仙传</td><td>玄幻</td><td>120集</td><td>3,568,200</td><td>每集20积分</td><td><span class="tag tag-warning">待上线</span></td><td><span class="action-link">编辑</span><span class="action-link">剧集管理</span><span class="action-link">上线</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--养老管理-->
<div class="page" id="page-eldercare">
<div class="tabs"><div class="tab active">护理员管理</div><div class="tab">服务订单</div><div class="tab">收入统计</div></div>
<div class="table-card">
<div class="table-header"><span class="table-title">护理员列表</span><div class="table-actions"><button class="btn btn-primary btn-sm" onclick="showModal('addNurse')">添加护理员</button></div></div>
<table>
<thead><tr><th>护理员</th><th>电话</th><th>年龄</th><th>擅长</th><th>服务次数</th><th>评分</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td><div class="user-cell"><div class="user-avatar">陈</div><span>陈护理</span></div></td><td>138****5678</td><td>45岁</td><td>助浴、基础陪护</td><td>256次</td><td>4.9分</td><td><span class="tag tag-success">在线</span></td><td><span class="action-link">详情</span><span class="action-link">派单</span><span class="action-link">禁用</span></td></tr>
<tr><td><div class="user-cell"><div class="user-avatar">刘</div><span>刘阿姨</span></div></td><td>139****1234</td><td>38岁</td><td>保洁、做饭</td><td>189次</td><td>4.8分</td><td><span class="tag tag-warning">忙碌</span></td><td><span class="action-link">详情</span><span class="action-link">派单</span><span class="action-link">禁用</span></td></tr>
<tr><td><div class="user-cell"><div class="user-avatar">孙</div><span>孙护理</span></div></td><td>137****8888</td><td>42岁</td><td>助浴、保洁、陪护</td><td>312次</td><td>5.0分</td><td><span class="tag tag-primary">休息</span></td><td><span class="action-link">详情</span><span class="action-link">派单</span><span class="action-link">启用</span></td></tr>
</tbody>
</table>
</div>
<div class="chart-grid" style="margin-top:20px">
<div class="chart-card"><div class="chart-title">护理员服务统计</div><div class="chart-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg><span>柱状图展示</span></div></div>
<div class="chart-card"><div class="chart-title">服务类型占比</div><div class="chart-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/></svg><span>饼图展示</span></div></div>
</div>
</div>

<!--返现管理-->
<div class="page" id="page-rebate">
<div class="table-card">
<div class="table-header"><span class="table-title">返现记录</span></div>
<table>
<thead><tr><th>用户</th><th>业务类型</th><th>订单金额</th><th>返现比例</th><th>返现金额</th><th>时间</th><th>状态</th></tr></thead>
<tbody>
<tr><td>张三</td><td><span class="tag tag-primary">充电</span></td><td>¥42.72</td><td>5%</td><td>¥2.14</td><td>2024-04-23 14:30</td><td><span class="tag tag-success">已返现</span></td></tr>
<tr><td>李四</td><td><span class="tag tag-warning">加油</span></td><td>¥200.00</td><td>3%</td><td>¥6.00</td><td>2024-04-23 14:15</td><td><span class="tag tag-success">已返现</span></td></tr>
<tr><td>王五</td><td><span class="tag tag-primary">充电</span></td><td>¥63.05</td><td>5%</td><td>¥3.15</td><td>2024-04-23 13:50</td><td><span class="tag tag-success">已返现</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--优惠券管理-->
<div class="page" id="page-coupon">
<div class="table-card">
<div class="table-header"><span class="table-title">优惠券列表</span><div class="table-actions"><button class="btn btn-primary btn-sm" onclick="showModal('addCoupon')">创建优惠券</button></div></div>
<table>
<thead><tr><th>优惠券名称</th><th>类型</th><th>面值</th><th>使用门槛</th><th>已领取</th><th>已使用</th><th>有效期</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>充电满50减10</td><td><span class="tag tag-primary">充电</span></td><td>¥10</td><td>满50可用</td><td>1,256</td><td>890</td><td>2024-04-01~05-01</td><td><span class="tag tag-success">进行中</span></td><td><span class="action-link">编辑</span><span class="action-link">发放</span></td></tr>
<tr><td>加油满100减15</td><td><span class="tag tag-warning">加油</span></td><td>¥15</td><td>满100可用</td><td>2,100</td><td>1,560</td><td>2024-04-01~05-01</td><td><span class="tag tag-success">进行中</span></td><td><span class="action-link">编辑</span><span class="action-link">发放</span></td></tr>
<tr><td>外卖满30减8</td><td><span class="tag tag-danger">外卖</span></td><td>¥8</td><td>满30可用</td><td>3,500</td><td>2,890</td><td>2024-04-01~05-01</td><td><span class="tag tag-success">进行中</span></td><td><span class="action-link">编辑</span><span class="action-link">发放</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--财务管理-->
<div class="page" id="page-finance">
<div class="stats-grid">
<div class="stat-card"><div class="stat-header"><span class="stat-label">本月收入</span></div><div class="stat-value">¥2,345,890</div></div>
<div class="stat-card"><div class="stat-header"><span class="stat-label">本月支出</span></div><div class="stat-value">¥1,256,700</div></div>
<div class="stat-card"><div class="stat-header"><span class="stat-label">待提现</span></div><div class="stat-value">¥89,500</div></div>
<div class="stat-card"><div class="stat-header"><span class="stat-label">净利润</span></div><div class="stat-value">¥1,089,190</div></div>
</div>
<div class="table-card" style="margin-top:20px">
<div class="table-header"><span class="table-title">提现申请</span></div>
<table>
<thead><tr><th>申请人</th><th>类型</th><th>金额</th><th>开户行</th><th>银行卡号</th><th>申请时间</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>周推广</td><td>推广员</td><td>¥2,500</td><td>中国工商银行</td><td>6222****1234</td><td>2024-04-23 12:45</td><td><span class="tag tag-warning">待审核</span></td><td><span class="action-link" onclick="showToast('已通过')">通过</span><span class="action-link" onclick="showToast('已拒绝')">拒绝</span></td></tr>
<tr><td>张经理</td><td>代理</td><td>¥15,800</td><td>中国建设银行</td><td>6217****5678</td><td>2024-04-23 10:30</td><td><span class="tag tag-warning">待审核</span></td><td><span class="action-link" onclick="showToast('已通过')">通过</span><span class="action-link" onclick="showToast('已拒绝')">拒绝</span></td></tr>
<tr><td>吴经理</td><td>代理</td><td>¥8,500</td><td>中国农业银行</td><td>6228****9012</td><td>2024-04-23 09:15</td><td><span class="tag tag-success">已通过</span></td><td><span class="action-link">查看</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--广告管理-->
<div class="page" id="page-ad">
<div class="table-card">
<div class="table-header"><span class="table-title">Banner设置</span><div class="table-actions"><button class="btn btn-primary btn-sm">添加Banner</button></div></div>
<table>
<thead><tr><th>图片</th><th>标题</th><th>链接</th><th>位置</th><th>排序</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' fill='%23e6f7ff'%3E%3Crect width='80' height='40'/%3E%3Ctext x='40' y='25' text-anchor='middle' fill='%231890ff' font-size='10'%3E图片%3C/text%3E%3C/svg%3E" style="border-radius:4px"></td><td>充电首单返现活动</td><td>充电页面</td><td>首页轮播</td><td>1</td><td><span class="tag tag-success">启用</span></td><td><span class="action-link">编辑</span><span class="action-link">禁用</span></td></tr>
<tr><td><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' fill='%23fff7e6'%3E%3Crect width='80' height='40'/%3E%3Ctext x='40' y='25' text-anchor='middle' fill='%23faad14' font-size='10'%3E图片%3C/text%3E%3C/svg%3E" style="border-radius:4px"></td><td>加油优惠套餐</td><td>加油页面</td><td>首页轮播</td><td>2</td><td><span class="tag tag-success">启用</span></td><td><span class="action-link">编辑</span><span class="action-link">禁用</span></td></tr>
<tr><td><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' fill='%23f6ffed'%3E%3Crect width='80' height='40'/%3E%3Ctext x='40' y='25' text-anchor='middle' fill='%2352c41a' font-size='10'%3E图片%3C/text%3E%3C/svg%3E" style="border-radius:4px"></td><td>免费短剧观看</td><td>短剧页面</td><td>首页轮播</td><td>3</td><td><span class="tag tag-success">启用</span></td><td><span class="action-link">编辑</span><span class="action-link">禁用</span></td></tr>
</tbody>
</table>
</div>
</div>

<!--系统设置-->
<div class="page" id="page-system">
<div class="table-card">
<div class="table-header"><span class="table-title">平台配置</span></div>
<div style="max-width:600px">
<div class="form-group"><label class="form-label">平台名称</label><input type="text" class="form-input" value="一站式服务平台"></div>
<div class="form-group"><label class="form-label">平台Logo</label><div style="display:flex;align-items:center;gap:16px"><div style="width:80px;height:80px;background:#e6f7ff;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:24px;font-weight:bold">E</div><button class="btn btn-default">更换Logo</button></div></div>
<div class="form-group"><label class="form-label">版权信息</label><input type="text" class="form-input" value="© 2024 一站式服务平台 版权所有"></div>
<div class="form-group"><label class="form-label">联系电话</label><input type="text" class="form-input" value="400-888-8888"></div>
<div class="form-group"><label class="form-label">用户协议</label><textarea class="form-input">这里是用户协议内容...