完成七夕所有静态页面

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

@@ -28,13 +28,13 @@
                     <img src="./images/betrothalbg1.png" alt="">
                 </div>
                 <div class="swiper-slide">
-                    <img src="./images/betrothalbg1.png" alt="">
+                    <img src="./images/betrothalbg2.png" alt="">
                 </div>
             </div>
         </div>
     </div>
     <!-- tab切换 -->
-    <div class="tab tab1">
+    <div class="tab tabs tab1">
         <div></div>
         <div></div>
         <div></div>
@@ -127,8 +127,12 @@
                 <b>鵲仙橋頭飾*3天</b>
             </div>
         </div>
-        <!-- 每日任务 -->
-        <div class="task">
+        <!-- 每日任务 tasks2-->
+        <div class="task ">
+            <div class="tab">
+                <div></div>
+                <div></div>
+            </div>
             <div class="box1">
                 <p class="title">完成每日任務可獲得喜鵲，任務每日0點刷新<br>
                     任務獎勵自動發放</p>
@@ -161,6 +165,9 @@
                     </div>
                 </div>
             </div>
+            <div class="box2">
+                <img src="./images/task2But.png" alt="" class="task2But">
+            </div>
         </div>
     </div>
     <!-- page2 -->
@@ -180,19 +187,41 @@
                 <img src="./images/refresh.png" alt="" class="refreshIcon">
                 換一批
             </div>
-            <!-- 打开灯笼 -->
-            <div class="lantern lantern1 openLantern">
-                <img src="./images/logo.png" alt="">
-                <p>織女頭飾</p>
-                <b>1天</b>
+            <!-- 打开灯笼 openLantern-->
+            <div class="lantern lantern1">
+                <div class="box">
+                    <img src="./images/logo.png" alt="">
+                    <p>織女頭飾</p>
+                    <b>1天</b>
+                </div>
+
+            </div>
+            <div class="lantern lantern2">
+                <div class="box">
+                    <img src="./images/logo.png" alt="">
+                    <p>織女頭飾</p>
+                    <b>1天</b>
+                </div>
+
+            </div>
+            <div class="lantern lantern3">
+                <div class="box">
+                    <img src="./images/logo.png" alt="">
+                    <p>織女頭飾</p>
+                    <b>1天</b>
+                </div>
+
+            </div>
+            <div class="lantern lantern4">
+                <div class="box">
+                    <img src="./images/logo.png" alt="">
+                    <p>織女頭飾</p>
+                    <b>1天</b>
+                </div>
             </div>
-            <div class="lantern lantern2"></div>
-            <div class="lantern lantern3"></div>
-            <div class="lantern lantern4"></div>
-            <div class="lantern lantern5"></div>
         </div>
-        <!-- 奖池&记录 -->
-        <div class="blessingTreeBoomt blessingTreeBoomt2">
+        <!-- 奖池&记录 blessingTreeBoomt2-->
+        <div class="blessingTreeBoomt">
             <div class="tab">
                 <div></div>
                 <div></div>
@@ -227,6 +256,165 @@
             </div>
         </div>
     </div>
+    <!-- page3 -->
+    <div class="page3">
+        <!-- 活动规则 -->
+        <div class="rule">活动规则</div>
+        <!-- 标题 -->
+        <img src="./images/title.png" alt="" class="title">
+        <p class="titleText">贈送普通禮物1鉆石=1情緣值，七夕限定禮物1鉆石=3情緣值</p>
+        <!-- 前三 -->
+        <div class="no1">
+            <img src="./images/no1.png" alt="" class="txBg">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p>用户昵称</p>
+            <div>
+                <img src="./images/loveIcon.png" alt="" class="loveIcon">
+                <b>情緣值：XXX</b>
+            </div>
+        </div>
+        <div class="no2">
+            <img src="./images/no2.png" alt="" class="txBg">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p>用户昵称</p>
+            <div>
+                <img src="./images/loveIcon.png" alt="" class="loveIcon">
+                <b>情緣值：XXX</b>
+            </div>
+        </div>
+        <div class="no3">
+            <img src="./images/no3.png" alt="" class="txBg">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p>用户昵称</p>
+            <div>
+                <img src="./images/loveIcon.png" alt="" class="loveIcon">
+                <b>情緣值：XXX</b>
+            </div>
+        </div>
+        <!-- 非前三 -->
+        <ul>
+            <li>
+                <div class="num">4</div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name"></div>
+                <div class="score">
+                    <img src="./images/loveIcon.png" alt="" class="loveIcon">
+                    <b>情緣值：XXX</b>
+                </div>
+            </li>
+        </ul>
+        <!-- 规则弹窗 -->
+        <div class="roomRule">
+            <img src="./images/roomRule.png" alt="" class="roomRule_in">
+        </div>
+    </div>
+    <!-- page4 -->
+    <div class="page4">
+        <!-- 活动规则 -->
+        <div class="rule">榜单奖励</div>
+        <!-- 相会鹊桥 -->
+        <div class="loveList">
+            <img src="./images/left.png" alt="" class="left">
+            <img src="./images/center.png" alt="" class="center">
+            <img src="./images/right.png" alt="" class="right">
+            <img src="./images/logo.png" alt="" class="txL">
+            <img src="./images/logo.png" alt="" class="txR">
+            <p>活動期間每小時甜蜜值第一的主播和最佳主力的用戶</p>
+            <div class="times">距下一小時一起上榜結果<span>00</span>:<span>00</span></div>
+        </div>
+        <!-- tab切换 -->
+        <div class="page4Tab">
+            <div></div>
+            <div></div>
+        </div>
+        <!-- 日榜总榜 -->
+        <div class="dayAll">
+            <div></div>
+            <div></div>
+        </div>
+        <!-- 礼物值说明 -->
+        <div class="giftVal">收到普通禮物1鉆石=1甜蜜值，七夕限定禮物1鉆石=3甜蜜值</div>
+        <!-- 日榜时间选择 -->
+        <div class="timeList">
+            <div class="active">8.19</div>
+            <div>8.20</div>
+            <div>8.21</div>
+            <div>8.22</div>
+            <div>8.23</div>
+        </div>
+        <!-- 前三 -->
+        <div class="no1">
+            <img src="./images/no1.png" alt="" class="txBg">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p>用户昵称</p>
+            <div>
+                <img src="./images/loveIcon.png" alt="" class="loveIcon">
+                <b>情緣值：XXX</b>
+            </div>
+        </div>
+        <div class="no2">
+            <img src="./images/no2.png" alt="" class="txBg">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p>用户昵称</p>
+            <div>
+                <img src="./images/loveIcon.png" alt="" class="loveIcon">
+                <b>情緣值：XXX</b>
+            </div>
+        </div>
+        <div class="no3">
+            <img src="./images/no3.png" alt="" class="txBg">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p>用户昵称</p>
+            <div>
+                <img src="./images/loveIcon.png" alt="" class="loveIcon">
+                <b>情緣值：XXX</b>
+            </div>
+        </div>
+        <!-- 非前三 -->
+        <ul>
+            <li>
+                <div class="num">4</div>
+                <img src="./images/logo.png" alt="" class="tx">
+                <div class="name"></div>
+                <div class="score">
+                    <img src="./images/loveIcon.png" alt="" class="loveIcon">
+                    <b>情緣值：XXX</b>
+                </div>
+            </li>
+        </ul>
+        <!-- 自己榜单 -->
+        <div class="my">
+            <div class="num">4</div>
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="name">虚位以待</div>
+            <div class="score">
+                <img src="./images/loveIcon.png" alt="" class="loveIcon">
+                <b>情緣值：XXX</b>
+            </div>
+        </div>
+        <!-- 甜蜜榜单 -->
+        <div class="sweet">
+            <div class="sweet_in">
+                <div class="box">
+                    <img src="./images/sweet_in.png" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 活动规则弹窗 -->
+    <div class="rule_pub">
+        <div class="rule_pub_in">
+            <div class="box">
+                <img src="./images/rule_pub_in.png" alt="">
+            </div>
+        </div>
+    </div>
+    <!-- 活动结束弹窗 -->
+    <div class="endActivity">
+        <div class="endActivity_in">
+           <img src="./images/endActivitybut.png" alt="" class="but">
+        </div>
+    </div>
 </body>
 
 </html>

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

@@ -97,3 +97,90 @@ function swiperFun () {
         }
     })
 }
+// 总tab切换
+$('.tabs div').click(function () {
+    var i = $(this).index() + 1;
+    $('.tabs').removeClass('tab1').removeClass('tab2').removeClass('tab3').removeClass('tab4');
+    $('.tabs').addClass(`tab${i}`);
+    $('.page1').hide();
+    $('.page2').hide();
+    $('.page3').hide();
+    $('.page4').hide();
+    $(`.page${i}`).show();
+})
+// 首页任务切换
+$('.page1 .task .tab div').click(function () {
+    var i = $(this).index() + 1;
+    if (i == 1) {
+        $('.page1 .task').removeClass('tasks2');
+    } else {
+        $('.page1 .task').addClass('tasks2');
+    }
+})
+// 打开活动规则
+$('.header .rule').click(function () {
+    bodyScroolFun(true);
+    $('.rule_pub').show();
+})
+// 关闭活动规则
+$('.rule_pub').click(function () {
+    bodyScroolFun(false);
+    $('.rule_pub').hide();
+})
+// 打开房间榜活动规则
+$('.page3 .rule').click(function () {
+    bodyScroolFun(true);
+    $('.page3 .roomRule').show();
+})
+// 关闭房间榜活动规则
+$('.roomRule').click(function () {
+    bodyScroolFun(false);
+    $('.roomRule').hide();
+})
+// 打开房间榜活动规则
+$('.page4 .rule').click(function () {
+    bodyScroolFun(true);
+    $('.page4 .sweet').show();
+})
+// 关闭房间榜活动规则
+$('.sweet').click(function () {
+    bodyScroolFun(false);
+    $('.sweet').hide();
+})
+// 祈愿树tab切换
+$('.page2 .blessingTreeBoomt .tab div').click(function () {
+    var i = $(this).index() + 1;
+    if (i == 1) {
+        $('.page2 .blessingTreeBoomt').removeClass('blessingTreeBoomt2')
+    } else {
+        $('.page2 .blessingTreeBoomt').addClass('blessingTreeBoomt2')
+    }
+})
+// 七夕榜单tab切换
+$('.page4 .page4Tab div').click(function () {
+    var i = $(this).index() + 1;
+    if (i == 1) {
+        $('.page4 .page4Tab').removeClass('page4Tab2');
+    } else {
+        $('.page4 .page4Tab').addClass('page4Tab2');
+    }
+})
+// 七夕榜单日榜总榜切换
+$('.page4 .dayAll div').click(function () {
+    var i = $(this).index() + 1;
+    if (i == 1) {
+        $('.page4 .dayAll').removeClass('dayAll2');
+    } else {
+        $('.page4 .dayAll').addClass('dayAll2');
+    }
+})
+// 日榜切换日期
+$('.page4 .timeList div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('active').siblings().removeClass('active');
+})
+// 关闭活动结束按钮
+$('.endActivity .endActivity_in .but').click(function () {
+    $('.endActivity').hide();
+    bodyScroolFun(false);
+})