综述: 优化秒杀专区交互体验,重构首页文件结构
- 在福利专区秒杀模块新增刷新按钮功能,支持用户主动刷新秒杀数据 - 实现刷新动画效果,包含按钮旋转动画和完成提示toast - 重新设计秒杀时间段标签页布局,增加刷新按钮与标签页的并排显示 - 重命名首页文件从"首页.html"为"1 用户端首页.html",优化文件命名规范 - 更新大妈集市原型文件,同步界面设计变更
This commit is contained in:
		
							parent
							
								
									521a1f27e4
								
							
						
					
					
						commit
						bf1f62a4ee
					
				|  | @ -888,9 +888,6 @@ | |||
|         </div> | ||||
|     </div> | ||||
| 
 | ||||
|     <!-- 浮动按钮 --> | ||||
|     <div class="voice-btn">🎤</div> | ||||
|     <div class="floating-btn">+</div> | ||||
| 
 | ||||
|     <!-- 底部导航 --> | ||||
|     <div class="bottom-nav"> | ||||
							
								
								
									
										112
									
								
								用户端APP/福利专区.html
								
								
								
								
							
							
						
						
									
										112
									
								
								用户端APP/福利专区.html
								
								
								
								
							|  | @ -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> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue