完成音萌情人节活动

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

@@ -0,0 +1,545 @@
+.layui-m-layershade {
+  background-color: rgba(0, 0, 0, 0.3) !important;
+}
+
+body {
+  width: 10rem;
+  height: 49.29333rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 100% 100%;
+  overflow-y: scroll;
+  position: relative;
+}
+
+.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;
+}
+
+.rule_icon {
+  width: 1.74667rem;
+  height: 1.86667rem;
+  position: absolute;
+  top: 9.41333rem;
+  right: 0rem;
+}
+
+.time {
+  width: 7.89333rem;
+  height: 1.21333rem;
+  background: url(../images/time.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 11.18667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.time span {
+  color: #320959;
+  font-size: 0.32rem;
+  font-weight: bold;
+  position: absolute;
+  height: 0.4rem;
+  line-height: 0.35rem;
+  width: 0.55rem;
+  top: 0.2rem;
+  text-align: center;
+}
+
+.time .sp1 {
+  left: 3.37rem;
+}
+
+.time .sp2 {
+  left: 4.3rem;
+}
+
+.time .sp3 {
+  left: 5.22rem;
+}
+
+.time .sp4 {
+  left: 6.13rem;
+}
+
+.title {
+  width: 4.49333rem;
+  height: 1.02667rem;
+  position: relative;
+  top: 12.1rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.timeOut {
+  width: 7.89333rem;
+  height: 1.21333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 11.18667rem;
+  display: none;
+}
+
+.tab {
+  width: 8.70667rem;
+  position: absolute;
+  top: 13.22667rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-between;
+}
+
+.tab div {
+  width: 2.86667rem;
+  height: 1.16rem;
+}
+
+.tab .tab1 {
+  background: url(../images/tab1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .tab2 {
+  background: url(../images/tab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .tab3 {
+  background: url(../images/tab3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act1 {
+  background: url(../images/tabAct1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act2 {
+  background: url(../images/tabAct2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act3 {
+  background: url(../images/tabAct3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.timeOutTab {
+  width: 2.86667rem;
+  height: 1.16rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 13.22667rem;
+  display: none;
+}
+
+.text {
+  width: 100%;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.33333rem;
+  position: absolute;
+  top: 14.8rem;
+  left: 0;
+}
+
+.top3 {
+  width: 8.85333rem;
+  height: 2.78667rem;
+  background: url(../images/top3Box.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin: 17.6rem auto 0.05333rem;
+}
+
+.top3 .no1 {
+  width: 3.14667rem;
+  height: 3.54667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -3.41333rem;
+}
+
+.top3 .no1 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.top3 .no1 .tx {
+  width: 2.17333rem;
+  height: 2.17333rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.73rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.top3 .no1 p {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0;
+  top: 4.26667rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.top3 .no1 span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.26667rem;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 4.93333rem;
+}
+
+.top3 .no1 b {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.26667rem;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 5.4rem;
+}
+
+.top3 .no1 b i {
+  font-style: normal;
+}
+
+.top3 .no2 {
+  width: 2.8rem;
+  height: 3.14667rem;
+  position: absolute;
+  left: 0;
+  top: -2.4rem;
+}
+
+.top3 .no2 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.top3 .no2 .tx {
+  width: 1.93333rem;
+  height: 1.93333rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.73rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.top3 .no2 p {
+  width: 90%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0.13333rem;
+  top: 3.73333rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.top3 .no2 span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.26667rem;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 4.26667rem;
+}
+
+.top3 .no2 b {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.26667rem;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 4.66667rem;
+}
+
+.top3 .no2 b i {
+  font-style: normal;
+}
+
+.top3 .no3 {
+  width: 2.8rem;
+  height: 3.14667rem;
+  position: absolute;
+  right: 0;
+  top: -2.4rem;
+}
+
+.top3 .no3 .ts {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.top3 .no3 .tx {
+  width: 1.93333rem;
+  height: 1.93333rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.73rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.top3 .no3 p {
+  width: 90%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0.26667rem;
+  top: 3.73333rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.top3 .no3 span {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.26667rem;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 4.26667rem;
+}
+
+.top3 .no3 b {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 0.26667rem;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 4.66667rem;
+}
+
+.top3 .no3 b i {
+  font-style: normal;
+}
+
+.list {
+  width: 8.85333rem;
+  height: 25.8rem;
+  margin: 0 auto;
+}
+
+.list li {
+  width: 100%;
+  height: 2.08rem;
+  margin-bottom: 0.08rem;
+  background: url(../images/liBg.png) no-repeat;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  padding: 0 0.2rem 0 0.6rem;
+}
+
+.list li .num {
+  width: 0.53333rem;
+  height: 100%;
+  line-height: 2.08rem;
+  color: #fff;
+  font-size: 0.46667rem;
+  font-weight: 500;
+  float: left;
+  margin-right: 0.30667rem;
+}
+
+.list li .tx {
+  width: 1.17333rem;
+  height: 1.17333rem;
+  border-radius: 50%;
+  background: url(../images/liTx.png) no-repeat;
+  background-size: 100% 100%;
+  display: block;
+  float: left;
+  margin-top: 0.44rem;
+  margin-right: 0.34667rem;
+}
+
+.list li .box {
+  width: 2.8rem;
+  float: left;
+  color: #fff;
+  font-size: 0.34667rem;
+  font-weight: 500;
+}
+
+.list li .box p {
+  width: 100%;
+  margin-top: 0.6rem;
+  margin-bottom: 0.14667rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list li .score {
+  float: right;
+  height: 100%;
+  line-height: 2.08rem;
+  color: #fff;
+  font-size: 0.34667rem;
+}
+
+.txt {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  color: #FFFFFF;
+  font-size: 0.28rem;
+  font-weight: 500;
+  top: 48.68rem;
+}
+
+.rule {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  display: none;
+}
+
+.rule .rule_in {
+  width: 8.68rem;
+  height: 13.88rem;
+  background: url(../images/ruleBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.rule .rule_in .tabs {
+  width: 7.04rem;
+  height: 1.86667rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 0.54667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.rule .rule_in .tabs div {
+  width: 3.33333rem;
+  height: 1.86667rem;
+}
+
+.rule .rule_in .tabs .tab1 {
+  background: url(../images/ruletab1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .tabs .tab2 {
+  background: url(../images/ruletab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .tabs .ruletabActs1 {
+  background: url(../images/ruletabAct1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .tabs .ruletabActs2 {
+  background: url(../images/ruletabAct2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .box1,
+.rule .rule_in .box2 {
+  width: 8rem;
+  height: 10.68rem;
+  overflow-y: scroll;
+  position: absolute;
+  top: 2.38667rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.rule .rule_in .box1::-webkit-scrollbar,
+.rule .rule_in .box2::-webkit-scrollbar {
+  width: 0;
+  display: none;
+}
+
+.rule .rule_in .box1 img,
+.rule .rule_in .box2 img {
+  display: block;
+  width: 100%;
+  height: 23.98667rem;
+}
+
+.rule .rule_in .box2 {
+  display: none;
+}
+
+.rule .rule_in .box2 img {
+  height: 10.68rem;
+}

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

@@ -0,0 +1,547 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+.layui-m-layershade {
+    background-color: rgba(0, 0, 0, .3) !important;
+}
+
+body {
+    width: px2rem(750);
+    height: px2rem(3697);
+    background: url(../images/bg.png) no-repeat;
+    background-size: 100% 100%;
+    overflow-y: scroll;
+    position: relative;
+}
+
+.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);
+    }
+}
+
+.rule_icon {
+    width: px2rem(131);
+    height: px2rem(140);
+    position: absolute;
+    top: px2rem(706);
+    right: px2rem(0);
+}
+
+.time {
+    width: px2rem(592);
+    height: px2rem(91);
+    background: url(../images/time.png) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: px2rem(839);
+    left: 50%;
+    transform: translateX(-50%);
+
+    span {
+        color: #320959;
+        font-size: px2rem(24);
+        font-weight: bold;
+        position: absolute;
+        height: 0.4rem;
+        line-height: 0.35rem;
+        width: 0.55rem;
+        top: 0.2rem;
+        text-align: center;
+    }
+
+    .sp1 {
+        left: 3.37rem;
+    }
+
+    .sp2 {
+        left: 4.3rem;
+    }
+
+    .sp3 {
+        left: 5.22rem;
+    }
+
+    .sp4 {
+        left: 6.13rem;
+    }
+}
+
+.title {
+    width: px2rem(337);
+    height: px2rem(77);
+    position: relative;
+    top: 12.1rem;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.timeOut {
+    width: px2rem(592);
+    height: px2rem(91);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: px2rem(839);
+    display: none;
+}
+
+.tab {
+    width: px2rem(653);
+    position: absolute;
+    top: px2rem(992);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: space-between;
+
+    div {
+        width: px2rem(215);
+        height: px2rem(87);
+    }
+
+    .tab1 {
+        background: url(../images/tab1.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .tab2 {
+        background: url(../images/tab2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .tab3 {
+        background: url(../images/tab3.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act1 {
+        background: url(../images/tabAct1.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act2 {
+        background: url(../images/tabAct2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act3 {
+        background: url(../images/tabAct3.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.timeOutTab {
+    width: px2rem(215);
+    height: px2rem(87);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: px2rem(992);
+    display: none;
+}
+
+.text {
+    width: 100%;
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(25);
+    position: absolute;
+    top: px2rem(1110);
+    left: 0;
+}
+
+.top3 {
+    width: px2rem(664);
+    height: px2rem(209);
+    background: url(../images/top3Box.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    margin: 17.6rem auto px2rem(4);
+
+    .no1 {
+        width: px2rem(236);
+        height: px2rem(266);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(-256);
+
+        .ts {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        .tx {
+            width: px2rem(163);
+            height: px2rem(163);
+            border-radius: 50%;
+            position: absolute;
+            top: 0.73rem;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        p {
+            width: 100%;
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(32);
+            font-weight: 500;
+            position: absolute;
+            left: 0;
+            top: px2rem(320);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        span {
+            width: 100%;
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(20);
+            text-align: center;
+            position: absolute;
+            left: 0;
+            top: px2rem(370);
+        }
+
+        b {
+            width: 100%;
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(20);
+            text-align: center;
+            position: absolute;
+            left: 0;
+            top: px2rem(405);
+
+            i {
+                font-style: normal;
+            }
+        }
+    }
+
+    .no2 {
+        width: px2rem(210);
+        height: px2rem(236);
+        position: absolute;
+        left: 0;
+        top: -2.4rem;
+
+        .ts {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        .tx {
+            width: px2rem(145);
+            height: px2rem(145);
+            border-radius: 50%;
+            position: absolute;
+            top: 0.73rem;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        p {
+            width: 90%;
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(32);
+            font-weight: 500;
+            position: absolute;
+            left: px2rem(10);
+            top: px2rem(280);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        span {
+            width: 100%;
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(20);
+            text-align: center;
+            position: absolute;
+            left: 0;
+            top: px2rem(320);
+        }
+
+        b {
+            width: 100%;
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(20);
+            text-align: center;
+            position: absolute;
+            left: 0;
+            top: px2rem(350);
+
+            i {
+                font-style: normal;
+            }
+        }
+    }
+
+    .no3 {
+        width: px2rem(210);
+        height: px2rem(236);
+        position: absolute;
+        right: 0;
+        top: -2.4rem;
+
+        .ts {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        .tx {
+            width: px2rem(145);
+            height: px2rem(145);
+            border-radius: 50%;
+            position: absolute;
+            top: 0.73rem;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        p {
+            width: 90%;
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(32);
+            font-weight: 500;
+            position: absolute;
+            left: px2rem(20);
+            top: px2rem(280);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        span {
+            width: 100%;
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(20);
+            text-align: center;
+            position: absolute;
+            left: 0;
+            top: px2rem(320);
+        }
+
+        b {
+            width: 100%;
+            text-align: center;
+            color: #fff;
+            font-size: px2rem(20);
+            text-align: center;
+            position: absolute;
+            left: 0;
+            top: px2rem(350);
+
+            i {
+                font-style: normal;
+            }
+        }
+    }
+}
+
+.list {
+    width: px2rem(664);
+    height: 25.8rem;
+    margin: 0 auto;
+
+    li {
+        width: 100%;
+        height: px2rem(156);
+        margin-bottom: px2rem(6);
+        background: url(../images/liBg.png) no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        padding: 0 px2rem(15) 0 px2rem(45);
+
+        .num {
+            width: px2rem(40);
+            height: 100%;
+            line-height: px2rem(156);
+            color: #fff;
+            font-size: px2rem(35);
+            font-weight: 500;
+            float: left;
+            margin-right: px2rem(23);
+        }
+
+        .tx {
+            width: px2rem(88);
+            height: px2rem(88);
+            border-radius: 50%;
+            background: url(../images/liTx.png) no-repeat;
+            background-size: 100% 100%;
+            display: block;
+            float: left;
+            margin-top: px2rem(33);
+            margin-right: px2rem(26);
+        }
+
+        .box {
+            width: px2rem(210);
+            float: left;
+            color: #fff;
+            font-size: px2rem(26);
+            font-weight: 500;
+
+            p {
+                width: 100%;
+                margin-top: px2rem(45);
+                margin-bottom: px2rem(11);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .score {
+            float: right;
+            height: 100%;
+            line-height: px2rem(156);
+            color: #fff;
+            font-size: px2rem(26);
+        }
+    }
+}
+
+.txt {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    color: #FFFFFF;
+    font-size: px2rem(21);
+    font-weight: 500;
+    top: px2rem(3651);
+}
+
+.rule {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 99;
+    display: none;
+
+    .rule_in {
+        width: px2rem(651);
+        height: px2rem(1041);
+        background: url(../images/ruleBg.png) no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
+        .tabs {
+            width: px2rem(528);
+            height: px2rem(140);
+            display: flex;
+            justify-content: space-between;
+            position: absolute;
+            top: px2rem(41);
+            left: 50%;
+            transform: translateX(-50%);
+
+            div {
+                width: px2rem(250);
+                height: px2rem(140);
+            }
+
+            .tab1 {
+                background: url(../images/ruletab1.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .tab2 {
+                background: url(../images/ruletab2.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .ruletabActs1 {
+                background: url(../images/ruletabAct1.png) no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .ruletabActs2 {
+                background: url(../images/ruletabAct2.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .box1,
+        .box2 {
+            width: px2rem(600);
+            height: px2rem(801);
+            overflow-y: scroll;
+            position: absolute;
+            top: px2rem(179);
+            left: 50%;
+            transform: translateX(-50%);
+
+            &::-webkit-scrollbar {
+                width: 0;
+                display: none;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                height: px2rem(1799);
+            }
+        }
+
+        .box2 {
+            display: none;
+
+            img {
+                height: px2rem(801);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,102 @@
+<!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>
+    <!-- 活动规则icon -->
+    <img src="./images/rule_icon.png" alt="" class="rule_icon">
+    <!-- 倒计时 -->
+    <div class="time">
+        <span class="sp1">00</span>
+        <span class="sp2">00</span>
+        <span class="sp3">00</span>
+        <span class="sp4">00</span>
+    </div>
+    <!-- 倒计时结束时间标题 -->
+    <img src="./images/timeOut.png" alt="" class="timeOut">
+    <!-- 标题 -->
+    <img src="./images/title.png" alt="" class="title">
+    <!-- 切换 -->
+    <div class="tab">
+        <div class="tab1"></div>
+        <div class="tab2 act2"></div>
+        <div class="tab3"></div>
+    </div>
+    <!-- 时间结束展示tab -->
+    <img src="./images/timeOutTab.png" alt="" class="timeOutTab">
+    <p class="text">­1钻=1闪耀值，闪耀榜前三获得本次活动奖励</p>
+    <!-- 前三 -->
+    <div class="top3">
+        <div class="no no1">
+            <img src="./images/no1.png" alt="" class="ts">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p></p>
+            <span></span>
+            <b>闪耀值:<i>0</i></b>
+        </div>
+        <div class="no no2">
+            <img src="./images/no2.png" alt="" class="ts">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p></p>
+            <span></span>
+            <b>闪耀值:<i>0</i></b>
+        </div>
+        <div class="no no3">
+            <img src="./images/no3.png" alt="" class="ts">
+            <img src="./images/logo.png" alt="" class="tx">
+            <p></p>
+            <span></span>
+            <b>闪耀值:<i>0</i></b>
+        </div>
+    </div>
+    <!-- 非前三 -->
+    <ul class="list">
+        <li>
+            <div class="num">44</div>
+            <img src="./images/logo.png" alt="" class="tx">
+            <div class="box">
+                <p>房间名称</p>
+                <span>ID: 1234</span>
+            </div>
+            <div class="score">闪耀值: 123456</div>
+        </li>
+    </ul>
+    <!-- 免责声明 -->
+    <p class="txt">本活动与Apple inc.无关</p>
+    <!-- 规则弹窗 -->
+    <div class="rule">
+        <div class="rule_in">
+            <div class="tabs">
+                <div class="tab1 ruletabActs1"></div>
+                <div class="tab2"></div>
+            </div>
+            <div class="box1">
+                <img src="./images/ruleBgIn.png" alt="">
+            </div>
+            <div class="box2">
+                <img src="./images/ruleBgIn2.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-anchorBattle/js/index.js

@@ -0,0 +1,239 @@
+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 leftTime;//倒计时暂存
+var timeOut2;//倒计时暂存
+var rankType = 1;//1日榜2总榜
+var date;//日期
+var dateArr = [];//存放昨日和今日时间
+// 初始化函数
+$(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)
+            }
+        })
+        getRank(rankType, date);
+    }, 100)
+})
+// 获取榜单接口
+function getRank (rankType, date) {
+    $('.list li').remove();
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/act/2023RoomPk/rank/getRank',
+        data: { rankType, date },
+        success (res) {
+            if (res.code === 200) {
+                // 处理倒计时
+                if (rankType == 1) {
+                    const curTime = res.timestamp
+                    var endTime = null;
+                    if (browser.ios) {
+                        endTime = (new Date(`${res.data.dateList[res.data.dateList.length - 1]} 11:59:59`.replace(/-/g, "/")).getTime())
+                    } else {
+                        endTime = (new Date(`${res.data.dateList[res.data.dateList.length - 1]} 11:59:59`).getTime())
+                    }
+                    leftTime = endTime - res.timestamp;
+                    const hadEnd = (endTime - curTime) <= 0
+                    if (hadEnd) {
+                        rankType = 2;
+                        date = null;
+                        getRank(rankType, date)
+                        return
+                    }
+                }
+
+                countup();
+                dateArr[0] = dateFormat(res.timestamp - 86400000, 'yyyy-MM-dd');
+                dateArr[1] = dateFormat(res.timestamp, 'yyyy-MM-dd');
+                // 处理前三
+                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: '虚位以待',
+                        erbanNo: 'ID:虚位以待',
+                        score: " 0"
+                    })
+                    top3.push(...arr)
+                }
+                top3.forEach((res, i) => {
+                    $(`.top3 .no${i + 1} .ts`).attr('uid', res.uid);
+                    $(`.top3 .no${i + 1} .tx`).attr('src', res.avatar);
+                    $(`.top3 .no${i + 1} p`).text(res.nick);
+                    $(`.top3 .no${i + 1} span`).text(res.erbanNo);
+                    $(`.top3 .no${i + 1} b i`).text(unitProcessing(res.score, 10000, 1, 'w'));
+                })
+                // 非前三
+                var str = '';
+                notTop3.forEach((res, i) => {
+                    str += `
+                        <li>
+                            <div class="num">${res.ranking}</div>
+                            <img src="${res.avatar}" uid=${res.uid} alt="" class="tx">
+                            <div class="box">
+                                <p>${res.nick}</p>
+                                <span>ID: ${res.erbanNo}</span>
+                            </div>
+                            <div class="score">闪耀值: ${unitProcessing(res.score, 10000, 1, 'w')}</div>
+                        </li>
+                    `
+                })
+                $('.list').append(str);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('网络错误，请退出重进')
+        }
+    })
+}
+// 榜单切换
+$('.tab div').click(function () {
+    var i = $(this).index() + 1;
+    rankType = i == 1 || i == 2 ? 1 : 2;
+    $('.tab div').removeClass('act1').removeClass('act3').removeClass('act2');
+    $(this).addClass(`act${i}`);
+    if (i == 1 || i == 2) {
+        date = dateArr[i - 1];
+    } else {
+        date = null;
+    }
+    getRank(rankType, date);
+
+})
+// 规则tab切换
+$('.rule .rule_in .tabs div').click(function () {
+    var i = $(this).index() + 1;
+    $('.rule .rule_in .tabs div').removeClass('ruletabActs1').removeClass('ruletabActs2');
+    $('.rule .rule_in .box1, .rule .rule_in .box2').hide();
+    $(this).addClass(`ruletabActs${i}`);
+    if (i == 1) {
+        $('.rule .rule_in .box1').show();
+    } else {
+        $('.rule .rule_in .box2').show();
+    }
+    return false
+})
+// 打开规则
+$('.rule_icon').click(function () {
+    $('.rule').show();
+    bodyScroolFun(true);
+})
+// 关闭规则
+$('.rule').click(function () {
+    $(this).hide();
+    bodyScroolFun(false);
+})
+// 倒计时
+function countup () {
+    clearTimeout(timeOut2)
+    //获取当前时间
+    // var now = nowTime;
+    var d = 0;
+    var h = 0;
+    var m = 0;
+    var s = 0;
+    //定义变量 d,h,m,s保存倒计时的时间
+    var d, h, m, s;
+    //递归每秒调⽤countTime⽅法，显⽰动态时间效果
+    if (leftTime >= 0 && leftTime < 1000) {
+        rankType = 2;
+        date = null;
+        getRank(rankType, date);
+    } else if (leftTime > 1000) {
+        d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
+        h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
+        m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
+        s = getzf(Math.floor(leftTime / 1000 % 60));
+        //将倒计时赋值到div中
+        $('.time .sp1').text(d);
+        $('.time .sp2').text(h);
+        $('.time .sp3').text(m);
+        $('.time .sp4').text(s);
+    } else {
+        //todo 展示活动已结束
+        $('.timeOutTab').show();
+        $('.timeOut').show();
+        $('.tab').hide();
+        $('.time').hide();
+    }
+    if (leftTime > 0){
+        leftTime = leftTime - 1000;
+    }
+    timeOut2 = setTimeout(countup, 1000);
+}
+//补0操作  
+function getzf (num) {
+    if (parseInt(num) < 10) {
+        num = '0' + num;
+    }
+    return num;
+}
+// 点击前三按钮
+$('.top3 .no .ts').on('click', 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);
+        }
+    }
+})
+// 点击非前三按钮
+$('.list').on('click', 'li .tx', function () {
+    var uid = $(this).attr('uid');
+    console.log(uid);
+    if (browser.ios) {
+        window.webkit.messageHandlers.openRoom.postMessage(uid);
+    } else if (browser.android) {
+        if (androidJsObj && typeof androidJsObj === 'object') {
+            window.androidJsObj.openRoom(uid);
+        }
+    }
+})

view/yinmeng/activity/2023-anchorBattle/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" });
+}