diff --git a/view/molistar/modules/dailyConsumption/css/index.css b/view/molistar/modules/dailyConsumption/css/index.css new file mode 100644 index 00000000..31035de3 --- /dev/null +++ b/view/molistar/modules/dailyConsumption/css/index.css @@ -0,0 +1,796 @@ +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: 10%; + 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 .act { + color: #290C05; + background: url(../images/act.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; +} + +.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; +} + +.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; +} + +.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 .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); +} diff --git a/view/molistar/modules/dailyConsumption/css/index.scss b/view/molistar/modules/dailyConsumption/css/index.scss new file mode 100644 index 00000000..0693100a --- /dev/null +++ b/view/molistar/modules/dailyConsumption/css/index.scss @@ -0,0 +1,771 @@ +@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: 10%; + 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%; + } + + .act { + color: #290C05; + background: url(../images/act.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; + } + + 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/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; + } + + 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 { + .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); + } +} \ No newline at end of file diff --git a/view/molistar/modules/dailyConsumption/images/210.png b/view/molistar/modules/dailyConsumption/images/210.png new file mode 100644 index 00000000..39e9d798 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/210.png differ diff --git a/view/molistar/modules/dailyConsumption/images/210ar.png b/view/molistar/modules/dailyConsumption/images/210ar.png new file mode 100644 index 00000000..ac3cae8f Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/210ar.png differ diff --git a/view/molistar/modules/dailyConsumption/images/350.png b/view/molistar/modules/dailyConsumption/images/350.png new file mode 100644 index 00000000..831b45a0 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/350.png differ diff --git a/view/molistar/modules/dailyConsumption/images/3500.png b/view/molistar/modules/dailyConsumption/images/3500.png new file mode 100644 index 00000000..30d08057 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/3500.png differ diff --git a/view/molistar/modules/dailyConsumption/images/3500ar.png b/view/molistar/modules/dailyConsumption/images/3500ar.png new file mode 100644 index 00000000..de994903 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/3500ar.png differ diff --git a/view/molistar/modules/dailyConsumption/images/350ar.png b/view/molistar/modules/dailyConsumption/images/350ar.png new file mode 100644 index 00000000..066aee29 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/350ar.png differ diff --git a/view/molistar/modules/dailyConsumption/images/7.png b/view/molistar/modules/dailyConsumption/images/7.png new file mode 100644 index 00000000..2f931e98 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/7.png differ diff --git a/view/molistar/modules/dailyConsumption/images/70.png b/view/molistar/modules/dailyConsumption/images/70.png new file mode 100644 index 00000000..06df7065 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/70.png differ diff --git a/view/molistar/modules/dailyConsumption/images/700.png b/view/molistar/modules/dailyConsumption/images/700.png new file mode 100644 index 00000000..bceb9db4 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/700.png differ diff --git a/view/molistar/modules/dailyConsumption/images/700ar.png b/view/molistar/modules/dailyConsumption/images/700ar.png new file mode 100644 index 00000000..dad072a4 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/700ar.png differ diff --git a/view/molistar/modules/dailyConsumption/images/70ar.png b/view/molistar/modules/dailyConsumption/images/70ar.png new file mode 100644 index 00000000..6d0f1fc0 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/70ar.png differ diff --git a/view/molistar/modules/dailyConsumption/images/7ar.png b/view/molistar/modules/dailyConsumption/images/7ar.png new file mode 100644 index 00000000..39550ce4 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/7ar.png differ diff --git a/view/molistar/modules/dailyConsumption/images/act.png b/view/molistar/modules/dailyConsumption/images/act.png new file mode 100644 index 00000000..1fd507fe Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/act.png differ diff --git a/view/molistar/modules/dailyConsumption/images/bf.png b/view/molistar/modules/dailyConsumption/images/bf.png new file mode 100644 index 00000000..16d897f2 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/bf.png differ diff --git a/view/molistar/modules/dailyConsumption/images/bg.png b/view/molistar/modules/dailyConsumption/images/bg.png new file mode 100644 index 00000000..316f7cdd Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/bg.png differ diff --git a/view/molistar/modules/dailyConsumption/images/box.png b/view/molistar/modules/dailyConsumption/images/box.png new file mode 100644 index 00000000..6d78f2a0 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/box.png differ diff --git a/view/molistar/modules/dailyConsumption/images/close.png b/view/molistar/modules/dailyConsumption/images/close.png new file mode 100644 index 00000000..533a82b2 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/close.png differ diff --git a/view/molistar/modules/dailyConsumption/images/false.png b/view/molistar/modules/dailyConsumption/images/false.png new file mode 100644 index 00000000..c2fba5ba Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/false.png differ diff --git a/view/molistar/modules/dailyConsumption/images/gold.png b/view/molistar/modules/dailyConsumption/images/gold.png new file mode 100644 index 00000000..a5500711 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/gold.png differ diff --git a/view/molistar/modules/dailyConsumption/images/header.png b/view/molistar/modules/dailyConsumption/images/header.png new file mode 100644 index 00000000..b28f243c Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/header.png differ diff --git a/view/molistar/modules/dailyConsumption/images/ruleBg.png b/view/molistar/modules/dailyConsumption/images/ruleBg.png new file mode 100644 index 00000000..4986c3cb Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/ruleBg.png differ diff --git a/view/molistar/modules/dailyConsumption/images/ruleTitle.png b/view/molistar/modules/dailyConsumption/images/ruleTitle.png new file mode 100644 index 00000000..9a8274a6 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/ruleTitle.png differ diff --git a/view/molistar/modules/dailyConsumption/images/rule_cion.png b/view/molistar/modules/dailyConsumption/images/rule_cion.png new file mode 100644 index 00000000..36869081 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/rule_cion.png differ diff --git a/view/molistar/modules/dailyConsumption/images/tab.png b/view/molistar/modules/dailyConsumption/images/tab.png new file mode 100644 index 00000000..4093acff Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/tab.png differ diff --git a/view/molistar/modules/dailyConsumption/images/time.png b/view/molistar/modules/dailyConsumption/images/time.png new file mode 100644 index 00000000..11728c06 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/time.png differ diff --git a/view/molistar/modules/dailyConsumption/images/timeBg.png b/view/molistar/modules/dailyConsumption/images/timeBg.png new file mode 100644 index 00000000..44feb524 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/timeBg.png differ diff --git a/view/molistar/modules/dailyConsumption/images/title.png b/view/molistar/modules/dailyConsumption/images/title.png new file mode 100644 index 00000000..fe450c50 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/title.png differ diff --git a/view/molistar/modules/dailyConsumption/images/travel/back.png b/view/molistar/modules/dailyConsumption/images/travel/back.png new file mode 100644 index 00000000..2b3812da Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/travel/back.png differ diff --git a/view/molistar/modules/dailyConsumption/images/travel/backB.png b/view/molistar/modules/dailyConsumption/images/travel/backB.png new file mode 100644 index 00000000..92e190c7 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/travel/backB.png differ diff --git a/view/molistar/modules/dailyConsumption/images/true.png b/view/molistar/modules/dailyConsumption/images/true.png new file mode 100644 index 00000000..fcccb620 Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/true.png differ diff --git a/view/molistar/modules/dailyConsumption/images/txk.png b/view/molistar/modules/dailyConsumption/images/txk.png new file mode 100644 index 00000000..3ddbb55a Binary files /dev/null and b/view/molistar/modules/dailyConsumption/images/txk.png differ diff --git a/view/molistar/modules/dailyConsumption/index.html b/view/molistar/modules/dailyConsumption/index.html new file mode 100644 index 00000000..c7231aa5 --- /dev/null +++ b/view/molistar/modules/dailyConsumption/index.html @@ -0,0 +1,222 @@ + + + +
+ + +
+ 1. وقت النشاط: يوميًا من 00:00 إلى 23:59 (GMT+3).
+ 2. يتم حساب إنفاقك اليومي على المنصة، إرسال 1 هدية بعملة = 1 قيمة العملة؛ 1 هدية الحظ بعملة = 0.05 قيمة العملة.
+ 3. عند وصولك إلى المستوى المناسب، ستحصل على مكافأة المستوى المناسب.
+
+ القيود:
+ 1. وكلاء الشحن لا يشاركون في هذا النشاط.
+ 2. لا يتم احتساب مدخلات اللعبة كاستهلاك للعملات المعدنية.
+
+ ملاحظة:
+ 1. هذا النشاط ليس له علاقة بـ Google و Apple.
+
+ 1. وقت النشاط: يوميًا من 00:00 إلى 23:59 (GMT+3).
+ 2. يتم حساب إنفاقك اليومي على المنصة، إرسال 1 هدية بعملة = 1 قيمة العملة؛ 1 هدية الحظ بعملة = 0.05 قيمة العملة.
+ 3. عند وصولك إلى المستوى المناسب، ستحصل على مكافأة المستوى المناسب.
+
+ القيود:
+ 1. وكلاء الشحن لا يشاركون في هذا النشاط.
+ 2. لا يتم احتساب مدخلات اللعبة كاستهلاك للعملات المعدنية.
+
+ ملاحظة:
+ 1. هذا النشاط ليس له علاقة بـ Google و Apple.
+
+ 1. Activity time: daily 0:00-23:59 (GMT+8).
+ 2. Daily calculation of your spending in the platform, send 1 coin gift = 1 coin value; 1 coin lucky
+ gift = 0.02 coin value.
+ 3. When you reach the corresponding level, you will get the corresponding level reward.
+
+ Restrictions:
+ 1. Recharge agent do not participate in this activity.
+ 2. The input of game is not counted as consumption of coins.
+
+ Attention:
+ 1. This activity has nothing to do with Google and Apple.
+
+ 1. 活動時間:每日 0:00-23:59(GMT+3)。
+ 2. 每日計算您在平台上的消費,送 1 枚金幣禮物 = 1 枚金幣價值;1 枚金幣幸運禮物 = 0.05 枚金幣價值。
+ 3. 當您達到相應級別時,您將獲得相應級別的獎勵。
+
+ 限制:
+ 1. 充值代理不參加此活動。
+ 2. 遊戲的投入不計為金幣消費。
+
+ 注意:
+ 1. 此活動與 Google 和 Apple 無關。
+
+ 1. 活動時間:每日 0:00-23:59(GMT+8)。
+ 2. 每日計算您在平台上的消費,送 1 枚金幣禮物 = 1 枚金幣價值;1 枚金幣幸運禮物 = 0.02 枚金幣價值。
+ 3. 當您達到相應級別時,您將獲得相應級別的獎勵。
+
+ 限制:
+ 1. 充值代理不參加此活動。
+ 2. 遊戲的投入不計為金幣消費。
+
+ 注意:
+ 1. 此活動與 Google 和 Apple 無關。
+
+ 1. 活動時間:每日 0:00-23:59(GMT+3)。
+ 2. 每日計算您在平台上的消費,送 1 枚金幣禮物 = 1 枚金幣價值;1 枚金幣幸運禮物 = 0.05 枚金幣價值。
+ 3. 當您達到相應級別時,您將獲得相應級別的獎勵。
+
+ 限制:
+ 1. 充值代理不參加此活動。
+ 2. 遊戲的投入不計為金幣消費。
+
+ 注意:
+ 1. 此活動與 Google 和 Apple 無關。
+