调淡加载层

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

@@ -0,0 +1,553 @@
+html,
+body {
+  width: 100%;
+  background: linear-gradient(0deg, #EBC8FA 0%, #FCB0EB 99%);
+}
+
+.rabbit {
+  z-index: 999;
+}
+
+.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: 10.6rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+  z-index: 2;
+}
+
+.header .giftBox {
+  width: 8.82667rem;
+  height: 3.2rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.97333rem;
+}
+
+.header .tab {
+  width: 6.4rem;
+  height: 1.10667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 9.52rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header .tab div {
+  width: 2.82667rem;
+  height: 1.10667rem;
+  line-height: 1.10667rem;
+  color: #F1E8F6;
+  font-size: 0.37333rem;
+  text-align: center;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100%, 100%;
+}
+
+.header .tab .active {
+  background: url(../images/tab_active.png) no-repeat;
+  background-size: 100%, 100%;
+}
+
+.header .rule_iaon {
+  width: 1.6rem;
+  height: 0.74667rem;
+  line-height: 0.62667rem;
+  text-align: center;
+  text-indent: 15px;
+  color: #fff;
+  font-size: 0.24rem;
+  position: absolute;
+  right: 0rem;
+  top: 5.33333rem;
+  background: url(../images/rule_icon.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .activity1 {
+  width: 10rem;
+  height: 11.89333rem;
+  background: url(../images/activity1Bg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -0.57333rem auto 0.12rem;
+  position: relative;
+}
+
+.page1 .activity1 div {
+  position: absolute;
+  right: 1rem;
+  width: 2rem;
+  height: 0.81333rem;
+  line-height: 0.64rem;
+  text-align: center;
+  font-size: 0.28rem;
+  color: #E7FEFF;
+  background: url(../images/lqOut.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .activity1 .but1 {
+  top: 3.01333rem;
+}
+
+.page1 .activity1 .but2 {
+  top: 5.36rem;
+}
+
+.page1 .activity1 .but3 {
+  top: 7.72rem;
+}
+
+.page1 .activity1 .but4 {
+  top: 10.06667rem;
+}
+
+.page1 .activity1 .out {
+  background: url(../images/lq.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page1 .activity2 {
+  width: 10rem;
+  height: 17.8rem;
+  margin: 0 auto 0;
+  display: block;
+}
+
+.page2 {
+  display: none;
+}
+
+.page2 .listTab {
+  width: 9.2rem;
+  height: 1.22667rem;
+  margin: 0.4rem auto 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.page2 .listTab div {
+  width: 4.6rem;
+  height: 100%;
+  text-align: center;
+  color: #F1E8F6;
+  font-size: 0.32rem;
+  line-height: 1.41333rem;
+  background: url(../images/listTab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .listTab .active {
+  font-size: 0.4rem;
+  line-height: 1.22667rem;
+  background: url(../images/listTabActive.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .listBg {
+  width: 9.2rem;
+  min-height: 17rem;
+  margin: 0 auto 0.5rem;
+  background: linear-gradient(0deg, #B483D7 0%, #AD61FA 48%, #CB80FB 100%);
+  border-radius: 0 0 0.26667rem 0.26667rem;
+  overflow: hidden;
+}
+
+.page2 .listBg .dayTab {
+  width: 7.53333rem;
+  height: 0.88rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0.58667rem auto 0.36rem;
+}
+
+.page2 .listBg .dayTab div {
+  width: 2.22667rem;
+  height: 0.88rem;
+  line-height: 0.90667rem;
+  text-align: center;
+  color: #F1E8F6;
+  font-size: 0.29333rem;
+  background: url(../images/dayTab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .listBg .dayTab .active {
+  background: url(../images/dayTab_active.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.page2 .listBg .topBox {
+  width: 8.85333rem;
+  height: 7.57333rem;
+  background: url(../images/topBox.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+}
+
+.page2 .listBg .topBox .no1 {
+  width: 2.4rem;
+  height: 2.32rem;
+  position: absolute;
+  top: 0.96rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no1 .ts {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .listBg .topBox .no1 .tx {
+  width: 1.78667rem;
+  height: 1.78667rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.33333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no1 .num {
+  width: 1.77333rem;
+  height: 0.74667rem;
+  position: absolute;
+  top: -0.77333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no1 p {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.36rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .listBg .topBox .no1 span {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.73333rem;
+}
+
+.page2 .listBg .topBox .no2 {
+  width: 2.4rem;
+  height: 2.32rem;
+  position: absolute;
+  top: 2.42667rem;
+  left: 0.6rem;
+}
+
+.page2 .listBg .topBox .no2 .ts {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .listBg .topBox .no2 .tx {
+  width: 1.78667rem;
+  height: 1.78667rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.33333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no2 .num {
+  width: 1.77333rem;
+  height: 0.74667rem;
+  position: absolute;
+  top: -0.77333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no2 p {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.36rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .listBg .topBox .no2 span {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.73333rem;
+}
+
+.page2 .listBg .topBox .no3 {
+  width: 2.4rem;
+  height: 2.32rem;
+  position: absolute;
+  top: 2.42667rem;
+  right: 0.6rem;
+}
+
+.page2 .listBg .topBox .no3 .ts {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.page2 .listBg .topBox .no3 .tx {
+  width: 1.78667rem;
+  height: 1.78667rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.33333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no3 .num {
+  width: 1.77333rem;
+  height: 0.74667rem;
+  position: absolute;
+  top: -0.77333rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.page2 .listBg .topBox .no3 p {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.36rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page2 .listBg .topBox .no3 span {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  position: absolute;
+  left: 0;
+  bottom: -0.73333rem;
+}
+
+.page2 .listBg .list {
+  width: 8.13333rem;
+  margin: 0 auto;
+}
+
+.page2 .listBg .list li {
+  width: 100%;
+  height: 1.6rem;
+  line-height: 1.6rem;
+  border-radius: 0.26667rem;
+  background: #9B50DB;
+  margin-bottom: 0.13333rem;
+}
+
+.page2 .listBg .list li .num {
+  width: 0.6rem;
+  text-align: center;
+  color: #fff;
+  font-weight: 400;
+  height: 100%;
+  margin: 0 0.26667rem 0 0.33333rem;
+  float: left;
+  font-size: 0.49333rem;
+}
+
+.page2 .listBg .list li .tx {
+  width: 1.25333rem;
+  height: 1.25333rem;
+  border-radius: 50%;
+  margin-right: 0.32rem;
+  margin-top: 0.21333rem;
+  float: left;
+}
+
+.page2 .listBg .list li .nick {
+  float: left;
+  width: 2.1rem;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFFFFF;
+  font-size: 0.38667rem;
+  font-weight: 400;
+}
+
+.page2 .listBg .list li .score {
+  float: right;
+  margin-right: 0.36rem;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  color: #fff;
+}
+
+.page2 .myList {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  height: 1.98667rem;
+  line-height: 1.98667rem;
+  background: #734DC1;
+  z-index: 3;
+}
+
+.page2 .myList .num {
+  width: 1.6rem;
+  text-align: center;
+  color: #fff;
+  font-weight: 400;
+  height: 100%;
+  margin: 0 0.26667rem 0 0.33333rem;
+  float: left;
+  font-size: 0.49333rem;
+}
+
+.page2 .myList .tx {
+  width: 1.25333rem;
+  height: 1.25333rem;
+  border-radius: 50%;
+  margin-right: 0.32rem;
+  margin-top: 0.33333rem;
+  float: left;
+}
+
+.page2 .myList .nick {
+  float: left;
+  width: 2.1rem;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #FFFFFF;
+  font-size: 0.38667rem;
+  font-weight: 400;
+}
+
+.page2 .myList .score {
+  float: right;
+  margin-right: 0.36rem;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  color: #fff;
+}
+
+.apple {
+  width: 100%;
+  height: 1.97333rem;
+  line-height: 1.97333rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.34667rem;
+}
+
+.rule {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 99;
+}
+
+.rule .rule_iaon {
+  width: 9.68rem;
+  height: 14.46667rem;
+  background: url(../images/ruleBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  overflow-y: scroll;
+}
+
+.rule .rule_iaon .box {
+  position: absolute;
+  width: 8.61333rem;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.6rem;
+  height: 12rem;
+  overflow-y: scroll;
+}
+
+.rule .rule_iaon .box img {
+  width: 100%;
+  height: 47.41333rem;
+  display: block;
+}
+
+.layui-m-layershade {
+  background-color: rgba(0, 0, 0, 0.3) !important;
+}

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

@@ -0,0 +1,562 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: linear-gradient(0deg, #EBC8FA 0%, #FCB0EB 99%);
+}
+
+.rabbit {
+    z-index: 999;
+}
+
+.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(795);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+    z-index: 2;
+
+    .giftBox {
+        width: px2rem(662);
+        height: px2rem(240);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(448);
+    }
+
+    .tab {
+        width: px2rem(480);
+        height: px2rem(83);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(714);
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            width: px2rem(212);
+            height: px2rem(83);
+            line-height: px2rem(83);
+            color: #F1E8F6;
+            font-size: px2rem(28);
+            text-align: center;
+            background: url(../images/tab.png) no-repeat;
+            background-size: 100%, 100%;
+        }
+
+        .active {
+            background: url(../images/tab_active.png) no-repeat;
+            background-size: 100%, 100%;
+        }
+    }
+
+    .rule_iaon {
+        width: px2rem(120);
+        height: px2rem(56);
+        line-height: px2rem(47);
+        text-align: center;
+        text-indent: 15px;
+        color: #fff;
+        font-size: px2rem(18);
+        position: absolute;
+        right: px2rem(0);
+        top: px2rem(400);
+        background: url(../images/rule_icon.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.page1 {
+    // display: none;
+
+    .activity1 {
+        width: px2rem(750);
+        height: px2rem(892);
+        background: url(../images/activity1Bg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: px2rem(-43) auto px2rem(9);
+        position: relative;
+
+        div {
+            position: absolute;
+            right: px2rem(75);
+            width: px2rem(150);
+            height: px2rem(61);
+            line-height: px2rem(48);
+            text-align: center;
+            font-size: px2rem(21);
+            color: #E7FEFF;
+            background: url(../images/lqOut.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .but1 {
+            top: px2rem(226);
+        }
+
+        .but2 {
+            top: px2rem(402);
+        }
+
+        .but3 {
+            top: px2rem(579);
+        }
+
+        .but4 {
+            top: px2rem(755);
+        }
+
+        .out {
+            background: url(../images/lq.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .activity2 {
+        width: px2rem(750);
+        height: px2rem(1335);
+        margin: 0 auto 0;
+        display: block;
+    }
+}
+
+.page2 {
+    display: none;
+
+    .listTab {
+        width: px2rem(690);
+        height: px2rem(92);
+        margin: px2rem(30) auto 0;
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            width: px2rem(345);
+            height: 100%;
+            text-align: center;
+            color: #F1E8F6;
+            font-size: px2rem(24);
+            line-height: px2rem(106);
+            background: url(../images/listTab.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .active {
+            font-size: px2rem(30);
+            line-height: px2rem(92);
+            background: url(../images/listTabActive.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .listBg {
+        width: px2rem(690);
+        min-height: 17rem;
+        margin: 0 auto 0.5rem;
+        background: linear-gradient(0deg, #B483D7 0%, #AD61FA 48%, #CB80FB 100%);
+        border-radius: 0 0 px2rem(20) px2rem(20);
+        overflow: hidden;
+
+        .dayTab {
+            width: px2rem(565);
+            height: px2rem(66);
+            display: flex;
+            justify-content: space-between;
+            margin: px2rem(44) auto px2rem(27);
+
+            div {
+                width: px2rem(167);
+                height: px2rem(66);
+                line-height: px2rem(68);
+                text-align: center;
+                color: #F1E8F6;
+                font-size: px2rem(22);
+                background: url(../images/dayTab.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .active {
+                background: url(../images/dayTab_active.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .topBox {
+            width: px2rem(664);
+            height: px2rem(568);
+            background: url(../images/topBox.png) no-repeat;
+            background-size: 100% 100%;
+            margin: 0 auto 0;
+            position: relative;
+
+            .no1 {
+                width: px2rem(180);
+                height: px2rem(174);
+                position: absolute;
+                top: px2rem(72);
+                left: 50%;
+                transform: translateX(-50%);
+
+                .ts {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    z-index: 2;
+                }
+
+                .tx {
+                    width: px2rem(134);
+                    height: px2rem(134);
+                    border-radius: 50%;
+                    position: absolute;
+                    top: px2rem(25);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                .num {
+                    width: px2rem(133);
+                    height: px2rem(56);
+                    position: absolute;
+                    top: px2rem(-58);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                p {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-27);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                span {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-55);
+                }
+            }
+
+            .no2 {
+                width: px2rem(180);
+                height: px2rem(174);
+                position: absolute;
+                top: px2rem(182);
+                left: px2rem(45);
+
+                .ts {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    z-index: 2;
+                }
+
+                .tx {
+                    width: px2rem(134);
+                    height: px2rem(134);
+                    border-radius: 50%;
+                    position: absolute;
+                    top: px2rem(25);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                .num {
+                    width: px2rem(133);
+                    height: px2rem(56);
+                    position: absolute;
+                    top: px2rem(-58);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                p {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-27);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                span {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-55);
+                }
+            }
+
+            .no3 {
+                width: px2rem(180);
+                height: px2rem(174);
+                position: absolute;
+                top: px2rem(182);
+                right: px2rem(45);
+
+                .ts {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    z-index: 2;
+                }
+
+                .tx {
+                    width: px2rem(134);
+                    height: px2rem(134);
+                    border-radius: 50%;
+                    position: absolute;
+                    top: px2rem(25);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                .num {
+                    width: px2rem(133);
+                    height: px2rem(56);
+                    position: absolute;
+                    top: px2rem(-58);
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+
+                p {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-27);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                span {
+                    width: 100%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: px2rem(21);
+                    position: absolute;
+                    left: 0;
+                    bottom: px2rem(-55);
+                }
+            }
+        }
+
+        .list {
+            width: px2rem(610);
+            margin: 0 auto;
+
+            li {
+                width: 100%;
+                height: px2rem(120);
+                line-height: px2rem(120);
+                border-radius: px2rem(20);
+                background: #9B50DB;
+                margin-bottom: px2rem(10);
+
+                .num {
+                    width: px2rem(45);
+                    text-align: center;
+                    color: #fff;
+                    font-weight: 400;
+                    height: 100%;
+                    margin: 0 px2rem(20) 0 px2rem(25);
+                    float: left;
+                    font-size: px2rem(37);
+                }
+
+                .tx {
+                    width: px2rem(94);
+                    height: px2rem(94);
+                    border-radius: 50%;
+                    margin-right: px2rem(24);
+                    margin-top: px2rem(16);
+                    float: left;
+                }
+
+                .nick {
+                    float: left;
+                    width: 2.1rem;
+                    height: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    color: #FFFFFF;
+                    font-size: px2rem(29);
+                    font-weight: 400;
+                }
+
+                .score {
+                    float: right;
+                    margin-right: px2rem(27);
+                    font-size: px2rem(26);
+                    font-weight: 400;
+                    color: #fff;
+                }
+            }
+        }
+
+    }
+
+    .myList {
+        position: fixed;
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        height: px2rem(149);
+        line-height: px2rem(149);
+        background: #734DC1;
+        z-index: 3;
+
+        .num {
+            width: 1.6rem;
+            text-align: center;
+            color: #fff;
+            font-weight: 400;
+            height: 100%;
+            margin: 0 px2rem(20) 0 px2rem(25);
+            float: left;
+            font-size: px2rem(37);
+        }
+
+        .tx {
+            width: px2rem(94);
+            height: px2rem(94);
+            border-radius: 50%;
+            margin-right: px2rem(24);
+            margin-top: px2rem(25);
+            float: left;
+        }
+
+        .nick {
+            float: left;
+            width: 2.1rem;
+            height: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: #FFFFFF;
+            font-size: px2rem(29);
+            font-weight: 400;
+        }
+
+        .score {
+            float: right;
+            margin-right: px2rem(27);
+            font-size: px2rem(26);
+            font-weight: 400;
+            color: #fff;
+        }
+    }
+
+}
+
+.apple {
+    width: 100%;
+    height: px2rem(148);
+    line-height: px2rem(148);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(26);
+}
+
+.rule {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, .6);
+    z-index: 99;
+
+    .rule_iaon {
+        width: px2rem(726);
+        height: px2rem(1085);
+        background: url(../images/ruleBg.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        overflow-y: scroll;
+
+        .box {
+            position: absolute;
+            width: px2rem(646);
+            left: 50%;
+            transform: translateX(-50%);
+            top: 1.6rem;
+            height: 12rem;
+            overflow-y: scroll;
+
+            img {
+                width: 100%;
+                height: px2rem(3556);
+                display: block;
+            }
+        }
+    }
+}
+.layui-m-layershade{
+    background-color: rgba(0,0,0,.3) !important;
+}

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

@@ -0,0 +1,118 @@
+<!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">
+</head>
+
+<body>
+    <!-- 顶部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- header -->
+    <div class="header">
+        <!-- 奖励展示 -->
+        <img src="./images/giftBox.png" alt="" class="giftBox">
+        <!-- tab -->
+        <div class="tab">
+            <div class="active">活动攻略</div>
+            <div>榜单</div>
+        </div>
+        <!-- 规则Icon -->
+        <div class="rule_iaon">活动规则></div>
+    </div>
+    <!-- 页面一 -->
+    <div class="page1">
+        <!-- 活动1 -->
+        <div class="activity1">
+            <div class="but1">今日未领取</div>
+            <div class="but2">今日未领取</div>
+            <div class="but3">今日未领取</div>
+            <div class="but4">今日未领取</div>
+        </div>
+        <!-- 活动2 -->
+        <img src="./images/activity2.png" alt="" class="activity2">
+    </div>
+    <!-- 页面二 -->
+    <div class="page2">
+        <!-- 榜单切换 -->
+        <div class="listTab">
+            <div class="active">勇气榜（送礼）</div>
+            <div>狂欢榜（收礼）</div>
+        </div>
+        <!-- 榜单盒子 -->
+        <div class="listBg">
+            <!-- 日榜切换 -->
+            <div class="dayTab">
+                <div>昨日榜单</div>
+                <div>今日榜单</div>
+                <div class="active">总榜</div>
+            </div>
+            <!-- 前三 -->
+            <div class="topBox">
+                <div class="no1">
+                    <img src="./images/no1.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/num1.png" alt="" class="num">
+                    <p>虚位以待</p>
+                    <span>勇气值:0</span>
+                </div>
+                <div class="no2">
+                    <img src="./images/no2.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/num2.png" alt="" class="num">
+                    <p>虚位以待</p>
+                    <span>勇气值:0</span>
+                </div>
+                <div class="no3">
+                    <img src="./images/no3.png" alt="" class="ts">
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <img src="./images/num3.png" alt="" class="num">
+                    <p>虚位以待</p>
+                    <span>勇气值:0</span>
+                </div>
+            </div>
+            <!-- 非前三 -->
+            <ul class="list">
+                <li>
+                    <div class="num">04</div>
+                    <img src="./images/logo.png" alt="" class="tx">
+                    <div class="nick">用户昵称</div>
+                    <div class="score">勇气值:8888.8w</div>
+                </li>
+            </ul>
+        </div>
+        <!-- 自己榜单 -->
+        <div class="myList">
+            <div class="num">未上榜</div>
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="nick">用户昵称</div>
+            <div class="score">勇气值:8888.8w</div>
+        </div>
+    </div>
+    <!-- 本活动与Apple inc.无关； -->
+    <div class="apple">本活动与Apple inc.无关；</div>
+    <!-- 规则弹窗 -->
+    <div class="rule">
+        <div class="rule_iaon">
+            <div class="box">
+                <img src="./images/rule_in.png" alt="">
+            </div>
+        </div>
+    </div>
+</body>
+
+</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/wow.js"></script>
+<script src="./js/index.js"></script>

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

@@ -0,0 +1,192 @@
+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 rankType = 2;//默认送礼总榜
+var type = 1;//默认送礼总榜
+var time = null;//当前日期
+var dayTime = null;//存储日期;
+// 初始化函数
+$(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)
+            }
+        })
+        getConfig();
+    }, 100)
+})
+// 获取配置接口
+function getConfig () {
+    showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/2023DoubleEleven/task/getConfig',
+        success (res) {
+            if (res.code === 200) {
+                // 处理任务状态
+                res.data.dailyTaskList.forEach((res, i) => {
+                    if (res.status == 1) {
+                        $(`.page1 .activity1 .but${i + 1}`).addClass('out');
+                        $(`.page1 .activity1 .but${i + 1}`).text('今日已领取');
+                    }
+                });
+                // 设置日期
+                time = res.timestamp;
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('网络错误，请退出重进')
+        }
+    })
+}
+// tab切换
+$('.header .tab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('active').siblings().removeClass('active');
+    $('.page1').hide();
+    $('.page2').hide();
+    $(`.page${i}`).show();
+    if (i == 2) {
+        $('.page2 .listBg .dayTab div').removeClass('active');
+        $('.page2 .listBg .dayTab div').eq(2).addClass('active');
+        getRank(rankType, type);
+    }
+})
+// 获取榜单接口
+function getRank (rankType, type, date) {
+    $('.page2 .listBg .list li').remove();
+    showLoading()
+    networkRequest({
+        type: 'GEt',
+        url: urlPrefix + '/act/2023DoubleEleven/rank/getRank',
+        data: { rankType, date },
+        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) => {
+                    $(`.page2 .listBg .topBox .no${i + 1} .tx`).attr('src', res.avatar);
+                    $(`.page2 .listBg .topBox .no${i + 1} p`).text(res.nick);
+                    $(`.page2 .listBg .topBox .no${i + 1} span`).text(`${type == 1 ? "勇气值:" : "狂欢值:"}${unitProcessing(res.score, 10000, 1, 'w')}`);
+                })
+                // 非前三
+                var str = '';
+                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">${type == 1 ? "勇气值:" : "狂欢值:"}${unitProcessing(res.score, 10000, 1, 'w')}</div>
+                        </li>
+                    `
+                })
+                $('.page2 .listBg .list').append(str);
+                // 处理自己榜单
+                $('.page2 .myList .num').text(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
+                $('.page2 .myList .tx').attr('src', res.data.meRank.avatar);
+                $('.page2 .myList .nick').text(res.data.meRank.nick);
+                $('.page2 .myList .score').text(`${type == 1 ? "勇气值:" : "狂欢值:"}${unitProcessing(res.data.meRank.score, 10000, 1, 'w')}`);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('网络错误，请退出重进')
+        }
+    })
+}
+// 送礼榜和收礼榜切换
+$('.page2 .listTab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('active').siblings().removeClass('active');
+    $('.page2 .listBg .dayTab div').removeClass('active');
+    $('.page2 .listBg .dayTab div').eq(2).addClass('active');
+    type = i;
+    dayTime = null;
+    if (i == 1) {
+        rankType = 2;
+    } else {
+        rankType = 4;
+    }
+    getRank(rankType, type, dayTime);
+})
+// 日榜和总榜切换
+$('.page2 .listBg .dayTab div').click(function () {
+    var i = $(this).index() + 1;
+    $(this).addClass('active').siblings().removeClass('active');
+    if (i == 3) {
+        dayTime = null;
+        rankType = type == 1 ? 2 : 4;
+    } else if (i == 1) {
+        rankType = type == 1 ? 1 : 3;
+        dayTime = dateFormat(time - 86400000, 'yyyy-MM-dd')
+    } else if (i == 2) {
+        rankType = type == 1 ? 1 : 3;
+        dayTime = dateFormat(time, 'yyyy-MM-dd')
+    }
+    getRank(rankType, type, dayTime);
+})
+// 打开规则
+$('.header .rule_iaon').click(function () {
+    $('.rule').show();
+    bodyScroolFun(true);
+})
+// 关闭规则
+$('.rule').click(function () {
+    $('.rule').hide();
+    bodyScroolFun(false);
+})

view/yinmeng/activity/2023-ruffian/js/wow.js

@@ -0,0 +1,46 @@
+var baba = document.querySelector('body');
+baba.addEventListener('click', function (e) {
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
+    tianJia(e);
+})
+
+var erZi = [];
+function tianJia (e) {
+    var sunZi = document.createElement('div');
+    sunZi.className = 'rabbit';
+    // sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
+    sunZi.innerHTML = '<img src="./images/love.png" alt="">';
+    baba.appendChild(sunZi);
+    erZi.push({
+        el: sunZi,
+        top: e.pageY - 30,
+        left: e.pageX - 20,
+        opacity: 1,
+        scale: 1,
+        color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
+    });
+    move();
+};
+function move () {
+    for (var i = 0; i < erZi.length; i++) {
+        if (erZi[i].opacity <= 0) {
+            baba.removeChild(erZi[i].el);
+            erZi.splice(i, 1);
+            return;
+        }
+        erZi[i].top--;
+        erZi[i].opacity = erZi[i].opacity - 0.04;
+        // erZi[i].scale = erZi[i].scale + 0.0001;
+        erZi[i].el.style.cssText = `
+            top: ${erZi[i].top}px;
+            left: ${erZi[i].left}px;
+            color: ${erZi[i].color};
+            opacity: ${erZi[i].opacity};
+            transform: scale(${erZi[i].scale});
+            position: absolute;
+            `
+
+    }
+    window.requestAnimationFrame(move);
+    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
+}