完成boom分区规则

view/molistar/modules/dailyConsumption/css/index.css

@@ -0,0 +1,815 @@
+html,
+body {
+  width: 100%;
+  background: #290C05;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 0.86667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+}
+
+.header {
+  width: 10rem;
+  height: 12.53333rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+.header .rule_icon {
+  width: 1.86667rem;
+  height: 0.66667rem;
+  line-height: 0.6rem;
+  background: url(../images/rule_cion.png) no-repeat;
+  background-size: 100% 100%;
+  color: #FFED70;
+  font-size: 0.37333rem;
+  font-weight: 500;
+  position: absolute;
+  top: 5.49333rem;
+  right: 0rem;
+  text-align: center;
+  text-indent: 2px;
+}
+
+.header .timeBox {
+  width: 7.16rem;
+  height: 1.62667rem;
+  box-sizing: border-box;
+  padding: 0 0.66667rem;
+  position: absolute;
+  top: 8.48rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-between;
+}
+
+.header .timeBox div {
+  width: 1.33333rem;
+  height: 1.33333rem;
+  background: url(../images/time.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  text-align: center;
+  line-height: 1.33333rem;
+}
+
+.header .timeBox div b {
+  color: #FFED70;
+  font-size: 0.58667rem;
+  font-weight: 600;
+  font-family: PingFang SC;
+}
+
+.header .timeBox div span {
+  width: 2.4rem;
+  height: 0.48rem;
+  line-height: 0.48rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -0.54667rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  font-family: PingFang SC;
+  background: url(../images/timeBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .timeBox .day {
+  margin-right: 0.78667rem;
+}
+
+.header .timeBox .colon {
+  width: 0.21333rem;
+  height: 0.53333rem;
+  background: url(../images/colon.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 0.22667rem;
+  margin-top: 0.54667rem;
+}
+
+.myBox {
+  width: 10rem;
+  height: 8.05333rem;
+  background: url(../images/box.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -1.1rem auto 0.46667rem;
+  position: relative;
+}
+
+.myBox .ts {
+  width: 1.70667rem;
+  height: 1.70667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.44rem;
+  z-index: 2;
+}
+
+.myBox .tx {
+  width: 1.70667rem;
+  height: 1.70667rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.44rem;
+  z-index: 1;
+  border-radius: 50%;
+}
+
+.myBox .name {
+  width: 4.8rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 4.28rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.37333rem;
+  font-weight: 600;
+}
+
+.myBox .lineBox {
+  width: 8.26667rem;
+  height: 0.21333rem;
+  border-radius: 0.21333rem;
+  background: #824115;
+  position: absolute;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 5.85333rem;
+  border-radius: 0.21333rem;
+}
+
+.myBox .lineBox .line {
+  width: 0%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: linear-gradient(90deg, #FBF392, #FCB41B);
+  border-radius: 0.21333rem;
+}
+
+.myBox .lineBox .boxs {
+  width: 0.82667rem;
+  height: 0.82667rem;
+  background: url(../images/false.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.myBox .lineBox .boxs span {
+  height: 0.45333rem;
+  line-height: 0.45333rem;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+  top: -0.66667rem;
+  display: flex;
+  color: #FFED70;
+  font-size: 0.34667rem;
+  font-weight: 400;
+}
+
+.myBox .lineBox .boxs span img {
+  display: block;
+  width: 0.45333rem;
+  height: 0.45333rem;
+  margin: 0 0.06667rem;
+}
+
+.myBox .lineBox .box1 {
+  left: 2rem;
+}
+
+.myBox .lineBox .box2 {
+  left: 4.52rem;
+}
+
+.myBox .lineBox .box3 {
+  right: 0rem;
+}
+
+.myBox .lineBox .act {
+  background: url(../images/true.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.myBox .tetxBox {
+  width: 8.26667rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 6.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #FFED70;
+  font-weight: 400;
+}
+
+.myBox .tetxBox .left {
+  font-size: 0.34667rem;
+}
+
+.myBox .tetxBox .rirgt {
+  font-size: 0.37333rem;
+}
+
+.tab {
+  width: 9.73333rem;
+  height: 1.33333rem;
+  margin: 0 auto 0.41333rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tab div {
+  width: 4.8rem;
+  height: 1.33333rem;
+  line-height: 1.33333rem;
+  text-align: center;
+  color: #EBC9B2;
+  font-size: 0.4rem;
+  font-weight: 600;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .tabbox {
+  background: url(../images/tab2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act {
+  color: #290C05;
+  background: url(../images/act.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.tab .act2 {
+  color: #290C05;
+  background: url(../images/tabact2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content1 {
+  width: 10rem;
+  height: auto;
+  margin: 0 auto 0.41333rem;
+}
+
+.content1 .contentBox1,
+.content1 .contentBox2,
+.content1 .contentBox3 {
+  width: 100%;
+  height: 16.58667rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0.53333rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.content1 .contentBox1 .title,
+.content1 .contentBox2 .title,
+.content1 .contentBox3 .title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  width: 5.22667rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content1 .contentBox1 .title span,
+.content1 .contentBox2 .title span,
+.content1 .contentBox3 .title span {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.content1 .contentBox1 .title img,
+.content1 .contentBox2 .title img,
+.content1 .contentBox3 .title img {
+  width: 0.53333rem;
+  height: 0.53333rem;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0.06667rem;
+}
+
+.content1 .contentBox1 .box,
+.content1 .contentBox2 .box,
+.content1 .contentBox3 .box {
+  width: 8.93333rem;
+  height: 10.66667rem;
+  margin: 2.10667rem auto 0.13333rem;
+  background: url(../images/700.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.content1 .contentBox1 .box .ts,
+.content1 .contentBox2 .box .ts,
+.content1 .contentBox3 .box .ts {
+  width: 2.13333rem;
+  height: 2.13333rem;
+  position: absolute;
+  right: 0.5rem;
+  top: 5.9rem;
+}
+
+.content1 .contentBox1 .box .zj,
+.content1 .contentBox2 .box .zj,
+.content1 .contentBox3 .box .zj {
+  width: 5.2rem;
+  height: 8.5rem;
+  position: absolute;
+  left: 0.35rem;
+  top: 0.3rem;
+  overflow: hidden;
+}
+
+.content1 .contentBox1 .box .zj canvas,
+.content1 .contentBox2 .box .zj canvas,
+.content1 .contentBox3 .box .zj canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.content1 .contentBox1 .priorityWinners,
+.content1 .contentBox2 .priorityWinners,
+.content1 .contentBox3 .priorityWinners {
+  width: 100%;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  margin-bottom: 0.36rem;
+}
+
+.content1 .contentBox1 .priorityWinnersBox,
+.content1 .contentBox2 .priorityWinnersBox,
+.content1 .contentBox3 .priorityWinnersBox {
+  height: 1.6rem;
+  width: 83%;
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+}
+
+.content1 .contentBox1 .priorityWinnersBox div,
+.content1 .contentBox2 .priorityWinnersBox div,
+.content1 .contentBox3 .priorityWinnersBox div {
+  width: 1.6rem;
+  height: 1.6rem;
+  position: relative;
+}
+
+.content1 .contentBox1 .priorityWinnersBox div img,
+.content1 .contentBox2 .priorityWinnersBox div img,
+.content1 .contentBox3 .priorityWinnersBox div img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+  border: 0.04rem #FFED70 solid;
+}
+
+.content1 .contentBox1 .priorityWinnersBox div span,
+.content1 .contentBox2 .priorityWinnersBox div span,
+.content1 .contentBox3 .priorityWinnersBox div span {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.34667rem;
+  font-weight: 500;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  bottom: -0.6rem;
+  height: 0.4rem;
+}
+
+.content1 .contentBox2 .box {
+  background: url(../images/350.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content1 .contentBox3 .box {
+  background: url(../images/70.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content2 {
+  width: 10rem;
+  height: auto;
+  margin: 0 auto 0.41333rem;
+  display: none;
+}
+
+.content2 .contentBox1,
+.content2 .contentBox2,
+.content2 .contentBox3 {
+  width: 100%;
+  height: 16.58667rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0.53333rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.content2 .contentBox1 .title,
+.content2 .contentBox2 .title,
+.content2 .contentBox3 .title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  width: 5.22667rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  background: url(../images/title.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content2 .contentBox1 .title span,
+.content2 .contentBox2 .title span,
+.content2 .contentBox3 .title span {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.content2 .contentBox1 .title img,
+.content2 .contentBox2 .title img,
+.content2 .contentBox3 .title img {
+  width: 0.53333rem;
+  height: 0.53333rem;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0.06667rem;
+}
+
+.content2 .contentBox1 .box,
+.content2 .contentBox2 .box,
+.content2 .contentBox3 .box {
+  width: 8.93333rem;
+  height: 10.66667rem;
+  margin: 2.10667rem auto 0.13333rem;
+  background: url(../images/7.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+
+.content2 .contentBox1 .box .ts,
+.content2 .contentBox2 .box .ts,
+.content2 .contentBox3 .box .ts {
+  width: 2.13333rem;
+  height: 2.13333rem;
+  position: absolute;
+  right: 0.5rem;
+  top: 3.6rem;
+}
+
+.content2 .contentBox1 .box .zj,
+.content2 .contentBox2 .box .zj,
+.content2 .contentBox3 .box .zj {
+  width: 5.2rem;
+  height: 8.5rem;
+  position: absolute;
+  left: 0.35rem;
+  top: 0.3rem;
+  overflow: hidden;
+}
+
+.content2 .contentBox1 .box .zj canvas,
+.content2 .contentBox2 .box .zj canvas,
+.content2 .contentBox3 .box .zj canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.content2 .contentBox1 .box .zjIcon,
+.content2 .contentBox2 .box .zjIcon,
+.content2 .contentBox3 .box .zjIcon {
+  width: 0.61333rem;
+  height: 0.61333rem;
+  position: absolute;
+  left: 2.6rem;
+  top: 8.94667rem;
+  z-index: 2;
+}
+
+.content2 .contentBox1 .box .xzIcon,
+.content2 .contentBox2 .box .xzIcon,
+.content2 .contentBox3 .box .xzIcon {
+  width: 0.61333rem;
+  height: 0.61333rem;
+  position: absolute;
+  right: 1.2rem;
+  top: 8.94667rem;
+  z-index: 2;
+}
+
+.content2 .contentBox1 .priorityWinners,
+.content2 .contentBox2 .priorityWinners,
+.content2 .contentBox3 .priorityWinners {
+  width: 100%;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  margin-bottom: 0.36rem;
+}
+
+.content2 .contentBox1 .priorityWinnersBox,
+.content2 .contentBox2 .priorityWinnersBox,
+.content2 .contentBox3 .priorityWinnersBox {
+  height: 1.6rem;
+  width: 83%;
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+}
+
+.content2 .contentBox1 .priorityWinnersBox div,
+.content2 .contentBox2 .priorityWinnersBox div,
+.content2 .contentBox3 .priorityWinnersBox div {
+  width: 1.6rem;
+  height: 1.6rem;
+  position: relative;
+}
+
+.content2 .contentBox1 .priorityWinnersBox div img,
+.content2 .contentBox2 .priorityWinnersBox div img,
+.content2 .contentBox3 .priorityWinnersBox div img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+  border: 0.04rem #FFED70 solid;
+}
+
+.content2 .contentBox1 .priorityWinnersBox div span,
+.content2 .contentBox2 .priorityWinnersBox div span,
+.content2 .contentBox3 .priorityWinnersBox div span {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.34667rem;
+  font-weight: 500;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  bottom: -0.6rem;
+}
+
+.content2 .contentBox2 .box {
+  background: url(../images/3500.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content2 .contentBox3 .box {
+  background: url(../images/210.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.content2 .contentBox3 .box .ts {
+  top: 5.9rem;
+}
+
+.null {
+  width: 100%;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.34667rem;
+  font-weight: 400;
+  opacity: 0.6;
+  margin-bottom: 0.53333rem;
+}
+
+.video,
+.video2,
+.video3 {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  display: none;
+}
+
+.video video,
+.video2 video,
+.video3 video {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 65%;
+}
+
+.video .close,
+.video2 .close,
+.video3 .close {
+  width: 0.90667rem;
+  height: 0.90667rem;
+  position: absolute;
+  top: 10%;
+  right: 0.93333rem;
+  z-index: 9;
+}
+
+.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: 9.33333rem;
+  height: 11.06667rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: url(../images/ruleBg.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .close {
+  width: 0.88rem;
+  height: 0.88rem;
+  position: absolute;
+  right: 0;
+  top: -0.93333rem;
+}
+
+.rule .rule_in .title {
+  width: 4.66667rem;
+  height: 1.28rem;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #FFED70;
+  font-size: 0.42667rem;
+  font-weight: 600;
+  position: absolute;
+  top: -0.16rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: url(../images/ruleTitle.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.rule .rule_in .box {
+  width: 7.53333rem;
+  height: 8rem;
+  position: absolute;
+  top: 2.36rem;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow-y: scroll;
+}
+
+.rule .rule_in .box::-webkit-scrollbar {
+  display: none;
+}
+
+.rule .rule_in .box p {
+  color: #FFED70;
+  font-size: 0.37333rem;
+  font-weight: 400;
+  line-height: 0.53333rem;
+  margin-bottom: 0.45333rem;
+}
+
+.arabic .header {
+  background: url(../images/header-ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .myBox .tetxBox {
+  direction: ltr;
+}
+
+.arabic .content1 .contentBox1 .box {
+  background: url(../images/700ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content1 .contentBox1 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content1 .contentBox2 .box {
+  background: url(../images/350ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content1 .contentBox2 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content1 .contentBox3 .box {
+  background: url(../images/70ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content1 .contentBox3 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content2 .contentBox1 .box {
+  background: url(../images/7ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content2 .contentBox1 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content2 .contentBox2 .box {
+  background: url(../images/3500ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content2 .contentBox2 .box .ts {
+  direction: ltr;
+}
+
+.arabic .content2 .contentBox3 .box {
+  background: url(../images/210ar.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.arabic .content2 .contentBox3 .box .ts {
+  direction: ltr;
+}
+
+.arabic .back img {
+  left: auto;
+  right: 0.24rem;
+  transform: rotate(180deg);
+}

view/molistar/modules/dailyConsumption/css/index.scss

@@ -0,0 +1,790 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #290C05;
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(65);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+    }
+}
+
+.header {
+    width: px2rem(750);
+    height: px2rem(940);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto;
+    position: relative;
+
+    .rule_icon {
+        width: px2rem(140);
+        height: px2rem(50);
+        line-height: px2rem(45);
+        background: url(../images/rule_cion.png) no-repeat;
+        background-size: 100% 100%;
+        color: #FFED70;
+        font-size: px2rem(28);
+        font-weight: 500;
+        position: absolute;
+        top: px2rem(412);
+        right: px2rem(0);
+        text-align: center;
+        text-indent: 2px;
+    }
+
+    .timeBox {
+        width: 7.16rem;
+        height: px2rem(122);
+        box-sizing: border-box;
+        padding: 0 px2rem(50);
+        position: absolute;
+        top: px2rem(636);
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            width: px2rem(100);
+            height: px2rem(100);
+            background: url(../images/time.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            text-align: center;
+            line-height: px2rem(100);
+
+            b {
+                color: #FFED70;
+                font-size: px2rem(44);
+                font-weight: 600;
+                font-family: PingFang SC;
+            }
+
+            span {
+                width: px2rem(180);
+                height: px2rem(36);
+                line-height: px2rem(36);
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: px2rem(-41);
+                text-align: center;
+                color: #FFED70;
+                font-size: px2rem(28);
+                font-weight: 400;
+                font-family: PingFang SC;
+                background: url(../images/timeBg.png) no-repeat;
+                background-size: 100% 100%;
+            }
+        }
+
+        .day {
+            margin-right: px2rem(59);
+        }
+
+        .colon {
+            width: px2rem(16);
+            height: px2rem(40);
+            background: url(../images/colon.png) no-repeat;
+            background-size: 100% 100%;
+            margin: 0 px2rem(17);
+            margin-top: px2rem(41);
+        }
+    }
+}
+
+.myBox {
+    width: px2rem(750);
+    height: px2rem(604);
+    background: url(../images/box.png) no-repeat;
+    background-size: 100% 100%;
+    margin: -1.1rem auto px2rem(35);
+    position: relative;
+
+    .ts {
+        width: px2rem(128);
+        height: px2rem(128);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(183);
+        z-index: 2;
+    }
+
+    .tx {
+        width: px2rem(128);
+        height: px2rem(128);
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(183);
+        z-index: 1;
+        border-radius: 50%;
+    }
+
+    .name {
+        width: px2rem(360);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(321);
+        text-align: center;
+        color: #FFED70;
+        font-size: px2rem(28);
+        font-weight: 600;
+    }
+
+    .lineBox {
+        width: px2rem(620);
+        height: px2rem(16);
+        border-radius: px2rem(16);
+        background: #824115;
+        position: absolute;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(439);
+        border-radius: px2rem(16);
+
+        .line {
+            width: 0%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            background: linear-gradient(90deg, #FBF392, #FCB41B);
+            border-radius: px2rem(16);
+        }
+
+        .boxs {
+            width: px2rem(62);
+            height: px2rem(62);
+            background: url(../images/false.png) no-repeat;
+            background-size: 100% 100%;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+
+            span {
+                height: px2rem(34);
+                line-height: px2rem(34);
+                position: absolute;
+                left: 50%;
+                transform: translate(-50%);
+                top: px2rem(-50);
+                display: flex;
+                color: #FFED70;
+                font-size: px2rem(26);
+                font-weight: 400;
+
+                img {
+                    display: block;
+                    width: px2rem(34);
+                    height: px2rem(34);
+                    margin: 0 px2rem(5);
+                }
+            }
+        }
+
+        .box1 {
+            left: px2rem(150);
+        }
+
+        .box2 {
+            left: px2rem(339);
+        }
+
+        .box3 {
+            right: px2rem(0);
+        }
+
+        .act {
+            background: url(../images/true.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .tetxBox {
+        width: px2rem(620);
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        top: px2rem(480);
+        left: 50%;
+        transform: translateX(-50%);
+        color: #FFED70;
+        font-weight: 400;
+
+        .left {
+            font-size: px2rem(26);
+        }
+
+        .rirgt {
+            font-size: px2rem(28);
+        }
+    }
+}
+
+.tab {
+    width: px2rem(730);
+    height: px2rem(100);
+    margin: 0 auto px2rem(31);
+    display: flex;
+    justify-content: space-between;
+
+    div {
+        width: px2rem(360);
+        height: px2rem(100);
+        line-height: px2rem(100);
+        text-align: center;
+        color: #EBC9B2;
+        font-size: px2rem(30);
+        font-weight: 600;
+        background: url(../images/tab.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .tabbox {
+        background: url(../images/tab2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act {
+        color: #290C05;
+        background: url(../images/act.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .act2 {
+        color: #290C05;
+        background: url(../images/tabact2.png) no-repeat;
+        background-size: 100% 100%;
+    }
+}
+
+.content1 {
+    width: px2rem(750);
+    height: auto;
+    margin: 0 auto px2rem(31);
+    // display: none;
+
+    .contentBox1,
+    .contentBox2,
+    .contentBox3 {
+        width: 100%;
+        height: px2rem(1244);
+        background: url(../images/bg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto px2rem(40);
+        position: relative;
+        overflow: hidden;
+
+        .title {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 0;
+            width: px2rem(392);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 600;
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+
+            span {
+                vertical-align: middle;
+                display: inline-block;
+            }
+
+            img {
+                width: px2rem(40);
+                height: px2rem(40);
+                display: inline-block;
+                vertical-align: middle;
+                margin: 0 px2rem(5);
+            }
+        }
+
+        .box {
+            width: px2rem(670);
+            height: px2rem(800);
+            margin: px2rem(158) auto px2rem(10);
+            background: url(../images/700.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+
+            .ts {
+                width: px2rem(160);
+                height: px2rem(160);
+                position: absolute;
+                right: 0.5rem;
+                top: 5.9rem;
+            }
+
+            .zj {
+                width: 5.2rem;
+                height: 8.5rem;
+                position: absolute;
+                left: 0.35rem;
+                top: 0.3rem;
+                overflow: hidden;
+
+                canvas {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+            }
+        }
+
+        .priorityWinners {
+            width: 100%;
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 500;
+            margin-bottom: px2rem(27);
+        }
+
+        .priorityWinnersBox {
+            height: px2rem(120);
+            width: 83%;
+            display: flex;
+            justify-content: space-around;
+            margin: 0 auto;
+
+            div {
+                width: px2rem(120);
+                height: px2rem(120);
+                position: relative;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    border-radius: 50%;
+                    left: 0;
+                    top: 0;
+                    border: px2rem(3) #FFED70 solid;
+                }
+
+                span {
+                    width: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    color: #FFED70;
+                    font-size: px2rem(26);
+                    font-weight: 500;
+                    text-align: center;
+                    position: absolute;
+                    left: 0;
+                    bottom: -0.6rem;
+                    height: 0.4rem;
+                }
+            }
+        }
+    }
+
+    .contentBox2 {
+        .box {
+            background: url(../images/350.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .contentBox3 {
+        .box {
+            background: url(../images/70.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+}
+
+.content2 {
+    width: px2rem(750);
+    height: auto;
+    margin: 0 auto px2rem(31);
+    display: none;
+
+    .contentBox1,
+    .contentBox2,
+    .contentBox3 {
+        width: 100%;
+        height: px2rem(1244);
+        background: url(../images/bg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto px2rem(40);
+        position: relative;
+        overflow: hidden;
+
+        .title {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 0;
+            width: px2rem(392);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 600;
+            background: url(../images/title.png) no-repeat;
+            background-size: 100% 100%;
+
+            span {
+                vertical-align: middle;
+                display: inline-block;
+            }
+
+            img {
+                width: px2rem(40);
+                height: px2rem(40);
+                display: inline-block;
+                vertical-align: middle;
+                margin: 0 px2rem(5);
+            }
+        }
+
+        .box {
+            width: px2rem(670);
+            height: px2rem(800);
+            margin: px2rem(158) auto px2rem(10);
+            background: url(../images/7.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+
+            .ts {
+                width: px2rem(160);
+                height: px2rem(160);
+                position: absolute;
+                right: 0.5rem;
+                top: 3.6rem;
+            }
+
+            .zj {
+                width: 5.2rem;
+                height: 8.5rem;
+                position: absolute;
+                left: 0.35rem;
+                top: 0.3rem;
+                overflow: hidden;
+
+                canvas {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+            }
+
+            .zjIcon {
+                width: px2rem(46);
+                height: px2rem(46);
+                position: absolute;
+                left: px2rem(195);
+                top: px2rem(671);
+                z-index: 2;
+            }
+
+            .xzIcon {
+                width: px2rem(46);
+                height: px2rem(46);
+                position: absolute;
+                right: px2rem(90);
+                top: px2rem(671);
+                z-index: 2;
+            }
+        }
+
+        .priorityWinners {
+            width: 100%;
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 500;
+            margin-bottom: px2rem(27);
+        }
+
+        .priorityWinnersBox {
+            height: px2rem(120);
+            width: 83%;
+            display: flex;
+            justify-content: space-around;
+            margin: 0 auto;
+
+            div {
+                width: px2rem(120);
+                height: px2rem(120);
+                position: relative;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    border-radius: 50%;
+                    left: 0;
+                    top: 0;
+                    border: px2rem(3) #FFED70 solid;
+                }
+
+                span {
+                    width: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    color: #FFED70;
+                    font-size: px2rem(26);
+                    font-weight: 500;
+                    text-align: center;
+                    position: absolute;
+                    left: 0;
+                    bottom: -0.6rem;
+                }
+            }
+        }
+    }
+
+    .contentBox2 {
+        .box {
+            background: url(../images/3500.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .contentBox3 {
+        .box {
+            background: url(../images/210.png) no-repeat;
+            background-size: 100% 100%;
+
+            .ts {
+                top: 5.9rem;
+            }
+        }
+    }
+}
+
+.null {
+    width: 100%;
+    text-align: center;
+    color: #FFED70;
+    font-size: px2rem(26);
+    font-weight: 400;
+    opacity: 0.6;
+    margin-bottom: px2rem(40);
+}
+
+.video,
+.video2,
+.video3 {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+    z-index: 99;
+    display: none;
+
+    video {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 65%;
+    }
+
+    .close {
+        width: px2rem(68);
+        height: px2rem(68);
+        position: absolute;
+        top: 10%;
+        right: px2rem(70);
+        z-index: 9;
+    }
+}
+
+.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(700);
+        height: px2rem(830);
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        background: url(../images/ruleBg.png) no-repeat;
+        background-size: 100% 100%;
+
+        .close {
+            width: px2rem(66);
+            height: px2rem(66);
+            position: absolute;
+            right: 0;
+            top: px2rem(-70);
+        }
+
+        .title {
+            width: px2rem(350);
+            height: px2rem(96);
+            line-height: px2rem(96);
+            text-align: center;
+            color: #FFED70;
+            font-size: px2rem(32);
+            font-weight: 600;
+            position: absolute;
+            top: px2rem(-12);
+            left: 50%;
+            transform: translateX(-50%);
+            background: url(../images/ruleTitle.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .box {
+            width: px2rem(565);
+            height: 8rem;
+            position: absolute;
+            top: px2rem(177);
+            left: 50%;
+            transform: translateX(-50%);
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            p {
+                color: #FFED70;
+                font-size: px2rem(28);
+                font-weight: 400;
+                line-height: px2rem(40);
+                margin-bottom: px2rem(34);
+            }
+        }
+    }
+}
+
+.arabic {
+    .header {
+        background: url(../images/header-ar.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .myBox .tetxBox {
+        direction: ltr;
+    }
+
+    .content1 {
+        .contentBox1 {
+            .box {
+                background: url(../images/700ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+
+        .contentBox2 {
+            .box {
+                background: url(../images/350ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+
+        .contentBox3 {
+            .box {
+                background: url(../images/70ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+    }
+
+    .content2 {
+        .contentBox1 {
+            .box {
+                background: url(../images/7ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+
+        .contentBox2 {
+            .box {
+                background: url(../images/3500ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+
+        .contentBox3 {
+            .box {
+                background: url(../images/210ar.png) no-repeat;
+                background-size: 100% 100%;
+
+                .ts {
+                    direction: ltr;
+                }
+            }
+        }
+    }
+
+    .back img {
+        left: auto;
+        right: 0.24rem;
+        transform: rotate(180deg);
+    }
+}

view/molistar/modules/dailyConsumption/index.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="text1"></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>
+    <!-- 头部 -->
+    <div class="header">
+        <div class="rule_icon text2"></div>
+        <!-- 倒计时 -->
+        <div class="timeBox">
+            <div class="hour">
+                <b>00</b>
+                <span class="text3"></span>
+            </div>
+            <div class="min">
+                <b>00</b>
+                <span class="text4"></span>
+            </div>
+            <div class="sec">
+                <b>00</b>
+                <span class="text5"></span>
+            </div>
+        </div>
+    </div>
+    <!--我的消费进度  -->
+    <div class="myBox">
+        <img src="./images/txk.png" alt="" class="ts">
+        <img src="" alt="" class="tx">
+        <div class="name"></div>
+        <div class="lineBox">
+            <div class="line"></div>
+            <div class="box1 boxs">
+                <span><b>0K</b> <img src="./images/gold.png" alt=""></span>
+            </div>
+            <div class="box2 boxs">
+                <span><b>0K</b> <img src="./images/gold.png" alt=""></span>
+            </div>
+            <div class="box3 boxs">
+                <span><b>0K</b> <img src="./images/gold.png" alt=""></span>
+            </div>
+        </div>
+        <div class="tetxBox">
+            <div class="l text6"></div>
+            <div class="r"><b>0</b>/<strong></strong></div>
+        </div>
+    </div>
+    <!-- tab -->
+    <div class="tab">
+        <div class="tabbox act text7"></div>
+        <div class="text8"></div>
+    </div>
+    <!-- 档位1 -->
+    <div class="content1">
+        <div class="contentBox1 level3">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text9"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts ts350" id="ts350"></div>
+                <div class="zj zj700" id="zj700"></div>
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+            </div>
+        </div>
+        <div class="contentBox2 level2">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text10"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts ts70" id="ts70"></div>
+                <div class="zj zj350" id="zj350"></div>
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+                <!-- <div>
+                    <img src="" alt="">
+                    <span>名字</span>
+                </div>
+                <div>
+                    <img src="" alt="">
+                    <span>名字</span>
+                </div> -->
+            </div>
+        </div>
+        <div class="contentBox3 level1">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text11"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts ts700" id="ts700"></div>
+                <div class="zj zj70" id="zj70"></div>
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+            </div>
+        </div>
+    </div>
+    <!-- 档位2 -->
+    <div class="content2">
+        <div class="contentBox1 level6">
+            <!-- 标题 -->
+            <div class="title">
+                <span class="text12"></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts" id="ts7"></div>
+                <!-- 播放图标 -->
+                <img src="./images/bf.png" alt="" class="zjIcon">
+                <img src="./images/bf.png" alt="" class="xzIcon">
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+            </div>
+        </div>
+        <div class="contentBox2 level5">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text13"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts" id="ts3500"></div>
+                <div class="zj" id="zj3500"></div>
+                <!-- 播放图标 -->
+                <img src="./images/bf.png" alt="" class="xzIcon">
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+                <!-- <div>
+                    <img src="" alt="">
+                    <span>名字</span>
+                </div>
+                <div>
+                    <img src="" alt="">
+                    <span>名字</span>
+                </div> -->
+            </div>
+        </div>
+        <div class="contentBox3 level4">
+            <!-- 标题 -->
+            <div class="title">
+                <span><strong class="text14"></strong></span><img src="./images/gold.png" alt="">
+            </div>
+            <!-- 奖励内容 -->
+            <div class="box">
+                <div class="ts" id="ts210"></div>
+                <div class="zj" id="zj210"></div>
+            </div>
+            <!-- 获奖人员 -->
+            <div class="priorityWinners"></div>
+            <div class="priorityWinnersBox">
+            </div>
+        </div>
+    </div>
+    <div class="null"></div>
+    <div class="video">
+        <video id="zjVideo" controls playsinline webkit-playsinline>
+            <source src="./video/zj7.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video2">
+        <video id="zjVideo2" controls playsinline webkit-playsinline>
+            <source src="./video/xz7.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+    <div class="video3">
+        <video id="zjVideo3" controls playsinline webkit-playsinline>
+            <source src="./video/xz3500.mp4" type="video/mp4">
+        </video>
+        <img src="./images/close.png" alt="" class="close">
+    </div>
+
+    <!-- 规则 -->
+    <div class="rule">
+        <div class="rule_in">
+            <img src="./images/close.png" alt="" class="close">
+            <div class="title text2">Rules</div>
+            <div class="box"></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="./local/en.js"></script>
+<script src="./local/zh.js"></script>
+<script src="./local/ar.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>

view/molistar/modules/dailyConsumption/js/index.js

@@ -0,0 +1,315 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+var langReplace;
+var localLang;
+const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success(e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var countupTime;//倒计时容器
+var page = 0;
+var maxPage = 0;
+var arr = [];
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        getConfig();
+    }, 100)
+})
+// 处理SVGA
+document.addEventListener('DOMContentLoaded', function () {
+    function loadSVGA(containerId, svgaPath) {
+        var container = document.getElementById(containerId);
+        var player = new SVGA.Player(container);
+
+        var parser = new SVGA.Parser();
+        parser.load(svgaPath, function (videoItem) {
+            player.setVideoItem(videoItem);
+            player.startAnimation();
+        });
+    }
+
+    loadSVGA('ts700', './svga/ts700.svga');
+    loadSVGA('ts350', './svga/ts350.svga');
+    loadSVGA('ts70', './svga/ts70.svga');
+    loadSVGA('zj700', './svga/zj350.svga');
+    loadSVGA('zj350', './svga/zj210.svga');
+    loadSVGA('zj70', './svga/zj70.svga');
+
+    loadSVGA('ts7', './svga/ts210.svga');
+    loadSVGA('ts3500', './svga/ts3500.svga');
+    loadSVGA('ts210', './svga/ts7.svga');
+
+
+    loadSVGA('zj3500', './svga/zj3500.svga');
+    loadSVGA('zj210', './svga/zj700.svga');
+});
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.text1').text(langReplace(localLang.demoModule.text1));
+    $('.text2').text(langReplace(localLang.demoModule.text2));
+    $('.text3').text(langReplace(localLang.demoModule.text3));
+    $('.text4').text(langReplace(localLang.demoModule.text4));
+    $('.text5').text(langReplace(localLang.demoModule.text5));
+    $('.text6').text(langReplace(localLang.demoModule.text6));
+    $('.text7').text(langReplace(localLang.demoModule.text7));
+    $('.text8').text(langReplace(localLang.demoModule.text8));
+    $('.text9').text(langReplace(localLang.demoModule.text9));
+    $('.text10').text(langReplace(localLang.demoModule.text10));
+    $('.text11').text(langReplace(localLang.demoModule.text11));
+    $('.text12').text(langReplace(localLang.demoModule.text12));
+    $('.text13').text(langReplace(localLang.demoModule.text13));
+    $('.text14').text(langReplace(localLang.demoModule.text14));
+    $('.text17').text(langReplace(localLang.demoModule.text17));
+    $('.text18').text(langReplace(localLang.demoModule.text18));
+    $('.text19').text(langReplace(localLang.demoModule.text19));
+    $('.priorityWinners').text(langReplace(localLang.demoModule.priorityWinners));
+    if (browser.ios) {
+        $('.null').text(langReplace(localLang.demoModule.text15));
+    } else {
+
+        $('.null').text(langReplace(localLang.demoModule.text16));
+    }
+}
+console.log(unitProcessingAr(7000000, 1));
+// 配置接口
+function getConfig() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/activity/h5/dayConsume',
+        data: { uid: pubInfo.uid },
+        success(res) {
+            if (res.code === 200) {
+                // 分区规则
+                $('.rule .rule_in .box').html(res.data.partitionId == 2 ? langReplace(localLang.demoModule.arRule) : langReplace(localLang.demoModule.enRule));
+                // 处理是否代理人
+                res.data.rechargeUser ? $('.myBox').hide() : $('.myBox').show();
+                // 处理等级不足不显示榜单
+                res.data.wealth <= 7 ? $('.priorityWinners,.priorityWinnersBox').hide() : $('.priorityWinners,.priorityWinnersBox').show()
+                // 处理倒计时
+                countup(res.data.endTime - res.timestamp);
+                // 处理顶部进度以及个人信息
+                $('.myBox .tx').attr('src', res.data.avatar);
+                $('.myBox .name').text(res.data.nick);
+                $('.myBox .tetxBox .r b').text(res.data.goldNum);
+                console.log(res.data.goldNum < 700000);
+                if (res.data.goldNum < 700000) {
+                    $('.myBox .tetxBox .r strong').text(700000);
+                    $('.myBox .lineBox .box1 span b').text('70K');
+                    $('.myBox .lineBox .box1').css('left', `${(70000 / 700000) * 100}%`);
+                    $('.myBox .lineBox .box2 span b').text('350K');
+                    $('.myBox .lineBox .box2').css('left', `${(350000 / 700000) * 100}%`);
+                    $('.myBox .lineBox .box3 span b').text('700K');
+                    $('.myBox .lineBox .box3').css('right', `0%`);
+                    $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 700000) * 100) > 100 ? 100 : (res.data.goldNum / 700000) * 100}%`);
+                    if (res.data.goldNum >= 70000) { $('.myBox .lineBox .box1').addClass('act') }
+                    if (res.data.goldNum >= 350000) { $('.myBox .lineBox .box2').addClass('act') }
+                    if (res.data.goldNum >= 700000) { $('.myBox .lineBox .box3').addClass('act') }
+                } else {
+                    $('.myBox .tetxBox .r strong').text(7000000);
+                    $('.myBox .lineBox .box1 span b').text('210K');
+                    $('.myBox .lineBox .box1').css('left', `${(70000 / 7000000) * 100}%`);
+                    $('.myBox .lineBox .box2 span b').text('3500K');
+                    $('.myBox .lineBox .box2').css('left', `${(3500000 / 7000000) * 100}%`);
+                    $('.myBox .lineBox .box3 span b').text('7M');
+                    $('.myBox .lineBox .box3').css('right', `0`);
+                    $('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 7000000) * 100) > 100 ? 100 : (res.data.goldNum / 7000000) * 100}%`);
+                    if (res.data.goldNum >= 210000) { $('.myBox .lineBox .box1').addClass('act') }
+                    if (res.data.goldNum >= 3500000) { $('.myBox .lineBox .box2').addClass('act') }
+                    if (res.data.goldNum >= 7000000) { $('.myBox .lineBox .box3').addClass('act') }
+                }
+                // 处理每个档位的用户前四名
+                res.data.activityLevelUserVo.forEach((res, i) => {
+                    var str = '';
+                    if ((res.level) <= 3) {
+                        $(`.content1 .level${res.level} .priorityWinnersBox div`).remove();
+                    } else {
+                        $(`.content2 .level${res.level} .priorityWinnersBox div`).remove();
+                    }
+                    if (res.userVos.length > 0) {
+                        res.userVos.forEach(val => {
+                            str += `
+                                <div>
+                                    <img src="${val.avatar}" alt="">
+                                    <span>${val.name}</span>
+                                </div>
+                        `
+                        })
+                    } else {
+                        str += `
+                                <div>
+                                    <img src="./images/null.png" alt="">
+                                    <span>${localLang.demoModule.waiting}</span>
+                                </div>
+                        `
+                    }
+                    if ((res.level) <= 3) {
+                        $(`.content1 .level${res.level} .priorityWinnersBox`).append(str);
+                    } else {
+                        $(`.content2 .level${res.level} .priorityWinnersBox`).append(str);
+                    }
+                })
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 倒計時
+function countup(leftTime) {
+    clearTimeout(countupTime)
+    //獲取當前時間
+    // 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) {
+        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中
+        $('.header .timeBox .hour b').text(h);
+        $('.header .timeBox .min b').text(m);
+        $('.header .timeBox .sec b').text(s);
+    } else {
+        getConfig();
+    }
+    if (leftTime > 0) {
+        leftTime = leftTime - 1000;
+    }
+    countupTime = setTimeout(function () {
+        countup(leftTime);
+    }, 1000);
+}
+//补0操作  
+function getzf(num) {
+    if (parseInt(num) < 10) {
+        num = '0' + num;
+    }
+    return num;
+}
+// tab切换
+$('.tab div').click(function () {
+    var i = $(this).index() + 1;
+    $('.content1,.content2').hide();
+    $(`.content${i}`).show();
+    $(this).addClass(`${i == 2 ? 'act2' : 'act'}`).siblings().removeClass('act').removeClass('act2')
+})
+// 打开mp4弹窗
+$('.content2 .contentBox1 .box .zjIcon').click(function () {
+    var video = document.getElementById('zjVideo');
+    video.play();
+    bodyScroolFun(true);
+    $('.video').show();
+})
+$('.content2 .contentBox1 .box .xzIcon').click(function () {
+    var video = document.getElementById('zjVideo2');
+    video.play();
+    bodyScroolFun(true);
+    $('.video2').show();
+})
+$('.content2 .contentBox2 .box .xzIcon').click(function () {
+    var video = document.getElementById('zjVideo3');
+    video.play();
+    bodyScroolFun(true);
+    $('.video3').show();
+})
+// 关闭mp4弹窗
+$('.video .close,.video2 .close,.video3 .close').click(function () {
+    var video = document.getElementById('zjVideo');
+    var video2 = document.getElementById('zjVideo2');
+    var video3 = document.getElementById('zjVideo3');
+    video.pause();
+    video2.pause();
+    video3.pause();
+    bodyScroolFun(false);
+    $('.video,.video2,.video3').hide();
+})
+// 监听播放完毕事件
+var video = document.getElementById('zjVideo');
+video.addEventListener('ended', function () {
+    video.pause();
+    bodyScroolFun(false);
+    $('.video').hide();
+});
+// 监听播放完毕事件
+var video2 = document.getElementById('zjVideo2');
+video.addEventListener('ended', function () {
+    video2.pause();
+    bodyScroolFun(false);
+    $('.video2').hide();
+});
+// 监听播放完毕事件
+var video3 = document.getElementById('zjVideo3');
+video.addEventListener('ended', function () {
+    video3.pause();
+    bodyScroolFun(false);
+    $('.video3').hide();
+});
+
+// 打开规则
+$('.header .rule_icon').click(function () {
+    $('.rule').show();
+    bodyScroolFun(true);
+})
+// 关闭规则
+$('.rule .rule_in .close').click(function () {
+    $('.rule').hide();
+    bodyScroolFun(false);
+})

view/molistar/modules/dailyConsumption/local/ar.js

@@ -0,0 +1,59 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: `جاري التحميل...`,
+        layerIndex2: `نجاح`,
+        layerIndex3: `خطأ في الشبكة`,
+        text1: `الاستهلاك اليومي`,
+        text2: `القواعد`,
+        text3: `ساعة`,
+        text4: `دقيقة`,
+        text5: `ثانية`,
+        text6: `استهلاك العملات`,
+        text7: `استهلاك 70K-700K`,
+        text8: `استهلاك 210K-7M`,
+        text9: `استهلاك 700K`,
+        text10: `استهلاك 350K`,
+        text11: `استهلاك 70K`,
+        text12: `استهلاك 7M`,
+        text13: `استهلاك 3500K`,
+        text14: `استهلاك 210K`,
+        text15: `هذا الحدث لا علاقة له بـ Apple`,
+        text16: `هذا الحدث لا علاقة له بـ Google`,
+        priorityWinners: `الفائزون ذوو الأولوية`,
+        enRule: `
+        <p>
+        1. وقت النشاط: يوميًا من 00:00 إلى 23:59 (GMT+3).<br>
+        2. يتم حساب إنفاقك اليومي على المنصة، إرسال 1 هدية بعملة = 1 قيمة العملة؛ 1 هدية الحظ بعملة = 0.05 قيمة العملة.<br>
+        3. عند وصولك إلى المستوى المناسب، ستحصل على مكافأة المستوى المناسب.<br>
+        </p>
+        <p>
+            القيود:<br>
+            1. وكلاء الشحن لا يشاركون في هذا النشاط.<br>
+            2. لا يتم احتساب مدخلات اللعبة كاستهلاك للعملات المعدنية.<br>
+        </p>
+        <p>
+            ملاحظة:<br>
+            1. هذا النشاط ليس له علاقة بـ Google و Apple.
+        </p>
+        `,
+        arRule: `
+        <p>
+        1. وقت النشاط: يوميًا من 00:00 إلى 23:59 (GMT+3).<br>
+        2. يتم حساب إنفاقك اليومي على المنصة، إرسال 1 هدية بعملة = 1 قيمة العملة؛ 1 هدية الحظ بعملة = 0.05 قيمة العملة.<br>
+        3. عند وصولك إلى المستوى المناسب، ستحصل على مكافأة المستوى المناسب.<br>
+    </p>
+    <p>
+        القيود:<br>
+        1. وكلاء الشحن لا يشاركون في هذا النشاط.<br>
+        2. لا يتم احتساب مدخلات اللعبة كاستهلاك للعملات المعدنية.<br>
+    </p>
+    <p>
+        ملاحظة:<br>
+        1. هذا النشاط ليس له علاقة بـ Google و Apple.
+    </p>
+        `,
+        waiting: `ي انتظار`,
+    }
+}

view/molistar/modules/dailyConsumption/local/en.js

@@ -0,0 +1,58 @@
+langEn = {
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+        text1: `Daily Consumption`,
+        text2: `Rules`,
+        text3: `Hour`,
+        text4: `Min`,
+        text5: `Sec`,
+        text6: `Consume coins`,
+        text7: `Consume 70K-700K`,
+        text8: `Consume 210K-7M`,
+        text9: `Consume 700K`,
+        text10: `Consume 350K`,
+        text11: `Consume 70K`,
+        text12: `Consume 7M`,
+        text13: `Consume 3500K`,
+        text14: `Consume 210K`,
+        text15: `This event has nothing to do with Apple`,
+        text16: `This event has nothing to do with Google`,
+        priorityWinners: `Priority Winners`,
+        enRule: `
+            <p>
+                1. Activity time: daily 0:00-23:59 (GMT+8).<br>
+                2. Daily calculation of your spending in the platform, send 1 coin gift = 1 coin value; 1 coin lucky
+                gift = 0.02 coin value.<br>
+                3. When you reach the corresponding level, you will get the corresponding level reward.<br>
+                </p>
+                <p>
+                    Restrictions:<br>
+                    1. Recharge agent do not participate in this activity.<br>
+                    2. The input of game is not counted as consumption of coins.<br>
+                </p>
+                <p>
+                    Attention:<br>
+                    1. This activity has nothing to do with Google and Apple.
+                </p>
+        `,
+        arRule: `
+        <p>
+            1. Activity time: daily 0:00-23:59 (GMT+3).<br>
+            2. Daily calculation of your spending on the platform, send 1 coin gift = 1 coin value; 1 coin lucky gift = 0.05 coin value.<br>
+            3. When you reach the corresponding level, you will get the corresponding level reward.<br>
+        </p>
+        <p>
+            Restrictions:<br>
+            1. Recharge agents do not participate in this activity.<br>
+            2. Game input is not counted as coin consumption.<br>
+        </p>
+        <p>
+            Attention:<br>
+            1. This activity has nothing to do with Google and Apple.
+        </p>
+        `,
+        waiting: `Waiting`,
+    }
+}

view/molistar/modules/dailyConsumption/local/zh.js

@@ -0,0 +1,59 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加载中...`,
+        layerIndex2: `成功`,
+        layerIndex3: `网络错误`,
+        text1: `每日消費`,
+        text2: `規則`,
+        text3: `小時`,
+        text4: `分`,
+        text5: `秒`,
+        text6: `消耗金幣`,
+        text7: `消耗 70K-700K`,
+        text8: `消耗 210K-700萬`,
+        text9: `消耗 700K`,
+        text10: `消耗 350K`,
+        text11: `消耗 70K`,
+        text12: `消耗 700萬`,
+        text13: `消耗 3500K`,
+        text14: `消耗 210K`,
+        text15: `此活動與 Apple 無關`,
+        text16: `此活動與 Google 無關`,
+        priorityWinners: `優先獲勝者`,
+        enRule: `
+        <p>
+        1. 活動時間：每日 0:00-23:59（GMT+8）。<br>
+        2. 每日計算您在平台上的消費，送 1 枚金幣禮物 = 1 枚金幣價值；1 枚金幣幸運禮物 = 0.02 枚金幣價值。<br>
+        3. 當您達到相應級別時，您將獲得相應級別的獎勵。<br>
+        </p>
+        <p>
+            限制：<br>
+            1. 充值代理不參加此活動。<br>
+            2. 遊戲的投入不計為金幣消費。<br>
+        </p>
+        <p>
+            注意：<br>
+            1. 此活動與 Google 和 Apple 無關。
+        </p>
+        `,
+        arRule: `
+        <p>
+        1. 活動時間：每日 0:00-23:59（GMT+3）。<br>
+        2. 每日計算您在平台上的消費，送 1 枚金幣禮物 = 1 枚金幣價值；1 枚金幣幸運禮物 = 0.05 枚金幣價值。<br>
+        3. 當您達到相應級別時，您將獲得相應級別的獎勵。<br>
+    </p>
+    <p>
+        限制：<br>
+        1. 充值代理不參加此活動。<br>
+        2. 遊戲的投入不計為金幣消費。<br>
+    </p>
+    <p>
+        注意：<br>
+        1. 此活動與 Google 和 Apple 無關。
+    </p>
+        `,
+        waiting: `等待中`,
+    }
+}

view/molistar/modules/rule/boom.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="text1">活动规则</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <style>
+        body {
+            width: 10rem;
+            height: 17.78667rem;
+            background: #1C094E;
+            box-sizing: border-box;
+            padding: 0.26667rem 0.42667rem 1.09333rem;
+            margin: 0 auto;
+        }
+
+        h2 {
+            width: 100%;
+            color: #fff;
+            font-size: 0.37333rem;
+            font-weight: 500;
+            line-height: 0.53333rem;
+        }
+
+        h3 {
+            width: 100%;
+            color: #fff;
+            font-size: 0.34667rem;
+            font-weight: 400;
+            margin-bottom: 0.18667rem;
+            line-height: 0.53333rem;
+        }
+
+        img {
+            display: block;
+            width: 9.14667rem;
+            margin-bottom: 0.18667rem;
+            margin-top: 0.18667rem;
+        }
+
+        .img1 {
+            height: 4.26667rem;
+        }
+
+        .img2 {
+            height: 5.44rem;
+        }
+
+        .img3 {
+            height: 3.46667rem;
+        }
+
+        .img9,
+        .img10,
+        .img11,
+        .img12 {
+            margin-top: 0.18667rem;
+        }
+
+        .imgBox {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.18667rem;
+            margin-top: 0.18667rem;
+        }
+
+        .imgBox img {
+            width: 4.48rem;
+        }
+
+        .null {
+            height: 1.09333rem;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box">
+    </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="./local/en.js"></script>
+<script src="./local/zh.js"></script>
+<script src="./local/ar.js"></script>
+<script src="../../common/local/langHandler.js"></script>
+<script>
+    var langReplace;
+    var localLang;
+    // 初始化函數
+    $(function () {
+        getInfoFromClient();
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        setTimeout(function () {
+            fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+            langReplace = window.lang.replace;
+            localLang = window.lang;
+            translateFun();
+        }, 100)
+    })
+    function translateFun() {
+        var langReplace = window.lang.replace;
+        var localLang = window.lang;
+        $('.text1').text(langReplace(localLang.boom.text1));
+        getQueryString().partitionId == 2 ? $('.box').html(langReplace(localLang.boom.text2)) : $('.box').html(langReplace(localLang.boom.text3));
+
+    }
+</script>

view/molistar/modules/rule/local/ar.js

@@ -2299,4 +2299,26 @@ langAr = {
         إذا لم ترسل هدايا CP لمدة 60 يومًا متتالية: في الساعة 0:00 من اليوم الحادي والستين، ستنخفض حميمية CP بمقدار 500000، ثم ستنخفض بمقدار 500000 في الساعة 0:00 كل يوم. إذا انخفضت قيمة CP إلى النطاق المقابل للمستوى، سيتم تخفيض مستوى CP.
         إذا كانت قيمة المستوى 0، سيتم فك ارتباط CP بعد التخفيض. بمجرد أن تستأنف إرسال هدايا CP، سيتوقف خصم الحميمية.`
     },
+    // ===============================================Boom======================================
+    boom: {
+        text1: `قواعد النشاط`,
+        text2: `
+                <h3>1. يتم زيادة قيمة الـ BOOM في الغرفة من خلال إرسال الهدايا. 1 هدية عادية = 1 قيمة BOOM؛ 20 هدية حظ = 1 قيمة BOOM.</h3>
+                <h3>2. عندما تصل قيمة الـ BOOM إلى 100%، سيتم تفعيل الجائزة الكبرى BOOM ويمكن للمستخدمين في الغرفة الحصول على مكافآت.</h3>
+                <h3>3. المستخدم الذي يساهم بترتيب التبرعات ويقوم بتفعيل الـ BOOM سيحصل على الجائزة الكبرى لهذا المستوى، وسيحصل المستخدمون الآخرون في الغرفة على جوائز عشوائية.</h3>
+                <h3>4. في كل مرة يتم فيها تفعيل الـ BOOM، يكون لدى مالك الغرفة فرصة للحصول على مكافأة بالعملات الذهبية.</h3>
+                <h3>5. كلما زاد مستوى الـ BOOM، زادت المكافآت التي تحصل عليها.</h3>
+                <h3>6. يتم تحديث قيمة الـ BOOM يوميًا في الساعة 00:00 (GMT+3).</h3>
+                <h3>7. يحتفظ هذا النظام بحق التفسير النهائي لهذا النشاط.</h3>
+                `,
+        text3: `
+                <h3>1. يتم زيادة قيمة الـ BOOM في الغرفة من خلال إرسال الهدايا. 1 هدية عادية = 1 قيمة BOOM؛ 50 هدية حظ = 2 قيمة BOOM.</h3>
+                <h3>2. عندما تصل قيمة الـ BOOM إلى 100%، سيتم تفعيل الجائزة الكبرى BOOM ويمكن للمستخدمين في الغرفة الحصول على مكافآت.</h3>
+                <h3>3. المستخدم الذي يساهم بترتيب التبرعات ويقوم بتفعيل الـ BOOM سيحصل على الجائزة الكبرى لهذا المستوى، وسيحصل المستخدمون الآخرون في الغرفة على جوائز عشوائية.</h3>
+                <h3>4. في كل مرة يتم فيها تفعيل الـ BOOM، يكون لدى مالك الغرفة فرصة للحصول على مكافأة بالعملات الذهبية.</h3>
+                <h3>5. كلما زاد مستوى الـ BOOM، زادت المكافآت التي تحصل عليها.</h3>
+                <h3>6. يتم تحديث قيمة الـ BOOM يوميًا في الساعة 00:00 (GMT+3).</h3>
+                <h3>7. يحتفظ هذا النظام بحق التفسير النهائي لهذا النشاط.</h3>
+                `
+    }
 }

view/molistar/modules/rule/local/en.js

@@ -2308,4 +2308,26 @@ langEn = {
         If the level value is 0, the CP will be unbound after downgrading. Once you resume sending CP gift, the
         deduction of intimacy will stop.`,
     },
+    // ===============================================Boom======================================
+    boom: {
+        text1: `Event Rules`,
+        text2: `
+        <h3>1. Increase the BOOM value in the room by sending gifts. 1 coin regular gift = 1 BOOM value; 20 coin lucky gift = 1 BOOM value.</h3>
+        <h3>2. When the BOOM value reaches 100%, the super jackpot BOOM will be triggered, and users in the room can win rewards.</h3>
+        <h3>3. The user who contributes the most and triggers the BOOM will receive the super prize for that level, and other users in the room will randomly receive prizes.</h3>
+        <h3>4. Each time the BOOM is triggered, the room owner has a chance to receive a coin reward.</h3>
+        <h3>5. The higher the BOOM level, the richer the rewards.</h3>
+        <h3>6. BOOM value is reset daily at 00:00 (GMT+3).</h3>
+        <h3>7. The platform reserves the final right of interpretation for this event.</h3>
+        `,
+        text3: `
+        <h3>1. Increase the BOOM value in the room by sending gifts. 1 coin regular gift = 1 BOOM value; 50 coin lucky gift = 2 BOOM value.</h3>
+        <h3>2. When the BOOM value reaches 100%, the super jackpot BOOM will be triggered, and users in the room can win rewards.</h3>
+        <h3>3. The user who contributes the most and triggers the BOOM will receive the super prize for that level, and other users in the room will randomly receive prizes.</h3>
+        <h3>4. Each time the BOOM is triggered, the room owner has a chance to receive a coin reward.</h3>
+        <h3>5. The higher the BOOM level, the richer the rewards.</h3>
+        <h3>6. BOOM value is reset daily at 00:00 (GMT+3).</h3>
+        <h3>7. The platform reserves the final right of interpretation for this event.</h3>
+        `
+    }
 }

view/molistar/modules/rule/local/zh.js

@@ -737,7 +737,7 @@ langZh = {
 
         // ==========================================隐私政策==================================
         privacyPolicy_title: `Privacy Policy`,
-        privacyPolicy_body:  `<!-- wp:paragraph -->
+        privacyPolicy_body: `<!-- wp:paragraph -->
         <p><em>Last updated: September 24, 202</em>4</p>
         <!-- /wp:paragraph -->
         
@@ -2299,4 +2299,26 @@ langZh = {
         如果您在 60 天內未發送 CP 禮物：在第 61 天的 0:00，CP 親密度將降低 500000，然後每天的 0:00 再降低 500000。如果 CP 值降到對應的等級範圍，CP 等級將會降級。
         如果等級值為 0，CP 將在降級後解除綁定。一旦您恢復發送 CP 禮物，親密度的扣除將停止。`
     },
+    // ===============================================Boom======================================
+    boom: {
+        text1: `活動規則`,
+        text2: `
+        <h3>1. 透過贈送禮物來增加房間的BOOM值。1金幣普通禮物=1 BOOM值；20金幣幸運禮物=1BOOM價值。</h3>
+        <h3>2. 當BOOM值達到100%時，將觸發超級大獎BOOM，房間內的使用者可以獲得獎勵。</h3>
+        <h3>3. 貢獻排名並觸發BOOM的用戶將獲得該級別的超級獎品，房間內的其他用戶將隨機獲得獎品。</h3>
+        <h3>4. 每次觸發BOOM，房主都有機會獲得金幣獎勵。</h3>
+        <h3>5. BOOM等級越高，獲得的獎勵越豐富。</h3>
+        <h3>6. BOOM值每天0:00（GMT+3）更新。</h3>
+        <h3>7. 本平台擁有本活動最終解釋權。</h3>
+        `,//阿拉伯
+        text3: `
+        <h3>1. 透過贈送禮物來增加房間的BOOM值。1金幣普通禮物=1 BOOM值；50金幣幸運禮物=2BOOM價值。</h3>
+        <h3>2. 當BOOM值達到100%時，將觸發超級大獎BOOM，房間內的使用者可以獲得獎勵。</h3>
+        <h3>3. 貢獻排名並觸發BOOM的用戶將獲得該級別的超級獎品，房間內的其他用戶將隨機獲得獎品。</h3>
+        <h3>4. 每次觸發BOOM，房主都有機會獲得金幣獎勵。</h3>
+        <h3>5. BOOM等級越高，獲得的獎勵越豐富。</h3>
+        <h3>6. BOOM值每天0:00（GMT+3）更新。</h3>
+        <h3>7. 本平台擁有本活動最終解釋權。</h3>
+        `//英语区
+    }
 }

view/molistar/modules/superId/css/select.css

@@ -70,7 +70,7 @@ body {
 
 .data {
   width: 100%;
-  height: 14.46667rem;
+  height: 16.46667rem;
   box-sizing: border-box;
   padding: 2.88rem 0.4rem 0;
   overflow-y: scroll;
@@ -164,8 +164,17 @@ body {
 
 .arabic .data .box .mp {
   text-indent: -0.8rem;
+  float: right;
 }
 
-.arabic .data .box b .highlight {
+.arabic .data .box img {
+  float: right;
+}
+
+.arabic .data .box b {
+  float: right;
+}
+
+.arabic .data .box b strong {
   float: left;
 }

view/molistar/modules/superId/css/select.scss

@@ -75,7 +75,7 @@ body {
 .data {
     width: 100%;
     // height: px2rem(1010);
-    height: 14.46667rem;
+    height: 16.46667rem;
     box-sizing: border-box;
     padding: px2rem(216) px2rem(30) 0;
     overflow-y: scroll;
@@ -170,8 +170,15 @@ body {
 .arabic{
     .data .box .mp{
         text-indent: -0.8rem;
+        float: right;
     }
-    .data .box b .highlight{
-        float: left;
+    .data .box img{
+        float: right;
+    }
+    .data .box b {
+        float: right;
+        strong{
+            float: left;
+        }
     }
 }

view/molistar/modules/superId/index.html

@@ -28,7 +28,7 @@
         <img src="./images/null.png" alt="" class="tx">
         <div class="name"></div>
         <div class="score"><span class="text5"></span><b>0</b></div>
-        <div class="text">You can change your SID right now.</div>
+        <div class="text text9">You can change your SID right now.</div>
     </div>
     <!-- 选择靓号活动 -->
     <div class="sidBox">

view/molistar/modules/superId/js/index.js

@@ -72,6 +72,7 @@ function translateFun() {
     $('.text6').text(langReplace(localLang.demoModule.text6));
     $('.text7').text(langReplace(localLang.demoModule.text7));
     $('.text8').text(langReplace(localLang.demoModule.text8));
+    $('.text9').text(langReplace(localLang.demoModule.text9));
 }
 // 配置接口
 function getConfig() {
@@ -107,7 +108,7 @@ function getConfig() {
                                 clickStatus = true;
                             }
                             else if (res.data.examimeStatus == 0) {//审核中
-                                $('.my .sid b').text(`In Review`);
+                                $('.my .sid b').text(langReplace(localLang.demoModule.text11));
                                 $('.my .sid b').css('color', '#FF5262');
                                 $('.my .text').text(``);
                                 cssFun();
@@ -119,7 +120,7 @@ function getConfig() {
                             //     $('.my .text').text(`${langReplace(localLang.demoModule.text9)}`);
                             // }
                             // else if (res.data.examimeStatus == 0) {//审核中
-                            //     $('.my .sid b').text(`In Review`);
+                            //     $('.my .sid b').text(langReplace(localLang.demoModule.text11));
                             //     $('.my .sid b').css('color', '#FF5262');
                             //     $('.my .text').text(``);
                             //     clickStatus = false;

view/molistar/modules/superId/js/select.js

@@ -68,6 +68,12 @@ function translateFun() {
     $('.text5').text(langReplace(localLang.select.text5));
     $('.text6').text(langReplace(localLang.select.text6));
     $('.text7').text(langReplace(localLang.select.text7));
+    var width = window.innerWidth;
+    var height = window.innerHeight;
+    console.log(width,height);
+    if (width <= 375 && height <= 430) {
+        $('.data').css('height','14.46667rem')
+    }
 }
 // 搜索接口
 function search(searchKey) {
@@ -83,7 +89,7 @@ function search(searchKey) {
                 if (res.data.length == 0) {
                     $('.null').show();
                     $('.reselect').attr('type', 'back');
-                    $('.reselect').text('Reselect');
+                    $('.reselect').text(langReplace(localLang.select.text4));
                     $('.reselect').show();
                 } else {
                     res.data.forEach(res => {
@@ -97,9 +103,9 @@ function search(searchKey) {
                     $('.data').append(str);
                     $('.data').show();
                     $('.reselect').attr('type', 'redo');
-                    $('.reselect').text('Generate again');
+                    $('.reselect').text(langReplace(localLang.select.text5));
                     $('.reselect').show();
-                    $('.apply').text('Apply');
+                    $('.apply').text(langReplace(localLang.select.text6));
                     $('.apply').show();
                 }
             } else {
@@ -131,7 +137,7 @@ $('.reselect').click(function () {
     } else {
         erbanNo = '';
         $('.apply').removeClass('actBut');
-        $('.apply').text(`Apply`);
+        $('.apply').text(langReplace(localLang.select.text6));
         search(num);
     }
 })
@@ -141,7 +147,7 @@ $('.data').on('click', ' .box', function (params) {
     $('.data .box').attr('click', 0);
     $('.data .box img').attr('src', `./images/not.png`);
     $('.apply').removeClass('actBut');
-    $('.apply').text(`Apply`);
+    $('.apply').text(langReplace(localLang.select.text6));
     $('.data .box .mp').hide()
     $('.apply').attr('click', `0`)
     erbanNo = '';
@@ -153,7 +159,7 @@ $('.data').on('click', ' .box', function (params) {
         erbanNo = $(this).attr('erbanNo');
         $('.apply').addClass('actBut');
         $('.apply').attr('click', `1`)
-        $('.apply').text(`Apply SID ${erbanNo}`);
+        $('.apply').text(`${langReplace(localLang.select.text7)} ${erbanNo}`);
     }
 })
 // 确定申请按钮