暂存

view/peko/activity/act-2023-qx/css/index.css

@@ -60,6 +60,19 @@ body {
   margin: 0 auto 0.4rem;
   position: relative;
   z-index: 2;
+  box-sizing: border-box;
+  padding-top: 1.5733333333rem;
+}
+.betrothal .swiper {
+  width: 8.52rem;
+  height: 2.32rem;
+  margin: 0 auto 0;
+  overflow: hidden;
+}
+.betrothal .swiper .swiper-wrapper .swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
 /*# sourceMappingURL=index.css.map */

view/peko/activity/act-2023-qx/css/index.scss

@@ -60,7 +60,8 @@ body {
         background-size: 100% 100%;
     }
 }
-.betrothal{
+
+.betrothal {
     width: px2rem(696, );
     height: px2rem(319, );
     background: url(../images/betrothal.png) no-repeat;
@@ -68,4 +69,25 @@ body {
     margin: 0 auto px2rem(30, );
     position: relative;
     z-index: 2;
+    box-sizing: border-box;
+    padding-top: px2rem(118, );
+
+    .swiper {
+        width: px2rem(639, );
+        height: px2rem(174, );
+        margin: 0 auto 0;
+        overflow: hidden;
+
+        .swiper-wrapper {
+
+            .swiper-slide {
+
+                img {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
 }

view/peko/activity/act-2023-qx/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>心动七夕游园会</title>
     <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
     <link rel="stylesheet" href="./css/index.css">
 </head>
 
@@ -20,7 +21,18 @@
         <div class="rule">活動規則</div>
     </div>
     <!-- 定情信物 -->
-    <div class="betrothal"></div>
+    <div class="betrothal">
+        <div class="swiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <img src="./images/betrothalbg1.png" alt="">
+                </div>
+                <div class="swiper-slide">
+                    <img src="./images/betrothalbg1.png" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
 </body>
 
 </html>
@@ -30,4 +42,5 @@
 <script src="../../common/js/layer.js"></script>
 <script src="../../common/js/vconsole.min.js"></script>
 <script src="../../common/js/svga.min.js"></script>
+<script src="./js/swiper-bundle.min.js"></script>
 <script src="./js/index.js"></script>

view/peko/activity/act-2023-qx/js/index.js

@@ -84,4 +84,16 @@ function svgaFun () {
         player1.onFinished(() => {
         })
     })
+}
+swiperFun();
+// 定情信物礼物轮播
+function swiperFun () {
+    var mySwiper = new Swiper('.swiper', {
+        direction: "vertical",
+        loop: true,
+        autoplay: {
+            delay: 2000,//3秒切换一次
+            disableOnInteraction: false
+        }
+    })
 }