综述: 优化秒杀专区功能，增加时间段分类管理
- 新增秒杀时间段标签页功能，支持四个时间段（10:00-12:00, 14:00-16:00, 16:00-18:00, 20:00-22:00）的切换展示 - 重构秒杀商品展示结构，为每个时间段配置独立的商品列表和状态管理 - 丰富商品种类，新增牛油果、三文鱼、蜂蜜、芹菜、黄油、葡萄等多种秒杀商品 - 增强用户体验，支持不同时间段的秒杀商品浏览和管理功能
This commit is contained in:
parent
398f815a18
commit
521a1f27e4
417
用户端APP/福利专区.html
417
用户端APP/福利专区.html
|
|
@ -298,6 +298,47 @@
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 秒杀时间段tabs */
|
||||
.seckill-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.seckill-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px 0;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.seckill-tab.active {
|
||||
background: #ff4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.seckill-tab:not(.active) {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 秒杀时间段内容 */
|
||||
.seckill-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.seckill-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 秒杀商品 */
|
||||
.seckill-item {
|
||||
background: #fff5f5;
|
||||
|
|
@ -797,100 +838,291 @@
|
|||
|
||||
<!-- 秒杀专区 -->
|
||||
<div id="seckill" class="section-content">
|
||||
<div class="seckill-section">
|
||||
<div class="seckill-header">
|
||||
<div class="seckill-title">今日秒杀</div>
|
||||
<div class="seckill-timer">距离结束 02:15:30</div>
|
||||
</div>
|
||||
|
||||
<!-- 秒杀商品1 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">限时秒杀</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🍓</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">新鲜草莓 约500g</div>
|
||||
<div class="seckill-item-spec">规格：500g/份</div>
|
||||
<div class="seckill-item-store">四季水果店(春申菜市场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥9.9</div>
|
||||
<div class="seckill-original-price">原价 ¥28</div>
|
||||
</div>
|
||||
<div class="seckill-discount">6.5折</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 75%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">已抢75件 剩余25件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：10:00</div>
|
||||
<div>结束时间：12:00</div>
|
||||
<div>总数量：100件</div>
|
||||
</div>
|
||||
<button class="seckill-btn">立即秒杀</button>
|
||||
</div>
|
||||
<!-- 秒杀时间段tabs -->
|
||||
<div class="seckill-tabs">
|
||||
<div class="seckill-tab active" onclick="switchSeckillTab('10-12')">10:00-12:00</div>
|
||||
<div class="seckill-tab" onclick="switchSeckillTab('14-16')">14:00-16:00</div>
|
||||
<div class="seckill-tab" onclick="switchSeckillTab('16-18')">16:00-18:00</div>
|
||||
<div class="seckill-tab" onclick="switchSeckillTab('20-22')">20:00-22:00</div>
|
||||
</div>
|
||||
|
||||
<!-- 秒杀商品2 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">限时秒杀</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🥩</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">精品牛排 200g</div>
|
||||
<div class="seckill-item-spec">规格：200g/份</div>
|
||||
<div class="seckill-item-store">华清肉店(全季菜市场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥29.9</div>
|
||||
<div class="seckill-original-price">原价 ¥68</div>
|
||||
<!-- 10:00-12:00时间段 -->
|
||||
<div id="10-12" class="seckill-content active">
|
||||
<div class="seckill-section">
|
||||
<div class="seckill-header">
|
||||
<div class="seckill-title">10:00-12:00 秒杀专场</div>
|
||||
<div class="seckill-timer">距离结束 01:25:30</div>
|
||||
</div>
|
||||
|
||||
<!-- 秒杀商品1 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">正在秒杀</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🍓</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">新鲜草莓 约500g</div>
|
||||
<div class="seckill-item-spec">规格：500g/份</div>
|
||||
<div class="seckill-item-store">四季水果店(春申菜市场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥9.9</div>
|
||||
<div class="seckill-original-price">原价 ¥28</div>
|
||||
</div>
|
||||
<div class="seckill-discount">3.5折</div>
|
||||
</div>
|
||||
<div class="seckill-discount">4.4折</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 75%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">已抢75件 剩余25件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：10:00</div>
|
||||
<div>结束时间：12:00</div>
|
||||
<div>总数量：100件</div>
|
||||
</div>
|
||||
<button class="seckill-btn">立即秒杀</button>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 90%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">已抢45件 剩余5件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：14:00</div>
|
||||
<div>结束时间：16:00</div>
|
||||
<div>总数量：50件</div>
|
||||
</div>
|
||||
<button class="seckill-btn">立即秒杀</button>
|
||||
</div>
|
||||
|
||||
<!-- 秒杀商品3 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">限时秒杀</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🍯</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">天然百花蜜 500g</div>
|
||||
<div class="seckill-item-spec">规格：500g/瓶</div>
|
||||
<div class="seckill-item-store">农家特产店(华径菜场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥19.9</div>
|
||||
<div class="seckill-original-price">原价 ¥48</div>
|
||||
<!-- 秒杀商品2 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">正在秒杀</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🥑</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">新鲜牛油果 2个装</div>
|
||||
<div class="seckill-item-spec">规格：2个/份</div>
|
||||
<div class="seckill-item-store">精品果园(华径菜场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥12.9</div>
|
||||
<div class="seckill-original-price">原价 ¥32</div>
|
||||
</div>
|
||||
<div class="seckill-discount">4.0折</div>
|
||||
</div>
|
||||
<div class="seckill-discount">4.1折</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 60%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">已抢30件 剩余20件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：10:00</div>
|
||||
<div>结束时间：12:00</div>
|
||||
<div>总数量：50件</div>
|
||||
</div>
|
||||
<button class="seckill-btn">立即秒杀</button>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 14:00-16:00时间段 -->
|
||||
<div id="14-16" class="seckill-content">
|
||||
<div class="seckill-section">
|
||||
<div class="seckill-header">
|
||||
<div class="seckill-title">14:00-16:00 秒杀专场</div>
|
||||
<div class="seckill-timer">即将开始 03:25:30</div>
|
||||
</div>
|
||||
<div class="seckill-stock">已抢30件 剩余20件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：16:00</div>
|
||||
<div>结束时间：18:00</div>
|
||||
<div>总数量：50件</div>
|
||||
|
||||
<!-- 秒杀商品1 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">即将开抢</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🥩</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">精品牛排 200g</div>
|
||||
<div class="seckill-item-spec">规格：200g/份</div>
|
||||
<div class="seckill-item-store">华清肉店(全季菜市场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥29.9</div>
|
||||
<div class="seckill-original-price">原价 ¥68</div>
|
||||
</div>
|
||||
<div class="seckill-discount">4.4折</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">总数量：50件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：14:00</div>
|
||||
<div>结束时间：16:00</div>
|
||||
<div>总数量：50件</div>
|
||||
</div>
|
||||
<button class="seckill-btn" disabled style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||||
</div>
|
||||
|
||||
<!-- 秒杀商品2 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">即将开抢</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🐟</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">挪威三文鱼 300g</div>
|
||||
<div class="seckill-item-spec">规格：300g/份</div>
|
||||
<div class="seckill-item-store">海鲜专营店(华径菜场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥39.9</div>
|
||||
<div class="seckill-original-price">原价 ¥89</div>
|
||||
</div>
|
||||
<div class="seckill-discount">4.5折</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">总数量：30件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：14:00</div>
|
||||
<div>结束时间：16:00</div>
|
||||
<div>总数量：30件</div>
|
||||
</div>
|
||||
<button class="seckill-btn" disabled style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 16:00-18:00时间段 -->
|
||||
<div id="16-18" class="seckill-content">
|
||||
<div class="seckill-section">
|
||||
<div class="seckill-header">
|
||||
<div class="seckill-title">16:00-18:00 秒杀专场</div>
|
||||
<div class="seckill-timer">即将开始 05:25:30</div>
|
||||
</div>
|
||||
|
||||
<!-- 秒杀商品1 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">即将开抢</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🍯</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">天然百花蜜 500g</div>
|
||||
<div class="seckill-item-spec">规格：500g/瓶</div>
|
||||
<div class="seckill-item-store">农家特产店(华径菜场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥19.9</div>
|
||||
<div class="seckill-original-price">原价 ¥48</div>
|
||||
</div>
|
||||
<div class="seckill-discount">4.1折</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">总数量：40件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：16:00</div>
|
||||
<div>结束时间：18:00</div>
|
||||
<div>总数量：40件</div>
|
||||
</div>
|
||||
<button class="seckill-btn" style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||||
</div>
|
||||
|
||||
<!-- 秒杀商品2 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">即将开抢</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🥜</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">精选芹菜 500g</div>
|
||||
<div class="seckill-item-spec">规格：500g/份</div>
|
||||
<div class="seckill-item-store">新鲜蔬菜店(春申菜市场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥5.9</div>
|
||||
<div class="seckill-original-price">原价 ¥12</div>
|
||||
</div>
|
||||
<div class="seckill-discount">4.9折</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">总数量：80件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：16:00</div>
|
||||
<div>结束时间：18:00</div>
|
||||
<div>总数量：80件</div>
|
||||
</div>
|
||||
<button class="seckill-btn" style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 20:00-22:00时间段 -->
|
||||
<div id="20-22" class="seckill-content">
|
||||
<div class="seckill-section">
|
||||
<div class="seckill-header">
|
||||
<div class="seckill-title">20:00-22:00 秒杀专场</div>
|
||||
<div class="seckill-timer">即将开始 09:25:30</div>
|
||||
</div>
|
||||
|
||||
<!-- 秒杀商品1 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">即将开抢</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🧈</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">进口黄油 200g</div>
|
||||
<div class="seckill-item-spec">规格：200g/块</div>
|
||||
<div class="seckill-item-store">进口食品店(全季菜市场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥15.9</div>
|
||||
<div class="seckill-original-price">原价 ¥35</div>
|
||||
</div>
|
||||
<div class="seckill-discount">4.5折</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">总数量：60件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：20:00</div>
|
||||
<div>结束时间：22:00</div>
|
||||
<div>总数量：60件</div>
|
||||
</div>
|
||||
<button class="seckill-btn" style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||||
</div>
|
||||
|
||||
<!-- 秒杀商品2 -->
|
||||
<div class="seckill-item">
|
||||
<div class="seckill-badge">即将开抢</div>
|
||||
<div class="seckill-item-header">
|
||||
<div class="seckill-item-image">🍇</div>
|
||||
<div class="seckill-item-info">
|
||||
<div class="seckill-item-name">新疆葡萄 1kg</div>
|
||||
<div class="seckill-item-spec">规格：1kg/份</div>
|
||||
<div class="seckill-item-store">精品果园(华径菜场)</div>
|
||||
<div class="seckill-price-section">
|
||||
<div>
|
||||
<div class="seckill-price">¥22.9</div>
|
||||
<div class="seckill-original-price">原价 ¥45</div>
|
||||
</div>
|
||||
<div class="seckill-discount">5.1折</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seckill-progress">
|
||||
<div class="seckill-progress-bar" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div class="seckill-stock">总数量：70件</div>
|
||||
<div class="seckill-timing">
|
||||
<div>开始时间：20:00</div>
|
||||
<div>结束时间：22:00</div>
|
||||
<div>总数量：70件</div>
|
||||
</div>
|
||||
<button class="seckill-btn" style="background: #ccc; cursor: not-allowed;">即将开抢</button>
|
||||
</div>
|
||||
<button class="seckill-btn">立即秒杀</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1109,6 +1341,27 @@
|
|||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
// 秒杀时间段tab切换功能
|
||||
function switchSeckillTab(tabName) {
|
||||
// 隐藏所有秒杀内容
|
||||
const contents = document.querySelectorAll('.seckill-content');
|
||||
contents.forEach(content => {
|
||||
content.classList.remove('active');
|
||||
});
|
||||
|
||||
// 移除所有秒杀标签的激活状态
|
||||
const tabs = document.querySelectorAll('.seckill-tab');
|
||||
tabs.forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
|
||||
// 显示选中的秒杀内容
|
||||
document.getElementById(tabName).classList.add('active');
|
||||
|
||||
// 激活选中的秒杀标签
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
// 页面跳转功能
|
||||
function goToPage(page) {
|
||||
switch(page) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue