diff --git a/view/molistar/activity/2025-JordanIndependenceDay/css/index.css b/view/molistar/activity/2025-JordanIndependenceDay/css/index.css new file mode 100644 index 00000000..8ba96bb2 --- /dev/null +++ b/view/molistar/activity/2025-JordanIndependenceDay/css/index.css @@ -0,0 +1,889 @@ +html, +body { + width: 100%; + background: #1B3021; +} + +.back { + width: 100%; + height: 0.5866666667rem; + line-height: 0.5866666667rem; + position: fixed; + left: 0; + top: 0.8666666667rem; + text-align: center; + color: #FFFFFF; + font-size: 0.5066666667rem; + font-weight: bold; + z-index: 10; +} +.back img { + width: 0.5866666667rem; + height: 0.5866666667rem; + position: absolute; + left: 0.24rem; + top: 0rem; +} + +.header { + width: 10rem; + height: 12.4533333333rem; + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + position: relative; +} +.header .date { + width: 8.9333333333rem; + height: 0.7466666667rem; + line-height: 0.7466666667rem; + background: url(../images/time_bg.png) no-repeat; + background-size: 100% 100%; + text-align: center; + color: #FFF783; + font-size: 0.3466666667rem; + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.7866666667rem; +} +.header .rule { + width: 1.4666666667rem; + height: 0.72rem; + line-height: 0.72rem; + text-indent: 0.1rem; + text-align: center; + color: #433402; + font-size: 0.3733333333rem; + font-weight: 500; + background: url(../images/rule_icon.png) no-repeat; + background-size: 100% 100%; + position: absolute; + right: 0; + top: 6.2666666667rem; +} + +.giftBox { + position: relative; + width: 10rem; + height: 6.4266666667rem; + background: url(../images/giftBox.png) no-repeat; + background-size: 100% 100%; + margin: 0rem auto 0.4266666667rem; + overflow: hidden; +} +.giftBox .title { + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0rem; + text-align: center; + width: 7.5066666667rem; + height: 1.8533333333rem; + line-height: 2.6666666667rem; + color: #4D0D00; + font-size: 0.4533333333rem; + font-weight: 600; + background: url(../images/title.png) no-repeat; + background-size: 100% 100%; +} +.giftBox .content { + width: 8.1333333333rem; + color: #FFF783; + font-size: 0.3466666667rem; + font-weight: 400; + line-height: 0.56rem; + margin: 2.6rem auto 0.2rem; +} +.giftBox .gift { + height: 2.6666666667rem; + display: flex; + justify-content: space-between; + margin: 2.6666666667rem 0.64rem 0; +} +.giftBox .gift div { + width: 2.6666666667rem; + height: 2.6666666667rem; + position: relative; + background: url(../images/sGiftBox.png) no-repeat; + background-size: 100% 100%; +} +.giftBox .gift div img { + width: 2.1333333333rem; + height: 2.1333333333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.24rem; +} +.giftBox .gift div span { + width: 100%; + text-align: center; + color: #FFF783; + font-size: 0.3733333333rem; + font-weight: 600; + position: absolute; + left: 0; + bottom: -0.5rem; +} + +.timeBox { + width: 100%; + height: 1.3866666667rem; + margin: 0.2rem auto 0.2933333333rem; + box-sizing: border-box; + padding: 0 1.6rem; + display: flex; + justify-content: space-between; + overflow: hidden; + gap: 0.4rem; + position: absolute; + top: 10.3733333333rem; +} +.timeBox div { + width: 1.32rem; + height: 1.2266666667rem; + box-sizing: border-box; + text-align: center; + background: url(../images/timeBox_in.png) no-repeat; + background-size: 100% 100%; +} +.timeBox div span { + display: block; + color: #FFF783; + font-size: 0.4533333333rem; + font-weight: 500; + margin: 0.2133333333rem auto 0.0266666667rem; +} +.timeBox div b { + display: block; + color: #FFF783; + font-size: 0.32rem; + font-weight: 400; + margin-top: 0.0533333333rem; +} + +.page1 { + margin: 1.8666666667rem auto 0; +} +.page1 .top { + width: 10rem; + height: 13.3333333333rem; + position: relative; + background: url(../images/topBg.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + padding: 0.1066666667rem 0 0; +} +.page1 .top .tab { + width: 100%; + height: 1rem; + box-sizing: border-box; + line-height: 1rem; + text-align: center; + display: flex; + justify-content: space-between; + margin: 0rem auto 0.32rem; + position: absolute; + top: -8%; + gap: 0.2666666667rem; + padding: 0 0.5333333333rem; +} +.page1 .top .tab div { + width: 4.3333333333rem; + height: 1rem; + color: #4D0D00; + font-size: 0.4533333333rem; + font-weight: 800; + background: url(../images/tab.png) no-repeat; + background-size: 100% 100%; +} +.page1 .top .tab .act { + background: url(../images/actTab.png) no-repeat; + background-size: 100% 100%; +} +.page1 .top .top1 { + width: 8rem; + height: 5.0666666667rem; + position: relative; + margin: 1rem auto 0; +} +.page1 .top .top1 .ts { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; +} +.page1 .top .top1 .tx { + width: 2.3733333333rem; + height: 2.3733333333rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 1.3333333333rem; +} +.page1 .top .top1 .name { + width: 35%; + left: 50%; + transform: translateX(-50%); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: 0.48rem; + line-height: 0.48rem; + position: absolute; + top: 4.2666666667rem; + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; +} +.page1 .top .top1 .name b { + max-width: 2.6rem; + text-align: right; + color: #FFF783; + font-size: 0.4rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.page1 .top .top1 .name img { + display: inline-block; + width: 1.0266666667rem; + height: 0.48rem; + margin: 0 0.08rem; +} +.page1 .top .top1 .id { + width: 100%; + position: absolute; + top: 4.88rem; + text-align: center; + left: 0; + z-index: 3; + color: #FFF783; + font-size: 0.3733333333rem; + font-weight: 400; +} +.page1 .top .top1 .score { + height: 0.88rem; + line-height: 0.88rem; + position: absolute; + top: 5.3333333333rem; + left: 50%; + transform: translate(-50%, 0); + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 0.1333333333rem; + min-width: 2.4rem; +} +.page1 .top .top1 .score b { + color: #2D2A00; + font-size: 0.3733333333rem; + font-weight: 500; +} +.page1 .top .top1 .score img { + display: inline-block; + width: 0.4266666667rem; + height: 0.4266666667rem; + margin-right: 0.1rem; +} +.page1 .top .top2 { + width: 4rem; + height: 4rem; + position: absolute; + left: 0.6666666667rem; + top: 7.3333333333rem; + margin: 0 auto 0; +} +.page1 .top .top2 .ts { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; +} +.page1 .top .top2 .tx { + width: 2.3733333333rem; + height: 2.3733333333rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.8266666667rem; +} +.page1 .top .top2 .name { + width: 83%; + left: 50%; + transform: translateX(-50%); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: 0.48rem; + line-height: 0.48rem; + position: absolute; + top: 3.7866666667rem; + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; +} +.page1 .top .top2 .name b { + max-width: 2.6rem; + text-align: right; + color: #FFF783; + font-size: 0.4rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.page1 .top .top2 .name img { + display: inline-block; + width: 1.0266666667rem; + height: 0.48rem; + margin: 0 0.08rem; +} +.page1 .top .top2 .id { + width: 100%; + position: absolute; + top: 4.3733333333rem; + text-align: center; + left: 0; + z-index: 3; + color: #FFF783; + font-size: 0.3733333333rem; + font-weight: 400; +} +.page1 .top .top2 .score { + height: 0.88rem; + line-height: 0.88rem; + position: absolute; + top: 4.9333333333rem; + left: 50%; + transform: translate(-50%, 0); + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 0.1333333333rem; + min-width: 2.4rem; +} +.page1 .top .top2 .score b { + color: #2D2A00; + font-size: 0.3733333333rem; + font-weight: 500; +} +.page1 .top .top2 .score img { + display: inline-block; + width: 0.4266666667rem; + height: 0.4266666667rem; + margin-right: 0.1rem; +} +.page1 .top .top3 { + width: 4rem; + height: 4rem; + position: absolute; + right: 0.6666666667rem; + top: 7.3333333333rem; + margin: 0 auto 0; +} +.page1 .top .top3 .ts { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; +} +.page1 .top .top3 .tx { + width: 2.3733333333rem; + height: 2.3733333333rem; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.8266666667rem; +} +.page1 .top .top3 .name { + width: 83%; + left: 50%; + transform: translateX(-50%); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: 0.48rem; + line-height: 0.48rem; + position: absolute; + top: 3.7866666667rem; + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; +} +.page1 .top .top3 .name b { + max-width: 2.6rem; + text-align: right; + color: #FFF783; + font-size: 0.4rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.page1 .top .top3 .name img { + display: inline-block; + width: 1.0266666667rem; + height: 0.48rem; + margin: 0 0.08rem; +} +.page1 .top .top3 .id { + width: 100%; + position: absolute; + top: 4.3733333333rem; + text-align: center; + left: 0; + z-index: 3; + color: #FFF783; + font-size: 0.3733333333rem; + font-weight: 400; +} +.page1 .top .top3 .score { + height: 0.88rem; + line-height: 0.88rem; + position: absolute; + top: 4.9333333333rem; + left: 50%; + transform: translate(-50%, 0); + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 0.1333333333rem; + min-width: 2.4rem; +} +.page1 .top .top3 .score b { + color: #2D2A00; + font-size: 0.3733333333rem; + font-weight: 500; +} +.page1 .top .top3 .score img { + display: inline-block; + width: 0.4266666667rem; + height: 0.4266666667rem; + margin-right: 0.1rem; +} +.page1 .bottom { + width: 10rem; + height: 0.6666666667rem; + background: url(../images/bottomBg.png) no-repeat; + background-size: 100% 100%; + margin: -0.2rem auto 0; + position: relative; + z-index: 2; +} +.page1 .content { + width: 10rem; + height: auto; + margin: 0 auto 0; + background: url(../images/contentBg.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; +} +.page1 .content ul { + width: 8.8rem; + margin: 0.3733333333rem auto 0rem; +} +.page1 .content ul li { + width: 100%; + background: linear-gradient(0deg, #9F0141, #760231); + margin-bottom: 0.3466666667rem; + overflow: hidden; + padding: 0 0.32rem 0.2533333333rem 0.2rem; + box-sizing: border-box; + background: url(../images/li_bg.png) no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; +} +.page1 .content ul li .num { + float: left; + width: 0.5333333333rem; + line-height: 1.5466666667rem; + color: #FFF783; + font-size: 0.4266666667rem; + font-weight: 600; + margin-right: 0.36rem; + text-align: center; +} +.page1 .content ul li .tx { + float: left; + width: 1.1066666667rem; + height: 1.1066666667rem; + border-radius: 50%; + border: 0.0266666667rem solid #FFF783; + display: block; + margin-top: 0.2533333333rem; + margin-right: 0.1866666667rem; + margin-left: 0.1866666667rem; +} +.page1 .content ul li .info { + float: left; + margin-top: 0.3333333333rem; +} +.page1 .content ul li .info p { + height: 0.48rem; + line-height: 0.48rem; + margin-bottom: 0.1333333333rem; + display: flex; +} +.page1 .content ul li .info p b { + max-width: 1.9rem; + display: inline-block; + height: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF783; + font-size: 0.4rem; + font-weight: 500; +} +.page1 .content ul li .info p img { + display: inline-block; + width: 1.0266666667rem; + height: 0.48rem; + margin: 0 0.08rem; +} +.page1 .content ul li .info span { + color: #FFF783; + font-size: 0.3733333333rem; + font-weight: 400; + display: block; +} +.page1 .content ul li .score { + display: flex; + height: 0.88rem; + line-height: 0.88rem; + margin-left: auto; + align-items: center; + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 0.1333333333rem; + min-width: 2.4rem; + justify-content: center; +} +.page1 .content ul li .score img { + display: inline-block; + width: 0.4266666667rem; + height: 0.4266666667rem; + margin: 0 0.0666666667rem 0 0.0666666667rem; + vertical-align: middle; +} +.page1 .content ul li .score b { + font-weight: 500; + font-size: 0.3733333333rem; + color: #2D2A00; + vertical-align: middle; +} +.page1 .content .more { + width: 1.6533333333rem; + height: 0.5866666667rem; + line-height: 0.5866666667rem; + text-align: center; + padding: 0 0.4533333333rem; + margin: 0 auto 0.3rem; + color: #FFF783; + border: 0.0266666667rem solid #FFF783; + border-radius: 0.5866666667rem; + box-sizing: border-box; + font-size: 0.32rem; + font-weight: 500; +} +.page1 .my { + position: fixed; + z-index: 9; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 10rem; + background: #1B3021; + border-radius: 0.24rem 0.24rem 0px 0px; + border: 0.04rem solid #FFF783; + box-sizing: border-box; + padding: 0 0.52rem 0.2rem 0.2rem; + display: flex; + align-items: center; +} +.page1 .my .num { + float: left; + width: 0.5333333333rem; + height: 100%; + line-height: 1.7333333333rem; + color: #FFF783; + font-size: 0.4266666667rem; + font-weight: 600; + margin-right: 0.36rem; + text-align: center; +} +.page1 .my .tx { + float: left; + width: 1.1066666667rem; + height: 1.1066666667rem; + border-radius: 50%; + border: 0.0266666667rem solid #FFF783; + display: block; + margin-top: 0.2133333333rem; + margin-right: 0.1866666667rem; + margin-left: 0.1866666667rem; +} +.page1 .my .info { + float: left; + margin-top: 0.3333333333rem; +} +.page1 .my .info p { + height: 0.48rem; + line-height: 0.48rem; + margin-bottom: 0.1333333333rem; +} +.page1 .my .info p b { + max-width: 2rem; + display: inline-block; + height: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF783; + font-size: 0.4rem; + font-weight: 500; +} +.page1 .my .info p img { + display: inline-block; + width: 1.0266666667rem; + height: 0.48rem; + margin: 0 0.08rem; +} +.page1 .my .info span { + color: #FFF783; + font-size: 0.3733333333rem; + font-weight: 400; + display: block; +} +.page1 .my .score { + display: flex; + height: 0.88rem; + line-height: 0.88rem; + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 0.1333333333rem; + min-width: 2.4rem; + align-items: center; + justify-content: center; + margin-left: auto; +} +.page1 .my .score img { + display: inline-block; + width: 0.4266666667rem; + height: 0.4266666667rem; + margin: 0 0.0666666667rem 0 0.0666666667rem; + vertical-align: middle; +} +.page1 .my .score b { + font-weight: 500; + font-size: 0.3733333333rem; + color: #2D2A00; + vertical-align: middle; +} + +.page2 { + display: none; + margin: -0.5rem auto 0; +} +.page2 .top { + width: 10rem; + height: 2.1333333333rem; + position: relative; + margin: 0 auto -0.2rem; + overflow: hidden; +} +.page2 .top .tab { + width: 100%; + height: 1rem; + box-sizing: border-box; + line-height: 1rem; + text-align: center; + display: flex; + justify-content: space-between; + margin: 0rem auto 0; + position: absolute; + top: 40%; + gap: 0.2666666667rem; + padding: 0 0.5333333333rem; +} +.page2 .top .tab div { + width: 4.3333333333rem; + height: 1rem; + color: #4D0D00; + font-size: 0.4533333333rem; + font-weight: 800; + background: url(../images/tab.png) no-repeat; + background-size: 100% 100%; +} +.page2 .top .tab .act { + background: url(../images/actTab.png) no-repeat; + background-size: 100% 100%; +} +.page2 .bottom { + width: 10rem; + height: 0.6666666667rem; + background: url(../images/bottomBg.png) no-repeat; + background-size: 100% 100%; + margin: -0.2rem auto 0; +} +.page2 .content { + width: 10rem; + margin: 0 auto 0; + background: url(../images/rewardBg.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; +} +.page2 .content .box { + width: 10rem; + height: 29.04rem; + margin: 0.2rem auto 0; + position: relative; +} +.page2 .content .box .bo { + position: absolute; + width: 0.6933333333rem; + height: 0.6933333333rem; + left: 1.88rem; +} +.page2 .content .box .bo1 { + top: 9.92rem; +} +.page2 .content .box .bo2 { + top: 23rem; +} +.page2 .content .box .bo3 { + top: 38.56rem; +} + +.rules { + position: fixed; + z-index: 999; + right: 0; + bottom: 0; + left: 0; + top: 0; + background: rgba(0, 0, 0, 0.5); + display: none; +} +.rules .rule_in { + width: 10rem; + height: 6.4266666667rem; + background: url(../images/giftBox.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.rules .rule_in .close { + position: absolute; + width: 0.9066666667rem; + height: 0.9066666667rem; + right: 0.2666666667rem; + top: -0.08rem; +} +.rules .rule_in .titles { + width: 7.5066666667rem; + height: 1.8533333333rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 0.1066666667rem; + text-align: center; + color: #4D0D00; + font-size: 0.4533333333rem; + font-weight: 600; + line-height: 2.6133333333rem; + background: url(../images/title.png) no-repeat; + background-size: 100% 100%; +} +.rules .rule_in .text { + width: 8.2266666667rem; + height: 6.2rem; + overflow-y: scroll; + color: #FFF783; + font-size: 0.3733333333rem; + font-weight: 400; + line-height: 0.56rem; + margin: 2.1333333333rem auto 0; +} +.rules .rule_in .text::-webkit-scrollbar { + display: none; +} + +.bottomText { + width: 100%; + text-align: center; + color: #FFF783; + font-size: 0.32rem; + font-weight: 400; + margin: 0.6666666667rem auto 2.4rem; +} + +.video { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 99; + display: none; +} +.video video { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 65%; +} +.video .close { + width: 0.9066666667rem; + height: 0.9066666667rem; + position: absolute; + top: 10%; + right: 0.9333333333rem; + z-index: 9; +} + +.arabic .header { + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; +} +.arabic .page1 .content ul li .score { + margin-right: auto; + margin-left: 0; +} +.arabic .page1 .my .score { + margin-right: auto; + margin-left: 0; +} \ No newline at end of file diff --git a/view/molistar/activity/2025-JordanIndependenceDay/css/index.scss b/view/molistar/activity/2025-JordanIndependenceDay/css/index.scss new file mode 100644 index 00000000..c0c34f07 --- /dev/null +++ b/view/molistar/activity/2025-JordanIndependenceDay/css/index.scss @@ -0,0 +1,1002 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + background: #1B3021; +} + + +.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(934); + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + position: relative; + + .date { + width: px2rem(670); + height: px2rem(56); + line-height: px2rem(56); + background: url(../images/time_bg.png) no-repeat; + background-size: 100% 100%; + text-align: center; + color: #FFF783; + font-size: px2rem(26); + font-weight: 500; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(284); + } + + .rule { + width: px2rem(110); + height: px2rem(54); + line-height: px2rem(54); + text-indent: 0.1rem; + text-align: center; + color: #433402;; + font-size: px2rem(28); + font-weight: 500; + background: url(../images/rule_icon.png) no-repeat; + background-size: 100% 100%; + position: absolute; + right: 0; + top: px2rem(470); + } +} + +.giftBox { + position: relative; + width: px2rem(750); + height: px2rem(482); + background: url(../images/giftBox.png) no-repeat; + background-size: 100% 100%; + margin: px2rem(0) auto px2rem(32); + overflow: hidden; + + .title { + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(0); + text-align: center; + width: px2rem(563); + height: px2rem(139); + line-height: px2rem(200); + color: #4D0D00; + font-size: px2rem(34); + font-weight: 600; + background: url(../images/title.png) no-repeat; + background-size: 100% 100%; + } + + .content { + width: px2rem(610); + color: #FFF783; + font-size: px2rem(26); + font-weight: 400; + line-height: px2rem(42); + margin: px2rem(195) auto px2rem(15); + } + + .gift { + // width: px2rem(610); + height: px2rem(200); + display: flex; + justify-content: space-between; + margin: px2rem(200) px2rem(48) 0; + + div { + width: px2rem(200); + height: px2rem(200); + position: relative; + background: url(../images/sGiftBox.png) no-repeat; + background-size: 100% 100%; + + img { + width: px2rem(160); + height: px2rem(160); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(18); + } + + span { + width: 100%; + text-align: center; + color: #FFF783; + font-size: px2rem(28); + font-weight: 600; + position: absolute; + left: 0; + bottom: -0.5rem; + } + } + } +} + +.timeBox { + width: 100%; + height: px2rem(104); + // background: url(../images/timeBox.png) no-repeat; + // background-size: 100% 100%; + margin: px2rem(15) auto px2rem(22); + box-sizing: border-box; + padding: 0 px2rem(120); + display: flex; + justify-content: space-between; + overflow: hidden; + gap: px2rem(30); + position: absolute; + top: px2rem(778); + div { + width: px2rem(99); + height: px2rem(92); + // margin-top: px2rem(11); + box-sizing: border-box; + text-align: center; + background: url(../images/timeBox_in.png) no-repeat; + background-size: 100% 100%; + + // border: px2rem(2) solid #FFF1B2; + // background: #700034; + // border-radius: px2rem(14); + + span { + display: block; + color: #FFF783; + font-size: px2rem(34); + font-weight: 500; + margin: px2rem(16) auto px2rem(2); + } + + b { + display: block; + color: #FFF783; + font-size: px2rem(24); + font-weight: 400; + margin-top: px2rem(4); + } + } +} + +.page1 { + // display: none; + margin: px2rem(140) auto 0; + .top { + width: px2rem(750); + height: px2rem(1000); + position: relative; + background: url(../images/topBg.png) no-repeat; + background-size: 100% 100%; + margin: 0 auto 0; + // overflow: hidden; + padding: px2rem(8) 0 0; + .tab { + width:100%; + height: px2rem(75); + box-sizing: border-box; + line-height: px2rem(75); + text-align: center; + display: flex; + justify-content: space-between; + margin: px2rem(0) auto px2rem(24); + position: absolute; + top: -8%; + gap: px2rem(20); + padding: 0 px2rem(40); + div { + width: px2rem(325); + height: px2rem(75); + color: #4D0D00; + font-size: px2rem(34); + font-weight: 800; + background: url(../images/tab.png) no-repeat; + background-size: 100% 100%; + } + + .act { + background: url(../images/actTab.png) no-repeat; + background-size: 100% 100%; + } + } + + .top1 { + width: px2rem(600); + height: px2rem(380); + position: relative; + margin: 1rem auto 0; + + .ts { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; + } + + .tx { + width: px2rem(178); + height: px2rem(178); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(100); + } + + .name { + width: 35%; + left: 50%; + transform: translateX(-50%); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: px2rem(36); + line-height: px2rem(36); + position: absolute; + top: px2rem(320); + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; + + b { + max-width: 2.6rem; + text-align: right; + color: #FFF783; + font-size: px2rem(30); + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + img { + display: inline-block; + width: px2rem(77); + height: px2rem(36); + margin: 0 px2rem(6); + } + } + + .id { + width: 100%; + position: absolute; + top: px2rem(366); + text-align: center; + left: 0; + z-index: 3; + color: #FFF783; + font-size: px2rem(28); + font-weight: 400; + } + + .score { + // min-width: px2rem(201); + height: px2rem(66); + line-height: px2rem(66); + position: absolute; + top: px2rem(400); + left: 50%; + transform: translate(-50%, 0); + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 px2rem(10); + min-width:px2rem(180) ; + + b { + color: #2D2A00; + font-size: px2rem(28); + font-weight: 500; + } + + img { + display: inline-block; + width: px2rem(32); + height: px2rem(32); + margin-right: 0.1rem; + } + } + } + + .top2 { + width: px2rem(300); + height: px2rem(300); + position: absolute; + left: px2rem(50); + top: px2rem(550); + margin: 0 auto 0; + + .ts { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; + } + + .tx { + width: px2rem(178); + height: px2rem(178); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(62); + } + + .name { + width: 83%; + left: 50%; + transform: translateX(-50%); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: px2rem(36); + line-height: px2rem(36); + position: absolute; + top: px2rem(284); + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; + + b { + max-width: 2.6rem; + text-align: right; + color: #FFF783; + font-size: px2rem(30); + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + img { + display: inline-block; + width: px2rem(77); + height: px2rem(36); + margin: 0 px2rem(6); + } + } + + .id { + width: 100%; + position: absolute; + top: px2rem(328); + text-align: center; + left: 0; + z-index: 3; + color: #FFF783; + font-size: px2rem(28); + font-weight: 400; + } + + .score { + // width: 100%; + height: px2rem(66); + line-height: px2rem(66); + position: absolute; + top: px2rem(370); + left: 50%; + transform: translate(-50%, 0); + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 px2rem(10); + min-width:px2rem(180) ; + b { + color: #2D2A00; + font-size: px2rem(28); + font-weight: 500; + } + + img { + display: inline-block; + width: px2rem(32); + height: px2rem(32); + margin-right: 0.1rem; + } + } + } + + .top3 { + width: px2rem(300); + height: px2rem(300); + position: absolute; + right: px2rem(50); + top: px2rem(550); + margin: 0 auto 0; + + .ts { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; + } + + .tx { + width: px2rem(178); + height: px2rem(178); + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(62); + } + + .name { + width: 83%; + left: 50%; + transform: translateX(-50%); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + height: px2rem(36); + line-height: px2rem(36); + position: absolute; + top: px2rem(284); + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; + + b { + max-width: 2.6rem; + text-align: right; + color: #FFF783; + font-size: px2rem(30); + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + img { + display: inline-block; + width: px2rem(77); + height: px2rem(36); + margin: 0 px2rem(6); + } + } + + .id { + width: 100%; + position: absolute; + top: px2rem(328); + text-align: center; + left: 0; + z-index: 3; + color: #FFF783; + font-size: px2rem(28); + font-weight: 400; + } + + .score { + // width: 100%; + height: px2rem(66); + line-height: px2rem(66); + position: absolute; + top: px2rem(370); + left: 50%; + transform: translate(-50%, 0); + display: flex; + z-index: 3; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 px2rem(10); + min-width:px2rem(180) ; + b { + color: #2D2A00; + font-size: px2rem(28); + font-weight: 500; + } + + img { + display: inline-block; + width: px2rem(32); + height: px2rem(32); + margin-right: 0.1rem; + } + } + } + } + + .bottom { + width: px2rem(750); + height: px2rem(50); + background: url(../images/bottomBg.png) no-repeat; + background-size: 100% 100%; + margin: -0.2rem auto 0; + position: relative; + z-index: 2; + } + + .content { + width: px2rem(750); + height: auto; + margin: 0 auto 0; + background: url(../images/contentBg.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + + ul { + width: px2rem(660); + margin: px2rem(28) auto px2rem(0); + + li { + width: 100%; + // height: px2rem(116); + background: linear-gradient(0deg, #9F0141, #760231); + // border: px2rem(3) solid #FFF783; + margin-bottom: px2rem(26); + overflow: hidden; + padding: 0 px2rem(24) px2rem(19) px2rem(15); + box-sizing: border-box; + background: url(../images/li_bg.png) no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + .num { + float: left; + width: px2rem(40); + // height: 100%; + line-height: px2rem(116); + color: #FFF783; + font-size: px2rem(32); + font-weight: 600; + margin-right: px2rem(27); + text-align: center; + + } + + .tx { + float: left; + width: px2rem(83); + height: px2rem(83); + border-radius: 50%; + border: px2rem(2) solid #FFF783; + display: block; + margin-top: px2rem(19); + margin-right: px2rem(14); + margin-left: px2rem(14); + } + + .info { + float: left; + margin-top: px2rem(25); + + p { + height: px2rem(36); + line-height: px2rem(36); + margin-bottom: px2rem(10); + display: flex; + b { + max-width: 1.9rem; + display: inline-block; + height: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF783; + font-size: px2rem(30); + font-weight: 500; + } + + img { + display: inline-block; + width: px2rem(77); + height: px2rem(36); + margin: 0 px2rem(6); + } + } + + span { + color: #FFF783; + font-size: px2rem(28); + font-weight: 400; + display: block; + } + } + + .score { + display: flex; + // float: right; + height: px2rem(66); + line-height: px2rem(66); + margin-left: auto; + align-items: center; + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 px2rem(10); + min-width:px2rem(180) ; + justify-content: center; + img { + display: inline-block; + width: px2rem(32); + height: px2rem(32); + margin: 0 px2rem(5) 0 px2rem(5); + vertical-align: middle; + } + + b { + font-weight: 500; + font-size: px2rem(28); + color: #2D2A00; + vertical-align: middle; + } + } + } + } + + .more { + width: px2rem(124); + height: px2rem(44); + line-height: px2rem(44); + text-align: center; + padding: 0 px2rem(34); + margin: 0 auto 0.3rem; + color: #FFF783; + border: px2rem(2) solid #FFF783; + border-radius: px2rem(44); + box-sizing: border-box; + font-size: px2rem(24); + font-weight: 500; + } + } + + .my { + position: fixed; + z-index: 9; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: px2rem(750); + // height: px2rem(130); + background: #1B3021; + border-radius: px2rem(18) px2rem(18) 0px 0px; + border: px2rem(3) solid #FFF783; + box-sizing: border-box; + padding: 0 px2rem(39) px2rem(15) px2rem(15); + display: flex; + align-items: center; + .num { + float: left; + width: px2rem(40); + height: 100%; + line-height: px2rem(130); + color: #FFF783; + font-size: px2rem(32); + font-weight: 600; + margin-right: px2rem(27); + text-align: center; + } + + .tx { + float: left; + width: px2rem(83); + height: px2rem(83); + border-radius: 50%; + border: px2rem(2) solid #FFF783; + display: block; + margin-top: px2rem(16); + margin-right: px2rem(14); + margin-left: px2rem(14); + } + + .info { + float: left; + margin-top: px2rem(25); + + p { + height: px2rem(36); + line-height: px2rem(36); + margin-bottom: px2rem(10); + + b { + max-width: 2rem; + display: inline-block; + height: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF783; + font-size: px2rem(30); + font-weight: 500; + } + + img { + display: inline-block; + width: px2rem(77); + height: px2rem(36); + margin: 0 px2rem(6); + } + } + + span { + color: #FFF783; + font-size: px2rem(28); + font-weight: 400; + display: block; + } + } + + .score { + display: flex; + // float: right; + height: px2rem(66); + line-height: px2rem(66); + background: url(../images/score_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 px2rem(10); + min-width:px2rem(180) ; + align-items: center; + justify-content: center; + margin-left: auto; + img { + display: inline-block; + width: px2rem(32); + height: px2rem(32); + margin: 0 px2rem(5) 0 px2rem(5); + vertical-align: middle; + } + + b { + font-weight: 500; + font-size: px2rem(28); + color: #2D2A00; + vertical-align: middle; + } + } + } +} + +.page2 { + display: none; + margin: -0.5rem auto 0; + + .top { + width: px2rem(750); + height: px2rem(160); + position: relative; + // background: url(../images/topBg.png) no-repeat; + // background-size: 100% 100%; + margin: 0 auto -0.2rem; + overflow: hidden; + + .tab { + width:100%; + height: px2rem(75); + box-sizing: border-box; + line-height: px2rem(75); + text-align: center; + display: flex; + justify-content: space-between; + margin: px2rem(0) auto 0; + position: absolute; + top: 40%; + gap: px2rem(20); + padding: 0 px2rem(40); + div { + width: px2rem(325); + height: px2rem(75); + color: #4D0D00; + font-size: px2rem(34); + font-weight: 800; + background: url(../images/tab.png) no-repeat; + background-size: 100% 100%; + } + + .act { + background: url(../images/actTab.png) no-repeat; + background-size: 100% 100%; + } + } + } + + .bottom { + width: px2rem(750); + height: px2rem(50); + background: url(../images/bottomBg.png) no-repeat; + background-size: 100% 100%; + margin: -0.2rem auto 0; + } + + .content { + width: px2rem(750); + margin: 0 auto 0; + background: url(../images/rewardBg.png) no-repeat; + background-size: 100% 100%; + overflow: hidden; + + .box { + width: px2rem(750); + height: px2rem(2178); + // background: url(../images/rewardBg.png) no-repeat; + // background-size: 100% 100%; + margin: 0.2rem auto 0; + position: relative; + + .bo { + position: absolute; + width: px2rem(52); + height: px2rem(52); + left: px2rem(141); + } + + .bo1 { + top: px2rem(744); + } + + .bo2 { + top: px2rem(1725); + } + + .bo3 { + top: px2rem(2892); + } + } + } +} + +.rules { + position: fixed; + z-index: 999; + right: 0; + bottom: 0; + left: 0; + top: 0; + background: rgba(0, 0, 0, .5); + display: none; + + .rule_in { + width: px2rem(750); + height: px2rem(482); + background: url(../images/giftBox.png) no-repeat; + background-size: 100% 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + // overflow: hidden; + + .close { + position: absolute; + width: px2rem(68); + height: px2rem(68); + right: px2rem(20); + top: px2rem(-6); + } + + .titles { + width: px2rem(563); + height: px2rem(139); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(8); + text-align: center; + color: #4D0D00; + font-size: px2rem(34); + font-weight: 600; + line-height: px2rem(196); + background: url(../images/title.png) no-repeat; + background-size: 100% 100%; + } + + .text { + width: px2rem(617); + height: 6.2rem; + overflow-y: scroll; + color: #FFF783; + font-size: px2rem(28); + font-weight: 400; + line-height: px2rem(42); + margin: px2rem(160) auto 0; + + &::-webkit-scrollbar { + display: none; + } + } + } +} + +.bottomText { + width: 100%; + text-align: center; + color: #FFF783; + font-size: px2rem(24); + font-weight: 400; + margin: px2rem(50) auto px2rem(180); +} + +.video { + 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; + } +} + +.arabic { + .header { + background: url(../images/header.png) no-repeat; + background-size: 100% 100%; + } + + + .page1 .content ul li .score { + margin-right: auto; + margin-left: 0; + } + .page1 .my .score{ + margin-right: auto; + margin-left: 0; + } +} + diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/actTab.png b/view/molistar/activity/2025-JordanIndependenceDay/images/actTab.png new file mode 100644 index 00000000..2bbde498 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/actTab.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/bottomBg.png b/view/molistar/activity/2025-JordanIndependenceDay/images/bottomBg.png new file mode 100644 index 00000000..d24009ef Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/bottomBg.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/box.png b/view/molistar/activity/2025-JordanIndependenceDay/images/box.png new file mode 100644 index 00000000..e0f0b100 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/box.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/close.png b/view/molistar/activity/2025-JordanIndependenceDay/images/close.png new file mode 100644 index 00000000..dea8cde2 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/close.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/contentBg.png b/view/molistar/activity/2025-JordanIndependenceDay/images/contentBg.png new file mode 100644 index 00000000..9486ed1a Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/contentBg.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/giftBox.png b/view/molistar/activity/2025-JordanIndependenceDay/images/giftBox.png new file mode 100644 index 00000000..7ba4cadf Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/giftBox.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/header.png b/view/molistar/activity/2025-JordanIndependenceDay/images/header.png new file mode 100644 index 00000000..e83dc8e4 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/header.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/li_bg.png b/view/molistar/activity/2025-JordanIndependenceDay/images/li_bg.png new file mode 100644 index 00000000..44bf070f Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/li_bg.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/logo.png b/view/molistar/activity/2025-JordanIndependenceDay/images/logo.png new file mode 100644 index 00000000..ae87e7d9 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/logo.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/rewardBg.png b/view/molistar/activity/2025-JordanIndependenceDay/images/rewardBg.png new file mode 100644 index 00000000..164faff1 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/rewardBg.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/rule_icon.png b/view/molistar/activity/2025-JordanIndependenceDay/images/rule_icon.png new file mode 100644 index 00000000..b81df887 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/rule_icon.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/sGiftBox.png b/view/molistar/activity/2025-JordanIndependenceDay/images/sGiftBox.png new file mode 100644 index 00000000..7352a8d7 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/sGiftBox.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/score_bg.png b/view/molistar/activity/2025-JordanIndependenceDay/images/score_bg.png new file mode 100644 index 00000000..cbd88e43 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/score_bg.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/tab.png b/view/molistar/activity/2025-JordanIndependenceDay/images/tab.png new file mode 100644 index 00000000..962a3dc9 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/tab.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/timeBox_in.png b/view/molistar/activity/2025-JordanIndependenceDay/images/timeBox_in.png new file mode 100644 index 00000000..93a61c77 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/timeBox_in.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/title.png b/view/molistar/activity/2025-JordanIndependenceDay/images/title.png new file mode 100644 index 00000000..688b34fd Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/title.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/top1.png b/view/molistar/activity/2025-JordanIndependenceDay/images/top1.png new file mode 100644 index 00000000..9e5bb22c Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/top1.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/top2.png b/view/molistar/activity/2025-JordanIndependenceDay/images/top2.png new file mode 100644 index 00000000..81eeeffc Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/top2.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/top3.png b/view/molistar/activity/2025-JordanIndependenceDay/images/top3.png new file mode 100644 index 00000000..edab93a8 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/top3.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/topBg.png b/view/molistar/activity/2025-JordanIndependenceDay/images/topBg.png new file mode 100644 index 00000000..8092fffa Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/topBg.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/travel/back.png b/view/molistar/activity/2025-JordanIndependenceDay/images/travel/back.png new file mode 100644 index 00000000..2b3812da Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/travel/back.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/images/travel/backB.png b/view/molistar/activity/2025-JordanIndependenceDay/images/travel/backB.png new file mode 100644 index 00000000..92e190c7 Binary files /dev/null and b/view/molistar/activity/2025-JordanIndependenceDay/images/travel/backB.png differ diff --git a/view/molistar/activity/2025-JordanIndependenceDay/index.html b/view/molistar/activity/2025-JordanIndependenceDay/index.html new file mode 100644 index 00000000..afa56d20 --- /dev/null +++ b/view/molistar/activity/2025-JordanIndependenceDay/index.html @@ -0,0 +1,190 @@ + + + + + + + + + + + + + +
+ +
+ +
+
+
+ +
+
+ 00 + +
+
+ 00 + +
+
+ 00 + +
+
+ 00 + +
+
+ + +
+
+
+
+ + Name +
+
+ + Name +
+
+ + Name +
+
+
+ + +
+
+ +
+
+
+
+ +
+ + +
+ 名字 + +
+
ID:0
+
+ + 0K +
+
+
+ + +
+ 名字 + +
+
ID:0
+
+ + 0K +
+
+
+ + +
+ 名字 + +
+
ID:0
+
+ + 0K +
+
+
+
+ +
More
+
+
+
+
04
+ +
+

+ 名字 + +

+ ID:1234567 +
+
+ + 0K +
+
+
+ +
+
+ +
+
Ranking
+
Rewards
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/view/molistar/activity/2025-JordanIndependenceDay/js/index.js b/view/molistar/activity/2025-JordanIndependenceDay/js/index.js new file mode 100644 index 00000000..61e6f15e --- /dev/null +++ b/view/molistar/activity/2025-JordanIndependenceDay/js/index.js @@ -0,0 +1,276 @@ +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 loadedCount = 0; // 已加載的數據數量 +var pageSize = 7; // 每次加載的數據數量 +var notListTo3 = []; // 每次加載的數據數量 +// 初始化函數 +$(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('ts10', './svga/100.svga'); +}); +function translateFun() { + var langReplace = window.lang.replace; + var localLang = window.lang; + $('.text1').html(langReplace(localLang.demoModule.text1)); + $('.text2').html(langReplace(localLang.demoModule.text2)); + // $('.text22').html(langReplace(localLang.demoModule.text22)); + $('.text3').html(langReplace(localLang.demoModule.text3)); + $('.text4').html(langReplace(localLang.demoModule.text4)); + $('.text5').html(langReplace(localLang.demoModule.text5)); + $('.text6').html(langReplace(localLang.demoModule.text6)); + $('.text7').html(langReplace(localLang.demoModule.text7)); + $('.text8').html(langReplace(localLang.demoModule.text8)); + $('.text9').html(langReplace(localLang.demoModule.text9)); + $('.text10').html(langReplace(localLang.demoModule.text10)); + $('.text11').html(langReplace(localLang.demoModule.text11)); + $('.text12').html(langReplace(localLang.demoModule.text12)); + $('.text13').html(langReplace(localLang.demoModule.text13)); + $('.text133').html(langReplace(localLang.demoModule.text133)); + $('.more').html(langReplace(localLang.demoModule.more)); + if (browser.ios) { + $('.bottomText').text(langReplace(localLang.demoModule.text12)) + } else { + $('.bottomText').text(langReplace(localLang.demoModule.text122)) + } +} +// 配置接口 +function getConfig() { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/activity/h5/template/rank', + data: { actKey: "JordanIndependenceDay" }, + success(res) { + if (res.code === 200) { + // 处理日期 + // var startTime = dateFormat(new Date(res.data.startTimeStr.replace(" ", "T")).getTime(), `MM/dd`); + // var endTime = dateFormat(new Date(res.data.endTimeStr.replace(" ", "T")).getTime(), `MM/dd`); + // $('.header .date .text22').text(`${startTime} - ${endTime}`); + // 处理倒计时 + countup(res.data.endTime - res.timestamp); + // 处理限定礼物 + res.data.gifts.forEach((res, i) => { + $(`.giftBox .gift .gift${i} img`).attr("src", res.giftUrl); + $(`.giftBox .gift .gift${i} span`).text(res.giftName); + }) + // 处理榜单 + var listTo3 = res.data.rankList.slice(0, 3); + notListTo3 = res.data.rankList.slice(3); + // 处理前三 + if (listTo3.length < 3) { + let arr = new Array(3 - listTo3.length).fill({ + avatar: './images/logo.png', + name: langReplace(localLang.demoModule.waiting), + erbanNo: null, + totalNum: null + }) + listTo3.push(...arr) + } + listTo3.forEach((res, i) => { + $(`.page1 .top .top${i + 1} .tx`).attr('src', res.avatar); + $(`.page1 .top .top${i + 1} .name b`).text(res.name); + $(`.page1 .top .top${i + 1} .name img`).attr('src', res.userLevelVo ? res.userLevelVo.experUrl : './images/logo.png'); + $(`.page1 .top .top${i + 1} .id`).text('ID:' + res.erbanNo); + $(`.page1 .top .top${i + 1} .score b`).text(unitProcessingAr(res.totalNum, 2)); + if (res.erbanNo == null) { + $(`.page1 .top .top${i + 1} .name img`).hide(); + $(`.page1 .top .top${i + 1} .id`).hide(); + $(`.page1 .top .top${i + 1} .score`).hide(); + } + }) + // 非前三 + loadMore(); + // 处理自己榜单数据 + var my = res.data.myRank; + $('.page1 .my .tx').attr("src", my.avatar); + $('.page1 .my .num').text(my.rank == 0 ? '30+' : my.rank); + $('.page1 .my .info p b').text(my.name); + $('.page1 .my .info p img').attr('src', res.data.myRank.userLevelVo.experUrl); + $('.page1 .my .info span').text(`ID:${my.erbanNo}`); + $('.page1 .my .score b').text(unitProcessingAr(my.totalNum, 2)); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error(err) { + hideLoading(layerIndex) + toastMsg(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} +// 加載數據函數 +function loadMore() { + // 計算加載範圍 + pageSize = loadedCount == 0 ? 7 : 10; + const nextItems = notListTo3.slice(loadedCount, loadedCount + pageSize); + let str = ''; + + // 拼接 HTML + nextItems.forEach(res => { + str += ` +
  • +
    ${res.rank}
    + +
    +

    + ${res.name} + +

    + ID:${res.erbanNo} +
    +
    + + ${unitProcessingAr(res.totalNum, 2)} +
    +
    • + ` + }) + // 將數據插入到列表中 + $('.page1 .content ul').append(str); + // 更新已加載的數據數量 + loadedCount += nextItems.length; + // 如果數據全部加載完成，隱藏按鈕 + console.log(loadedCount >= notListTo3.length); + console.log(notListTo3.length); + if (loadedCount >= notListTo3.length) { + $('.page1 .content .more').hide(); + } +} + +// 綁定按鈕點擊事件 +$('.page1 .content .more').click(function () { + loadMore(); +}) + +// 初次加載數據 +// tab切换 +$('.page1 .top .tab div,.page2 .top .tab div').click(function () { + var i = $(this).index() + 1; + $('.page1,.page2').hide(); + $(`.page${i}`).show(); + if (i == 1) { + $('.bottomText').css('margin', '0.66667rem auto 2.4rem'); + } else { + $('.bottomText').css('margin', '0.66667rem auto 0.66667rem'); + } +}) +// 打开规则 +$('.rule').click(function () { + $('.rules').show(); + bodyScroolFun(true); +}) +// 关闭规则 +$('.rules .rule_in .close').click(function () { + $('.rules').hide(); + bodyScroolFun(false); +}) + +// 倒計時 +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中 + $('.timeBox .days span').text(d); + $('.timeBox .hours span').text(h); + $('.timeBox .mins span').text(m); + $('.timeBox .secs span').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; +} + diff --git a/view/molistar/activity/2025-JordanIndependenceDay/local/ar.js b/view/molistar/activity/2025-JordanIndependenceDay/local/ar.js new file mode 100644 index 00000000..50bc4354 --- /dev/null +++ b/view/molistar/activity/2025-JordanIndependenceDay/local/ar.js @@ -0,0 +1,30 @@ +// 阿拉伯 +langAr = { + // 模块 + demoModule: { + layerIndex1: `جارٍ التحميل...`, + layerIndex2: `نجاح`, + layerIndex3: `خطأ في الشبكة`, + text1: `عيد استقلال الأردن`, + text3: `القواعد`, + text4:'هدايا المناسبات', + text6: `أيام`, + text7: `ساعات`, + text8: `دقائق`, + text9: `ثواني`, + text10: `التصنيف`, + text11: `المكافآت`, + text12: `حدث لا علاقة له بشركة آبل`, + text122: `حدث غير مرتبط بجوجل`, + text133: `القواعد`, + text13: `

    1.خلال فترة الحدث، يمكنك الانضمام إلى الترتيب عن طريق إرسال الدول المعينة.

    +

    2.في نهاية الحدث، سيحصل أفضل 3 مستخدمين على مكافأة سخية.

    +

    3.سيتم دفع المكافآت في اليوم التالي لانتهاء الحدث

    +

    4.لا علاقة للحدث بـ Google/Apple.

    `, + more: `المزيد`, + month: `شهر`, + day: `يوم`, + waiting: `في انتظار`, + } + +} \ No newline at end of file diff --git a/view/molistar/activity/2025-JordanIndependenceDay/local/en.js b/view/molistar/activity/2025-JordanIndependenceDay/local/en.js new file mode 100644 index 00000000..fe097c16 --- /dev/null +++ b/view/molistar/activity/2025-JordanIndependenceDay/local/en.js @@ -0,0 +1,27 @@ +langEn = { + demoModule: { + layerIndex1: `Loading...`, + layerIndex2: `Success`, + layerIndex3: `Network error`, + text1:`Jordan Independence Day`, + text3:`Rules`, + text4:`Event Gifts`, + text6: `Days`, + text7: `Hours`, + text8: `Mins`, + text9: `Secs`, + text10: `Ranking`, + text11: `Rewards`, + text12: `Event not related to Apple.`, + text122: `Event not related to Google.`, + text133: `Rules`, + text13: `

    1.During the event period, you can join the ranking by sending the designated countries.

    +

    2.At the end of the event, the Top3 users will receive a generous reward.

    +

    3.Rewards will be paid out the day after the event ends

    +

    4.Event has nothing to do with Google/Apple.

    `, + more: 'More', + month: 'Month', + day: 'Day', + waiting: 'Waiting', + }, +} diff --git a/view/molistar/activity/2025-JordanIndependenceDay/local/tr.js b/view/molistar/activity/2025-JordanIndependenceDay/local/tr.js new file mode 100644 index 00000000..94cd900d --- /dev/null +++ b/view/molistar/activity/2025-JordanIndependenceDay/local/tr.js @@ -0,0 +1,29 @@ +langTr = { + demoModule: { + layerIndex1: `Loading...`, + layerIndex2: `Success`, + layerIndex3: `Network error`, + text1:`Jordan Independence Day`, + text3:`Rules`, + text4:`Event Gifts`, + text6: `Days`, + text7: `Hours`, + text8: `Mins`, + text9: `Secs`, + text10: `Ranking`, + text11: `Rewards`, + text12: `Event not related to Apple.`, + text122: `Event not related to Google.`, + text133: `Rules`, + text13: `

    1.During the event period, you can join the ranking by sending the designated countries.

    +

    2.At the end of the event, the Top3 users will receive a generous reward.

    +

    3.Rewards will be paid out the day after the event ends

    +

    4.Event has nothing to do with Google/Apple.

    `, + more: 'More', + month: 'Month', + day: 'Day', + waiting: 'Waiting', + }, + + +} \ No newline at end of file diff --git a/view/molistar/activity/2025-JordanIndependenceDay/local/zh.js b/view/molistar/activity/2025-JordanIndependenceDay/local/zh.js new file mode 100644 index 00000000..d090e319 --- /dev/null +++ b/view/molistar/activity/2025-JordanIndependenceDay/local/zh.js @@ -0,0 +1,30 @@ +// 中文 +langZh = { + // 模塊 + demoModule: { + layerIndex1: `Loading...`, + layerIndex2: `Success`, + layerIndex3: `Network error`, + text1:`Jordan Independence Day`, + text3:`Rules`, + text4:`Event Gifts`, + text6: `Days`, + text7: `Hours`, + text8: `Mins`, + text9: `Secs`, + text10: `Ranking`, + text11: `Rewards`, + text12: `Event not related to Apple.`, + text122: `Event not related to Google.`, + text133: `Rules`, + text13: `

    1.During the event period, you can join the ranking by sending the designated countries.

    +

    2.At the end of the event, the Top3 users will receive a generous reward.

    +

    3.Rewards will be paid out the day after the event ends

    +

    4.Event has nothing to do with Google/Apple.

    `, + more: 'More', + month: 'Month', + day: 'Day', + waiting: 'Waiting', + }, + +} \ No newline at end of file