转存

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, );
 }