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

- 在福利专区秒杀模块新增刷新按钮功能，支持用户主动刷新秒杀数据
- 实现刷新动画效果，包含按钮旋转动画和完成提示toast
- 重新设计秒杀时间段标签页布局，增加刷新按钮与标签页的并排显示
- 重命名首页文件从"首页.html"为"1 用户端首页.html"，优化文件命名规范
- 更新大妈集市原型文件，同步界面设计变更

用户端APP/1 用户端首页.html

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

用户端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,11 +879,17 @@
         <!-- 秒杀专区 -->
         <div id="seckill" class="section-content">
             <!-- 秒杀时间段tabs -->
-            <div class="seckill-tabs">
+            <div class="seckill-tabs-container">
-                <div class="seckill-tab active" onclick="switchSeckillTab('10-12')">10:00-12:00</div>
+                <button class="refresh-btn" onclick="refreshSeckill()">
-                <div class="seckill-tab" onclick="switchSeckillTab('14-16')">14:00-16:00</div>
+                    <span>🔄</span>
-                <div class="seckill-tab" onclick="switchSeckillTab('16-18')">16:00-18:00</div>
+                    <span>刷新</span>
-                <div class="seckill-tab" onclick="switchSeckillTab('20-22')">20:00-22:00</div>
+                </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时间段 -->
@@ -1473,12 +1519,64 @@
             });
         });
 
-        // 预定按钮
+        // 秒杀刷新功能
-        document.querySelectorAll('.reservation-btn').forEach(btn => {
+        function refreshSeckill() {
-            btn.addEventListener('click', function() {
+            const refreshBtn = document.querySelector('.refresh-btn');
-                alert('跳转到预定确认页');
+            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>