This commit is contained in:
linbin 2025-08-12 12:04:52 +08:00
parent 783abe8bf8
commit eb9673b40c
9 changed files with 134 additions and 31 deletions

View File

@ -302,17 +302,20 @@
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="info-label">商品名称:</span> <span class="info-label">商品名称:</span>
<span class="info-value">黑木耳100g</span> <span class="info-value">黑木耳</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="info-label">归属摊位:</span> <span class="info-label">归属摊位:</span>
<span class="info-value">牛生蔬菜店</span> <span class="info-value">牛生蔬菜店</span>
</div> </div>
</div> <div class="info-row">
<span class="info-label">规格名称:</span>
<div class="form-group"> <span class="info-value">小份</span>
<label class="form-label">SKU-ID</label> </div>
<input type="text" class="form-input" value="194105142774503836" readonly> <div class="info-row">
<span class="info-label">SKU-ID:</span>
<span class="info-value">194105142774503836</span>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">

View File

@ -253,32 +253,36 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th>商品id</th>
<th>商品店铺</th> <th>商品店铺</th>
<th>商品名称</th> <th>商品名称</th>
<th>商品id</th> <th>商品规格</th>
<th>商品价格</th> <th>商品价格</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1212</td>
<td>猪肉铺</td> <td>猪肉铺</td>
<td>猪肉</td> <td>猪肉</td>
<td>1212</td> <td>大份</td>
<td>2元</td> <td>2元</td>
<td><a href="#" class="action-btn">添加为积分商品</a></td> <td><a href="#" class="action-btn">添加为积分商品</a></td>
</tr> </tr>
<tr> <tr>
<td>1213</td>
<td>牛肉铺</td> <td>牛肉铺</td>
<td>牛肉</td> <td>牛肉</td>
<td>1213</td> <td>小份</td>
<td>5元</td> <td>5元</td>
<td><a href="#" class="action-btn">添加为积分商品</a></td> <td><a href="#" class="action-btn">添加为积分商品</a></td>
</tr> </tr>
<tr> <tr>
<td>1214</td>
<td>鸡肉铺</td> <td>鸡肉铺</td>
<td>鸡肉</td> <td>鸡肉</td>
<td>1214</td> <td></td>
<td>3元</td> <td>3元</td>
<td><a href="#" class="action-btn">添加为积分商品</a></td> <td><a href="#" class="action-btn">添加为积分商品</a></td>
</tr> </tr>

View File

@ -239,6 +239,7 @@
</th> </th>
<th width="100">商品ID</th> <th width="100">商品ID</th>
<th width="150">商品名称</th> <th width="150">商品名称</th>
<th width="150">规格名称</th>
<th width="150">归属店铺</th> <th width="150">归属店铺</th>
<th width="100">兑换积分</th> <th width="100">兑换积分</th>
<th width="120">剩余兑换库存</th> <th width="120">剩余兑换库存</th>
@ -252,7 +253,8 @@
<input type="checkbox" class="checkbox"> <input type="checkbox" class="checkbox">
</td> </td>
<td>001</td> <td>001</td>
<td>黑木耳100g</td> <td>黑木耳</td>
<td>小份</td>
<td>生生蔬菜店</td> <td>生生蔬菜店</td>
<td>1</td> <td>1</td>
<td>10</td> <td>10</td>
@ -269,7 +271,8 @@
<input type="checkbox" class="checkbox"> <input type="checkbox" class="checkbox">
</td> </td>
<td>002</td> <td>002</td>
<td>苦瓜200g</td> <td>黑木耳</td>
<td>大份</td>
<td>生生蔬菜店</td> <td>生生蔬菜店</td>
<td>1</td> <td>1</td>
<td>10</td> <td>10</td>
@ -286,7 +289,8 @@
<input type="checkbox" class="checkbox"> <input type="checkbox" class="checkbox">
</td> </td>
<td>003</td> <td>003</td>
<td>番茄500g</td> <td>番茄</td>
<td></td>
<td>生生蔬菜店</td> <td>生生蔬菜店</td>
<td>2</td> <td>2</td>
<td>2</td> <td>2</td>

View File

