移动端banner

app/index/view/index/index.html

@@ -3,20 +3,55 @@
 {block name="styles"}
 {/block}
 {block name="mainArea"}
-<!-- 轮播图 -->
-<section class="swiperContainer">
+<!-- PC轮播图 -->
+<section class="swiperContainer" id="pcSwiper">
     <div class="swiperBox">
         <a href="#goodsPosition">
             <div class="swiperItem">
                 <img class="lazy" src="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/banner/banner1.jpg"
-                     data-original="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/banner/banner1.jpg"
+                     data-original="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner1.jpg"
                      alt="FreeShippingVapes" title="FreeShippingVapes">
             </div>
         </a>
         <a href="#goodsPosition">
             <div class="swiperItem">
                 <img class="lazy" src="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/banner/banner2.jpg"
-                     data-original="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/banner/banner2.jpg"
+                     data-original="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner2.jpg"
+                     alt="FreeShippingVapes" title="FreeShippingVapes">
+            </div>
+        </a>
+    </div>
+    <div class="swiperNav"></div>
+</section>
+
+<!-- 移动端轮播图 -->
+<section class="swiperContainer" id="mobileSwiper">
+    <div class="swiperBox">
+        <a href="#goodsPosition">
+            <div class="swiperItem">
+                <img class="lazy" src="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner_mb1.jpg"
+                     data-original="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner_mb1.jpg"
+                     alt="FreeShippingVapes" title="FreeShippingVapes">
+            </div>
+        </a>
+        <a href="#goodsPosition">
+            <div class="swiperItem">
+                <img class="lazy" src="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner_mb2.jpg"
+                     data-original="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner_mb2.jpg"
+                     alt="FreeShippingVapes" title="FreeShippingVapes">
+            </div>
+        </a>
+        <a href="#goodsPosition">
+            <div class="swiperItem">
+                <img class="lazy" src="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner_mb3.jpg"
+                     data-original="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner_mb3.jpg"
+                     alt="FreeShippingVapes" title="FreeShippingVapes">
+            </div>
+        </a>
+        <a href="#goodsPosition">
+            <div class="swiperItem">
+                <img class="lazy" src="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner_mb4.jpg"
+                     data-original="https://images.freeshippingvapes.com/assets/index/asstes/banner/banner_mb4.jpg"
                      alt="FreeShippingVapes" title="FreeShippingVapes">
             </div>
         </a>

public/assets/index/css/index.css

@@ -31,6 +31,12 @@ body{
     height: 5.62rem;
 }
 
+#mobileSwiper {
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+}
+
 .swiperContainer img {
     vertical-align: middle;
     width: 100%;
@@ -823,9 +829,26 @@ body{
     }
 }
 @media (max-width: 750px) {
-    .swiperContainer{
+/*    .swiperContainer{
         height: 3.12rem;
+    }*/
+
+    .swiperContainer {
+        height: calc(100vh - 1.58rem) !important;
+    }
+
+    #pcSwiper {
+        display: none;
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    #mobileSwiper {
+        display: block;
+        opacity: 1;
+        visibility: visible;
     }
+
     .tabContainer{
         height: 1.3rem;
     }