You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>管理后台</title> <style> 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; } .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) { .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; } </style> <script type="module" crossorigin src="./management.js"></script> <link rel="modulepreload" crossorigin href="./member.js"> </head> <body> <div class="card"> <table aria-describedby="tableDesc"> <thead> <tr> <th style="width: 40px">#</th> <th style="width: 100px">姓名</th> <th style="width: 90px">国家/地区代码</th> <th style="width: 120px">电话号码</th> <th style="width: 120px">微信ID</th> <th style="width: 150px">邮箱</th> <th style="width: 160px">添加时间</th> <th style="width: 100px">是否联系</th> <th style="width: 160px">备注</th> <th style="width: 100px">操作</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>
|
