491 lines
15 KiB
HTML
491 lines
15 KiB
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;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* Header */
|
||
.page-header {
|
||
background: white;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
/* Search Section */
|
||
.search-section {
|
||
background: white;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.search-form {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
align-items: end;
|
||
}
|
||
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.form-input, .form-select {
|
||
padding: 8px 12px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
background: white;
|
||
}
|
||
|
||
.form-input:focus, .form-select:focus {
|
||
outline: none;
|
||
border-color: #999;
|
||
}
|
||
|
||
.search-btn {
|
||
padding: 8px 20px;
|
||
background: white;
|
||
border: 2px dashed #28a745;
|
||
border-radius: 4px;
|
||
color: #28a745;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.search-btn:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
/* Statistics Section */
|
||
.stats-section {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
padding: 20px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
color: white;
|
||
}
|
||
|
||
.stat-icon.users {
|
||
background: #007bff;
|
||
}
|
||
|
||
.stat-icon.new {
|
||
background: #ffc107;
|
||
}
|
||
|
||
.stat-content h3 {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.stat-content p {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
/* Table Section */
|
||
.table-section {
|
||
background: white;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-container {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.data-table th,
|
||
.data-table td {
|
||
padding: 12px;
|
||
text-align: left;
|
||
border-bottom: 1px dashed #eee;
|
||
}
|
||
|
||
.data-table th {
|
||
background: #f8f9fa;
|
||
font-weight: 600;
|
||
color: #333;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.data-table td {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.data-table tbody tr:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
/* Avatar */
|
||
.user-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.avatar-1 { background: #007bff; }
|
||
.avatar-2 { background: #28a745; }
|
||
.avatar-3 { background: #dc3545; }
|
||
.avatar-4 { background: #ffc107; color: #333; }
|
||
.avatar-5 { background: #6f42c1; }
|
||
.avatar-6 { background: #fd7e14; }
|
||
|
||
/* Member Level Badge */
|
||
.member-level {
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: white;
|
||
}
|
||
|
||
.level-1 { background: #28a745; }
|
||
.level-2 { background: #007bff; }
|
||
.level-3 { background: #ffc107; color: #333; }
|
||
.level-4 { background: #dc3545; }
|
||
|
||
/* Action Link */
|
||
.action-link {
|
||
color: #007bff;
|
||
text-decoration: none;
|
||
border: 1px dashed transparent;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.action-link:hover {
|
||
border-color: #007bff;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
/* Pagination */
|
||
.pagination-section {
|
||
background: white;
|
||
padding: 15px 20px;
|
||
margin-top: 20px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.record-info {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.pagination-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.page-link {
|
||
padding: 6px 12px;
|
||
border: 1px dashed #ccc;
|
||
background: white;
|
||
color: #333;
|
||
text-decoration: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.page-link:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.page-link.current {
|
||
border-color: #007bff;
|
||
color: #007bff;
|
||
}
|
||
|
||
/* Checkbox */
|
||
.checkbox {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 1px dashed #ccc;
|
||
background: white;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.search-form {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stats-section {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.pagination-section {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.data-table {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.data-table th,
|
||
.data-table td {
|
||
padding: 8px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Page Header -->
|
||
<div class="page-header">
|
||
<h1 class="page-title">会员列表</h1>
|
||
</div>
|
||
|
||
<!-- Search Section -->
|
||
<div class="search-section">
|
||
<form class="search-form">
|
||
<div class="form-group">
|
||
<label class="form-label">所属店铺</label>
|
||
<select class="form-select">
|
||
<option>全部店铺</option>
|
||
<option>总店</option>
|
||
<option>分店1</option>
|
||
<option>分店2</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">用户昵称</label>
|
||
<input type="text" class="form-input" placeholder="请输入用户昵称">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">手机号</label>
|
||
<input type="text" class="form-input" placeholder="请输入手机号">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">会员等级</label>
|
||
<select class="form-select">
|
||
<option>全部等级</option>
|
||
<option>LV1</option>
|
||
<option>LV2</option>
|
||
<option>LV3</option>
|
||
<option>LV4</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">注册时间</label>
|
||
<input type="date" class="form-input">
|
||
</div>
|
||
<div class="form-group">
|
||
<button type="button" class="search-btn">筛选查询</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Statistics Section -->
|
||
<div class="stats-section">
|
||
<div class="stat-card">
|
||
<div class="stat-icon users">👥</div>
|
||
<div class="stat-content">
|
||
<h3>1,247</h3>
|
||
<p>会员总数</p>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon new">⭐</div>
|
||
<div class="stat-content">
|
||
<h3>23</h3>
|
||
<p>今日新增</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table Section -->
|
||
<div class="table-section">
|
||
<div class="table-container">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th><input type="checkbox" class="checkbox"></th>
|
||
<th>所属店铺</th>
|
||
<th>用户ID</th>
|
||
<th>用户头像</th>
|
||
<th>用户昵称</th>
|
||
<th>手机号</th>
|
||
<th>会员等级</th>
|
||
<th>生日</th>
|
||
<th>注册时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox"></td>
|
||
<td>总店</td>
|
||
<td>001234</td>
|
||
<td><div class="user-avatar avatar-1">张</div></td>
|
||
<td>张小明</td>
|
||
<td>138****1234</td>
|
||
<td><span class="member-level level-2">LV2</span></td>
|
||
<td>1990-01-15</td>
|
||
<td>2024-01-15 10:30:25</td>
|
||
<td><a href="#" class="action-link">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox"></td>
|
||
<td>分店1</td>
|
||
<td>001235</td>
|
||
<td><div class="user-avatar avatar-2">李</div></td>
|
||
<td>李美丽</td>
|
||
<td>139****5678</td>
|
||
<td><span class="member-level level-1">LV1</span></td>
|
||
<td>1985-03-22</td>
|
||
<td>2024-01-14 14:20:18</td>
|
||
<td><a href="#" class="action-link">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox"></td>
|
||
<td>总店</td>
|
||
<td>001236</td>
|
||
<td><div class="user-avatar avatar-3">王</div></td>
|
||
<td>王大力</td>
|
||
<td>136****9876</td>
|
||
<td><span class="member-level level-3">LV3</span></td>
|
||
<td>1992-07-08</td>
|
||
<td>2024-01-13 09:15:42</td>
|
||
<td><a href="#" class="action-link">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox"></td>
|
||
<td>分店2</td>
|
||
<td>001237</td>
|
||
<td><div class="user-avatar avatar-4">陈</div></td>
|
||
<td>陈小芳</td>
|
||
<td>135****4321</td>
|
||
<td><span class="member-level level-4">LV4</span></td>
|
||
<td>1988-11-30</td>
|
||
<td>2024-01-12 16:45:33</td>
|
||
<td><a href="#" class="action-link">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox"></td>
|
||
<td>分店1</td>
|
||
<td>001238</td>
|
||
<td><div class="user-avatar avatar-5">刘</div></td>
|
||
<td>刘强东</td>
|
||
<td>137****8765</td>
|
||
<td><span class="member-level level-2">LV2</span></td>
|
||
<td>1995-05-12</td>
|
||
<td>2024-01-11 11:30:15</td>
|
||
<td><a href="#" class="action-link">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox"></td>
|
||
<td>总店</td>
|
||
<td>001239</td>
|
||
<td><div class="user-avatar avatar-6">赵</div></td>
|
||
<td>赵敏敏</td>
|
||
<td>133****2468</td>
|
||
<td><span class="member-level level-1">LV1</span></td>
|
||
<td>1993-09-25</td>
|
||
<td>2024-01-10 08:20:55</td>
|
||
<td><a href="#" class="action-link">详情</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pagination Section -->
|
||
<div class="pagination-section">
|
||
<div class="record-info">
|
||
显示 20 条记录，共 1,247 条
|
||
</div>
|
||
<div class="pagination-nav">
|
||
<a href="#" class="page-link">首页</a>
|
||
<a href="#" class="page-link">上一页</a>
|
||
<span class="page-link current">第1页，共63页</span>
|
||
<a href="#" class="page-link">下一页</a>
|
||
<a href="#" class="page-link">尾页</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |