综述: 优化秒杀专区交互体验,重构首页文件结构

- 在福利专区秒杀模块新增刷新按钮功能,支持用户主动刷新秒杀数据
- 实现刷新动画效果,包含按钮旋转动画和完成提示toast
- 重新设计秒杀时间段标签页布局,增加刷新按钮与标签页的并排显示
- 重命名首页文件从"首页.html"为"1 用户端首页.html",优化文件命名规范
- 更新大妈集市原型文件,同步界面设计变更
This commit is contained in:
linbin 2025-08-25 03:43:00 +08:00
parent 521a1f27e4
commit bf1f62a4ee
3 changed files with 110 additions and 15 deletions

Binary file not shown.

View File

@ -888,9 +888,6 @@
</div>
</div>
<!-- 浮动按钮 -->
<div class="voice-btn">🎤</div>
<div class="floating-btn">+</div>
<!-- 底部导航 -->
<div class="bottom-nav">

View File

@ -298,12 +298,52 @@
font-size: 12px;
}
/* 秒杀时间段tabs容器 */
.seckill-tabs-container {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
/* 刷新按钮样式 */
.refresh-btn {
display: flex;
flex-direction: column;
align-items: center;
background: #ff4444;
color: white;
border: none;
border-radius: 12px;
padding: 10px;
font-size: 10px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 50px;
box-shadow: 0 2px 4px rgba(255, 68, 68, 0.3);
}
.refresh-btn:hover {
background: #e63939;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(255, 68, 68, 0.4);
}
.refresh-btn:active {
transform: translateY(0);
}
.refresh-btn span:first-child {
font-size: 18px;
margin-bottom: 2px;
}
/* 秒杀时间段tabs */
.seckill-tabs {
display: flex;
justify-content: center;
flex: 1;
gap: 20px;
margin-bottom: 20px;
background: white;
border-radius: 15px;
padding: 5px;
@ -839,12 +879,18 @@
<!-- 秒杀专区 -->
<div id="seckill" class="section-content">
<!-- 秒杀时间段tabs -->
<div class="seckill-tabs-container">
<button class="refresh-btn" onclick="refreshSeckill()">
<span>🔄</span>
<span>刷新</span>
</button>
<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>
</div>
<!-- 10:00-12:00时间段 -->
<div id="10-12" class="seckill-content active">
@ -1473,12 +1519,64 @@
});
});
// 预定按钮
document.querySelectorAll('.reservation-btn').forEach(btn => {
btn.addEventListener('click', function() {
alert('跳转到预定确认页');
});
});
// 秒杀刷新功能
function refreshSeckill() {
const refreshBtn = document.querySelector('.refresh-btn');
const refreshIcon = refreshBtn.querySelector('span:first-child');
// 添加旋转动画
refreshIcon.style.transition = 'transform 1s ease-in-out';
refreshIcon.style.transform = 'rotate(360deg)';
// 模拟刷新数据
refreshBtn.disabled = true;
refreshBtn.style.opacity = '0.7';
setTimeout(() => {
// 重置按钮状态
refreshBtn.disabled = false;
refreshBtn.style.opacity = '1';
refreshIcon.style.transform = 'rotate(0deg)';
// 显示刷新完成提示
showRefreshSuccess();
}, 1000);
}
function showRefreshSuccess() {
// 创建临时提示元素
const toast = document.createElement('div');
toast.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 12px 24px;
border-radius: 25px;
font-size: 14px;
z-index: 2000;
opacity: 0;
transition: opacity 0.3s ease;
`;
toast.textContent = '秒杀数据已刷新';
document.body.appendChild(toast);
// 显示提示
setTimeout(() => {
toast.style.opacity = '1';
}, 100);
// 2秒后移除提示
setTimeout(() => {
toast.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(toast);
}, 300);
}, 2000);
}
</script>
</body>
</html>