606 lines
20 KiB
HTML
606 lines
20 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", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
background-color: #f8f9fa;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 页面头部 */
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
padding: 20px 0;
|
||
border-bottom: 1px dashed #ccc;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.submit-btn {
|
||
background: #007bff;
|
||
border: 1px solid #007bff;
|
||
padding: 10px 24px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
color: white;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.submit-btn:hover {
|
||
background: #0056b3;
|
||
border-color: #0056b3;
|
||
}
|
||
|
||
/* 会员等级表格 */
|
||
.member-levels {
|
||
background: white;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
color: #333;
|
||
}
|
||
|
||
.levels-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.levels-table th,
|
||
.levels-table td {
|
||
padding: 12px 8px;
|
||
text-align: center;
|
||
border: 1px dashed #ddd;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.levels-table th {
|
||
background: #f8f9fa;
|
||
font-weight: 600;
|
||
color: #555;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.levels-table td {
|
||
background: white;
|
||
}
|
||
|
||
/* 表格输入框 */
|
||
.table-input {
|
||
width: 100%;
|
||
max-width: 120px;
|
||
padding: 6px 8px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.table-input:focus {
|
||
outline: none;
|
||
border-color: #999;
|
||
}
|
||
|
||
.range-input {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.range-input input {
|
||
max-width: 60px;
|
||
}
|
||
|
||
/* 开关按钮 */
|
||
.switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 44px;
|
||
height: 24px;
|
||
}
|
||
|
||
.switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.slider {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #ccc;
|
||
border: 1px dashed #999;
|
||
transition: .4s;
|
||
border-radius: 24px;
|
||
}
|
||
|
||
.slider:before {
|
||
position: absolute;
|
||
content: "";
|
||
height: 16px;
|
||
width: 16px;
|
||
left: 3px;
|
||
bottom: 3px;
|
||
background-color: white;
|
||
transition: .4s;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
input:checked + .slider {
|
||
background-color: #28a745;
|
||
}
|
||
|
||
input:checked + .slider:before {
|
||
transform: translateX(20px);
|
||
}
|
||
|
||
/* 等级名称 */
|
||
.level-number {
|
||
font-weight: 600;
|
||
color: #666;
|
||
}
|
||
|
||
/* 添加优惠券按钮 */
|
||
.add-coupon-btn {
|
||
background: #007bff;
|
||
border: 1px solid #007bff;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: white;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.add-coupon-btn:hover {
|
||
background: #0056b3;
|
||
border-color: #0056b3;
|
||
}
|
||
|
||
/* 编辑按钮 */
|
||
.edit-btn {
|
||
background: #007bff;
|
||
border: 1px solid #007bff;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: white;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.edit-btn:hover {
|
||
background: #0056b3;
|
||
border-color: #0056b3;
|
||
}
|
||
|
||
/* 积分设置区域 */
|
||
.points-settings {
|
||
background: white;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.setting-item {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.setting-label {
|
||
min-width: 150px;
|
||
font-weight: 500;
|
||
color: #555;
|
||
}
|
||
|
||
.setting-input {
|
||
padding: 8px 12px;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
width: 120px;
|
||
}
|
||
|
||
.setting-input:focus {
|
||
outline: none;
|
||
border-color: #999;
|
||
}
|
||
|
||
.setting-text {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 积分任务管理 */
|
||
.points-task-settings {
|
||
background: white;
|
||
border: 1px dashed #ccc;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.task-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.task-table th,
|
||
.task-table td {
|
||
padding: 12px;
|
||
text-align: left;
|
||
border: 1px dashed #ddd;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.task-table th {
|
||
background: #f8f9fa;
|
||
font-weight: 600;
|
||
color: #555;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.task-table td {
|
||
background: white;
|
||
}
|
||
|
||
.task-table td:nth-child(3),
|
||
.task-table td:nth-child(4) {
|
||
text-align: center;
|
||
}
|
||
|
||
.task-table td:nth-child(2) {
|
||
color: #666;
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 15px;
|
||
}
|
||
|
||
.page-header {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.levels-table {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.levels-table th,
|
||
.levels-table td {
|
||
padding: 8px 4px;
|
||
}
|
||
|
||
.table-input {
|
||
max-width: 80px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.setting-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.setting-label {
|
||
min-width: auto;
|
||
}
|
||
|
||
.task-table {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.task-table th,
|
||
.task-table td {
|
||
padding: 8px 4px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 页面头部 -->
|
||
<div class="page-header">
|
||
<h1 class="page-title">时尚服装店 - 等级编辑</h1>
|
||
<button class="submit-btn">提交</button>
|
||
</div>
|
||
|
||
<!-- 会员等级表格 -->
|
||
<div class="member-levels">
|
||
<h2 class="section-title">会员等级设置</h2>
|
||
<table class="levels-table">
|
||
<thead>
|
||
<tr>
|
||
<th>等级</th>
|
||
<th>等级名称</th>
|
||
<th>成长值范围</th>
|
||
<th>开启会员折扣</th>
|
||
<th>折扣率%</th>
|
||
<th>开启积分兑换</th>
|
||
<th>开启生日优惠券</th>
|
||
<th>生日优惠券操作</th>
|
||
<th>开启生日双倍积分</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="level-number">LV1</span></td>
|
||
<td><input type="text" class="table-input" value="铜牌会员" placeholder="等级名称"></td>
|
||
<td>
|
||
<div class="range-input">
|
||
<input type="number" class="table-input" value="0" min="0">
|
||
<span>-</span>
|
||
<input type="number" class="table-input" value="100" min="0">
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><input type="number" class="table-input" value="5" min="0" max="100" step="0.1"></td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><button class="add-coupon-btn">添加优惠券</button></td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="level-number">LV2</span></td>
|
||
<td><input type="text" class="table-input" value="银牌会员" placeholder="等级名称"></td>
|
||
<td>
|
||
<div class="range-input">
|
||
<input type="number" class="table-input" value="101" min="0">
|
||
<span>-</span>
|
||
<input type="number" class="table-input" value="500" min="0">
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><input type="number" class="table-input" value="10" min="0" max="100" step="0.1"></td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><button class="add-coupon-btn">添加优惠券</button></td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="level-number">LV3</span></td>
|
||
<td><input type="text" class="table-input" value="金牌会员" placeholder="等级名称"></td>
|
||
<td>
|
||
<div class="range-input">
|
||
<input type="number" class="table-input" value="501" min="0">
|
||
<span>-</span>
|
||
<input type="number" class="table-input" value="1200" min="0">
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><input type="number" class="table-input" value="15" min="0" max="100" step="0.1"></td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><button class="add-coupon-btn">添加优惠券</button></td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="level-number">LV4</span></td>
|
||
<td><input type="text" class="table-input" value="钻石会员" placeholder="等级名称"></td>
|
||
<td>
|
||
<div class="range-input">
|
||
<input type="number" class="table-input" value="1201" min="0">
|
||
<span>-</span>
|
||
<input type="number" class="table-input" value="9999" min="0">
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><input type="number" class="table-input" value="20" min="0" max="100" step="0.1"></td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><button class="add-coupon-btn">添加优惠券</button></td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 积分有效期设置 -->
|
||
<div class="points-settings">
|
||
<h2 class="section-title">积分有效期设置</h2>
|
||
<div class="setting-item">
|
||
<label class="setting-label">有效期天数</label>
|
||
<input type="number" class="setting-input" value="365" min="1">
|
||
<span class="setting-text">天</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 积分任务管理 -->
|
||
<div class="points-task-settings">
|
||
<h2 class="section-title">积分任务管理</h2>
|
||
<table class="task-table">
|
||
<thead>
|
||
<tr>
|
||
<th>任务名称</th>
|
||
<th>任务描述</th>
|
||
<th>是否启用</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>每日签到</strong></td>
|
||
<td>第一天签到1分，第二天2分，第三天3分，连续7天循环</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><button class="edit-btn">编辑</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>浏览商品</strong></td>
|
||
<td>浏览一个商品获得1分，每天最多奖励2分</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><button class="edit-btn">编辑</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>购买商品</strong></td>
|
||
<td>购买1元=1分，每天最多获得500分</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox" checked>
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><button class="edit-btn">编辑</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>分享商品</strong></td>
|
||
<td>分享一个商品获得5分，每天最多奖励3次</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><button class="edit-btn">编辑</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>评价商品</strong></td>
|
||
<td>评价一个商品获得10分，文字评价+图片可获得20分</td>
|
||
<td>
|
||
<label class="switch">
|
||
<input type="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</td>
|
||
<td><button class="edit-btn">编辑</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |