From c0d2410ea67277a34554ba9d77e400c661daf696 Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Sat, 23 Aug 2025 22:02:40 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E7=AE=80=E5=8C=96?=
 =?UTF-8?q?=E8=8F=9C=E5=B8=82=E5=9C=BA=E5=8D=A1=E7=89=87=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- **样式简化**:
    - 调整了轮播指示器的位置和样式，使其居中显示并增加了边框。
    - 移除了 `market-slide` 的绝对定位和过渡效果，简化了轮播图的实现方式。
- **HTML结构调整**:
    - 将轮播指示器移入 `market-image` 内部，使其与图片关联更紧密。
    - 删除了第二个轮播页面，暂时只保留一个页面。
- **移除JavaScript**:
    - 删除了所有与轮播图相关的JavaScript代码，包括自动播放和触摸滑动功能，暂时取消了轮播功能。
---
 用户端APP/电商首页.html | 117 +++++-----------------------------------
 1 file changed, 14 insertions(+), 103 deletions(-)

diff --git a/用户端APP/电商首页.html b/用户端APP/电商首页.html
index 10158fe..e9895d9 100644
--- a/用户端APP/电商首页.html
+++ b/用户端APP/电商首页.html
@@ -293,21 +293,12 @@
         }
 
         .market-slide {
-            position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
             height: 100%;
-            opacity: 0;
-            transition: opacity 0.5s ease-in-out;
             display: flex;
             flex-direction: column;
         }
 
-        .market-slide.active {
-            opacity: 1;
-        }
-
         .market-image {
             width: 100%;
             height: 150px;
@@ -416,19 +407,20 @@
         /* 轮播指示器 */
         .carousel-indicators {
             position: absolute;
-            bottom: 50px;
-            right: 15px;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
             display: flex;
-            gap: 5px;
+            gap: 6px;
+            z-index: 10;
         }
 
         .indicator {
-            width: 6px;
-            height: 6px;
+            width: 8px;
+            height: 8px;
             border-radius: 50%;
             background: rgba(255,255,255,0.5);
-            cursor: pointer;
-            transition: background 0.3s;
+            border: 1px solid rgba(255,255,255,0.8);
         }
 
         .indicator.active {
@@ -743,10 +735,15 @@
             <!-- 菜市场轮播卡片 -->
             <div class="card market-card">
                 <div class="market-carousel">
-                    <div class="market-slide active">
+                    <div class="market-slide">
                         <div class="market-image" style="background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)), linear-gradient(135deg, #4a7c59 0%, #70b77e 50%, #a8e6cf 100%);">
                             <div class="market-title">华径菜场</div>
                             <div class="brand-badge">👑 品牌</div>
+                            <div class="carousel-indicators">
+                                <div class="indicator active"></div>
+                                <div class="indicator"></div>
+                                <div class="indicator"></div>
+                            </div>
                         </div>
                         <div class="market-info">
                             <div class="market-name">春申路1501号</div>
@@ -777,44 +774,6 @@
                             </div>
                         </div>
                     </div>
-                    <div class="market-slide">
-                        <div class="market-image" style="background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)), linear-gradient(135deg, #2d5a3d 0%, #4a7c59 50%, #70b77e 100%);">
-                            <div class="market-title">全季菜市场</div>
-                            <div class="brand-badge">🏪 市场</div>
-                        </div>
-                        <div class="market-info">
-                            <div class="market-name">徐汇区田林路</div>
-                            <div class="market-rating">
-                                <span class="rating-star">⭐</span>
-                                <span>4.8分</span>
-                                <span>📍 0.3km</span>
-                            </div>
-                            <div class="market-stats">
-                                <span>销量：15份</span>
-                                <span class="market-delivery">满¥66免运费</span>
-                            </div>
-                        </div>
-                        <div class="market-actions">
-                            <div class="action-group">
-                                <button class="action-btn">
-                                    <span>🔗</span>
-                                    <span>分享</span>
-                                </button>
-                                <button class="action-btn">
-                                    <span>👍</span>
-                                    <span>5</span>
-                                </button>
-                                <button class="action-btn">
-                                    <span>❤️</span>
-                                    <span>3</span>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="carousel-indicators">
-                    <div class="indicator active" onclick="showSlide(0)"></div>
-                    <div class="indicator" onclick="showSlide(1)"></div>
                 </div>
             </div>
 
@@ -953,53 +912,5 @@
         </div>
     </div>
 
-    <script>
-        let currentSlide = 0;
-        const slides = document.querySelectorAll('.market-slide');
-        const indicators = document.querySelectorAll('.indicator');
-        
-        function showSlide(index) {
-            // 移除所有活跃状态
-            slides[currentSlide].classList.remove('active');
-            indicators[currentSlide].classList.remove('active');
-            
-            // 设置新的活跃状态
-            currentSlide = index;
-            slides[currentSlide].classList.add('active');
-            indicators[currentSlide].classList.add('active');
-        }
-        
-        // 自动轮播
-        function autoSlide() {
-            const nextSlide = (currentSlide + 1) % slides.length;
-            showSlide(nextSlide);
-        }
-        
-        // 每3秒自动切换
-        setInterval(autoSlide, 3000);
-        
-        // 触摸滑动支持
-        let startX = 0;
-        const carousel = document.querySelector('.market-carousel');
-        
-        carousel.addEventListener('touchstart', function(e) {
-            startX = e.touches[0].clientX;
-        });
-        
-        carousel.addEventListener('touchend', function(e) {
-            const endX = e.changedTouches[0].clientX;
-            const diff = startX - endX;
-            
-            if (Math.abs(diff) > 50) { // 滑动距离超过50px
-                if (diff > 0) {
-                    // 向左滑动，显示下一张
-                    showSlide((currentSlide + 1) % slides.length);
-                } else {
-                    // 向右滑动，显示上一张
-                    showSlide((currentSlide - 1 + slides.length) % slides.length);
-                }
-            }
-        });
-    </script>
 </body>
 </html>
\ No newline at end of file