From 96577ab1d6dc760ebc81b1ba3b97d4065f075202 Mon Sep 17 00:00:00 2001
From: songliang <songliang@opencart.cn>
Date: Wed, 7 Dec 2022 18:09:58 +0800
Subject: [PATCH] =?UTF-8?q?https://gitee.com/beikeshop/beikeshop/issues/I6?=
 =?UTF-8?q?3IOI=3Ffrom=3Dproject-issue=20=20=E8=B0=83=E6=95=B4=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../beike/shop/default/css/page-product.scss  | 10 +++-
 themes/default/product.blade.php              | 56 ++++++++++++-------
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/resources/beike/shop/default/css/page-product.scss b/resources/beike/shop/default/css/page-product.scss
index 5d6874cc..a8f661d8 100644
--- a/resources/beike/shop/default/css/page-product.scss
+++ b/resources/beike/shop/default/css/page-product.scss
@@ -16,7 +16,7 @@ body.page-product {
   }
 
   .product-image {
-    .swiper {
+    #swiper {
       height: 250px;
       @media (min-width: 480px) {
         height: 400px;
@@ -39,6 +39,14 @@ body.page-product {
       }
     }
 
+    #swiper-2 {
+      .swiper-pagination {
+        --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
+        --swiper-navigation-color: #ff6600;/* 单独设置按钮颜色 */
+        --swiper-navigation-size: 30px;/* 设置按钮大小 */
+      }
+    }
+
     .left {
       margin-right: 1rem;
 
diff --git a/themes/default/product.blade.php b/themes/default/product.blade.php
index e106ce57..ed6c60cd 100644
--- a/themes/default/product.blade.php
+++ b/themes/default/product.blade.php
@@ -17,26 +17,35 @@
     <div class="row mb-5 mt-3 mt-md-0" id="product-top">
       <div class="col-12 col-lg-6 mb-3">
         <div class="product-image d-flex align-items-start">
-
-          <div class="left"  v-if="images.length">
-            <div class="swiper" id="swiper">
-              <div class="swiper-wrapper">
-                <div class="swiper-slide" :class="!index ? 'active' : ''" v-for="image, index in images">
-                  <a href="javascript:;" :data-image="image.preview" :data-zoom-image="image.popup">
-                    <img :src="image.thumb" class="img-fluid">
-                  </a>
+          @if(!is_mobile())
+            <div class="left"  v-if="images.length">
+              <div class="swiper" id="swiper">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide" :class="!index ? 'active' : ''" v-for="image, index in images">
+                    <a href="javascript:;" :data-image="image.preview" :data-zoom-image="image.popup">
+                      <img :src="image.thumb" class="img-fluid">
+                    </a>
+                  </div>
+                </div>
+                <div class="swiper-pager">
+                    <div class="swiper-button-next new-feature-slideshow-next"></div>
+                    <div class="swiper-button-prev new-feature-slideshow-prev"></div>
                 </div>
               </div>
-              <div class="swiper-pager">
-                  <div class="swiper-button-next new-feature-slideshow-next"></div>
-                  <div class="swiper-button-prev new-feature-slideshow-prev"></div>
-              </div>
             </div>
-          </div>
-
-          <div class="right" id="zoom">
-            <img :src="images.length ? images[0].preview : '{{ asset('image/placeholder.png') }}'" class="img-fluid">
-          </div>
+            <div class="right" id="zoom">
+              <img :src="images.length ? images[0].preview : '{{ asset('image/placeholder.png') }}'" class="img-fluid">
+            </div>
+          @else
+            <div class="swiper" id="swiper-2">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide" v-for="image, index in images">
+                  <img :src="image.preview" class="img-fluid">
+                </div>
+              </div>
+              <div class="swiper-pagination"></div>
+            </div>
+          @endif
         </div>
       </div>
 
@@ -256,13 +265,12 @@
       }
     });
 
-    $(document).on("mouseover", ".product-image .swiper .swiper-slide a", function() {
+    $(document).on("mouseover", ".product-image #swiper .swiper-slide a", function() {
       $(this).parent().addClass('active').siblings().removeClass('active');
       $('#zoom').trigger('zoom.destroy');
       $('#zoom img').attr('src', $(this).attr('data-image'));
       $('#zoom').zoom({url: $(this).attr('data-zoom-image')});
     });
-
     var swiper = new Swiper("#swiper", {
       direction: "vertical",
       slidesPerView: 1,
@@ -294,6 +302,16 @@
       observeParents: true
     });
 
+    var swiper2 = new Swiper("#swiper-2", {
+      slidesPerView: 1,
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      observer: true,
+      observeParents: true
+    });
+
     $(document).ready(function () {
       $('#zoom').trigger('zoom.destroy');
       $('#zoom').zoom({url: $('#swiper a').attr('data-zoom-image')});