@ -252,7 +252,7 @@
<div class="modal"> <div class="modal">
<!-- Modal Header --> <!-- Modal Header -->
<div class="modal-header"> <div class="modal-header">
<h2 class="modal-title">添加优惠券</h2> <h2 class="modal-title">设置优惠券</h2>
<button class="close-button" onclick="closeModal()" title="关闭">×</button> <button class="close-button" onclick="closeModal()" title="关闭">×</button>
</div> </div>

View File

@ -177,7 +177,7 @@
color: #666; color: #666;
} }
/* 添加优惠券按钮 */ /* 设置优惠券按钮 */
.add-coupon-btn { .add-coupon-btn {
background: white; background: white;
border: 1px dashed #ccc; border: 1px dashed #ccc;
@ -233,7 +233,7 @@
font-size: 14px; font-size: 14px;
} }
/* 兑换比例设置 */ /* 抵扣比例设置 */
.exchange-settings { .exchange-settings {
background: white; background: white;
border: 1px dashed #ccc; border: 1px dashed #ccc;
@ -417,7 +417,7 @@
<th>成长值范围</th> <th>成长值范围</th>
<th>开启会员折扣</th> <th>开启会员折扣</th>
<th>折扣率%</th> <th>折扣率%</th>
<th>开启积分兑换</th> <th>开启积分抵扣</th>
<th>开启生日优惠券</th> <th>开启生日优惠券</th>
<th>生日优惠券操作</th> <th>生日优惠券操作</th>
<th>开启生日双倍积分</th> <th>开启生日双倍积分</th>
@ -453,7 +453,7 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td><button class="add-coupon-btn">添加优惠券</button></td> <td><button class="add-coupon-btn">设置优惠券</button></td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox"> <input type="checkbox">
@ -490,7 +490,7 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td><button class="add-coupon-btn">添加优惠券</button></td> <td><button class="add-coupon-btn">设置优惠券</button></td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox"> <input type="checkbox">
@ -527,7 +527,7 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td><button class="add-coupon-btn">添加优惠券</button></td> <td><button class="add-coupon-btn">设置优惠券</button></td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
@ -564,7 +564,7 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td><button class="add-coupon-btn">添加优惠券</button></td> <td><button class="add-coupon-btn">设置优惠券</button></td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
@ -586,9 +586,9 @@
</div> </div>
</div> </div>
<!-- 金额与积分兑换比例设置 --> <!-- 金额与积分抵扣比例设置 -->
<div class="exchange-settings"> <div class="exchange-settings">
<h2 class="section-title">金额与积分兑换比例设置</h2> <h2 class="section-title">金额与积分抵扣比例设置</h2>
<div class="exchange-item"> <div class="exchange-item">
<span>消费获得积分比例:消费</span> <span>消费获得积分比例:消费</span>
<span class="exchange-value">1</span> <span class="exchange-value">1</span>
@ -598,7 +598,7 @@
</div> </div>
<div class="exchange-item"> <div class="exchange-item">
<span>积分抵扣金额比例:</span> <span>积分抵扣金额比例:</span>
<span class="exchange-value">100</span> <input type="number" class="setting-input" value="100" min="1" style="width: 80px; display: inline-block;">
<span>积分 =</span> <span>积分 =</span>
<span class="exchange-value">1</span> <span class="exchange-value">1</span>
<span></span> <span></span>

View File

@ -151,6 +151,66 @@
line-height: 1.5; line-height: 1.5;
} }
/* 开关按钮 */
.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);
}
/* 积分输入框 */
.points-input {
display: flex;
align-items: center;
gap: 5px;
}
.points-input .table-input {
max-width: 80px;
padding: 5px;
text-align: center;
}
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
@ -229,6 +289,7 @@
<th>所需成长值</th> <th>所需成长值</th>
<th>会员人数</th> <th>会员人数</th>
<th>会员权益</th> <th>会员权益</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -236,25 +297,29 @@
<td class="level-name level-lv1">LV1</td> <td class="level-name level-lv1">LV1</td>
<td class="growth-value">100</td> <td class="growth-value">100</td>
<td class="member-count">1,250</td> <td class="member-count">1,250</td>
<td class="benefits">新会员欢迎礼包,享受基础会员价格优惠</td> <td class="benefits">根据实际的会员内容生成</td>
</tr> </tr>
<tr> <tr>
<td class="level-name level-lv2">LV2</td> <td class="level-name level-lv2">LV2</td>
<td class="growth-value">500</td> <td class="growth-value">500</td>
<td class="member-count">850</td> <td class="member-count">850</td>
<td class="benefits">享受9.5折优惠,每月专属优惠券,生日礼品</td> <td class="benefits">享受9.5折优惠,每月专属优惠券,生日礼品</td>
</tr> </tr>
<tr> <tr>
<td class="level-name level-lv3">LV3</td> <td class="level-name level-lv3">LV3</td>
<td class="growth-value">1,200</td> <td class="growth-value">1,200</td>
<td class="member-count">450</td> <td class="member-count">450</td>
<td class="benefits">享受9折优惠免费配送服务专属客服支持</td> <td class="benefits">享受9折优惠免费配送服务专属客服支持</td>
</tr> </tr>
<tr> <tr>
<td class="level-name level-lv4">LV4</td> <td class="level-name level-lv4">LV4</td>
<td class="growth-value">2,500</td> <td class="growth-value">2,500</td>
<td class="member-count">180</td> <td class="member-count">180</td>
<td class="benefits">享受8.5折优惠,优先配送,专属活动邀请,年度礼品</td> <td class="benefits">享受8.5折优惠,优先配送,专属活动邀请,年度礼品</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -177,7 +177,7 @@
color: #666; color: #666;
} }
/* 添加优惠券按钮 */ /* 设置优惠券按钮 */
.add-coupon-btn { .add-coupon-btn {
background: #007bff; background: #007bff;
border: 1px solid #007bff; border: 1px solid #007bff;
@ -361,7 +361,8 @@
<th>成长值范围</th> <th>成长值范围</th>
<th>开启会员折扣</th> <th>开启会员折扣</th>
<th>折扣率%</th> <th>折扣率%</th>
<th>开启积分兑换</th> <th>开启积分抵扣</th>
<th>积分抵扣额度</th>
<th>开启生日优惠券</th> <th>开启生日优惠券</th>
<th>生日优惠券操作</th> <th>生日优惠券操作</th>
<th>开启生日双倍积分</th> <th>开启生日双倍积分</th>
@ -391,13 +392,19 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td>
<div style="display: flex; align-items: center; justify-content: center; gap: 5px;">
<input type="number" class="table-input" value="100" min="1" style="max-width: 80px;">
<span>积分=1元</span>
</div>
</td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox"> <input type="checkbox">
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td><button class="add-coupon-btn">添加优惠券</button></td> <td><button class="add-coupon-btn">设置优惠券</button></td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox"> <input type="checkbox">
@ -428,13 +435,19 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td>
<div style="display: flex; align-items: center; justify-content: center; gap: 5px;">
<input type="number" class="table-input" value="100" min="1" style="max-width: 80px;">
<span>积分=1元</span>
</div>
</td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td><button class="add-coupon-btn">添加优惠券</button></td> <td><button class="add-coupon-btn">设置优惠券</button></td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
@ -465,13 +478,19 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td>
<div style="display: flex; align-items: center; justify-content: center; gap: 5px;">
<input type="number" class="table-input" value="100" min="1" style="max-width: 80px;">
<span>积分=1元</span>
</div>
</td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td><button class="add-coupon-btn">添加优惠券</button></td> <td><button class="add-coupon-btn">设置优惠券</button></td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
@ -502,13 +521,19 @@
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td>
<div style="display: flex; align-items: center; justify-content: center; gap: 5px;">
<input type="number" class="table-input" value="100" min="1" style="max-width: 80px;">
<span>积分=1元</span>
</div>
</td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</td> </td>
<td><button class="add-coupon-btn">添加优惠券</button></td> <td><button class="add-coupon-btn">设置优惠券</button></td>
<td> <td>
<label class="switch"> <label class="switch">
<input type="checkbox" checked> <input type="checkbox" checked>

View File

@ -100,6 +100,8 @@
background-color: white; background-color: white;
} }
.table-row:hover { .table-row:hover {
background-color: #f8f9fa; background-color: #f8f9fa;
} }

Binary file not shown.