暂存

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

@@ -3,7 +3,7 @@ body {
   height: 21.6533333333rem;
   background: linear-gradient(90deg, #9980FF, #EB8FEA);
   margin: 0 auto;
-  box-sizing: border-box;
+  padding-bottom: 0.6266666667rem;
 }
 
 .back {
@@ -129,6 +129,7 @@ body {
   list-style: none;
   position: absolute;
   display: flex;
+  animation: scrollLeft 11s linear infinite;
 }
 .blessingBag .blessingBag_in ul li {
   width: 1.8666666667rem;
@@ -176,7 +177,7 @@ body {
 }
 @keyframes scrollLeft {
   100% {
-    transform: translateX(-3.3rem);
+    transform: translateX(-11.2rem);
   }
 }
 
@@ -186,6 +187,63 @@ body {
   background: url(../images/magpieBridge.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto 0.4933333333rem;
+  position: relative;
+}
+.magpieBridge .magpieBridgeBg {
+  width: 8.9066666667rem;
+  height: 6.5466666667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0.2rem;
+}
+.magpieBridge .birdNum {
+  height: 0.3466666667rem;
+  line-height: 0.3466666667rem;
+  position: absolute;
+  right: 0.5866666667rem;
+  top: 1.3466666667rem;
+  vertical-align: middle;
+}
+.magpieBridge .birdNum .bird {
+  display: inline-block;
+  width: 0.3466666667rem;
+  height: 0.3466666667rem;
+  margin-right: 0rem;
+}
+.magpieBridge .birdNum b {
+  color: #CA56A9;
+  font-size: 0.2933333333rem;
+}
+.magpieBridge .but1 {
+  width: 2.9066666667rem;
+  height: 1.16rem;
+  line-height: 1.0666666667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.4rem;
+  font-weight: bold;
+  position: absolute;
+  bottom: 0.4533333333rem;
+  left: 1.4933333333rem;
+  background: url(../images/1.png) no-repeat;
+  background-size: 100% 100%;
+  text-shadow: 0px 0.0533333333rem 0.0266666667rem rgba(193, 64, 253, 0.67);
+}
+.magpieBridge .but10 {
+  width: 2.9066666667rem;
+  height: 1.16rem;
+  line-height: 1.0666666667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.4rem;
+  font-weight: bold;
+  position: absolute;
+  bottom: 0.4533333333rem;
+  right: 1.4933333333rem;
+  background: url(../images/10.png) no-repeat;
+  background-size: 100% 100%;
+  text-shadow: 0px 0.0533333333rem 0.0266666667rem rgba(193, 64, 253, 0.67);
 }
 
 .task {

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

@@ -9,7 +9,8 @@ body {
     height: px2rem(1624, );
     background: linear-gradient(90deg, #9980FF, #EB8FEA);
     margin: 0 auto;
-    box-sizing: border-box;
+    // box-sizing: border-box;
+    padding-bottom: px2rem(47, );
 }
 
 .back {
@@ -134,8 +135,8 @@ body {
     position: relative;
 
     .blessingBag_in {
-        // width: 7.9rem;
         width: px2rem(585, );
+        // width: px2rem(560, );
         height: 2rem;
         position: absolute;
         left: 50%;
@@ -148,6 +149,7 @@ body {
             list-style: none;
             position: absolute;
             display: flex;
+            animation: scrollLeft 11s linear infinite;
 
             li {
                 width: px2rem(140, );
@@ -199,10 +201,9 @@ body {
         }
 
         @keyframes scrollLeft {
-
             100% {
-                transform: translateX(-3.3rem);
-                // transform: translateX(px2rem(-400));
+                // transform: translateX(-3.4rem);
+                transform: translateX(px2rem(-840));
             }
         }
     }
@@ -214,6 +215,69 @@ body {
     background: url(../images/magpieBridge.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto px2rem(37, );
+    position: relative;
+
+    .magpieBridgeBg {
+        width: px2rem(668, );
+        height: px2rem(491, );
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(15, );
+    }
+
+    .birdNum {
+        height: px2rem(26, );
+        line-height: px2rem(26, );
+        position: absolute;
+        right: px2rem(44, );
+        top: px2rem(101, );
+        vertical-align: middle;
+
+        .bird {
+            display: inline-block;
+            width: px2rem(26, );
+            height: px2rem(26, );
+            margin-right: px2rem(0, );
+        }
+
+        b {
+            color: #CA56A9;
+            font-size: px2rem(22, );
+        }
+    }
+
+    .but1 {
+        width: px2rem(218, );
+        height: px2rem(87, );
+        line-height: px2rem(80, );
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(30, );
+        font-weight: bold;
+        position: absolute;
+        bottom: px2rem(34, );
+        left: px2rem(112, );
+        background: url(../images/1.png) no-repeat;
+        background-size: 100% 100%;
+        text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
+    }
+
+    .but10 {
+        width: px2rem(218, );
+        height: px2rem(87, );
+        line-height: px2rem(80, );
+        text-align: center;
+        color: #FFFFFF;
+        font-size: px2rem(30, );
+        font-weight: bold;
+        position: absolute;
+        bottom: px2rem(34, );
+        right: px2rem(112, );
+        background: url(../images/10.png) no-repeat;
+        background-size: 100% 100%;
+        text-shadow: 0px px2rem(4, ) px2rem(2, ) rgba(193, 64, 253, 0.67);
+    }
 }
 
 .task {

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

@@ -75,11 +75,45 @@
                         <p>緣定今生</p>
                         <b>27777 钻</b>
                     </li>
+
+
+                    <li>
+                        <img src="./images/logo.png" alt="">
+                        <p>飛上雲霄</p>
+                        <b>177 钻</b>
+                    </li>
+                    <li>
+                        <img src="./images/logo.png" alt="">
+                        <p>情意捲軸</p>
+                        <b>377 钻</b>
+                    </li>
+                    <li>
+                        <img src="./images/logo.png" alt="">
+                        <p>桃花灼灼</p>
+                        <b>1777 钻</b>
+                    </li>
+                    <li>
+                        <img src="./images/logo.png" alt="">
+                        <p>花色漫漫</p>
+                        <b>2777 钻</b>
+                    </li>
                 </ul>
             </div>
         </div>
         <!-- 鹊桥 -->
-        <div class="magpieBridge"></div>
+        <div class="magpieBridge">
+            <!-- 背景鹊桥图 -->
+            <img src="./images/magpieBridgeBg.png" alt="" class="magpieBridgeBg">
+            <!-- 我的喜鹊 -->
+            <p class="birdNum">
+                <img src="./images/bird.png" alt="" class="bird">
+                <b>我的喜鹊: 0</b>
+            </p>
+            <!-- 投放喜鹊*1 -->
+            <div class="but1">投放喜鹊*1</div>
+            <!-- 投放喜鹊*10 -->
+            <div class="but10">投放喜鹊*10</div>
+        </div>
         <!-- 每日任务 -->
         <div class="task"></div>
     </div>

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

@@ -47,7 +47,7 @@ $(function () {
                     window.webkit.messageHandlers.closeWebView.postMessage(null)
                 }
             })
-            $('.blessingBag .blessingBag_in ul').css('animation', 'scrollLeft 3s linear infinite');
+            swiperFun();
         }, 100)
     })
 })
@@ -86,7 +86,6 @@ function svgaFun () {
         })
     })
 }
-swiperFun();
 // 定情信物礼物轮播
 function swiperFun () {
     var mySwiper = new Swiper('.swiper', {
@@ -97,4 +96,4 @@ function swiperFun () {
             disableOnInteraction: false
         }
     })
-}
+}