514 lines
16 KiB
HTML
514 lines
16 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: 'Microsoft YaHei', sans-serif;
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 20px auto;
|
||
background: white;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 头部区域 */
|
||
.header {
|
||
padding: 20px;
|
||
background: #fafafa;
|
||
border-bottom: 1px dashed #ccc;
|
||
}
|
||
|
||
.member-info {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 30px;
|
||
align-items: start;
|
||
}
|
||
|
||
.basic-info {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-weight: bold;
|
||
color: #666;
|
||
margin-right: 10px;
|
||
min-width: 100px;
|
||
}
|
||
|
||
.info-value {
|
||
color: #333;
|
||
}
|
||
|
||
.stats-panel {
|
||
display: flex;
|
||
gap: 20px;
|
||
padding: 15px;
|
||
background: white;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
display: block;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* Tab导航 */
|
||
.tab-nav {
|
||
display: flex;
|
||
border-bottom: 1px dashed #ccc;
|
||
background: #fafafa;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 15px 30px;
|
||
cursor: pointer;
|
||
border-right: 1px dashed #ccc;
|
||
background: white;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-item:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.tab-item.active {
|
||
background: white;
|
||
border-bottom: 2px solid #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-item:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
/* 内容区域 */
|
||
.tab-content {
|
||
padding: 20px;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.tab-pane {
|
||
display: none;
|
||
}
|
||
|
||
.tab-pane.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 表格样式 */
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.data-table th,
|
||
.data-table td {
|
||
padding: 12px;
|
||
text-align: left;
|
||
border: 1px dashed #ccc;
|
||
}
|
||
|
||
.data-table th {
|
||
background: #f9f9f9;
|
||
font-weight: bold;
|
||
color: #666;
|
||
}
|
||
|
||
.data-table tbody tr:nth-child(even) {
|
||
background: #fafafa;
|
||
}
|
||
|
||
.data-table tbody tr:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
/* 链接样式 */
|
||
.link {
|
||
color: #666;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.link:hover {
|
||
color: #333;
|
||
}
|
||
|
||
/* 分页样式 */
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.pagination button {
|
||
padding: 8px 16px;
|
||
background: white;
|
||
border: 1px dashed #ccc;
|
||
cursor: pointer;
|
||
color: #666;
|
||
}
|
||
|
||
.pagination button:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.pagination button:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.pagination .current-page {
|
||
padding: 8px 16px;
|
||
background: #f9f9f9;
|
||
border: 1px dashed #ccc;
|
||
color: #333;
|
||
}
|
||
|
||
/* 状态标签 */
|
||
.status-tag {
|
||
padding: 2px 8px;
|
||
border-radius: 2px;
|
||
font-size: 12px;
|
||
border: 1px dashed #ccc;
|
||
}
|
||
|
||
.status-available {
|
||
background: #f0f9ff;
|
||
color: #0066cc;
|
||
}
|
||
|
||
.status-used {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
.status-expired {
|
||
background: #fff0f0;
|
||
color: #cc0000;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
margin: 10px;
|
||
}
|
||
|
||
.member-info {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.basic-info {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stats-panel {
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 12px 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.data-table {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.data-table th,
|
||
.data-table td {
|
||
padding: 8px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 头部会员信息 -->
|
||
<div class="header">
|
||
<div class="member-info">
|
||
<div class="basic-info">
|
||
<div class="info-item">
|
||
<span class="info-label">会员姓名：</span>
|
||
<span class="info-value">张三</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">系统编号：</span>
|
||
<span class="info-value">3</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">手机号：</span>
|
||
<span class="info-value">138****1234</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">生日：</span>
|
||
<span class="info-value">1990-05-15</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-panel">
|
||
<div class="stat-item">
|
||
<span class="stat-value">1250</span>
|
||
<div class="stat-label">会员成长值</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value">890</span>
|
||
<div class="stat-label">会员积分</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-value">5</span>
|
||
<div class="stat-label">会员优惠券</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab导航 -->
|
||
<div class="tab-nav">
|
||
<div class="tab-item active" onclick="switchTab('growth')">会员成长值明细</div>
|
||
<div class="tab-item" onclick="switchTab('points')">会员积分明细</div>
|
||
<div class="tab-item" onclick="switchTab('coupons')">会员优惠券</div>
|
||
</div>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="tab-content">
|
||
<!-- 会员成长值明细 -->
|
||
<div id="growth" class="tab-pane active">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>变化时间</th>
|
||
<th>成长值变动</th>
|
||
<th>关联订单</th>
|
||
<th>详情</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>2024-01-15 14:30:25</td>
|
||
<td>+50</td>
|
||
<td>ORDER2024011501</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2024-01-10 09:15:10</td>
|
||
<td>+100</td>
|
||
<td>ORDER2024011002</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2024-01-05 16:45:33</td>
|
||
<td>+30</td>
|
||
<td>ORDER2024010503</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2024-01-02 11:20:15</td>
|
||
<td>+20</td>
|
||
<td>ORDER2024010204</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2023-12-28 13:55:40</td>
|
||
<td>+75</td>
|
||
<td>ORDER2023122805</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="pagination">
|
||
<button disabled>上一页</button>
|
||
<span class="current-page">第1页，共1页</span>
|
||
<button disabled>下一页</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会员积分明细 -->
|
||
<div id="points" class="tab-pane">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>变化时间</th>
|
||
<th>积分变动</th>
|
||
<th>变动类型</th>
|
||
<th>关联订单</th>
|
||
<th>详情</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>2024-01-15 14:30:25</td>
|
||
<td>+100</td>
|
||
<td>购物获得</td>
|
||
<td>ORDER2024011501</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2024-01-12 10:20:15</td>
|
||
<td>-50</td>
|
||
<td>积分抵扣</td>
|
||
<td>ORDER2024011202</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2024-01-10 09:15:10</td>
|
||
<td>+200</td>
|
||
<td>购物获得</td>
|
||
<td>ORDER2024011002</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2024-01-08 15:45:30</td>
|
||
<td>+10</td>
|
||
<td>签到奖励</td>
|
||
<td>-</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2024-01-05 16:45:33</td>
|
||
<td>+60</td>
|
||
<td>购物获得</td>
|
||
<td>ORDER2024010503</td>
|
||
<td><span class="link">查看详情</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="pagination">
|
||
<button disabled>上一页</button>
|
||
<span class="current-page">第1页，共1页</span>
|
||
<button disabled>下一页</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会员优惠券 -->
|
||
<div id="coupons" class="tab-pane">
|
||
<table class="data-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>¥20</td>
|
||
<td>满100元可用</td>
|
||
<td>2024-01-01 10:00:00</td>
|
||
<td>2024-02-01</td>
|
||
<td><span class="status-tag status-available">可使用</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>生日特惠券</td>
|
||
<td>折扣券</td>
|
||
<td>9折</td>
|
||
<td>全品类可用</td>
|
||
<td>2024-01-05 12:30:15</td>
|
||
<td>2024-02-05</td>
|
||
<td><span class="status-tag status-available">可使用</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>积分兑换券</td>
|
||
<td>满减券</td>
|
||
<td>¥50</td>
|
||
<td>满300元可用</td>
|
||
<td>2024-01-10 16:20:30</td>
|
||
<td>2024-03-10</td>
|
||
<td><span class="status-tag status-available">可使用</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>限时抢购券</td>
|
||
<td>满减券</td>
|
||
<td>¥10</td>
|
||
<td>满50元可用</td>
|
||
<td>2023-12-20 14:15:20</td>
|
||
<td>2024-01-20</td>
|
||
<td><span class="status-tag status-expired">已过期</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>会员专属券</td>
|
||
<td>满减券</td>
|
||
<td>¥30</td>
|
||
<td>满200元可用</td>
|
||
<td>2023-12-15 09:45:10</td>
|
||
<td>2024-01-15</td>
|
||
<td><span class="status-tag status-used">已使用</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="pagination">
|
||
<button disabled>上一页</button>
|
||
<span class="current-page">第1页，共1页</span>
|
||
<button disabled>下一页</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function switchTab(tabName) {
|
||
// 移除所有active类
|
||
document.querySelectorAll('.tab-item').forEach(item => {
|
||
item.classList.remove('active');
|
||
});
|
||
document.querySelectorAll('.tab-pane').forEach(pane => {
|
||
pane.classList.remove('active');
|
||
});
|
||
|
||
// 添加active类到当前选中的tab
|
||
event.target.classList.add('active');
|
||
document.getElementById(tabName).classList.add('active');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |