|
|
<!DOCTYPE html><html lang="zh-CN">
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>管理后台</title> <style> .tab-container { max-width: 1200px; margin: 0 0 12px 0; padding: 0 16px; }
.tabs { display: flex; gap: 50px; padding: 4px; border-radius: 8px; width: fit-content; }
.tab { padding: 10px 20px; border-radius: 6px; border: none; background: transparent; color: #131212; font-weight: 700; cursor: pointer; transition: all 0.3s ease; font-size: 16px; white-space: nowrap; }
.tab:hover { background: rgba(46, 125, 50, 0.1); color: #25D366; }
.tab.active { background: #BAF7D0; color: #0E4322; box-shadow: 0 2px 4px rgba(46, 125, 50, 0.3); } body { font-family: Arial, sans-serif; padding: 24px; background: #f7f8fb; color: #222; }
.card { background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }
th { background: #fafafa; font-weight: 600; }
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pagination { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.btn { padding: 6px 10px; border-radius: 6px; border: 1px solid #ddd; background: #fff; cursor: pointer; user-select: none; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: #007bff; color: #fff; border-color: #007bff; }
.btn.whatsapp { background: #25D366; color: #fff; border-color: #25D366; }
.status-btn { padding: 4px 8px; border-radius: 6px; border: 1px solid #ccc; cursor: pointer; }
.status-0 { background: red; color: #fff; }
.status-1 { background: #2f9e44; color: #fff; border-color: #2f9e44; }
.btn.active { background: #007bff; color: #fff; border-color: #007bff; }
select, input[type="number"] { padding: 6px; border-radius: 6px; border: 1px solid #ddd; }
.small { font-size: 13px; color: #666; }
@media (max-width: 640px) { .tabs { flex-wrap: wrap; width: 100%; }
.tab { flex: 1; min-width: 120px; text-align: center; } .controls { flex-direction: column; align-items: flex-start; }
.pagination { margin-left: 0; } }
#noteModal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); align-items: center; justify-content: center; z-index: 9999; }
#noteModal .dialog { background: #fff; padding: 16px; border-radius: 8px; width: 90%; max-width: 520px; box-sizing: border-box; }
#noteModal textarea { width: 100%; min-width: 60%; max-width: 100%; min-height: 150px; box-sizing: border-box; padding: 8px; border-radius: 6px; border: 1px solid #ddd; font-size: 14px; }
.toast { position: fixed; top: -20px; left: 50%; transform: translateX(-50%); background: #4caf50; color: #fff; padding: 10px 16px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); font-size: 16px; opacity: 0; transition: all 0.3s ease; z-index: 10000; pointer-events: none; }
.toast.show { opacity: 1; top: 20px; }
table th, table td { text-align: center; }
/* 登录验证样式 */ #loginCheckModal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; z-index: 99999; }
#loginCheckModal .dialog { background: #fff; padding: 30px; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
#loginCheckModal h3 { margin: 0 0 16px; color: #e74c3c; font-size: 20px; }
#loginCheckModal p { margin: 0 0 24px; color: #666; line-height: 1.5; }
#loginCheckModal .btn { padding: 10px 20px; font-size: 16px; } </style> <script type="module" crossorigin src="./management.js"></script> <link rel="modulepreload" crossorigin href="./request.js"> <link rel="modulepreload" crossorigin href="./member.js"></head>
<body> <!-- 登录验证模态框 --> <div id="loginCheckModal"> <div class="dialog"> <h3>访问被拒绝</h3> <p>您尚未登录或登录已过期，请先登录系统。</p> <button class="btn primary" id="goToLoginBtn">前往登录页面</button> </div> </div><div class="tab-container"> <div class="tabs"> <button class="tab active" data-tab="win-us-stock">赢在美股导流</button> <button class="tab" data-tab="deepchart">DeepChart导流</button> <button class="tab" data-tab="content-config">内容配置</button> </div> </div> <div class="card"> <table aria-describedby="tableDesc"> <thead> <tr> <th style="width: 20px">#</th> <th style="width: 60px">姓名</th> <th style="width: 80px">WhatsApp</th> <th style="width: 80px">国家/地区代码</th> <th style="width: 110px">电话号码</th> <th style="width: 110px">微信ID</th> <th style="width: 110px">邮箱</th> <th style="width: 100px">报名意向</th> <th style="width: 80px">获客来源</th> <th style="width: 130px">来源地址</th> <th style="width: 150px">添加时间</th> <th style="width: 90px">是否联系</th> <th style="width: 90px">备注</th> <th style="width: 70px">操作</th> </tr> </thead> <tbody id="tableBody"></tbody> </table> <div class="controls" style="margin-bottom: 8px; margin-top: 12px"> <div class="small"> 每页显示 <select id="pageSizeSelect"> <option value="20" selected>20</option> <option value="50">50</option> <option value="100">100</option> <option value="200">200</option> </select> 条 </div>
<div class="small">共 <span id="totalCount">0</span> 条</div>
<div class="pagination" id="pagination"></div> </div> <!-- 备注编辑模态 --> <div id="noteModal"> <div class="dialog"> <h3 style="margin: 0 0 8px">编辑备注</h3> <textarea id="noteTextarea" rows="6" placeholder="输入备注..."></textarea> <div style=" margin-top: 10px; display: flex; justify-content: flex-end; gap: 8px; "> <button class="btn" id="noteCancelBtn">取消</button> <button class="btn primary" id="noteSaveBtn">保存</button> </div> </div> </div> </div> <div id="toast" class="toast"></div></body>
</html>
|
