diff --git a/view/molistar/modules/newRank/css/monthlyIndex.css b/view/molistar/modules/newRank/css/monthlyIndex.css new file mode 100644 index 00000000..6f238433 --- /dev/null +++ b/view/molistar/modules/newRank/css/monthlyIndex.css @@ -0,0 +1,864 @@ +html, +body { + width: 100%; + background: #1C0E04; + overflow-x: hidden; +} + +.back { + width: 100%; + height: 0.5866666667rem; + line-height: 0.5866666667rem; + position: fixed; + left: 0; + top: 1.2rem; + 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; + z-index: 2; +} +.back p { + width: 100%; + height: 0.5866666667rem; + line-height: 0.5866666667rem; + position: absolute; + left: 0.24rem; + top: 0rem; + text-align: center; + color: #FFF8C2; + font-size: 0.4266666667rem; + font-weight: 600; +} + +.newText1 { + width: 100%; + position: fixed; + height: 2rem; + background: #000; + z-index: 9; + text-align: center; + color: #FFF8C2; + font-size: 0.4266666667rem; + font-weight: 600; + line-height: 3rem; + transition: all 0.5s; + height: 0; + overflow: hidden; +} + +.newText11 { + width: 100%; + position: fixed; + height: 2rem; + z-index: 9; + text-align: center; + color: #FFF8C2; + font-size: 0.4266666667rem; + font-weight: 600; + line-height: 3rem; + overflow: hidden; +} + +.header { + width: 10rem; + height: 18rem; + position: relative; + margin: 0 auto; + background: url(../images/header.png) no-repeat; + background-size: 100% 14.2666666667rem; +} +.header .title { + background: url(../images/title_bg.png) no-repeat; + background-size: 100% 100%; + height: 0.7733333333rem; + font-family: PingFang SC; + font-weight: 500; + font-size: 0.3733333333rem; + color: #000000; + display: flex; + align-items: center; + justify-content: center; + min-width: 5.0666666667rem; + position: absolute; + top: 4.76rem; + left: 50%; + transform: translate(-50%, 0); +} +.header .monthlyRewards { + width: 3.4666666667rem; + height: 3.8666666667rem; + z-index: 3; + position: absolute; + top: 3.6933333333rem; + right: -0.5rem; + background: url(../images/Rewards_icon.png) no-repeat; + background-size: 100% 100%; + color: #000; + font-size: 0.3466666667rem; + font-weight: 500; + display: none; +} +.header .monthlyRewards p { + position: absolute; + width: 100%; + text-align: center; + right: 0; + top: 2.6933333333rem; +} +.header .monthlyRewards b { + position: absolute; + width: 100%; + text-align: center; + right: 0; + top: 3.08rem; +} +.header .top { + width: 10rem; + height: 11.7866666667rem; + position: absolute; + top: 5.6933333333rem; + left: 50%; + transform: translateX(-50%); +} +.header .top .top1 { + position: absolute; + width: 10rem; + height: 6.6666666667rem; + left: 50%; + transform: translateX(-50%); +} +.header .top .top1 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} +.header .top .top1 .tx { + width: 2.7733333333rem; + height: 2.7466666667rem; + position: absolute; + top: 1.8933333333rem; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; +} +.header .top .top1 .nick { + width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-size: 0.3733333333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.6133333333rem; + z-index: 3; + font-weight: 500; +} +.header .top .top1 .fist { + width: 1.0266666667rem; + height: 1.24rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.8rem; + z-index: 3; + display: none; +} +.header .top .top1 .score { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + color: #FFF8C2; + font-size: 0.3466666667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.8rem; + text-align: center; + z-index: 3; + font-weight: 400; + display: flex; + justify-content: center; +} +.header .top .top1 .score img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; +} +.header .top .top1 .score span { + display: inline-block; +} +.header .top .top2 { + position: absolute; + top: 6.6666666667rem; + width: 5rem; + height: 5.12rem; + left: 0rem; + z-index: 2; +} +.header .top .top2 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} +.header .top .top2 .tx { + width: 1.8666666667rem; + height: 1.8666666667rem; + position: absolute; + top: 1.2266666667rem; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; +} +.header .top .top2 .nick { + width: 50%; + height: 0.5rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-weight: 500; + font-size: 0.3733333333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.0133333333rem; + z-index: 3; +} +.header .top .top2 .score { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + color: #FFF8C2; + font-size: 0.3466666667rem; + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.3866666667rem; + text-align: center; + display: flex; + justify-content: center; + z-index: 3; +} +.header .top .top2 .score img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; +} +.header .top .top3 { + position: absolute; + top: 6.6666666667rem; + width: 5rem; + height: 5.12rem; + right: 0rem; + z-index: 2; +} +.header .top .top3 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} +.header .top .top3 .tx { + width: 1.8666666667rem; + height: 1.8666666667rem; + position: absolute; + top: 1.2266666667rem; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; +} +.header .top .top3 .nick { + width: 50%; + height: 0.5rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-weight: 500; + font-size: 0.3733333333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.0133333333rem; + z-index: 3; +} +.header .top .top3 .score { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + color: #FFF8C2; + font-size: 0.3466666667rem; + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.3866666667rem; + text-align: center; + display: flex; + justify-content: center; + z-index: 3; +} +.header .top .top3 .score img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; +} + +.tabBox { + width: 10rem; + height: 1.12rem; + line-height: 1.12rem; + display: flex; + justify-content: space-between; + box-sizing: border-box; + padding: 0 0.2666666667rem; + z-index: 2; +} +.tabBox div { + width: 2.9333333333rem; + height: 1.4133333333rem; + color: #FFF8C2; + font-size: 0.4266666667rem; + font-weight: 600; + background: url(../images/tab.png) no-repeat; + background-size: 100% 100%; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} +.tabBox .act { + color: #000; + font-weight: bold; + background: url(../images/tabAct.png) no-repeat; + background-size: 100% 100%; +} +.tabBox .act span { + display: block; +} + +.sTab { + height: 0.88rem; + background: rgba(0, 0, 0, 0.5); + border-radius: 0.44rem; + display: flex; + border: 0.0266666667rem solid #FFDA7E; + overflow: hidden; + z-index: 4; + margin: 0.5333333333rem 2.3333333333rem 0; +} +.sTab div { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.7466666667rem; + color: #FFF8C2; + font-size: 0.3733333333rem; + font-weight: 500; + text-align: center; +} +.sTab .act { + color: #000; + background: url(../images/butAct.png) no-repeat; + background-size: 100% 100%; +} + +.rank_list { + width: 100%; + margin: 0 0 2.04rem; +} +.rank_list .rank_top { + width: 10rem; + height: 12rem; + position: relative; + padding: 1.3333333333rem 0 0.3466666667rem; +} +.rank_list .rank_top .top1 { + position: absolute; + width: 10rem; + height: 6.6666666667rem; + left: 50%; + transform: translateX(-50%); +} +.rank_list .rank_top .top1 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} +.rank_list .rank_top .top1 .tx { + width: 2.7733333333rem; + height: 2.7466666667rem; + position: absolute; + top: 1.8933333333rem; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; +} +.rank_list .rank_top .top1 .nick { + width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-size: 0.3733333333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.6133333333rem; + z-index: 3; + font-weight: 500; +} +.rank_list .rank_top .top1 .fist { + width: 1.0266666667rem; + height: 1.24rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.8rem; + z-index: 3; + display: none; +} +.rank_list .rank_top .top1 .score { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + color: #FFF8C2; + font-size: 0.3466666667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 4.8rem; + text-align: center; + z-index: 3; + font-weight: 400; + display: flex; + justify-content: center; +} +.rank_list .rank_top .top1 .score img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; +} +.rank_list .rank_top .top1 .score span { + display: inline-block; +} +.rank_list .rank_top .top2 { + position: absolute; + top: 8rem; + width: 5rem; + height: 5.12rem; + left: 0rem; + z-index: 2; +} +.rank_list .rank_top .top2 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} +.rank_list .rank_top .top2 .tx { + width: 1.8666666667rem; + height: 1.8666666667rem; + position: absolute; + top: 1.2266666667rem; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; +} +.rank_list .rank_top .top2 .nick { + width: 50%; + height: 0.5rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-weight: 500; + font-size: 0.3733333333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.0133333333rem; + z-index: 3; +} +.rank_list .rank_top .top2 .score { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + color: #FFF8C2; + font-size: 0.3466666667rem; + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.3866666667rem; + text-align: center; + display: flex; + justify-content: center; + z-index: 3; +} +.rank_list .rank_top .top2 .score img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; +} +.rank_list .rank_top .top3 { + position: absolute; + top: 8rem; + width: 5rem; + height: 5.12rem; + right: 0rem; + z-index: 2; +} +.rank_list .rank_top .top3 .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; +} +.rank_list .rank_top .top3 .tx { + width: 1.8666666667rem; + height: 1.8666666667rem; + position: absolute; + top: 1.2266666667rem; + left: 50%; + transform: translateX(-50%); + border-radius: 50%; +} +.rank_list .rank_top .top3 .nick { + width: 50%; + height: 0.5rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-weight: 500; + font-size: 0.3733333333rem; + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.0133333333rem; + z-index: 3; +} +.rank_list .rank_top .top3 .score { + width: 100%; + height: 0.4rem; + line-height: 0.4rem; + color: #FFF8C2; + font-size: 0.3466666667rem; + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 3.3866666667rem; + text-align: center; + display: flex; + justify-content: center; + z-index: 3; +} +.rank_list .rank_top .top3 .score img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; +} +.rank_list .top_bg_1 { + background: url(../images/Wealth_bg.png) no-repeat; + background-size: 100% 100%; +} +.rank_list .top_bg_2 { + background: url(../images/charm_bg.png) no-repeat; + background-size: 100% 100%; +} +.rank_list .top_bg_3 { + background: url(../images/family_bg.png) no-repeat; + background-size: 100% 100%; +} +.rank_list .bottom { + background: url(../images/bottom_bg.png) no-repeat; + background-size: 100% 100%; + width: 100%; + height: 0.9333333333rem; +} + +ul { + width: 10rem; + position: relative; + z-index: 2; + margin: 0rem auto; + box-sizing: border-box; + overflow-y: scroll; + background: url(../images/contetn_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 0.4266666667rem; +} +ul::-webkit-scrollbar { + display: none; +} +ul li { + width: 100%; + height: 2rem; + margin-bottom: 0.4rem; + background: url(../images/li.png) no-repeat; + background-size: 100% 100%; + position: relative; +} +ul li .seqNo { + width: 0.88rem; + height: 1.0533333333rem; + line-height: 1.0533333333rem; + text-align: center; + color: #000; + font-size: 0.5066666667rem; + font-weight: 600; + position: absolute; + top: -0.1066666667rem; + left: 0.8266666667rem; + background: url(../images/num.png) no-repeat; + background-size: 100% 100%; +} +ul li .tx { + display: block; + float: left; + width: 1.2rem; + height: 1.2rem; + border-radius: 50%; + margin-left: 1.9466666667rem; + margin-right: 0.24rem; + margin-top: 0.4133333333rem; + border: 0.0266666667rem solid #FFF8C2; + border-radius: 0.24rem; +} +ul li .nick { + width: 1.5rem; + height: 2rem; + line-height: 2rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + float: left; + color: #FFF8C2; + font-size: 0.3733333333rem; + font-weight: 500; +} +ul li .score { + height: 2rem; + line-height: 2rem; + float: right; + color: #FFF8C2; + font-size: 0.3466666667rem; + font-weight: 400; + margin-right: 1.1733333333rem; +} +ul li .score img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + vertical-align: middle; +} +ul li .score span, +ul li .score b { + vertical-align: middle; +} + +.reward_img { + display: none; + margin-bottom: 2.0933333333rem; +} +.reward_img .rewardImg_1 { + height: 48.0266666667rem; + background: url(../images/Wealth_reward.png) no-repeat; + background-size: 100% 100%; +} +.reward_img .rewardImg_2 { + height: 34.56rem; + background: url(../images/Charm_reward.png) no-repeat; + background-size: 100% 100%; +} +.reward_img .rewardImg_3 { + height: 47.68rem; + background: url(../images/Family_reward.png) no-repeat; + background-size: 100% 100%; +} + +.my { + width: 10rem; + height: 2rem; + position: fixed; + z-index: 9; + background: url(../images/myLi.png) no-repeat; + background-size: 100% 100%; + left: 50%; + transform: translateX(-50%); + bottom: 0; +} +.my .box { + width: 100%; + height: 100%; + position: relative; +} +.my .box .seqNo { + width: 0.88rem; + height: 1.0533333333rem; + line-height: 1.0533333333rem; + text-align: center; + color: #000; + font-size: 0.5066666667rem; + font-weight: 600; + position: absolute; + top: -0.1066666667rem; + left: 0.8266666667rem; + background: url(../images/num.png) no-repeat; + background-size: 100% 100%; +} +.my .box .tx { + display: block; + float: left; + width: 1.2rem; + height: 1.2rem; + border-radius: 50%; + margin-left: 1.9466666667rem; + margin-right: 0.24rem; + margin-top: 0.4133333333rem; +} +.my .box .nick { + width: 2.5rem; + height: 2rem; + line-height: 2rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + float: left; + color: #FFF8C2; + font-size: 0.3733333333rem; + font-weight: 500; +} +.my .box .score { + height: 2rem; + line-height: 2rem; + float: right; + color: #FFF8C2; + font-size: 0.3466666667rem; + font-weight: 400; + margin-right: 1.1733333333rem; +} +.my .box .score img { + display: inline-block; + width: 0.4rem; + height: 0.4rem; + vertical-align: middle; +} +.my .box .score span, +.my .box .score b { + vertical-align: middle; +} + +.arabic ul li .seqNo { + left: auto; + right: 0.82667rem; +} +.arabic ul li .tx { + float: right; + margin-left: 0.24rem; + margin-right: 1.94667rem; +} +.arabic ul li .nick { + float: right; +} +.arabic ul li .score { + float: left; + margin-right: 0; + margin-left: 1.17333rem; +} +.arabic .my .box .seqNo { + left: auto; + right: 0.82667rem; +} +.arabic .my .box .tx { + float: right; + margin-left: 0.24rem; + margin-right: 1.94667rem; +} +.arabic .my .box .nick { + float: right; +} +.arabic .my .box .score { + float: left; + margin-right: 0; + margin-left: 1.17333rem; +} + +.arabic .header { + background: url(../images/header-ar.png) no-repeat; + background-size: 100% 14.2666666667rem; +} +.arabic .reward_img .rewardImg_1 { + height: 48.0266666667rem; + background: url(../images/Wealth_reward-ar.png) no-repeat; + background-size: 100% 100%; +} +.arabic .reward_img .rewardImg_2 { + height: 34.56rem; + background: url(../images/Charm_reward-ar.png) no-repeat; + background-size: 100% 100%; +} +.arabic .reward_img .rewardImg_3 { + height: 47.68rem; + background: url(../images/Family_reward-ar.png) no-repeat; + background-size: 100% 100%; +} + +.Russian ul li .nick { + width: 1.4rem; +} +.Russian .header { + background: url(../images/header-ru.png) no-repeat; + background-size: 100% 14.2666666667rem; +} +.Russian .reward_img .rewardImg_1 { + height: 48.0266666667rem; + background: url(../images/Wealth_reward-ru.png) no-repeat; + background-size: 100% 100%; +} +.Russian .reward_img .rewardImg_2 { + height: 34.56rem; + background: url(../images/Charm_reward-ru.png) no-repeat; + background-size: 100% 100%; +} +.Russian .reward_img .rewardImg_3 { + height: 47.68rem; + background: url(../images/Family_reward-ru.png) no-repeat; + background-size: 100% 100%; +} \ No newline at end of file diff --git a/view/molistar/modules/newRank/css/monthlyIndex.scss b/view/molistar/modules/newRank/css/monthlyIndex.scss new file mode 100644 index 00000000..f0940456 --- /dev/null +++ b/view/molistar/modules/newRank/css/monthlyIndex.scss @@ -0,0 +1,989 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + background: #1C0E04; + overflow-x: hidden; +} + +.back { + width: 100%; + height: px2rem(44); + line-height: px2rem(44); + position: fixed; + left: 0; + top: px2rem(90); + 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); + z-index: 2; + } + + p { + width: 100%; + height: px2rem(44); + line-height: px2rem(44); + position: absolute; + left: px2rem(18); + top: px2rem(0); + text-align: center; + color: #FFF8C2; + font-size: px2rem(32); + font-weight: 600; + } +} + +.newText1 { + width: 100%; + position: fixed; + height: 2rem; + // background: rgba(0, 0, 0, .8); + background: #000; + z-index: 9; + text-align: center; + color: #FFF8C2; + font-size: px2rem(32); + font-weight: 600; + line-height: 3rem; + transition: all 0.5s; + height: 0; + overflow: hidden; +} + +.newText11 { + width: 100%; + position: fixed; + height: 2rem; + // background:rgba(0, 0, 0, .65); + // background: #000; + z-index: 9; + text-align: center; + color: #FFF8C2; + font-size: px2rem(32); + font-weight: 600; + line-height: 3rem; + overflow: hidden; +} + +.header { + width: px2rem(750); + // height: px2rem(1229); + height: 18rem; + position: relative; + margin: 0 auto; + background: url(../images/header.png) no-repeat; + background-size: 100% px2rem(1070); + + .title { + background: url(../images/title_bg.png) no-repeat; + background-size: 100% 100%; + height: px2rem(58); + font-family: PingFang SC; + font-weight: 500; + font-size: px2rem(28); + color: #000000; + display: flex; + align-items: center; + justify-content: center; + min-width: px2rem(380); + position: absolute; + top: px2rem(357); + left: 50%; + transform: translate(-50%, 0); + } + + .monthlyRewards { + width: px2rem(260); + height: px2rem(290); + z-index: 3; + position: absolute; + top: px2rem(277); + right: -0.5rem; + background: url(../images/Rewards_icon.png) no-repeat; + background-size: 100% 100%; + color: #000; + font-size: px2rem(26); + font-weight: 500; + display: none; + + p { + position: absolute; + width: 100%; + text-align: center; + right: 0; + top: px2rem(202); + } + + b { + position: absolute; + width: 100%; + text-align: center; + right: 0; + top: 3.08rem; + } + } + + .top { + width: px2rem(750); + height: px2rem(884); + position: absolute; + top: px2rem(427); + // top: 8.3rem; + left: 50%; + transform: translateX(-50%); + + .top1 { + position: absolute; + // top: px2rem(-300); + width: px2rem(750); + height: px2rem(500); + left: 50%; + transform: translateX(-50%); + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(208); + height: px2rem(206); + position: absolute; + top: px2rem(142); + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } + + .nick { + width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-size: px2rem(28); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(346); + z-index: 3; + font-weight: 500; + } + + .fist { + width: px2rem(77); + height: px2rem(93); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(360); + z-index: 3; + display: none; + } + + .score { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + color: #FFF8C2; + font-size: px2rem(26); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(360); + text-align: center; + z-index: 3; + font-weight: 400; + display: flex; + justify-content: center; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + } + + span { + display: inline-block; + } + } + } + + .top2 { + position: absolute; + top: px2rem(500); + width: px2rem(375); + height: px2rem(384); + left: px2rem(0); + z-index: 2; + // display: none; + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(140); + height: px2rem(140); + position: absolute; + top: px2rem(92); + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } + + .nick { + width: 50%; + height: 0.5rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-weight: 500; + font-size: px2rem(28); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(226); + z-index: 3; + } + + .score { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + color: #FFF8C2; + font-size: px2rem(26); + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(254); + text-align: center; + display: flex; + justify-content: center; + z-index: 3; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + } + } + } + + .top3 { + position: absolute; + top: px2rem(500); + width: px2rem(375); + height: px2rem(384); + right: px2rem(0); + z-index: 2; + // display: none; + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(140); + height: px2rem(140); + position: absolute; + top: px2rem(92); + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } + + .nick { + width: 50%; + height: 0.5rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-weight: 500; + font-size: px2rem(28); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(226); + z-index: 3; + } + + .score { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + color: #FFF8C2; + font-size: px2rem(26); + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(254); + text-align: center; + display: flex; + justify-content: center; + z-index: 3; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + } + } + } + } +} + +.tabBox { + width: px2rem(750); + height: px2rem(84); + line-height: px2rem(84); + display: flex; + justify-content: space-between; + // position: absolute; + // top: px2rem(163); + // left: 50%; + // transform: translateX(-50%); + box-sizing: border-box; + padding: 0 px2rem(20); + z-index: 2; + + div { + width: px2rem(220); + height: px2rem(106); + color: #FFF8C2; + font-size: px2rem(32); + font-weight: 600; + background: url(../images/tab.png) no-repeat; + background-size: 100% 100%; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } + + .act { + color: #000; + font-weight: bold; + background: url(../images/tabAct.png) no-repeat; + background-size: 100% 100%; + + span { + display: block; + } + } +} + +.sTab { + // min-width: px2rem(400); + height: px2rem(66); + background: rgba(0, 0, 0, .5); + border-radius: px2rem(33); + display: flex; + border: px2rem(2) solid #FFDA7E; + overflow: hidden; + z-index: 4; + margin: px2rem(40) px2rem(175) 0; + + div { + width: 100%; + // height: px2rem(56); + // line-height: px2rem(56); + display: flex; + align-items: center; + justify-content: center; + border-radius: px2rem(56); + color: #FFF8C2; + font-size: px2rem(28); + font-weight: 500; + text-align: center; + } + + .act { + color: #000; + background: url(../images/butAct.png) no-repeat; + background-size: 100% 100%; + } +} + +.rank_list { + width: 100%; + margin: 0 0 px2rem(153); + + .rank_top { + width: px2rem(750); + height: px2rem(900); + position: relative; + padding: px2rem(100) 0 px2rem(26); + + .top1 { + position: absolute; + // top: px2rem(-300); + width: px2rem(750); + height: px2rem(500); + left: 50%; + transform: translateX(-50%); + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(208); + height: px2rem(206); + position: absolute; + top: px2rem(142); + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } + + .nick { + width: 50%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-size: px2rem(28); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(346); + z-index: 3; + font-weight: 500; + } + + .fist { + width: px2rem(77); + height: px2rem(93); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(360); + z-index: 3; + display: none; + } + + .score { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + color: #FFF8C2; + font-size: px2rem(26); + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(360); + text-align: center; + z-index: 3; + font-weight: 400; + display: flex; + justify-content: center; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + } + + span { + display: inline-block; + } + } + } + + .top2 { + position: absolute; + top: px2rem(600); + width: px2rem(375); + height: px2rem(384); + left: px2rem(0); + z-index: 2; + // display: none; + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(140); + height: px2rem(140); + position: absolute; + top: px2rem(92); + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } + + .nick { + width: 50%; + height: 0.5rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-weight: 500; + font-size: px2rem(28); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(226); + z-index: 3; + } + + .score { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + color: #FFF8C2; + font-size: px2rem(26); + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(254); + text-align: center; + display: flex; + justify-content: center; + z-index: 3; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + } + } + } + + .top3 { + position: absolute; + top: px2rem(600); + width: px2rem(375); + height: px2rem(384); + right: px2rem(0); + z-index: 2; + // display: none; + + .ts { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 2; + } + + .tx { + width: px2rem(140); + height: px2rem(140); + position: absolute; + top: px2rem(92); + left: 50%; + transform: translateX(-50%); + border-radius: 50%; + } + + .nick { + width: 50%; + height: 0.5rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #FFF8C2; + font-weight: 500; + font-size: px2rem(28); + text-align: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(226); + z-index: 3; + } + + .score { + width: 100%; + height: px2rem(30); + line-height: px2rem(30); + color: #FFF8C2; + font-size: px2rem(26); + font-weight: 400; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: px2rem(254); + text-align: center; + display: flex; + justify-content: center; + z-index: 3; + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + } + } + } + } + + .top_bg_1 { + background: url(../images/Wealth_bg.png) no-repeat; + background-size: 100% 100%; + } + + .top_bg_2 { + background: url(../images/charm_bg.png) no-repeat; + background-size: 100% 100%; + } + + .top_bg_3 { + background: url(../images/family_bg.png) no-repeat; + background-size: 100% 100%; + } + + .bottom { + background: url(../images/bottom_bg.png) no-repeat; + background-size: 100% 100%; + width: 100%; + height: px2rem(70); + } +} + +ul { + width: px2rem(750); + // height: px2rem(912); + position: relative; + z-index: 2; + margin: px2rem(0) auto; + box-sizing: border-box; + overflow-y: scroll; + background: url(../images/contetn_bg.png) no-repeat; + background-size: 100% 100%; + padding: 0 px2rem(32); + + &::-webkit-scrollbar { + display: none; + } + + li { + width: 100%; + height: px2rem(150); + margin-bottom: px2rem(30); + background: url(../images/li.png) no-repeat; + background-size: 100% 100%; + position: relative; + + .seqNo { + width: px2rem(66); + height: px2rem(79); + line-height: px2rem(79); + text-align: center; + color: #000; + font-size: px2rem(38); + font-weight: 600; + position: absolute; + top: px2rem(-8); + left: px2rem(62); + background: url(../images/num.png) no-repeat; + background-size: 100% 100%; + } + + .tx { + display: block; + float: left; + width: px2rem(90); + height: px2rem(90); + border-radius: 50%; + margin-left: px2rem(146); + margin-right: px2rem(18); + margin-top: px2rem(31); + border: px2rem(2) solid #FFF8C2; + border-radius: px2rem(18); + } + + .nick { + width: 1.5rem; + height: px2rem(150); + line-height: px2rem(150); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + float: left; + color: #FFF8C2; + font-size: px2rem(28); + font-weight: 500; + } + + .score { + height: px2rem(150); + line-height: px2rem(150); + float: right; + color: #FFF8C2; + font-size: px2rem(26); + font-weight: 400; + margin-right: px2rem(88); + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + vertical-align: middle; + // margin-top: -0.1rem; + } + + span, + b { + vertical-align: middle; + } + } + } +} + +// .ul1 { +// background: linear-gradient(180deg, #FFF6BB -57%, #F9F7F8 90%); +// } + +// .ul2 { +// background: linear-gradient(180deg, #B6CDFF -57%, #FEFEFE 90%); +// } +.reward_img{ + display: none; + margin-bottom: px2rem(157); + .rewardImg_1{ + height: px2rem(3602); + background: url(../images/Wealth_reward.png) no-repeat; + background-size: 100% 100%; + } + .rewardImg_2{ + height: px2rem(2592); + background: url(../images/Charm_reward.png) no-repeat; + background-size: 100% 100%; + } + .rewardImg_3{ + height: px2rem(3576); + background: url(../images/Family_reward.png) no-repeat; + background-size: 100% 100%; + } +} + +.my { + width: px2rem(750); + height: px2rem(150); + position: fixed; + z-index: 9; + background: url(../images/myLi.png) no-repeat; + background-size: 100% 100%; + left: 50%; + transform: translateX(-50%); + bottom: 0; + + .box { + width: 100%; + height: 100%; + position: relative; + + .seqNo { + width: px2rem(66); + height: px2rem(79); + line-height: px2rem(79); + text-align: center; + color: #000; + font-size: px2rem(38); + font-weight: 600; + position: absolute; + top: px2rem(-8); + left: px2rem(62); + background: url(../images/num.png) no-repeat; + background-size: 100% 100%; + } + + .tx { + display: block; + float: left; + width: px2rem(90); + height: px2rem(90); + border-radius: 50%; + margin-left: px2rem(146); + margin-right: px2rem(18); + margin-top: px2rem(31); + } + + .nick { + width: 2.5rem; + height: px2rem(150); + line-height: px2rem(150); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + float: left; + color: #FFF8C2; + font-size: px2rem(28); + font-weight: 500; + } + + .score { + height: px2rem(150); + line-height: px2rem(150); + float: right; + color: #FFF8C2; + font-size: px2rem(26); + font-weight: 400; + margin-right: px2rem(88); + + img { + display: inline-block; + width: px2rem(30); + height: px2rem(30); + vertical-align: middle; + // margin-top: -0.1rem; + } + + span, + b { + vertical-align: middle; + } + } + } +} + +.arabic { + ul li { + .seqNo { + left: auto; + right: 0.82667rem; + } + + .tx { + float: right; + margin-left: 0.24rem; + margin-right: 1.94667rem; + } + + .nick { + float: right; + } + + .score { + float: left; + margin-right: 0; + margin-left: 1.17333rem; + } + } + + .my .box { + .seqNo { + left: auto; + right: 0.82667rem; + } + + .tx { + float: right; + margin-left: 0.24rem; + margin-right: 1.94667rem; + } + + .nick { + float: right; + } + + .score { + float: left; + margin-right: 0; + margin-left: 1.17333rem; + } + } +} + + +.arabic{ + .header{ + background: url(../images/header-ar.png) no-repeat; + background-size: 100% px2rem(1070); + } + .reward_img{ + .rewardImg_1{ + height: px2rem(3602); + background: url(../images/Wealth_reward-ar.png) no-repeat; + background-size: 100% 100%; + } + .rewardImg_2{ + height: px2rem(2592); + background: url(../images/Charm_reward-ar.png) no-repeat; + background-size: 100% 100%; + } + .rewardImg_3{ + height: px2rem(3576); + background: url(../images/Family_reward-ar.png) no-repeat; + background-size: 100% 100%; + } +} +} +.Russian{ + ul li .nick{ + width: 1.4rem; + } + .header{ + background: url(../images/header-ru.png) no-repeat; + background-size: 100% px2rem(1070); + } + .reward_img{ + .rewardImg_1{ + height: px2rem(3602); + background: url(../images/Wealth_reward-ru.png) no-repeat; + background-size: 100% 100%; + } + .rewardImg_2{ + height: px2rem(2592); + background: url(../images/Charm_reward-ru.png) no-repeat; + background-size: 100% 100%; + } + .rewardImg_3{ + height: px2rem(3576); + background: url(../images/Family_reward-ru.png) no-repeat; + background-size: 100% 100%; + } +} +} \ No newline at end of file diff --git a/view/molistar/modules/newRank/images/Charm_reward-ar.png b/view/molistar/modules/newRank/images/Charm_reward-ar.png new file mode 100644 index 00000000..0ada8827 Binary files /dev/null and b/view/molistar/modules/newRank/images/Charm_reward-ar.png differ diff --git a/view/molistar/modules/newRank/images/Charm_reward-ru.png b/view/molistar/modules/newRank/images/Charm_reward-ru.png new file mode 100644 index 00000000..86f5e5e6 Binary files /dev/null and b/view/molistar/modules/newRank/images/Charm_reward-ru.png differ diff --git a/view/molistar/modules/newRank/images/Charm_reward.png b/view/molistar/modules/newRank/images/Charm_reward.png new file mode 100644 index 00000000..55c09ba6 Binary files /dev/null and b/view/molistar/modules/newRank/images/Charm_reward.png differ diff --git a/view/molistar/modules/newRank/images/Family_reward-ar.png b/view/molistar/modules/newRank/images/Family_reward-ar.png new file mode 100644 index 00000000..136afded Binary files /dev/null and b/view/molistar/modules/newRank/images/Family_reward-ar.png differ diff --git a/view/molistar/modules/newRank/images/Family_reward-ru.png b/view/molistar/modules/newRank/images/Family_reward-ru.png new file mode 100644 index 00000000..f4c0eb23 Binary files /dev/null and b/view/molistar/modules/newRank/images/Family_reward-ru.png differ diff --git a/view/molistar/modules/newRank/images/Family_reward.png b/view/molistar/modules/newRank/images/Family_reward.png new file mode 100644 index 00000000..24711be5 Binary files /dev/null and b/view/molistar/modules/newRank/images/Family_reward.png differ diff --git a/view/molistar/modules/newRank/images/Wealth_bg.png b/view/molistar/modules/newRank/images/Wealth_bg.png new file mode 100644 index 00000000..bc39b18d Binary files /dev/null and b/view/molistar/modules/newRank/images/Wealth_bg.png differ diff --git a/view/molistar/modules/newRank/images/Wealth_reward-ar.png b/view/molistar/modules/newRank/images/Wealth_reward-ar.png new file mode 100644 index 00000000..663c6c87 Binary files /dev/null and b/view/molistar/modules/newRank/images/Wealth_reward-ar.png differ diff --git a/view/molistar/modules/newRank/images/Wealth_reward-ru.png b/view/molistar/modules/newRank/images/Wealth_reward-ru.png new file mode 100644 index 00000000..0b67656e Binary files /dev/null and b/view/molistar/modules/newRank/images/Wealth_reward-ru.png differ diff --git a/view/molistar/modules/newRank/images/Wealth_reward.png b/view/molistar/modules/newRank/images/Wealth_reward.png new file mode 100644 index 00000000..11877e31 Binary files /dev/null and b/view/molistar/modules/newRank/images/Wealth_reward.png differ diff --git a/view/molistar/modules/newRank/images/bottom_bg.png b/view/molistar/modules/newRank/images/bottom_bg.png new file mode 100644 index 00000000..37d3f126 Binary files /dev/null and b/view/molistar/modules/newRank/images/bottom_bg.png differ diff --git a/view/molistar/modules/newRank/images/charm_bg.png b/view/molistar/modules/newRank/images/charm_bg.png new file mode 100644 index 00000000..155fea36 Binary files /dev/null and b/view/molistar/modules/newRank/images/charm_bg.png differ diff --git a/view/molistar/modules/newRank/images/contetn_bg.png b/view/molistar/modules/newRank/images/contetn_bg.png new file mode 100644 index 00000000..37b64b4d Binary files /dev/null and b/view/molistar/modules/newRank/images/contetn_bg.png differ diff --git a/view/molistar/modules/newRank/images/family_bg.png b/view/molistar/modules/newRank/images/family_bg.png new file mode 100644 index 00000000..962b6fb5 Binary files /dev/null and b/view/molistar/modules/newRank/images/family_bg.png differ diff --git a/view/molistar/modules/newRank/images/header-ar.png b/view/molistar/modules/newRank/images/header-ar.png new file mode 100644 index 00000000..cefa6648 Binary files /dev/null and b/view/molistar/modules/newRank/images/header-ar.png differ diff --git a/view/molistar/modules/newRank/images/header-ru.png b/view/molistar/modules/newRank/images/header-ru.png new file mode 100644 index 00000000..5bec0298 Binary files /dev/null and b/view/molistar/modules/newRank/images/header-ru.png differ diff --git a/view/molistar/modules/newRank/images/header.png b/view/molistar/modules/newRank/images/header.png new file mode 100644 index 00000000..584c5e6e Binary files /dev/null and b/view/molistar/modules/newRank/images/header.png differ diff --git a/view/molistar/modules/newRank/images/title_bg.png b/view/molistar/modules/newRank/images/title_bg.png new file mode 100644 index 00000000..4428aa3c Binary files /dev/null and b/view/molistar/modules/newRank/images/title_bg.png differ diff --git a/view/molistar/modules/newRank/js/index.js b/view/molistar/modules/newRank/js/index.js index f5e1e8c1..d6513d5e 100644 --- a/view/molistar/modules/newRank/js/index.js +++ b/view/molistar/modules/newRank/js/index.js @@ -122,7 +122,8 @@ function geth5() { type: listType, datetype: timeType, periodType: 1, - uid: pubInfo.uid + // uid: pubInfo.uid + uid: 4211 }, success(res) { if (res.code === 200) { diff --git a/view/molistar/modules/newRank/js/monthlyIndex.js b/view/molistar/modules/newRank/js/monthlyIndex.js new file mode 100644 index 00000000..f362a31e --- /dev/null +++ b/view/molistar/modules/newRank/js/monthlyIndex.js @@ -0,0 +1,316 @@ +let urlPrefix = getUrlPrefix() +let browser = checkVersion() +let env = EnvCheck(); +if (env == 'test') { + new VConsole(); +} +// 封裝layer消息提醒框 +let layerIndex +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 listType = 2;//2爱意榜 1魅力榜 3房间榜 +var timeType = 1;//1日 2周 5月 +var type = 1; +var partitionId; +// 初始化函數 +$(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) + } + }) + langReplace = window.lang.replace; + localLang = window.lang; + translateFun(); + showLoading() + geth5() + userInfo() + }, 100) +}) +function translateFun() { + var langReplace = window.lang.replace; + var localLang = window.lang; + $('.text1').html(langReplace(localLang.demoModule.text1)); + $('.text2').html(langReplace(localLang.demoModule.text2)); + $('.text3').html(langReplace(localLang.demoModule.text3)); + $('.text4').html(langReplace(localLang.demoModule.text4)); + $('.text5').html(langReplace(localLang.demoModule.text5)); + $('.text6').html(langReplace(localLang.demoModule.text6)); + $('.newText1').html(langReplace(localLang.demoModule.newText1)); + $('.newText2').html(langReplace(localLang.demoModule.newText2)); + $('.newText11').html(langReplace(localLang.demoModule.newText11)); + $('.newText3').html(langReplace(localLang.demoModule.newText3)); + $('.newText4').html(langReplace(localLang.demoModule.newText4)); + $('.newText5').html(langReplace(localLang.demoModule.newText5)); + $('.newText6').html(langReplace(localLang.demoModule.newText6)); + $('.Ranking').html(langReplace(localLang.demoModule.Ranking)); + +} +// 榜单接口 +function geth5() { + $('ul li').remove(); + $('.header .sTab').show(); + $('.my').show() + $('.header .top .top2 .score,.header .top .top3 .score').show(); + // $('.header .top .top1 .fist').show(); + $('.header .top .top1 .fist').hide(); + $('ul li .score').show(); + // showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/allrank/geth5', + data: { + type: listType, + datetype: 2, + periodType: 1, + // uid: pubInfo.uid + uid: 3203 + }, + success(res) { + if (res.code === 200) { + var my = res.data.me; + var listTo3 = res.data.rankVoList.slice(0, 3); + var notListTo3 = res.data.rankVoList.slice(3); + // 处理前三 + if (listTo3.length < 3) { + let arr = new Array(3 - listTo3.length).fill({ + avatar: './images/logo.png', + nick: langReplace(localLang.demoModule.newText7), + diffNum: "", + uid: "0", + }) + listTo3.push(...arr) + } + listTo3.forEach((res, i) => { + $(`.header .top .top${i + 1} .ts`).attr('uid', res.uid); + $(`.header .top .top${i + 1} .tx`).attr('src', res.avatar); + $(`.header .top .top${i + 1} .nick`).text(res.nick); + // if (i > 0) { + $(`.rank_top .top${i + 1} .score span`).text(unitProcessingAr(res.diffNum, 1)); + + $(`.rank_top .top${i + 1} .ts`).attr('uid', res.uid); + $(`.rank_top .top${i + 1} .tx`).attr('src', res.avatar); + $(`.rank_top .top${i + 1} .nick`).text(res.nick); + // if (i > 0) { + $(`.rank_top .top${i + 1} .score span`).text(unitProcessingAr(res.diffNum, 1)); + // } + }); + // 非前三 + var str = ''; + notListTo3.forEach((res, i) => { + str += ` +
  • +
    ${res.seqNo}
    + +
    ${res.nick}
    +
    + ${langReplace(localLang.demoModule.newText3)} + + ${unitProcessingAr(res.diffNum, 1)} +
    --> +
    • + ` + }) + $('ul').append(str); + // 处理自己 + $('.my .box .tx').attr('src', my.avatar); + $('.my .box .nick').text(my.nick); + $('.my .box .seqNo').text(my.seqNo <= 0 ? '-' : my.seqNo); + $('.my .box .score span').text(my.diffNum <= 0 ? '-' : unitProcessingAr(my.diffNum, 1)); + if (my.diffNum <= 0) { + $('.my .box .score b').hide(); + } + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error(err) { + hideLoading(layerIndex) + toastMsg(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} +// 公会接口 +function listRank(type) { + $('ul li').remove(); + $('.my').hide() + // $('.header .top .top2 .score,.header .top .top3 .score').hide(); + $('.header .top .top1 .fist').hide(); + $('ul li .score').hide(); + // showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/clan/listRank', + data: { + periodType: 1, + }, + success(res) { + if (res.code === 200) { + var my = res.data.me; + var listTo3 = res.data.slice(0, 3); + var notListTo3 = res.data.slice(3); + notListTo3 = notListTo3.slice(0, 27) + // 处理前三 + if (listTo3.length < 3) { + let arr = new Array(3 - listTo3.length).fill({ + avatar: './images/logo.png', + name: langReplace(localLang.demoModule.newText7), + diffNum: "", + uid: "0", + }) + listTo3.push(...arr) + } + listTo3.forEach((res, i) => { + $(`.header .top .top${i + 1} .ts`).attr('uid', res.clanElderUid); + $(`.header .top .top${i + 1} .tx`).attr('src', res.avatar); + $(`.header .top .top${i + 1} .nick`).text(res.name); + $(`.header .top .top${i + 1} .score span`).text(unitProcessingAr(res.diffNum, 1)); + + $(`.rank_top .top${i + 1} .ts`).attr('uid', res.clanElderUid); + $(`.rank_top .top${i + 1} .tx`).attr('src', res.avatar); + $(`.rank_top .top${i + 1} .nick`).text(res.name); + // if (i > 0) { + $(`.rank_top .top${i + 1} .score span`).text(unitProcessingAr(res.diffNum, 1)); + }); + // 非前三 + var str = ''; + notListTo3.forEach((res, i) => { + str += ` +
  • +
    ${i + 4}
    + +
    ${res.name}
    +
    + ${langReplace(localLang.demoModule.newText3)} + + ${unitProcessingAr(res.diffNum, 1)} +
    --> +
    • + ` + }) + $('ul').append(str); + } else { + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error(err) { + hideLoading(layerIndex) + toastMsg(langReplace(localLang.demoModule.layerIndex3)) + } + }) +} +// 榜单切换tab +$('.tabBox div').click(function () { + var i = $(this).index() + 1; + type = i; + $(this).addClass('act').siblings().removeClass('act'); + $('ul').removeClass('ul1').removeClass('ul2').removeClass('ul3').removeClass('ul4'); + $(`ul`).addClass(`ul${i}`); + // 排行榜背景图 + $('.rank_top').removeClass('top_bg_1').removeClass('top_bg_2').removeClass('top_bg_3') + $(`.rank_top`).addClass(`top_bg_${i}`); + // 奖励图 + $('.reward_img div').removeClass('rewardImg_1').removeClass('rewardImg_2').removeClass('rewardImg_3') + $(`.reward_img div`).addClass(`rewardImg_${i}`); + + $('ul li .tx').removeClass('actTx'); + $(`.header .top .top1 .ts`).attr('src', './images/no1.png') + $(`.header .top .top2 .ts`).attr('src', './images/no2.png') + $(`.header .top .top3 .ts`).attr('src', './images/no3.png') + timeType = 1; + $('.header .sTab div').removeClass('act'); + $('.header .sTab div').eq(0).addClass('act'); + $('.header .top .score img').attr('src', `./images/${type}.png`); + $('.my .box .score img').attr('src', `./images/${type}.png`); + if (i == 1) { + listType = 2; + geth5(); + } else if (i == 2) { + listType = 1; + geth5(); + } else if (i == 3) { + listRank(4); + $('ul li .tx').addClass('actTx'); + } +}) +// 日榜周榜切换tab +$('.sTab div').click(function () { + $(this).addClass('act').siblings().removeClass('act'); + timeType = $(this).attr('type'); + if(timeType == 1){ + $('.rank_list').show(); + $('.reward_img').hide(); + }else{ + $('.reward_img').show(); + $('.rank_list').hide(); + } +}) +// 前三跳转个人页 +$('.header .top .ts').click(function () { + var uid = $(this).attr('uid'); + if (browser.ios) { + window.webkit.messageHandlers.openPersonPage.postMessage(uid); + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === "object") { + window.androidJsObj.openPersonPage(uid); + } + } +}) +// 非前三跳转个人页 +$('ul').on('click', 'li .tx', function () { + var uid = $(this).attr('uid'); + if (browser.ios) { + window.webkit.messageHandlers.openPersonPage.postMessage(uid); + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === "object") { + window.androidJsObj.openPersonPage(uid); + } + } +}) + + +window.addEventListener('scroll', function () { + var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; + console.log('页面下滑距顶部的距离:', scrollTop); + if (scrollTop >= 30) { + $('.newText11').hide(); + $('.newText1').css('height', '2rem') + } else if (scrollTop < 30) { + $('.newText1').css('height', '0rem') + $('.newText11').show(); + } +}); \ No newline at end of file diff --git a/view/molistar/modules/newRank/local/ar.js b/view/molistar/modules/newRank/local/ar.js index 50725e0e..e5777514 100644 --- a/view/molistar/modules/newRank/local/ar.js +++ b/view/molistar/modules/newRank/local/ar.js @@ -21,5 +21,7 @@ langAr = { newText5: 'المكافآت', newText6: 'أفضل 3 في الشهر الماضي', newText7: 'شاغر', + Ranking:'التصنيف', + } } \ No newline at end of file diff --git a/view/molistar/modules/newRank/local/br.js b/view/molistar/modules/newRank/local/br.js index 4b8a5370..fd2b4971 100644 --- a/view/molistar/modules/newRank/local/br.js +++ b/view/molistar/modules/newRank/local/br.js @@ -19,6 +19,7 @@ langBr = { newText4: 'Mensal', newText5: 'Recompensas', newText6: 'TOP3 do Mês Anterior', - newText7: 'Vago' + newText7: 'Vago', + Ranking:'Ranking', } } \ No newline at end of file diff --git a/view/molistar/modules/newRank/local/en.js b/view/molistar/modules/newRank/local/en.js index dc3adf2e..4952c65c 100644 --- a/view/molistar/modules/newRank/local/en.js +++ b/view/molistar/modules/newRank/local/en.js @@ -21,5 +21,7 @@ langEn = { newText5:`Rewards`, newText6:`Last Month TOP3`, newText7: 'Vacant', + Ranking:'Ranking', + } } \ No newline at end of file diff --git a/view/molistar/modules/newRank/local/es.js b/view/molistar/modules/newRank/local/es.js index fe4d2cff..fbc05d0e 100644 --- a/view/molistar/modules/newRank/local/es.js +++ b/view/molistar/modules/newRank/local/es.js @@ -19,5 +19,7 @@ langEs = { newText5:`Recompensas`, newText6:`TOP3 del Mes Pasado`, newText7: 'Vacante', + Ranking:'Ranking', + } } \ No newline at end of file diff --git a/view/molistar/modules/newRank/local/ru.js b/view/molistar/modules/newRank/local/ru.js index bd9f7cf9..9000b271 100644 --- a/view/molistar/modules/newRank/local/ru.js +++ b/view/molistar/modules/newRank/local/ru.js @@ -19,5 +19,7 @@ langRu = { newText5:`Награды`, newText6:`ТОП3 Прошлого Месяца`, newText7: 'Св.место', + Ranking:'Рейтинг', + } } \ No newline at end of file diff --git a/view/molistar/modules/newRank/local/tr.js b/view/molistar/modules/newRank/local/tr.js index 6bd30e70..92ce099b 100644 --- a/view/molistar/modules/newRank/local/tr.js +++ b/view/molistar/modules/newRank/local/tr.js @@ -21,5 +21,7 @@ langTr = { newText5: 'Ödüller', newText6: 'Geçen Ay İlk 3', newText7: 'Boş', + Ranking:'Sıralama', + } } \ No newline at end of file diff --git a/view/molistar/modules/newRank/local/uz.js b/view/molistar/modules/newRank/local/uz.js index 49c02ee7..6b44f8be 100644 --- a/view/molistar/modules/newRank/local/uz.js +++ b/view/molistar/modules/newRank/local/uz.js @@ -19,5 +19,7 @@ langUz = { newText5:`Mukofotlar`, newText6:`O\'tgan Oy TOP3`, newText7: 'Bo\'sh', + Ranking:'Reyting', + } } \ No newline at end of file diff --git a/view/molistar/modules/newRank/local/zh.js b/view/molistar/modules/newRank/local/zh.js index 0a95fb2f..96cf6f27 100644 --- a/view/molistar/modules/newRank/local/zh.js +++ b/view/molistar/modules/newRank/local/zh.js @@ -21,5 +21,6 @@ langZh = { newText5: '獎勵', newText6: '上月前三名', newText7: '虛位以待', + Ranking:'排行', } } \ No newline at end of file diff --git a/view/molistar/modules/newRank/monthlyIndex.html b/view/molistar/modules/newRank/monthlyIndex.html new file mode 100644 index 00000000..0bea0de1 --- /dev/null +++ b/view/molistar/modules/newRank/monthlyIndex.html @@ -0,0 +1,139 @@ + + + + + + + MoliStar + + + + + + +
    + + +
    +

    +

    + +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +
    + + + +
    +
    +
    + + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    + + +
    +
    + + + +
    +
    +
    + + +
    +
    + + + +
    +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + + + +
    +
    +
    + + + + + + + + + + + + + + + + + + + \ No newline at end of file