首页暂存

view/peko/activity/2024-aprilFoolsDay/css/index.css

@@ -33,8 +33,178 @@ body {
 .header {
   width: 10rem;
   height: 13.2rem;
-  position: fixed;
-  margin: 0 auto 0;
+  position: relative;
+  margin: 0 auto 0.30667rem;
   background: url(../images/header.png) no-repeat;
   background-size: 100% 100%;
 }
+
+.header .qualifyGift_icon {
+  width: 0.66667rem;
+  height: 1.68rem;
+  position: absolute;
+  top: 2.66667rem;
+  right: 0;
+}
+
+.header .rule_icon {
+  width: 0.66667rem;
+  height: 1.68rem;
+  position: absolute;
+  top: 4.58667rem;
+  right: 0;
+}
+
+.tab {
+  width: 9.33333rem;
+  height: 1.14667rem;
+  margin: 0 auto 0.32rem;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tab div {
+  width: 2.24rem;
+  height: 1.14667rem;
+}
+
+.tab .tab1 {
+  background: url(../images/tab1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .tab2 {
+  background: url(../images/tab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .tab3 {
+  background: url(../images/tab3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .tab4 {
+  background: url(../images/tab4.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act1 {
+  background: url(../images/tabAct1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act2 {
+  background: url(../images/tabAct2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act3 {
+  background: url(../images/tabAct3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act4 {
+  background: url(../images/tabAct4.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box1 {
+  width: 9.2rem;
+  height: 11.12rem;
+  background: url(../images/pageBox1.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0.38667rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.page1 .box1 .pageBox1Rule_icon {
+  width: 1.78667rem;
+  height: 0.56rem;
+  position: absolute;
+  right: 0;
+  top: 1.17333rem;
+}
+
+.page1 .box1 .time {
+  width: 5.28rem;
+  height: 0.77333rem;
+  line-height: 0.77333rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.49333rem;
+  background: url(../images/page1Box1timeBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box1 .time span {
+  border-radius: 0.06667rem;
+  padding: 0.01333rem 0.02667rem;
+  color: #BF294A;
+  font-weight: bold;
+  background: #fff;
+}
+
+.page1 .box1 .text {
+  width: 7.92rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.78667rem;
+  color: #fff;
+  font-size: 0.32rem;
+  font-weight: 400;
+  text-align: center;
+  line-height: 0.45rem;
+}
+
+.page1 .box1 .text b {
+  color: #FBBE47;
+}
+
+.page1 .box1 .giftBoxs {
+  width: 8.26667rem;
+  height: 5.8rem;
+  margin: 4.50667rem auto 0;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.page1 .box1 .giftBoxs div {
+  width: 2.56rem;
+  height: 2.69333rem;
+  margin-bottom: 0.4rem;
+  background: url(../images/pageBox1qp.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.32rem;
+  font-weight: 500;
+}
+
+.page1 .box1 .giftBoxs div img {
+  display: block;
+  width: 1.70667rem;
+  height: 1.70667rem;
+  margin: 0.22667rem auto 0.21333rem;
+}
+
+.page1 .box1 .giftBoxs .act {
+  background: url(../images/pageBox1qpAct.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .box2 {
+  width: 9.2rem;
+  height: 13.25333rem;
+  background: url(../images/page1Box2.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 1.84rem;
+}

view/peko/activity/2024-aprilFoolsDay/css/index.scss

@@ -35,11 +35,183 @@ body {
     }
 }
 
-.header{
+.header {
     width: px2rem(750);
     height: px2rem(990);
-    position: fixed;
-    margin: 0 auto 0;
+    position: relative;
+    margin: 0 auto px2rem(23);
     background: url(../images/header.png) no-repeat;
     background-size: 100% 100%;
+
+    .qualifyGift_icon {
+        width: px2rem(50);
+        height: px2rem(126);
+        position: absolute;
+        top: px2rem(200);
+        right: 0;
+    }
+
+    .rule_icon {
+        width: px2rem(50);
+        height: px2rem(126);
+        position: absolute;
+        top: px2rem(344);
+        right: 0;
+    }
 }
+
+.tab {
+    width: px2rem(700);
+    height: px2rem(86);
+    margin: 0 auto px2rem(24);
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+
+    div {
+        width: px2rem(168);
+        height: px2rem(86);
+    }
+
+    .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%;
+    }
+
+    .act1 {
+        background: url(../images/tabAct1.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act2 {
+        background: url(../images/tabAct2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act3 {
+        background: url(../images/tabAct3.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act4 {
+        background: url(../images/tabAct4.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.page1 {
+    .box1 {
+        width: px2rem(690);
+        height: px2rem(834);
+        background: url(../images/pageBox1.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto px2rem(29);
+        position: relative;
+        overflow: hidden;
+
+        .pageBox1Rule_icon {
+            width: px2rem(134);
+            height: px2rem(42);
+            position: absolute;
+            right: 0;
+            top: px2rem(88);
+        }
+
+        .time {
+            width: px2rem(396);
+            height: px2rem(58);
+            line-height: px2rem(58);
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(28);
+            font-weight: 400;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(112);
+            background: url(../images/page1Box1timeBg.png) no-repeat;
+            background-size: 100% 100%;
+
+            span {
+                border-radius: px2rem(5);
+                padding: px2rem(1) px2rem(2);
+                color: #BF294A;
+                font-weight: bold;
+                background: #fff;
+            }
+        }
+
+        .text {
+            width: px2rem(594);
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(209);
+            color: #fff;
+            font-size: px2rem(24);
+            font-weight: 400;
+            text-align: center;
+            line-height: 0.45rem;
+
+            b {
+                color: #FBBE47;
+            }
+
+        }
+
+        .giftBoxs {
+            width: px2rem(620);
+            height: px2rem(435);
+            margin: px2rem(338) auto 0;
+            display: flex;
+            justify-content: space-around;
+            flex-wrap: wrap;
+
+            div {
+                width: px2rem(192);
+                height: px2rem(202);
+                margin-bottom: px2rem(30);
+                background: url(../images/pageBox1qp.png) no-repeat;
+                background-size: 100% 100%;
+                text-align: center;
+                color: #fff;
+                font-size: px2rem(24);
+                font-weight: 500;
+
+                img {
+                    display: block;
+                    width: px2rem(128);
+                    height: px2rem(128);
+                    margin: px2rem(17) auto px2rem(16);
+                }
+            }
+
+            .act {
+                background: url(../images/pageBox1qpAct.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+    }
+    .box2{
+        width: px2rem(690);
+        height: px2rem(994);
+        background: url(../images/page1Box2.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto px2rem(138);
+    }
+}

view/peko/activity/2024-aprilFoolsDay/index.html

@@ -16,7 +16,50 @@
     </div>
     <!-- 头部 -->
     <div class="header">
-        
+        <!-- 限定礼物 -->
+        <img src="./images/qualifyGift_icon.png" alt="" class="qualifyGift_icon">
+        <!-- 活动规则 -->
+        <img src="./images/rule_icon.png" alt="" class="rule_icon">
+    </div>
+    <!-- tab切换 -->
+    <div class="tab">
+        <div class="tab1 act1"></div>
+        <div class="tab2"></div>
+        <div class="tab3"></div>
+        <div class="tab4"></div>
+    </div>
+    <!-- 页面1 -->
+    <div class="page1">
+        <!-- 奇幻魔盒 -->
+        <div class="box1">
+            <img src="./images/pageBox1Rule_icon.png" alt="" class="pageBox1Rule_icon">
+            <div class="time">3分钟倒计时: <span>00</span> 分 <span>00</span> 秒</div>
+            <div class="text">用戶在送出第一個奇幻魔盒後開啓3分鐘倒計時，<br>在此期間內點亮所有禮物，可獲得<b>【愚人慶典】</b>禮物*1</div>
+            <div class="giftBoxs">
+                <div class="act">
+                    <img src="./images/pageBox1Gift1.png" alt="">
+                    扑克士兵
+                </div>
+                <div>
+                    <img src="./images/pageBox1Gift2.png" alt="">
+                    咬咬鲨
+                </div>
+                <div>
+                    <img src="./images/pageBox1Gift3.png" alt="">
+                    兔子先生
+                </div>
+                <div>
+                    <img src="./images/pageBox1Gift4.png" alt="">
+                    甜心魔法
+                </div>
+                <div>
+                    <img src="./images/pageBox1Gift5.png" alt="">
+                    奇趣雜技
+                </div>
+            </div>
+        </div>
+        <!-- 奇幻榜 -->
+        <div class="box2"></div>
     </div>
 </body>