修复宝箱显示异常问题

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/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}`);
     }
 })
 // 确定申请按钮