379 lines
10 KiB
HTML
379 lines
10 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;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background-color: #f5f5f5;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background-color: white;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 顶部标题栏 */
|
||
.header {
|
||
background-color: white;
|
||
border: 1px dashed #28a745;
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.back-btn {
|
||
border: 1px dashed #ccc;
|
||
background: white;
|
||
padding: 8px 12px;
|
||
margin-right: 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #28a745;
|
||
}
|
||
|
||
/* 进度条 */
|
||
.progress-section {
|
||
padding: 20px;
|
||
border: 1px dashed #ccc;
|
||
margin: 10px;
|
||
}
|
||
|
||
.progress-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.progress-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
flex: 1;
|
||
}
|
||
|
||
.step-circle {
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: white;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.step-circle.completed {
|
||
background-color: #28a745;
|
||
color: white;
|
||
border: 1px solid #28a745;
|
||
}
|
||
|
||
.step-circle.current {
|
||
background-color: #28a745;
|
||
color: white;
|
||
border: 1px solid #28a745;
|
||
}
|
||
|
||
.step-text {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.step-text.active {
|
||
color: #28a745;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.progress-line {
|
||
position: absolute;
|
||
top: 15px;
|
||
left: 15%;
|
||
right: 15%;
|
||
height: 1px;
|
||
border-top: 1px dashed #ccc;
|
||
z-index: -1;
|
||
}
|
||
|
||
/* 店铺选择区域 */
|
||
.shop-section {
|
||
margin: 10px;
|
||
border: 1px dashed #ccc;
|
||
padding: 20px;
|
||
}
|
||
|
||
.shop-title {
|
||
font-size: 16px;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
}
|
||
|
||
.shop-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.shop-tag {
|
||
border: 1px dashed #ccc;
|
||
background: white;
|
||
padding: 8px 15px;
|
||
border-radius: 15px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 警告提示框 */
|
||
.warning-box {
|
||
margin: 10px;
|
||
border: 1px dashed #ffc107;
|
||
background-color: #fff3cd;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.warning-text {
|
||
color: #856404;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 会员等级设置区域 */
|
||
.level-section {
|
||
margin: 10px;
|
||
border: 1px dashed #28a745;
|
||
padding: 20px;
|
||
}
|
||
|
||
.level-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.level-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #28a745;
|
||
}
|
||
|
||
.template-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.template-btn {
|
||
border: 1px dashed #ccc;
|
||
background: white;
|
||
padding: 8px 15px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.template-btn:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
/* 等级表格 */
|
||
.level-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.level-table th,
|
||
.level-table td {
|
||
border: 1px dashed #ccc;
|
||
padding: 12px;
|
||
text-align: left;
|
||
}
|
||
|
||
.level-table th {
|
||
background-color: #f8f9fa;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.level-name {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.detail-btn {
|
||
border: 1px dashed #28a745;
|
||
background: white;
|
||
color: #28a745;
|
||
padding: 6px 12px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.detail-btn:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
/* 底部操作栏 */
|
||
.action-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: white;
|
||
border-top: 1px dashed #ccc;
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.prev-btn {
|
||
border: 1px dashed #ccc;
|
||
background: white;
|
||
color: #666;
|
||
padding: 12px 30px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.submit-btn {
|
||
border: 1px dashed #28a745;
|
||
background: white;
|
||
color: #28a745;
|
||
padding: 12px 30px;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.prev-btn:hover,
|
||
.submit-btn:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
|
||
.template-buttons {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.level-table {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.action-bar {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 顶部标题栏 -->
|
||
<div class="header">
|
||
<div class="back-btn">← 返回</div>
|
||
<div class="header-title">批量会员等级编辑</div>
|
||
</div>
|
||
|
||
<!-- 进度条 -->
|
||
<div class="progress-section">
|
||
<div class="progress-bar">
|
||
<div class="progress-line"></div>
|
||
<div class="progress-step">
|
||
<div class="step-circle completed">✓</div>
|
||
<div class="step-text">选择店铺</div>
|
||
</div>
|
||
<div class="progress-step">
|
||
<div class="step-circle current">2</div>
|
||
<div class="step-text active">设置等级</div>
|
||
</div>
|
||
<div class="progress-step">
|
||
<div class="step-circle">3</div>
|
||
<div class="step-text">确认提交</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 店铺选择区域 -->
|
||
<div class="shop-section">
|
||
<div class="shop-title">正在为以下8个店铺设置会员等级</div>
|
||
<div class="shop-tags">
|
||
<div class="shop-tag">时尚服装店</div>
|
||
<div class="shop-tag">数码电子城</div>
|
||
<div class="shop-tag">美食餐厅</div>
|
||
<div class="shop-tag">家居生活馆</div>
|
||
<div class="shop-tag">运动健身店</div>
|
||
<div class="shop-tag">母婴用品店</div>
|
||
<div class="shop-tag">图书文具店</div>
|
||
<div class="shop-tag">宠物用品店</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 警告提示框 -->
|
||
<div class="warning-box">
|
||
<div class="warning-text">
|
||
注意事项：批量设置会员等级将覆盖所选店铺的现有等级设置，请确认无误后再提交。设置完成后，用户需要重新登录才能看到等级变化。
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会员等级设置区域 -->
|
||
<div class="level-section">
|
||
|
||
|
||
<table class="level-table">
|
||
<thead>
|
||
<tr>
|
||
<th>等级</th>
|
||
<th>等级名称</th>
|
||
<th>等级详情</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>LV1</td>
|
||
<td class="level-name">铜牌会员</td>
|
||
<td>积分达到100分可升级，享受95折优惠</td>
|
||
<td><div class="detail-btn">展开详情</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>LV2</td>
|
||
<td class="level-name">银牌会员</td>
|
||
<td>积分达到500分可升级，享受9折优惠</td>
|
||
<td><div class="detail-btn">展开详情</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>LV3</td>
|
||
<td class="level-name">金牌会员</td>
|
||
<td>积分达到1000分可升级，享受85折优惠</td>
|
||
<td><div class="detail-btn">展开详情</div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<div class="action-bar">
|
||
<div class="prev-btn">上一步</div>
|
||
<div class="submit-btn">提交</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |