新增热恋全城活动

view/yinmeng/activity/2023-halloween/css/index.css

@@ -102,7 +102,7 @@ body::-webkit-scrollbar {
 
 .giftBox {
   width: 9.2rem;
-  height: 6.49333rem;
+  height: 5.96rem;
   background: url(../images/giftBox.png) no-repeat;
   background-size: 100% 100%;
   margin: 0 auto 0.06667rem;
@@ -111,9 +111,9 @@ body::-webkit-scrollbar {
 }
 
 .giftBox .swiper {
-  width: 8.02667rem;
-  height: 4.85333rem;
-  margin: 1.45333rem auto 0;
+  width: 6.56rem;
+  height: 4rem;
+  margin: 1.48rem auto 0;
 }
 
 .page1 {
@@ -1050,7 +1050,7 @@ body::-webkit-scrollbar {
   top: 6.44rem;
   left: 50%;
   transform: translateX(-50%);
-  width: 9.1rem;
+  width: 8.66667rem;
   height: 0.64rem;
   line-height: 0.64rem;
   display: flex;
@@ -1058,7 +1058,7 @@ body::-webkit-scrollbar {
 }
 
 .page3 .time div {
-  width: 1.1rem;
+  width: 1.26667rem;
   height: 0.64rem;
   background: linear-gradient(0deg, #9552E6 0%, #8E39F4 100%);
   border-radius: 0.17333rem;
@@ -1530,7 +1530,7 @@ body::-webkit-scrollbar {
 }
 
 .box_pub .box_pub_in .box_pub_ul .li2 {
-  height: 9.46667rem;
+  height: 12.44rem;
   background: url(../images/box_pubGift2.png) no-repeat;
   background-size: 100% 100%;
 }

view/yinmeng/activity/2023-halloween/css/index.scss

@@ -110,7 +110,7 @@ body {
 
 .giftBox {
     width: px2rem(690);
-    height: px2rem(487);
+    height: px2rem(447);
     background: url(../images/giftBox.png) no-repeat;
     background-size: 100% 100%;
     margin: 0 auto px2rem(5);
@@ -118,9 +118,9 @@ body {
     overflow: hidden;
 
     .swiper {
-        width: px2rem(602);
-        height: px2rem(364);
-        margin: px2rem(109) auto 0;
+        width: px2rem(492);
+        height: px2rem(300);
+        margin: px2rem(111) auto 0;
     }
 }
 
@@ -1047,14 +1047,14 @@ body {
         top: px2rem(483);
         left: 50%;
         transform: translateX(-50%);
-        width: 9.1rem;
+        width: px2rem(650);
         height: px2rem(48);
         line-height: px2rem(48);
         display: flex;
         justify-content: space-between;
 
         div {
-            width: 1.1rem;
+            width: px2rem(95);
             height: px2rem(48);
             background: linear-gradient(0deg, #9552E6 0%, #8E39F4 100%);
             border-radius: px2rem(13);
@@ -1568,7 +1568,7 @@ body {
             }
 
             .li2 {
-                height: px2rem(710);
+                height: px2rem(933);
                 background: url(../images/box_pubGift2.png) no-repeat;
                 background-size: 100% 100%;
             }

view/yinmeng/activity/2023-halloween/index.html

@@ -105,7 +105,7 @@
             <img src="./images/dice1.png" alt="" class="dice">
             <div class="diceLeftBut">宝箱开启记录</div>
             <div class="diceRightBut">点亮全部宝箱</div>
-            <p>单次消耗糖果券*1</p>
+            <p>消耗糖果券*1</p>
         </div>
     </div>
     <!-- pages2 -->
@@ -192,7 +192,6 @@
             <div></div>
             <div></div>
             <div></div>
-            <div></div>
         </div>
         <!-- 前三 -->
         <div class="topBox">
@@ -243,7 +242,7 @@
             <div class="cen">
                 <p>
                     一、活动时间：<br>
-                    2023年10月27日12:00:00-2023年11月2日23:59:59
+                    2023年10月28日12:00:00-2023年11月2日23:59:59
                 </p>
                 <p>二、礼物上新：<br>
                     活动期间将限时上架5款万圣新限定礼物；1款万圣限定福袋</p>
@@ -269,7 +268,7 @@
                     2.普通礼物包含礼物面板和背包礼物；<br>
                     3.大头号不参与榜单活动排名；<br>
                     4.靓号奖励A≠B≠C≠0，不可转赠，请联系客服领取；<br></p>
-                <p>本活动最终解释权归音萌所有，本活动以及奖励与苹果公司无关；</p>
+                <p>本活动最终解释权归音萌所有，本活动以及奖励与苹果公司无关；/p>
             </div>
         </div>
     </div>

view/yinmeng/activity/2023-halloween/js/index.js

@@ -494,7 +494,7 @@ function pageRecord (page) {
     })
 }
 //检测抽奖记录是否到达底部
-$(".record_box .record_box_in ul").scroll(function () {
+$(".duihuanBg .dividerecordsBg_in .ul").scroll(function () {
     var divHeight = $(this).height();
     var nScrollHeight = $(this)[0].scrollHeight;
     var nScrollTop = $(this)[0].scrollTop;

view/yinmeng/activity/2023-ruffian/index.html

@@ -42,8 +42,8 @@
     <div class="page2">
         <!-- 榜单切换 -->
         <div class="listTab">
-            <div class="active">勇气榜</div>
-            <div>狂欢榜</div>
+            <div class="active">勇气榜（送礼）</div>
+            <div>狂欢榜（收礼）</div>
         </div>
         <!-- 榜单盒子 -->
         <div class="listBg">

view/yinmeng/activity/2023-year/css/index.css

@@ -104,10 +104,6 @@ body {
   color: #664324;
 }
 
-.page1 {
-  display: none;
-}
-
 .page1 .box {
   width: 9.21333rem;
   height: 21.94667rem;
@@ -1009,6 +1005,7 @@ body {
   width: 9.46667rem;
   position: relative;
   margin: 0 auto;
+  display: none;
 }
 
 .page3 .page3TitleIcon {

view/yinmeng/activity/2023-year/css/index.scss

@@ -110,7 +110,7 @@ body {
 }
 
 .page1 {
-    display: none;
+    // display: none;
 
     .box {
         width: px2rem(691);
@@ -1015,7 +1015,7 @@ body {
     width: px2rem(710);
     position: relative;
     margin: 0 auto;
-    // display: none;
+    display: none;
 
     .page3TitleIcon {
         display: block;

view/yinmeng/activity/2023-year/index.html

@@ -21,9 +21,9 @@
         <!-- 宝箱任务 -->
         <img src="./images/toast.png" alt="" class="toast">
         <!-- tab切换 -->
-        <div class="tab tab1">年度挚友</div>
+        <div class="act tab tab1">年度挚友</div>
         <div class="tab tab2">礼物代言人</div>
-        <div class="act tab tab3">人气主播</div>
+        <div class="tab tab3">人气主播</div>
         <div class="tab tab4">名厅之战</div>
         <div class="tab tab5">年度神豪</div>
     </div>
@@ -482,7 +482,7 @@
                 </div>
             </div>
             <div class="tabBox2">
-                <i class="text">新秀值：按照用户在任意房间收到钻石礼物获得新秀值，1钻石=1新秀值</i>
+                <i class="text">新秀值：按照用户在任意房间收到钻石礼物获得贡献值，1钻石=1新秀值</i>
                 <img src="./images/celebrationTaskLine.png" alt="" class="line">
                 <div class="celebrationTaskBox">
                     <div class="title">LV1</div>
@@ -547,7 +547,7 @@
             </ul>
         </div>
         <!-- 吸底 -->
-        <div class="bottom">小时榜仅在每晚19:00 - 23:59开启</div>
+        <div class="bottom">小时榜仅在每晚19:00 - 23:29开启</div>
     </div>
 
     <!-- 页面4弹窗 -->

view/yinmeng/activity/2023-year/js/index.js

@@ -304,7 +304,7 @@ $(function () {
         })
         // getRoomUid();
         getTask();
-        popularGetRank();
+        cpRank();
     }, 100)
 })
 // tab总切换

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

@@ -1,270 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>愚乐派对</title>
-    <link rel="stylesheet" href="../../common/css/reset.css">
-    <link rel="stylesheet" href="./css/index.css?v=1.0">
-</head>
-
-<body>
-    <!-- 顶部返回 -->
-    <div class="back">
-        <img src="./images/travel/back.png" alt="">
-    </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="tabs">
-        <div class="tab1 act1"></div>
-        <div style="display: none;" 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=""> -->
-            <div class="pageBox1Rule_icon">魔盒说明</div>
-            <div class="time">3分钟倒计时: <span class="sp1">03</span> 分 <span class="sp2">00</span> 秒</div>
-            <div class="text">用户在送出第一个奇幻魔盒后开启3分钟倒计时，<br>在此期间内点亮所有礼物，可获得<b>【愚人庆典】</b>礼物*1</div>
-            <div class="giftBoxs">
-                <!-- <div class="">
-                    <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 class="top3">
-                <div class="no1">
-                    <img src="./images/page1Top1.png" alt="" class="ts">
-                    <img src="./images/logo.png" alt="" class="tx">
-                    <div class="nick">用户昵称</div>
-                    <div class="score">奇幻值:0</div>
-                </div>
-                <div class="no2">
-                    <img src="./images/page1Top2.png" alt="" class="ts">
-                    <img src="./images/logo.png" alt="" class="tx">
-                    <div class="nick">用户昵称</div>
-                    <div class="score">奇幻值:0</div>
-                </div>
-                <div class="no3">
-                    <img src="./images/page1Top3.png" alt="" class="ts">
-                    <img src="./images/logo.png" alt="" class="tx">
-                    <div class="nick">用户昵称</div>
-                    <div class="score">奇幻值:0</div>
-                </div>
-            </div>
-            <!-- 非前叁 -->
-            <ul>
-                <!-- <li>
-                    <div class="num">1.</div>
-                    <img src="./images/logo.png" alt="" class="tx">
-                    <div class="nick">用户昵称</div>
-                    <div class="score">奇幻值: 20</div>
-                </li> -->
-            </ul>
-        </div>
-        <!-- 自己榜单 -->
-        <div class="my">
-            <div class="num">1.</div>
-            <img src="./images/logo.png" alt="" class="tx">
-            <div class="nick">用户昵称</div>
-            <div class="score">奇幻值: 20</div>
-        </div>
-    </div>
-
-    <!-- 页面2 -->
-    <div class="page2">
-        <!-- 更新 -->
-        <img src="./images/upDate.png" alt="" class="upDate">
-        <!-- 切换 -->
-        <div class="tab">
-            <div class="act1">牌照房间</div>
-            <div class="">个播房间</div>
-        </div>
-        <!-- 第一名房间 -->
-        <div class="topRoom">
-            <img src="./images/logo.png" alt="" class="tx">
-            <div class="roomName">房间昵称</div>
-            <div class="score">房间进度值: <b>00.0%</b></div>
-        </div>
-        <!-- 第一名进度 -->
-        <div class="topLine">
-            <div></div>
-            <span>0/0</span>
-        </div>
-        <!-- 文桉介绍 -->
-        <div class="text">房间进度值达到100%，即可开启红包雨</div>
-        <!-- 第一名房间跳转 -->
-        <img src="./images/page2ToRoomBut.png" alt="" class="page2ToRoomBut">
-        <div class="page2NotTopTitle">其他房间推荐</div>
-        <!-- 其他房间 -->
-        <ul>
-            <li>
-                <img src="./images/logo.png" alt="" class="tx">
-                <div class="live">直播中</div>
-                <div class="roomName">房间昵称</div>
-                <div class="score">房间进度值: <b>00.0%</b></div>
-                <div class="line_in">
-                    <div></div>
-                    <span>0/0</span>
-                </div>
-                <img src="./images/go.png" alt="" class="go">
-                <img src="./images/notGo.png" alt="" class="notGo">
-            </li>
-        </ul>
-    </div>
-
-    <!-- 页面3 -->
-    <div class="page3"></div>
-
-    <!-- 页面4 -->
-    <div class="page4 page41">
-        <!-- 切换 -->
-        <div class="page4_tab">
-            <div></div>
-            <div></div>
-        </div>
-        <!-- 日榜总榜切换 -->
-        <div class="dayTab">
-            <div class="act">日榜</div>
-            <div>总榜</div>
-        </div>
-        <!-- 日期切换 -->
-        <div class="timeTab">
-            <div class="act">3.27</div>
-            <div>3.27</div>
-            <div>3.27</div>
-            <div>3.27</div>
-            <div>3.27</div>
-            <div>3.27</div>
-        </div>
-        <!-- 前叁 -->
-        <div class="top3">
-            <div class="no1">
-                <img src="./images/page1Top1.png" alt="" class="ts">
-                <img src="./images/logo.png" alt="" class="tx">
-                <div class="nick">用户昵称</div>
-                <div class="score">奇幻值:0</div>
-            </div>
-            <div class="no2">
-                <img src="./images/page1Top2.png" alt="" class="ts">
-                <img src="./images/logo.png" alt="" class="tx">
-                <div class="nick">用户昵称</div>
-                <div class="score">奇幻值:0</div>
-            </div>
-            <div class="no3">
-                <img src="./images/page1Top3.png" alt="" class="ts">
-                <img src="./images/logo.png" alt="" class="tx">
-                <div class="nick">用户昵称</div>
-                <div class="score">奇幻值:0</div>
-            </div>
-        </div>
-        <!-- 非前叁 -->
-        <ul>
-            <li>
-                <div class="num">1.</div>
-                <img src="./images/logo.png" alt="" class="tx">
-                <div class="nick">用户昵称</div>
-                <div class="score">奇幻值: 20</div>
-            </li>
-        </ul>
-
-        <!-- 自己榜单 -->
-        <div class="my">
-            <div class="num">1.</div>
-            <img src="./images/logo.png" alt="" class="tx">
-            <div class="nick">用户昵称</div>
-            <div class="score">奇幻值: 20</div>
-        </div>
-    </div>
-
-    <!-- 魔盒说明 -->
-    <div class="MagicBoxRule">
-        <div class="MagicBoxRule_in MagicBoxRule1">
-            <!-- 切换 -->
-            <div class="tab">
-                <div></div>
-                <div></div>
-            </div>
-            <!-- 切换页面1 -->
-            <img src="./images/MagicBoxRule1Bg.png" alt="" class="MagicBoxRulePage1">
-            <!-- 切换页面2 -->
-            <div class="MagicBoxRulePage2">
-                <ul>
-                    <li>
-                        <div>
-                            <p>2024/3/19</p>
-                            <b>14:07:07</b>
-                        </div>
-                        <div class="centen">用户昵称</div>
-                        <div class="right">
-                            <p>获得：礼物名称</p>
-                            <b>0 <img src="./images/diamond.png" alt=""></b>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <!-- 活动规则 -->
-    <div class="rule">
-        <div class="rule_in">
-            <div class="box">
-                <img src="./images/rule_in.png" alt="" srcset="">
-            </div>
-        </div>
-    </div>
-
-    <!-- 限定礼物规则 -->
-    <div class="limitedGift">
-        <div class="limitedGift_in">
-            <div class="box">
-                <img src="./images/limitedGift_in.png" alt="" srcset="">
-            </div>
-        </div>
-    </div>
-</body>
-
-</html>
-
-</html>
-<script src="../../common/js/flexible.js"></script>
-<script src="../../common/js/jquery-3.2.1.min.js"></script>
-<script src="../../common/js/common2.js"></script>
-<script src="../../common/js/layer.js"></script>
-<script src="../../common/js/vconsole.min.js"></script>
-<script src="../../common/js/route-constant.js"></script>
-<script src="./js/index.js"></script>

view/yinmeng/activity/2024-aprilFoolsDay/js/index.js

@@ -1,566 +0,0 @@
-let urlPrefix = getUrlPrefix()
-let browser = checkVersion()
-let env = EnvCheck();
-if (env == 'test') {
-    new VConsole();
-}
-// 封装layer消息提醒框
-let layerIndex
-const showLoading = (content = '加载中...') => {
-    layer.open({
-        type: 2,
-        shadeClose: false,
-        content,
-        success (e) {
-            layerIndex = $(e).attr('index')
-        }
-    })
-}
-const hideLoading = (index) => {
-    layer.close(index)
-}
-const toastMsg = (content = '操作完成', time = 2) => {
-    layer.open({
-        content,
-        time,
-        skin: 'msg'
-    })
-}
-var page = 1;
-var isLock = true;
-var timeOut = null;
-var countupTime = 0;
-var XIAO_CHOU_ROOM = 'XIAO_CHOU_ROOM_1';
-var rankType = 1; //排行榜类型（1=送礼日榜，2=送礼总榜，3=收礼日榜，4=收礼总榜）;
-var data = null;//默认日榜;
-var type = 'a';//a:送礼b:收礼;
-var type2 = 'a';//a:日榜b:总榜;
-var curDate; //当天日期;
-// 初始化函数
-$(function () {
-    getInfoFromClient()
-    setTimeout(function () {
-        // 页面全屏
-        if (browser.app) {
-            if (browser.android) {
-                window.androidJsObj.initShowNav(false)
-            } else {
-                window.webkit.messageHandlers.initShowNav.postMessage(0)
-            }
-        };
-        // 顶部返回事件
-        $('.back').click(() => {
-            if (browser.android) {
-                window.androidJsObj.closeWebView()
-            } else {
-                window.webkit.messageHandlers.closeWebView.postMessage(null)
-            }
-        })
-        getTime();
-        getRank();
-    }, 100)
-})
-
-// 获取任务接口
-function getTaskUser () {
-    showLoading()
-    networkRequest({
-        type: 'get',
-        url: urlPrefix + '/activity/task/user',
-        data: { componentCode: "QI_HUAN_MO_HE" },
-        success (res) {
-            if (res.code === 200) {
-                // 渲染愚人盛典礼物
-                $('.page1 .box1 .giftBoxs div').remove();
-                var str = '';
-                res.data[0].children.forEach((res, i) => {
-                    var img = res.taskIcon.split("|");
-                    str += `
-                    <div class="${res.completed ? 'act' : ''}">
-                        <img src = "${res.completed ? img[1] : img[0]}" alt = "" >
-                        ${res.taskName}
-                    </div >
-                    `
-                });
-                $('.page1 .box1 .giftBoxs').append(str);
-            } else {
-                toastMsg(res.message)
-            }
-            hideLoading(layerIndex)
-        },
-        error (err) {
-            hideLoading(layerIndex)
-            toastMsg('网路错误，请退出重进')
-        }
-    })
-}
-
-// 获取倒计时接口
-function getTime () {
-    showLoading()
-    networkRequest({
-        type: 'get',
-        url: urlPrefix + '/act/2024AprilFoolsDay/getTime',
-        data: { activityCode: "ACT_2024_APRIL_FOOLS_DAY", taskCode: "QI_HUAN_GIFT" },
-        success (res) {
-            if (res.code === 200) {
-                if (res.data) {
-                    countupTime = res.data - res.timestamp;
-                    countup();
-                }
-                getTaskUser();
-            } else {
-                toastMsg(res.message)
-            }
-            hideLoading(layerIndex)
-        },
-        error (err) {
-            hideLoading(layerIndex)
-            toastMsg('网路错误，请退出重进')
-        }
-    })
-}
-
-// 倒计时
-function countup () {
-    clearTimeout(timeOut)
-    //获取当前时间
-    var d = 0;
-    var h = 0;
-    var m = 0;
-    var s = 0;
-    //定义变量 d,h,m,s保存倒计时的时间
-    var d, h, m, s;
-    if (countupTime >= 0) {
-        d = getzf(Math.floor(countupTime / 1000 / 60 / 60 / 24));
-        h = getzf(Math.floor(countupTime / 1000 / 60 / 60 % 24));
-        m = getzf(Math.floor(countupTime / 1000 / 60 % 60));
-        s = getzf(Math.floor(countupTime / 1000 % 60));
-        //将倒计时赋值到div中
-        $('.page1 .box1 .time .sp1').text(m);
-        $('.page1 .box1 .time .sp2').text(s);
-        countupTime = countupTime - 1000;
-        //递归每秒调⽤countTime⽅法，显⽰动态时间效果
-    } else {
-        getTime();
-        return
-    }
-    timeOut = setTimeout(countup, 1000);
-}
-//补0操作  
-function getzf (num) {
-    if (parseInt(num) < 10) {
-        num = '0' + num;
-    }
-    return num;
-}
-
-// tab切换
-$('.tabs div').click(function () {
-    var i = $(this).index() + 1;
-    $('.tabs div').removeClass('act1').removeClass('act2').removeClass('act3').removeClass('act4');
-    $(this).addClass(`act${i}`);
-    $('.page1,.page2,.page3,.page4').hide();
-    $(`.page${i}`).show();
-    if (i == 1) {
-        getRank();
-    } else if (i == 2) {
-        getRooms();
-    } else if (i == 4) {
-        giftGetRank(rankType, data);
-    }
-})
-
-// 更新房间接口按钮
-$('.page2 .upDate').click(function () {
-    getRooms();
-})
-
-// 获取奇幻榜接口
-function getRank () {
-    showLoading()
-    networkRequest({
-        type: 'get',
-        url: urlPrefix + '/act/2023Halloween/rank/getRank',
-        data: { rankType: 4, pageSize: 15, },
-        success (res) {
-            if (res.code === 200) {
-                // 处理前叁
-                var top3 = res.data.rankList.slice(0, 3);
-                var notTop3 = res.data.rankList.slice(3);
-                if (top3.length < 3) {
-                    let arr = new Array(3 - top3.length).fill({
-                        avatar: './images/logo.png',
-                        nick: '虚位以待',
-                        score: "0"
-                    })
-                    top3.push(...arr)
-                }
-                top3.forEach((res, i) => {
-                    $(`.page1 .box2 .top3 .no${i + 1} .tx`).attr('src', res.avatar);
-                    $(`.page1 .box2 .top3 .no${i + 1} .nick`).text(res.nick);
-                    $(`.page1 .box2 .top3 .no${i + 1} .score`).html('奇幻值<br>' + unitProcessing(res.score, 10000, 1, 'w'))
-                })
-                // 非前叁
-                var str = '';
-                $('.page1 .box2 ul li').remove();
-                notTop3.forEach((res, i) => {
-                    str += `
-                        <li>
-                            <div class="num">${res.ranking}.</div>
-                            <img src="${res.avatar}" alt="" class="tx">
-                            <div class="nick">${res.nick}</div>
-                            <div class="score">奇幻值: ${unitProcessing(res.score, 10000, 1, 'w')}</div>
-                        </li>
-                    `
-                })
-                $('.page1 .box2 ul').append(str);
-                // 处理自己榜单
-                $('.page1 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
-                $('.page1 .my .tx').attr('src', res.data.meRank.avatar);
-                $('.page1 .my .nick').text(res.data.meRank.nick);
-                $('.page1 .my .score').text('奇幻值' + unitProcessing(res.data.meRank.score, 10000, 1, 'w'));
-            } else {
-                toastMsg(res.message)
-            }
-            hideLoading(layerIndex)
-        },
-        error (err) {
-            hideLoading(layerIndex)
-            toastMsg('网路错误，请退出重进')
-        }
-    })
-}
-
-// 页面2切换
-$('.page2 .tab div').click(function () {
-    var i = $(this).index() + 1;
-    $('.page2 .tab div').removeClass('act1').removeClass('act2');
-    $(this).addClass(`act${i}`);
-    XIAO_CHOU_ROOM = i == 1 ? 'XIAO_CHOU_ROOM_1' : 'XIAO_CHOU_ROOM_4';
-    getRooms();
-})
-
-// 获取房间榜接口
-function getRooms () {
-    showLoading()
-    networkRequest({
-        type: 'get',
-        url: urlPrefix + '/act/2024AprilFoolsDay/getRooms',
-        data: { activityCode: "ACT_2024_APRIL_FOOLS_DAY", taskCode: XIAO_CHOU_ROOM },
-        success (res) {
-            if (res.code === 200) {
-                var top = res.data.slice(0, 1);
-                if (top.length < 3) {
-                    let arr = new Array(1 - top.length).fill({
-                        roomAvatar: './images/logo.png',
-                        roomTitle: '虚位以待',
-                        percentage: 0,
-                        activityValue: 0,
-                        conditionValue: 0,
-                    })
-                    top.push(...arr)
-                }
-                console.log(top);
-                var notTop = res.data.slice(1);
-                // 第一房间
-                $('.page2 .topRoom .tx').attr('src', top[0].roomAvatar);
-                $('.page2 .topRoom .roomName').text(top[0].roomTitle);
-                $('.page2 .topRoom .score b').text(top[0].percentage + '%');
-                $('.page2 .topLine div').css('width', top[0].percentage + '%');
-                $('.page2 .topLine span').text(`${top[0].activityValue}/${top[0].conditionValue}`);
-                $('.page2 .page2ToRoomBut').attr("uid", top[0].roomUid);
-                $('.page2 .page2ToRoomBut').attr("src", top[0].isUnderway ? './images/page2ToRoomBut.png' : './images/page2ToRoomBut2.png');
-                $('.page2 .page2ToRoomBut').attr("isUnderway", top[0].isUnderway);
-                // 其他房间
-                $('.page2 ul li').remove();
-                var str = '';
-                notTop.forEach(res => {
-                    str += `
-                        <li>
-                            <img src="${res.roomAvatar}" alt="" class="tx">
-                            <div class="live" style="display:${res.isLive ? 'block' : 'none'}">直播中</div>
-                            <div class="roomName">${res.roomTitle}</div>
-                            <div class="score">房间进度值: <b>${res.percentage}%</b></div>
-                            <div class="line_in">
-                                <div style="width:${res.percentage}%"></div>
-                                <span>${res.activityValue}/${res.conditionValue}</span>
-                            </div>
-                            <img style="display:${res.isUnderway ? 'block' : 'none'}" src="./images/go.png" alt="" class="go" uid=${res.roomUid}>
-                            <img style="display:${!res.isUnderway ? 'block' : 'none'}" src="./images/notGo.png" alt="" class="notGo" uid=${res.roomUid}>
-                        </li>
-                    `
-                })
-                $('.page2 ul').append(str);
-            } else {
-                toastMsg(res.message)
-            }
-            hideLoading(layerIndex)
-        },
-        error (err) {
-            hideLoading(layerIndex)
-            toastMsg('网路错误，请退出重进')
-        }
-    })
-}
-// 房间最前面的跳转按钮
-$('.page2 .page2ToRoomBut').click(function () {
-    var uid = $(this).attr('uid');
-    var isUnderway = $(this).attr('isUnderway');
-    if (isUnderway) {
-        if (browser.ios) {
-            window.webkit.messageHandlers.openRoom.postMessage(uid);
-        } else if (browser.android) {
-            if (androidJsObj && typeof androidJsObj === 'object') {
-                window.androidJsObj.openRoom(uid);
-            }
-        }
-    }
-})
-// 其他房间跳转房间按钮
-$('.page2 ul').on('click', ' li .go', function () {
-    var uid = $(this).attr('uid');
-    if (browser.ios) {
-        window.webkit.messageHandlers.openRoom.postMessage(uid);
-    } else if (browser.android) {
-        if (androidJsObj && typeof androidJsObj === 'object') {
-            window.androidJsObj.openRoom(uid);
-        }
-    }
-})
-// 其他房间跳转房间按钮
-$('.page2 ul').on('click', ' li .notGo', function () {
-    var uid = $(this).attr('uid');
-    if (browser.ios) {
-        window.webkit.messageHandlers.openRoom.postMessage(uid);
-    } else if (browser.android) {
-        if (androidJsObj && typeof androidJsObj === 'object') {
-            window.androidJsObj.openRoom(uid);
-        }
-    }
-})
-
-// 页面4切换
-$('.page4 .page4_tab div').click(function () {
-    var i = $(this).index() + 1;
-    $('.page4').removeClass('page41').removeClass('page42');
-    $('.page4').addClass(`page4${i}`);
-    if (i == 1) {
-        type = 'a';
-        rankType = type2 == "a" ? 1 : 2;
-    } else {
-        type = 'b';
-        rankType = type2 == "a" ? 3 : 4;
-    }
-    giftGetRank(rankType, data);
-})
-
-// 页面4 日榜/总榜切换
-$('.page4 .dayTab div').click(function () {
-    var i = $(this).index() + 1;
-    $(this).addClass('act').siblings().removeClass('act')
-    if (i == 1) {
-        type2 = 'a';
-        rankType = type == "a" ? 1 : 3;
-        $('.page4 .timeTab').show();
-    } else {
-        type2 = 'b';
-        rankType = type == "a" ? 2 : 4;
-        $('.page4 .timeTab').hide();
-    }
-    giftGetRank(rankType, data);
-})
-
-// 页面4 日期切换
-$('.page4 .timeTab div').click(function () {
-    var i = $(this).index() + 1;
-    var datas = $(this).attr('data');
-    $(this).addClass('act').siblings().removeClass('act')
-    rankType = type == "a" ? 1 : 3;//排行榜类型（1=甜蜜日榜，2=甜蜜总榜，3=爱意日榜，4=爱意总榜）
-    data = datas;
-    giftGetRank(rankType, data);
-})
-
-// 获取愚人榜单接口
-function giftGetRank (rankType, date) {
-    showLoading()
-    networkRequest({
-        type: 'get',
-        url: urlPrefix + '/act/special/gift/getRank',
-        data: { rankType, date, pageSize: 30 },
-        success (res) {
-            if (res.code === 200) {
-                // 设置当天日期
-                curDate = res.data.curDate;
-                // 处理日期
-                if (res.data.dateList) {
-                    res.data.dateList.forEach((res, i) => {
-                        $('.page4 .timeTab div').eq(i).text(`${res[5]}${res[6]}.${res[8]}${res[9]}`);
-                        $('.page4 .timeTab div').eq(i).attr('data', res);
-                        if (res == curDate && date == null) {
-                            $('.page4 .timeTab div').removeClass('act')
-                            $('.page4 .timeTab div').eq(i).addClass('act');
-                        }
-                    })
-                }
-                // 处理前叁
-                var top3 = res.data.rankList.slice(0, 3);
-                var notTop3 = res.data.rankList.slice(3);
-                if (top3.length < 3) {
-                    let arr = new Array(3 - top3.length).fill({
-                        avatar: './images/logo.png',
-                        nick: '虚位以待',
-                        score: "0"
-                    })
-                    top3.push(...arr)
-                }
-                top3.forEach((res, i) => {
-                    $(`.page4 .top3 .no${i + 1} .tx`).attr('src', res.avatar);
-                    $(`.page4 .top3 .no${i + 1} .nick`).text(res.nick);
-                    $(`.page4 .top3 .no${i + 1} .score`).html(`${rankType == 1 || rankType == 2 ? '愚乐值' : '欢乐值'}<br>` + unitProcessing(res.score, 10000, 1, 'w'))
-                })
-                // 非前叁
-                var str = '';
-                $('.page4 ul li').remove();
-                notTop3.forEach((res, i) => {
-                    str += `
-                        <li>
-                            <div class="num">${res.ranking}.</div>
-                            <img src="${res.avatar}" alt="" class="tx">
-                            <div class="nick">${res.nick}</div>
-                            <div class="score">${rankType == 1 || rankType == 2 ? '愚乐值' : '欢乐值'}: ${unitProcessing(res.score, 10000, 1, 'w')}</div>
-                        </li>
-                    `
-                })
-                $('.page4 ul').append(str);
-                // 处理自己榜单
-                $('.page4 .my .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
-                $('.page4 .my .tx').attr('src', res.data.meRank.avatar);
-                $('.page4 .my .nick').text(res.data.meRank.nick);
-                $('.page4 .my .score').text(`${rankType == 1 || rankType == 2 ? '愚乐值' : '欢乐值'}` + unitProcessing(res.data.meRank.score, 10000, 1, 'w'));
-            } else {
-                toastMsg(res.message)
-            }
-            hideLoading(layerIndex)
-        },
-        error (err) {
-            hideLoading(layerIndex)
-            toastMsg('网路错误，请退出重进')
-        }
-    })
-}
-
-// 魔盒切换
-$('.MagicBoxRule .MagicBoxRule_in .tab div').click(function () {
-    var i = $(this).index() + 1;
-    $('.MagicBoxRule .MagicBoxRule_in').removeClass('MagicBoxRule1').removeClass('MagicBoxRule2');
-    $('.MagicBoxRule .MagicBoxRule_in').addClass(`MagicBoxRule${i}`);
-    $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage1,.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2').hide();
-    $(`.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage${i}`).show();
-    return false;
-})
-
-// 获取魔盒接口
-function getRecordPage () {
-    showLoading()
-    networkRequest({
-        type: 'get',
-        url: urlPrefix + '/activity/task/user/record/page',
-        data: {
-            componentCode: "QI_HUAN_MO_HE",
-            activityCode: 'ACT_2024_APRIL_FOOLS_DAY',
-            pageNum: page,
-            pageSize: 20,
-        },
-        success (res) {
-            if (res.code === 200) {
-                var str = ''
-                if (res.data.records.length == 0) {
-                    str = `
-                        <li class="not">暂无记录</li>
-                    `
-                    isLock = false;
-                } else {
-                    res.data.records.forEach(res => {
-                        str += `
-                            <li>
-                                <div>
-                                    <p>${dateFormat(res.createTime, 'yyyy/MM/dd')}</p>
-                                    <b>${dateFormat(res.createTime, 'hh:mm:ss')}</b>
-                                </div>
-                                <div class="centen">${res.nick}</div>
-                                <div class="right">
-                                    <p>获得：${res.rewardName}</p>
-                                    <b>${res.showValue} <img src="./images/diamond.png" alt=""></b>
-                                </div>
-                            </li>
-                        `
-                    })
-                    isLock = true;
-                }
-                $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul').append(str);
-            } else {
-                toastMsg(res.message)
-                isLock = true;
-            }
-            hideLoading(layerIndex)
-        },
-        error (err) {
-            hideLoading(layerIndex)
-            toastMsg('网路错误，请退出重进')
-            isLock = true;
-        }
-    })
-}
-// 滚动
-$('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul').scroll(function () {
-    let scrollTop = $(this).scrollTop()
-    let scrollHeight = $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul')[0].scrollHeight
-    let ulHeight = $(this).innerHeight()
-    if (scrollTop + ulHeight + 100 >= scrollHeight) {
-        if (isLock) {
-            // 请求下一页
-            page = page + 1;
-            getRecordPage();
-            isLock = false;
-        }
-    }
-})
-
-// 打开魔盒规则
-$('.page1 .box1 .pageBox1Rule_icon').click(function () {
-    $('.MagicBoxRule .MagicBoxRule_in .MagicBoxRulePage2 ul li').remove();
-    getRecordPage();
-    $('.MagicBoxRule').show();
-    bodyScroolFun(true);
-})
-
-// 关闭魔盒规则
-$('.MagicBoxRule').click(function () {
-    $('.MagicBoxRule').hide();
-    bodyScroolFun(false);
-})
-
-// 打开规则
-$('.header .rule_icon').click(function () {
-    $('.rule').show();
-    bodyScroolFun(true);
-})
-
-// 关闭规则
-$('.rule').click(function () {
-    $('.rule').hide();
-    bodyScroolFun(false);
-})
-
-// 打开限定礼物规则
-$('.header .qualifyGift_icon').click(function () {
-    $('.limitedGift').show();
-    bodyScroolFun(true);
-})
-
-// 关闭限定礼物规则
-$('.limitedGift').click(function () {
-    $('.limitedGift').hide();
-    bodyScroolFun(false);
-})

view/yinmeng/activity/2024-cityLove/css/index.css

@@ -0,0 +1,730 @@
+html,
+body {
+  width: 100%;
+  background: #F9E4D6;
+}
+
+.rabbit {
+  z-index: 999;
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.back {
+  position: fixed;
+  top: 0.93333rem;
+  left: 0.45333rem;
+  z-index: 99;
+  width: 0.82667rem;
+  height: 0.82667rem;
+}
+
+.back img {
+  width: 100%;
+  height: 100%;
+}
+
+.back p {
+  color: #fff;
+  font-size: 0.42667rem;
+  position: absolute;
+  width: 9rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  line-height: 0.82667rem;
+}
+
+.header {
+  width: 10rem;
+  height: 11.6rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 0 auto 0rem;
+}
+
+.header .rule_icon {
+  position: absolute;
+  width: 1.76rem;
+  height: 0.97333rem;
+  right: 0;
+  top: 4.6rem;
+}
+
+.header .tab {
+  width: 7.89333rem;
+  height: 1.36rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 7.64rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header .tab div {
+  width: 3.46667rem;
+  height: 100%;
+}
+
+.header .tab .tab1 {
+  background: url(../images/tab1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .tab .tab2 {
+  background: url(../images/tab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .tab .act1 {
+  background: url(../images/tabAct1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .tab .act2 {
+  background: url(../images/tabAct2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .page1Box1 {
+  width: 10rem;
+  height: 9.74667rem;
+  display: block;
+  margin: -2.6rem auto 0rem;
+  position: relative;
+}
+
+.page1 .page1Box2 {
+  width: 10rem;
+  height: 12.44rem;
+  display: block;
+  margin: -1.1rem auto 0rem;
+  position: relative;
+}
+
+.page1 .page1Box3 {
+  width: 10rem;
+  height: 12.28rem;
+  display: block;
+  margin: -1.1rem auto 0rem;
+  position: relative;
+}
+
+.page1 .page1Box4 {
+  width: 10rem;
+  height: 15rem;
+  margin: -1.1rem auto 0rem;
+  position: relative;
+  background: url(../images/page1Box4.png) no-repeat 100% 100%;
+  background-size: 100% 100%;
+}
+
+.page1 .page1Box4 .left {
+  width: 3.48rem;
+  height: 0.84rem;
+  line-height: 0.81333rem;
+  background: url(../images/page1Box4_left.png) no-repeat;
+  background-size: 100% 100%;
+  color: #FF5B8D;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  top: 2.69333rem;
+  text-indent: 2.55rem;
+  font-weight: bold;
+}
+
+.page1 .page1Box4 .right {
+  width: 3.48rem;
+  height: 0.84rem;
+  position: absolute;
+  right: 0;
+  top: 2.69333rem;
+}
+
+.page1 .page1Box4 .dayLimit {
+  width: 0.76rem;
+  height: 0.36rem;
+  line-height: 0.36rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.16rem;
+  font-weight: 500;
+  position: absolute;
+  top: 4.10667rem;
+  background: url(../images/dayLimit.png) no-repeat;
+  background-size: 100% 100%;
+  text-indent: 0.05rem;
+}
+
+.page1 .page1Box4 .dayLimit1 {
+  left: 2.81333rem;
+}
+
+.page1 .page1Box4 .dayLimit2 {
+  left: 5.49333rem;
+}
+
+.page1 .page1Box4 .dayLimit3 {
+  left: 8.22667rem;
+}
+
+.page1 .page1Box4 .convert {
+  width: 1.73333rem;
+  height: 0.61333rem;
+  position: absolute;
+}
+
+.page1 .page1Box4 .convert1 {
+  left: 1.37333rem;
+  top: 6.33333rem;
+}
+
+.page1 .page1Box4 .convert2 {
+  left: 4.04rem;
+  top: 6.33333rem;
+}
+
+.page1 .page1Box4 .convert3 {
+  left: 6.8rem;
+  top: 6.33333rem;
+}
+
+.page1 .page1Box4 .convert4 {
+  left: 1.37333rem;
+  top: 9.45333rem;
+}
+
+.page1 .page1Box4 .convert5 {
+  left: 4.04rem;
+  top: 9.45333rem;
+}
+
+.page1 .page1Box4 .convert6 {
+  left: 6.8rem;
+  top: 9.45333rem;
+}
+
+.page1 .page1Box4 .convert7 {
+  left: 2.8rem;
+  top: 12.65333rem;
+}
+
+.page1 .page1Box4 .convert8 {
+  left: 5.45333rem;
+  top: 12.65333rem;
+}
+
+.page2 {
+  display: none;
+  width: 10rem;
+  height: 20.56rem;
+  background: url(../images/page2.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: -2.6rem auto 1.33333rem;
+}
+
+.page2 .first .left_ts {
+  width: 2.16rem;
+  height: 2.13333rem;
+  position: absolute;
+  left: 2.16rem;
+  top: 2.68rem;
+  z-index: 2;
+}
+
+.page2 .first .right_ts {
+  width: 2.16rem;
+  height: 2.13333rem;
+  position: absolute;
+  right: 2.16rem;
+  top: 2.68rem;
+  z-index: 2;
+}
+
+.page2 .first .left_tx {
+  width: 1.76rem;
+  height: 1.76rem;
+  border-radius: 50%;
+  position: absolute;
+  left: 2.33333rem;
+  top: 2.89333rem;
+}
+
+.page2 .first .right_tx {
+  width: 1.76rem;
+  height: 1.76rem;
+  border-radius: 50%;
+  position: absolute;
+  right: 2.33333rem;
+  top: 2.89333rem;
+}
+
+.page2 .first .score {
+  width: 1.5rem;
+  text-align: center;
+  -webkit-text-stroke: 0.01333rem #FE5A9F;
+  /* Safari */
+  font-size: 0.28rem;
+  color: #fff;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.82667rem;
+  font-weight: bold;
+}
+
+.page2 .first .leftNick {
+  width: 2.16rem;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: absolute;
+  left: 2.24rem;
+  top: 5rem;
+  color: #B8004E;
+  font-weight: bold;
+  font-size: 0.28rem;
+}
+
+.page2 .first .rightNick {
+  width: 2.16rem;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: absolute;
+  right: 2.24rem;
+  top: 5rem;
+  color: #B8004E;
+  font-weight: bold;
+  font-size: 0.28rem;
+}
+
+.page2 .notFirst {
+  width: 8.88rem;
+  height: 12rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 7.13333rem;
+  overflow-y: scroll;
+}
+
+.page2 .notFirst::-webkit-scrollbar {
+  display: none;
+}
+
+.page2 .notFirst li {
+  width: 8.88rem;
+  height: 1.82667rem;
+  background: url(../images/listBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.page2 .notFirst li .num {
+  width: 0.66667rem;
+  height: 100%;
+  line-height: 1.82667rem;
+  text-align: center;
+  color: #B16B74;
+  font-size: 0.30667rem;
+  font-weight: 500;
+  float: left;
+  margin-left: 0.52rem;
+  margin-right: 0.2rem;
+}
+
+.page2 .notFirst li .left_tx {
+  width: 1.09333rem;
+  height: 1.09333rem;
+  border-radius: 1.09333rem;
+  float: left;
+  margin-top: 0.38667rem;
+  border: 0.02667rem solid #FFABC7;
+  margin-right: 0.18667rem;
+}
+
+.page2 .notFirst li .right_tx {
+  width: 1.09333rem;
+  height: 1.09333rem;
+  border-radius: 1.09333rem;
+  float: left;
+  margin-top: 0.38667rem;
+  border: 0.02667rem solid #FFABC7;
+}
+
+.page2 .notFirst li .love {
+  width: 1.02667rem;
+  height: 0.90667rem;
+  position: absolute;
+  left: 2.10667rem;
+  top: 0.50667rem;
+}
+
+.page2 .notFirst li .nickLeft {
+  width: 2.2rem;
+  color: #FF658E;
+  font-size: 0.28rem;
+  font-weight: 500;
+  position: absolute;
+  left: 4rem;
+  top: 0.58667rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .notFirst li .nickRight {
+  width: 2.2rem;
+  color: #FF658E;
+  font-size: 0.28rem;
+  font-weight: 500;
+  position: absolute;
+  left: 4rem;
+  top: 0.98667rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .notFirst li .score {
+  float: right;
+  height: 100%;
+  line-height: 1.82667rem;
+  color: #FE5F93;
+  font-size: 0.32rem;
+  margin-right: 1rem;
+  font-weight: 500;
+}
+
+.page2 .my {
+  width: 10rem;
+  height: 3.16rem;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  background: url(../images/my.png) no-repeat;
+  background-size: 100% 100%;
+  background: url(../images/my2.png) no-repeat;
+  background-size: 100% 100%;
+  transition: all .3s;
+  z-index: 3;
+}
+
+.page2 .my .more {
+  width: 1.24rem;
+  height: 1.24rem;
+  position: absolute;
+  right: 0.09333rem;
+  top: -0.41333rem;
+}
+
+.page2 .my ul {
+  width: 8.88rem;
+  height: 1.82667rem;
+  margin: 1.10667rem auto 0;
+  overflow-y: hidden;
+}
+
+.page2 .my ul::-webkit-scrollbar {
+  display: none;
+}
+
+.page2 .my ul li {
+  width: 100%;
+  height: 1.82667rem;
+  background: url(../images/myList.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin-bottom: 0.10667rem;
+  overflow: hidden;
+}
+
+.page2 .my ul li .num {
+  width: 0.66667rem;
+  height: 100%;
+  line-height: 1.82667rem;
+  text-align: center;
+  color: #B16B74;
+  font-size: 0.30667rem;
+  font-weight: 500;
+  float: left;
+  margin-left: 0.52rem;
+  margin-right: 0.2rem;
+}
+
+.page2 .my ul li .left_tx {
+  width: 1.09333rem;
+  height: 1.09333rem;
+  border-radius: 1.09333rem;
+  float: left;
+  margin-top: 0.38667rem;
+  border: 0.02667rem solid #FFABC7;
+  margin-right: 0.18667rem;
+}
+
+.page2 .my ul li .right_tx {
+  width: 1.09333rem;
+  height: 1.09333rem;
+  border-radius: 1.09333rem;
+  float: left;
+  margin-top: 0.38667rem;
+  border: 0.02667rem solid #FFABC7;
+}
+
+.page2 .my ul li .love {
+  width: 1.02667rem;
+  height: 0.90667rem;
+  position: absolute;
+  left: 2.10667rem;
+  top: 0.50667rem;
+}
+
+.page2 .my ul li .nickLeft {
+  width: 2.2rem;
+  color: #FF658E;
+  font-size: 0.28rem;
+  font-weight: 500;
+  position: absolute;
+  left: 4rem;
+  top: 0.58667rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .my ul li .nickRight {
+  width: 2.2rem;
+  color: #FF658E;
+  font-size: 0.28rem;
+  font-weight: 500;
+  position: absolute;
+  left: 4rem;
+  top: 0.98667rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .my ul li .score {
+  float: right;
+  height: 100%;
+  line-height: 1.82667rem;
+  color: #FE5F93;
+  font-size: 0.32rem;
+  margin-right: 1rem;
+  font-weight: 500;
+}
+
+.page2 .my ul .null {
+  background: none;
+  text-align: center;
+  line-height: 1.82667rem;
+  color: #FF658E;
+  font-size: 0.4rem;
+  font-weight: 500;
+}
+
+.rule {
+  position: fixed;
+  z-index: 99;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: none;
+}
+
+.rule .rule_in {
+  width: 9.10667rem;
+  height: 13.18667rem;
+  background: url(../images/ruleBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+}
+
+.rule .rule_in .tab {
+  width: 6.64rem;
+  height: 1.22667rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 2.4rem auto 0.25333rem;
+}
+
+.rule .rule_in .tab div {
+  width: 3.13333rem;
+  height: 1.22667rem;
+}
+
+.rule .rule_in .tab .tab1 {
+  background: url(../images/ruleTab1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .tab .tab2 {
+  background: url(../images/ruleTab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .tab .act1 {
+  background: url(../images/ruleTabAct1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .tab .act2 {
+  background: url(../images/ruleTabAct2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .box {
+  width: 7.81333rem;
+  height: 8.5rem;
+  margin: 0 auto 0;
+  overflow-y: scroll;
+}
+
+.rule .rule_in .box::-webkit-scrollbar {
+  display: none;
+}
+
+.rule .rule_in .box img {
+  display: block;
+  width: 100%;
+}
+
+.rule .rule_in .box .img2 {
+  display: none;
+}
+
+.rule .rule_in .box2 {
+  width: 8.29333rem;
+}
+
+.end {
+  position: fixed;
+  z-index: 99;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: none;
+}
+
+.end .end_in {
+  width: 7rem;
+  height: 5.48rem;
+  background: url(../images/endBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+}
+
+.end .but {
+  width: 3.14667rem;
+  height: 1.22667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0.81333rem;
+}
+
+.records {
+  position: fixed;
+  z-index: 99;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: none;
+}
+
+.records .records_in {
+  width: 9.61333rem;
+  height: 8.48rem;
+  background: url(../images/recordsBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+}
+
+.records .records_in .title {
+  width: 5.4rem;
+  display: flex;
+  justify-content: space-between;
+  color: #8956AA;
+  font-weight: 500;
+  font-size: 0.36rem;
+  margin: 2.49333rem auto 0.48rem;
+  text-align: center;
+}
+
+.records .records_in .title div {
+  width: 2.7rem;
+}
+
+.records .records_in ul {
+  width: 5.4rem;
+  height: 3.4rem;
+  margin: 0 auto;
+  overflow-y: scroll;
+}
+
+.records .records_in ul::-webkit-scrollbar {
+  display: none;
+}
+
+.records .records_in ul li {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  text-align: right;
+  margin-bottom: 0.28rem;
+}
+
+.records .records_in ul li div {
+  width: 2.7rem;
+  box-sizing: border-box;
+  padding-right: 0.64rem;
+  color: #8956AA;
+  font-size: 0.26667rem;
+  font-weight: 400;
+}
+
+.records .records_in ul li div p {
+  margin-bottom: 0.06667rem;
+}
+
+.records .records_in ul li div b {
+  font-size: 0.21333rem;
+}
+
+.records .records_in ul li .div2 {
+  text-align: center;
+  padding: 0;
+}
+
+.records .records_in ul .null .nulls {
+  text-align: center;
+  text-indent: 0.6rem;
+}

view/yinmeng/activity/2024-cityLove/css/index.scss

@@ -0,0 +1,743 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #F9E4D6;
+}
+
+.rabbit {
+    z-index: 999;
+    width: px2rem(60);
+    height: px2rem(60);
+}
+
+// 返回按钮
+.back {
+    position: fixed;
+    top: px2rem(70);
+    left: px2rem(34);
+    z-index: 99;
+    width: px2rem(62);
+    height: px2rem(62);
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    p {
+        color: #fff;
+        font-size: px2rem(32);
+        position: absolute;
+        width: 9rem;
+        left: 0;
+        top: 0;
+        height: 100%;
+        text-align: center;
+        line-height: px2rem(62);
+    }
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(870);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    margin: 0 auto px2rem(0);
+
+    .rule_icon {
+        position: absolute;
+        width: px2rem(132);
+        height: px2rem(73);
+        right: 0;
+        top: 4.6rem;
+    }
+
+    .tab {
+        width: px2rem(592);
+        height: px2rem(102);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(573);
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            width: px2rem(260);
+            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%;
+        }
+
+        .act1 {
+            background: url(../images/tabAct1.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .act2 {
+            background: url(../images/tabAct2.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+}
+
+.page1 {
+    // display: none;
+
+    .page1Box1 {
+        width: px2rem(750);
+        height: px2rem(731);
+        display: block;
+        margin: -2.6rem auto 0rem;
+        position: relative;
+    }
+
+    .page1Box2 {
+        width: px2rem(750);
+        height: px2rem(933);
+        display: block;
+        margin: -1.1rem auto 0rem;
+        position: relative;
+    }
+
+    .page1Box3 {
+        width: px2rem(750);
+        height: px2rem(921);
+        display: block;
+        margin: -1.1rem auto 0rem;
+        position: relative;
+    }
+
+    .page1Box4 {
+        width: px2rem(750);
+        height: px2rem(1125);
+        margin: -1.1rem auto 0rem;
+        position: relative;
+        background: url(../images/page1Box4.png) no-repeat 100% 100%;
+        background-size: 100% 100%;
+
+        .left {
+            width: px2rem(261);
+            height: px2rem(63);
+            line-height: px2rem(61);
+            background: url(../images/page1Box4_left.png) no-repeat;
+            background-size: 100% 100%;
+            color: #FF5B8D;
+            font-size: px2rem(21);
+            position: absolute;
+            left: 0;
+            top: px2rem(202);
+            text-indent: 2.55rem;
+            font-weight: bold;
+        }
+
+        .right {
+            width: px2rem(261);
+            height: px2rem(63);
+            position: absolute;
+            right: 0;
+            top: px2rem(202);
+        }
+
+        .dayLimit {
+            width: px2rem(57);
+            height: px2rem(27);
+            line-height: px2rem(27);
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(12);
+            font-weight: 500;
+            position: absolute;
+            top: px2rem(308);
+            background: url(../images/dayLimit.png) no-repeat;
+            background-size: 100% 100%;
+            text-indent: 0.05rem;
+        }
+
+        .dayLimit1 {
+            left: px2rem(211);
+        }
+
+        .dayLimit2 {
+            left: px2rem(412);
+        }
+
+        .dayLimit3 {
+            left: px2rem(617);
+        }
+
+        .convert {
+            width: px2rem(130);
+            height: px2rem(46);
+            position: absolute;
+        }
+
+        .convert1 {
+            left: px2rem(103);
+            top: px2rem(475);
+        }
+
+        .convert2 {
+            left: px2rem(303);
+            top: px2rem(475);
+        }
+
+        .convert3 {
+            left: px2rem(510);
+            top: px2rem(475);
+        }
+
+        .convert4 {
+            left: px2rem(103);
+            top: px2rem(709);
+        }
+
+        .convert5 {
+            left: px2rem(303);
+            top: px2rem(709);
+        }
+
+        .convert6 {
+            left: px2rem(510);
+            top: px2rem(709);
+        }
+
+        .convert7 {
+            left: px2rem(210);
+            top: px2rem(949);
+        }
+
+        .convert8 {
+            left: px2rem(409);
+            top: px2rem(949);
+        }
+    }
+}
+
+.page2 {
+    display: none;
+    width: px2rem(750);
+    height: px2rem(1542);
+    background: url(../images/page2.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    margin: -2.6rem auto px2rem(100);
+
+    .first {
+        .left_ts {
+            width: px2rem(162);
+            height: px2rem(160);
+            position: absolute;
+            left: px2rem(162);
+            top: px2rem(201);
+            z-index: 2;
+        }
+
+        .right_ts {
+            width: px2rem(162);
+            height: px2rem(160);
+            position: absolute;
+            right: px2rem(162);
+            top: px2rem(201);
+            z-index: 2;
+        }
+
+        .left_tx {
+            width: px2rem(132);
+            height: px2rem(132);
+            border-radius: 50%;
+            position: absolute;
+            left: px2rem(175);
+            top: px2rem(217);
+        }
+
+        .right_tx {
+            width: px2rem(132);
+            height: px2rem(132);
+            border-radius: 50%;
+            position: absolute;
+            right: px2rem(175);
+            top: px2rem(217);
+        }
+
+        .score {
+            width: 1.5rem;
+            text-align: center;
+            -webkit-text-stroke: px2rem(1) #FE5A9F;
+            /* Safari */
+            font-size: px2rem(21);
+            color: #fff;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 3.82667rem;
+            font-weight: bold;
+        }
+
+        .leftNick {
+            width: px2rem(162);
+            text-align: center;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            position: absolute;
+            left: px2rem(168);
+            top: px2rem(375);
+            color: #B8004E;
+            font-weight: bold;
+            font-size: px2rem(21);
+        }
+
+        .rightNick {
+            width: px2rem(162);
+            text-align: center;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            position: absolute;
+            right: px2rem(168);
+            top: px2rem(375);
+            color: #B8004E;
+            font-weight: bold;
+            font-size: px2rem(21);
+        }
+    }
+
+    .notFirst {
+        width: px2rem(666);
+        height: 12rem;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(535);
+        overflow-y: scroll;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        li {
+            width: px2rem(666);
+            height: px2rem(137);
+            background: url(../images/listBg.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            overflow: hidden;
+
+            .num {
+                width: px2rem(50);
+                height: 100%;
+                line-height: px2rem(137);
+                text-align: center;
+                color: #B16B74;
+                font-size: px2rem(23);
+                font-weight: 500;
+                float: left;
+                margin-left: 0.52rem;
+                margin-right: px2rem(15);
+            }
+
+            .left_tx {
+                width: px2rem(82);
+                height: px2rem(82);
+                border-radius: px2rem(82);
+                float: left;
+                margin-top: px2rem(29);
+                border: px2rem(2) solid #FFABC7;
+                margin-right: px2rem(14);
+            }
+
+            .right_tx {
+                width: px2rem(82);
+                height: px2rem(82);
+                border-radius: px2rem(82);
+                float: left;
+                margin-top: px2rem(29);
+                border: px2rem(2) solid #FFABC7;
+            }
+
+            .love {
+                width: px2rem(77);
+                height: px2rem(68);
+                position: absolute;
+                left: px2rem(158);
+                top: px2rem(38);
+            }
+
+            .nickLeft {
+                width: 2.2rem;
+                color: #FF658E;
+                font-size: px2rem(21);
+                font-weight: 500;
+                position: absolute;
+                left: px2rem(300);
+                top: px2rem(44);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .nickRight {
+                width: 2.2rem;
+                color: #FF658E;
+                font-size: px2rem(21);
+                font-weight: 500;
+                position: absolute;
+                left: px2rem(300);
+                top: px2rem(74);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .score {
+                float: right;
+                height: 100%;
+                line-height: px2rem(137);
+                color: #FE5F93;
+                font-size: px2rem(24);
+                margin-right: px2rem(75);
+                font-weight: 500;
+            }
+        }
+    }
+
+    .my {
+        width: px2rem(750);
+        height: 3.16rem;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        background: url(../images/my.png) no-repeat;
+        background-size: 100% 100%;
+        background: url(../images/my2.png) no-repeat;
+        background-size: 100% 100%;
+        transition: all .3s;
+        z-index: 3;
+
+        .more {
+            width: px2rem(93);
+            height: px2rem(93);
+            position: absolute;
+            right: px2rem(7);
+            top: px2rem(-31);
+        }
+
+        ul {
+            width: 8.88rem;
+            height: 1.82667rem;
+            margin: 1.10667rem auto 0;
+            overflow-y: hidden;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            li {
+                width: 100%;
+                height: px2rem(137);
+                background: url(../images/myList.png) no-repeat;
+                background-size: 100% 100%;
+                position: relative;
+                margin-bottom: px2rem(8);
+                overflow: hidden;
+
+                .num {
+                    width: px2rem(50);
+                    height: 100%;
+                    line-height: px2rem(137);
+                    text-align: center;
+                    color: #B16B74;
+                    font-size: px2rem(23);
+                    font-weight: 500;
+                    float: left;
+                    margin-left: 0.52rem;
+                    margin-right: px2rem(15);
+                }
+
+                .left_tx {
+                    width: px2rem(82);
+                    height: px2rem(82);
+                    border-radius: px2rem(82);
+                    float: left;
+                    margin-top: px2rem(29);
+                    border: px2rem(2) solid #FFABC7;
+                    margin-right: px2rem(14);
+                }
+
+                .right_tx {
+                    width: px2rem(82);
+                    height: px2rem(82);
+                    border-radius: px2rem(82);
+                    float: left;
+                    margin-top: px2rem(29);
+                    border: px2rem(2) solid #FFABC7;
+                }
+
+                .love {
+                    width: px2rem(77);
+                    height: px2rem(68);
+                    position: absolute;
+                    left: px2rem(158);
+                    top: px2rem(38);
+                }
+
+                .nickLeft {
+                    width: 2.2rem;
+                    color: #FF658E;
+                    font-size: px2rem(21);
+                    font-weight: 500;
+                    position: absolute;
+                    left: px2rem(300);
+                    top: px2rem(44);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                .nickRight {
+                    width: 2.2rem;
+                    color: #FF658E;
+                    font-size: px2rem(21);
+                    font-weight: 500;
+                    position: absolute;
+                    left: px2rem(300);
+                    top: px2rem(74);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                .score {
+                    float: right;
+                    height: 100%;
+                    line-height: px2rem(137);
+                    color: #FE5F93;
+                    font-size: px2rem(24);
+                    margin-right: px2rem(75);
+                    font-weight: 500;
+                }
+
+            }
+
+            .null {
+                background: none;
+                text-align: center;
+                line-height: px2rem(137);
+                color: #FF658E;
+                font-size: px2rem(30);
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+.rule {
+    position: fixed;
+    z-index: 99;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .6);
+    display: none;
+
+    .rule_in {
+        width: px2rem(683);
+        height: px2rem(989);
+        background: url(../images/ruleBg.png) no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        overflow: hidden;
+
+        .tab {
+            width: px2rem(498);
+            height: px2rem(92);
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(180) auto px2rem(19);
+
+            div {
+                width: px2rem(235);
+                height: px2rem(92);
+            }
+
+            .tab1 {
+                background: url(../images/ruleTab1.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .tab2 {
+                background: url(../images/ruleTab2.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .act1 {
+                background: url(../images/ruleTabAct1.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .act2 {
+                background: url(../images/ruleTabAct2.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .box {
+            width: px2rem(586);
+            height: 8.5rem;
+            margin: 0 auto 0;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+            }
+            .img2{
+                display: none;
+            }
+        }
+
+        .box2 {
+            width: px2rem(622);
+        }
+    }
+}
+
+.end {
+    position: fixed;
+    z-index: 99;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .6);
+    display: none;
+
+    .end_in {
+        width: px2rem(525);
+        height: px2rem(411);
+        background: url(../images/endBg.png) no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        overflow: hidden;
+    }
+
+    .but {
+        width: px2rem(236);
+        height: px2rem(92);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: px2rem(61);
+    }
+}
+
+.records {
+    position: fixed;
+    z-index: 99;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .6);
+    display: none;
+
+    .records_in {
+        width: px2rem(721);
+        height: px2rem(636);
+        background: url(../images/recordsBg.png) no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        overflow: hidden;
+
+        .title {
+            width: 5.4rem;
+            display: flex;
+            justify-content: space-between;
+            color: #8956AA;
+            font-weight: 500;
+            font-size: px2rem(27);
+            margin: px2rem(187) auto px2rem(36);
+            text-align: center;
+
+            div {
+                width: 2.7rem;
+            }
+        }
+
+        ul {
+            width: 5.4rem;
+            height: 3.4rem;
+            margin: 0 auto;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            li {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                text-align: right;
+                margin-bottom: px2rem(21);
+
+                div {
+                    width: 2.7rem;
+                    box-sizing: border-box;
+                    padding-right: 0.64rem;
+                    color: #8956AA;
+                    font-size: px2rem(20);
+                    font-weight: 400;
+
+                    p {
+                        margin-bottom: px2rem(5);
+                    }
+
+                    b {
+                        font-size: px2rem(16);
+                    }
+                }
+
+                .div2 {
+                    text-align: center;
+                    padding: 0;
+                }
+            }
+
+            .null {
+                .nulls {
+                    text-align: center;
+                    text-indent: 0.6rem;
+                }
+            }
+        }
+    }
+}