转存

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

@@ -32,7 +32,7 @@ body {
 
 .header {
   width: 10rem;
-  height: 12.76rem;
+  height: 10.9066666667rem;
   background: url(../images/header.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto -1.4rem;
@@ -75,4 +75,126 @@ body {
   height: 100%;
 }
 
+.tab {
+  width: 9.3333333333rem;
+  height: 1.0666666667rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto 0.16rem;
+}
+.tab div {
+  width: 25%;
+  height: 100%;
+}
+
+.tab1 {
+  background: url(../images/tab1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab2 {
+  background: url(../images/tab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab3 {
+  background: url(../images/tab3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab4 {
+  background: url(../images/tab4.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.blessingBag {
+  width: 8.88rem;
+  height: 5.04rem;
+  background: url(../images/blessingBag.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0.4933333333rem;
+  position: relative;
+}
+.blessingBag .blessingBag_in {
+  width: 7.9rem;
+  height: 2rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.4rem;
+  border-radius: 0.1333333333rem;
+  overflow: hidden;
+}
+.blessingBag .blessingBag_in::-webkit-scrollbar {
+  width: 0;
+  display: none;
+}
+.blessingBag .blessingBag_in ul {
+  height: 100%;
+  width: 11.2rem;
+  position: absolute;
+  left: 0;
+  animation: scrollLeft 3s linear infinite;
+}
+.blessingBag .blessingBag_in ul li {
+  width: 1.8666666667rem;
+  height: 1.8666666667rem;
+  background: url(../images/blessingBagLiBg.png) no-repeat;
+  background-size: 100% 100%;
+  float: left;
+  margin-top: 0.045rem;
+  position: relative;
+}
+.blessingBag .blessingBag_in ul li img {
+  position: absolute;
+  left: 51%;
+  top: 50%;
+  border-radius: 50%;
+  width: 1.2533333333rem;
+  height: 1.2533333333rem;
+  transform: translate(-50%, -50%);
+}
+.blessingBag .blessingBag_in ul li b {
+  padding: 0 0.0933333333rem;
+  height: 0.2666666667rem;
+  line-height: 0.2666666667rem;
+  text-align: center;
+  color: #fff;
+  background: linear-gradient(0deg, #DC87FF, #BF2BED, #DD89FF);
+  font-size: 0.1733333333rem;
+  border-radius: 0px 0.1333333333rem 0px 0.2533333333rem;
+  position: absolute;
+  top: 0.1066666667rem;
+  right: 0.0666666667rem;
+}
+.blessingBag .blessingBag_in ul li p {
+  width: 1.68rem;
+  height: 0.3146666667rem;
+  line-height: 0.3146666667rem;
+  background: linear-gradient(90deg, #FB80C3, rgba(253, 252, 254, 0.1));
+  position: absolute;
+  left: 0.0933333333rem;
+  bottom: 0.2933333333rem;
+  color: #fff;
+  font-size: 0.1733333333rem;
+  box-sizing: border-box;
+  padding-left: 0.0666666667rem;
+}
+@keyframes scrollLeft {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -3.3rem;
+  }
+}
+
+.magpieBridge {
+  width: 9.28rem;
+  height: 9.7333333333rem;
+  background: url(../images/magpieBridge.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0.4933333333rem;
+}
+
 /*# sourceMappingURL=index.css.map */

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

@@ -40,7 +40,7 @@ body {
 
 .header {
     width: px2rem(750, );
-    height: px2rem(957, );
+    height: px2rem(818, );
     background: url(../images/header.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto -1.4rem;
@@ -90,4 +90,140 @@ body {
             }
         }
     }
+}
+
+.tab {
+    width: px2rem(700, );
+    height: px2rem(80, );
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto px2rem(12, );
+
+    div {
+        width: 25%;
+        height: 100%;
+    }
+}
+
+.tab1 {
+    background: url(../images/tab1.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.tab2 {
+    background: url(../images/tab2.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.tab3 {
+    background: url(../images/tab3.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.tab4 {
+    background: url(../images/tab4.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.blessingBag {
+    width: px2rem(666, );
+    height: px2rem(378, );
+    background: url(../images/blessingBag.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto px2rem(37, );
+    position: relative;
+
+    .blessingBag_in {
+        width: 7.9rem;
+        height: 2rem;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 2.4rem;
+        border-radius: px2rem(10, );
+        overflow: hidden;
+        // overflow-x: scroll;
+
+        &::-webkit-scrollbar {
+            width: 0;
+            display: none;
+        }
+
+        ul {
+            height: 100%;
+            width: 11.2rem;
+            position: absolute;
+            left: 0;
+            // left: -3.3rem;
+            // transition: all 0.3s;
+            animation: scrollLeft 3s linear infinite;
+
+            li {
+                width: px2rem(140, );
+                height: px2rem(140, );
+                background: url(../images/blessingBagLiBg.png) no-repeat;
+                background-size: 100% 100%;
+                float: left;
+                margin-top: 0.045rem;
+                position: relative;
+
+                img {
+                    position: absolute;
+                    left: 51%;
+                    top: 50%;
+                    border-radius: 50%;
+                    width: px2rem(94, );
+                    height: px2rem(94, );
+                    transform: translate(-50%, -50%);
+                }
+
+                b {
+                    padding: 0 px2rem(7, );
+                    height: px2rem(20, );
+                    line-height: px2rem(20, );
+                    text-align: center;
+                    color: #fff;
+                    background: linear-gradient(0deg, #DC87FF, #BF2BED, #DD89FF);
+                    font-size: px2rem(13, );
+                    border-radius: 0px px2rem(10, ) 0px px2rem(19, );
+                    position: absolute;
+                    top: px2rem(8, );
+                    right: px2rem(5, );
+                }
+
+                p {
+                    width: px2rem(126, );
+                    height: px2rem(23.6, );
+                    line-height: px2rem(23.6, );
+                    background: linear-gradient(90deg, #FB80C3, rgba(253, 252, 254, 0.1));
+                    position: absolute;
+                    left: px2rem(7, );
+                    bottom: px2rem(22, );
+                    color: #fff;
+                    font-size: px2rem(13, );
+                    box-sizing: border-box;
+                    padding-left: px2rem(5, );
+                }
+            }
+        }
+
+        @keyframes scrollLeft {
+            0% {
+                left: 0;
+            }
+            100% {
+                left: -3.3rem;
+            }
+        }
+    }
+}
+
+
+
+.magpieBridge {
+    width: px2rem(696, );
+    height: px2rem(730, );
+    background: url(../images/magpieBridge.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto px2rem(37, );
 }

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

@@ -33,6 +33,57 @@
             </div>
         </div>
     </div>
+    <!-- tab切换 -->
+    <div class="tab tab1">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <!-- 福袋展示 -->
+    <div class="blessingBag">
+        <div class="blessingBag_in">
+            <ul>
+                <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>
+                <li>
+                    <img src="./images/logo.png" alt="" >
+                    <p>相思鳥</p>
+                    <b>13140 钻</b>
+                </li>
+                <li>
+                    <img src="./images/logo.png" alt="" >
+                    <p>緣定今生</p>
+                    <b>27777 钻</b>
+                </li>
+                <li>
+                    <img src="./images/logo.png" alt="" >
+                    <p>飛上雲霄</p>
+                    <b>177 钻</b>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 鹊桥 -->
+    <div class="magpieBridge"></div>
 </body>
 
 </html>