新增个播小时榜
This commit is contained in:
@@ -57,7 +57,7 @@ function getHourRank () {
|
|||||||
showLoading()
|
showLoading()
|
||||||
networkRequest({
|
networkRequest({
|
||||||
type: 'GEt',
|
type: 'GEt',
|
||||||
url: urlPrefix + '/room/permitRoom/hourRank',
|
url: urlPrefix + '/single/broadcast/listHourRank',
|
||||||
data: { roomUid: urlData.roomUid },
|
data: { roomUid: urlData.roomUid },
|
||||||
success (res) {
|
success (res) {
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
|
@@ -1,295 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: "pingfang-bold";
|
|
||||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
|
||||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: "pingfang-medium";
|
|
||||||
src: url("../../../common/fonts/PingFang Medium.ttf");
|
|
||||||
src: url("../../../common/fonts/PingFang Medium.ttf") format("woff"), url("../../../common/fonts/PingFang Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang Medium.ttf") format("svg");
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: "din";
|
|
||||||
src: url("../../../common/fonts/DINCond-Medium.ttf");
|
|
||||||
src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap .tab_wrap {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 999;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.4133333333rem;
|
|
||||||
background: url("../images/single/top.png") no-repeat 0 0/100% 100%;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.1733333333rem;
|
|
||||||
padding-top: 0.2133333333rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: -0.1066666667rem;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain p {
|
|
||||||
position: relative;
|
|
||||||
height: 0.6666666667rem;
|
|
||||||
line-height: 0.6666666667rem;
|
|
||||||
padding: 0 0.7466666667rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 0.48rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain p.active {
|
|
||||||
font-size: 0.48rem;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain p.active::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: -0.16rem;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.1066666667rem;
|
|
||||||
border-radius: 0.1066666667rem;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain .rule_icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 0.4rem;
|
|
||||||
width: 0.5333333333rem;
|
|
||||||
height: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap {
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .time_wrap {
|
|
||||||
position: absolute;
|
|
||||||
top: 5.8666666667rem;
|
|
||||||
left: 0rem;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 0.4rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .time_wrap p {
|
|
||||||
font-size: 0.2666666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
height: 0.3733333333rem;
|
|
||||||
line-height: 0.3733333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .time_wrap p span {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 5.7866666667rem;
|
|
||||||
background: url("../images/single/topthree-bg.png") no-repeat 0 0/100% 100%;
|
|
||||||
padding-top: 0.72rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item {
|
|
||||||
position: absolute;
|
|
||||||
width: 2.88rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:first-child {
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) {
|
|
||||||
left: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
|
|
||||||
width: 2.3466666667rem;
|
|
||||||
height: 2.24rem;
|
|
||||||
margin-top: 1.2266666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar p, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
|
|
||||||
background-image: url("../images/single/second.png");
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar img, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar img {
|
|
||||||
top: -2.1333333333rem;
|
|
||||||
width: 1.76rem;
|
|
||||||
height: 1.76rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) {
|
|
||||||
right: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
|
|
||||||
width: 2.1333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
|
|
||||||
background-image: url("../images/single/third.png");
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar {
|
|
||||||
width: 2.88rem;
|
|
||||||
height: 2.8rem;
|
|
||||||
margin: 0rem auto 0.1066666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar p {
|
|
||||||
position: relative;
|
|
||||||
z-index: 99;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url("../images/single/first.png") no-repeat 0 0/100% 100%;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar img {
|
|
||||||
position: relative;
|
|
||||||
top: -2.5066666667rem;
|
|
||||||
width: 2.1333333333rem;
|
|
||||||
height: 2.1333333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .nick {
|
|
||||||
height: 0.5333333333rem;
|
|
||||||
line-height: 0.5333333333rem;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .num {
|
|
||||||
font-size: 0.2666666667rem;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .num span {
|
|
||||||
display: inline-block;
|
|
||||||
font-family: "din";
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: 0.0266666667rem;
|
|
||||||
margin-bottom: 0.08rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .num img {
|
|
||||||
width: 0.7466666667rem;
|
|
||||||
height: 0.9066666667rem;
|
|
||||||
margin-top: 0.2666666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.5333333333rem;
|
|
||||||
margin-bottom: 0.32rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc p {
|
|
||||||
font-size: 0.2666666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc p:first-child {
|
|
||||||
margin-left: 0.4rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc p:nth-child(2) {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 0.9333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc p:last-child {
|
|
||||||
margin-right: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.4266666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .index {
|
|
||||||
width: 0.2666666667rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: 0.5333333333rem;
|
|
||||||
margin-right: 0.7466666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_avatar {
|
|
||||||
width: 1.1733333333rem;
|
|
||||||
height: 1.1733333333rem;
|
|
||||||
margin-right: 0.32rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_avatar img {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_nick {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_num {
|
|
||||||
font-size: 0.32rem;
|
|
||||||
color: #CCCCCC;
|
|
||||||
text-align: right;
|
|
||||||
margin-right: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_num span {
|
|
||||||
font-family: "din";
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
}
|
|
||||||
.wrap .mine {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.7066666667rem;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 -0.0266666667rem 0.1066666667rem #F4F4F4;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_index {
|
|
||||||
width: 0.96rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: 0.2666666667rem;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_avatar {
|
|
||||||
width: 1.1733333333rem;
|
|
||||||
height: 1.1733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 0.32rem;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_nick {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_num {
|
|
||||||
text-align: right;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
color: #ccc;
|
|
||||||
margin-right: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_num p {
|
|
||||||
font-family: "din";
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: 0.0533333333rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*# sourceMappingURL=hourRank1.css.map */
|
|
@@ -1,321 +0,0 @@
|
|||||||
@function px2rem($px, $rem:75) {
|
|
||||||
@return $px / $rem+rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family: 'pingfang-bold';
|
|
||||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
|
||||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
|
||||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
|
||||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family: 'pingfang-medium';
|
|
||||||
src: url('../../../common/fonts/PingFang\ Medium.ttf');
|
|
||||||
src: url('../../../common/fonts/PingFang\ Medium.ttf') format('woff'),
|
|
||||||
url('../../../common/fonts/PingFang\ Medium.ttf') format('truetype'),
|
|
||||||
url('../../../common/fonts/PingFang\ Medium.ttf') format('svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family: 'din';
|
|
||||||
src: url('../../../common/fonts/DINCond-Medium.ttf');
|
|
||||||
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
|
|
||||||
url('../../../common/fonts/DINCond-Medium.ttf') format('truetype'),
|
|
||||||
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
width: 100%;
|
|
||||||
// font-family: 'pingfang-bold';
|
|
||||||
// background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap{
|
|
||||||
.tab_wrap{
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 999;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(106, );
|
|
||||||
background: url('../images/single/top.png') no-repeat 0 0/100% 100%;
|
|
||||||
.tab_contain{
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(88, );
|
|
||||||
padding-top: px2rem(16, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: px2rem(-8, );
|
|
||||||
p{
|
|
||||||
position: relative;
|
|
||||||
height: px2rem(50, );
|
|
||||||
line-height: px2rem(50, );
|
|
||||||
padding: 0 px2rem(56, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: px2rem(36, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
&.active{
|
|
||||||
font-size: px2rem(36, );
|
|
||||||
&::after{
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: px2rem(-12, );
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: px2rem(32, );
|
|
||||||
height: px2rem(8, );
|
|
||||||
border-radius: px2rem(8, );
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rule_icon{
|
|
||||||
position: absolute;
|
|
||||||
right: px2rem(30, );
|
|
||||||
width: px2rem(40, );
|
|
||||||
height: px2rem(40, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rank_wrap{
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
// margin-top: px2rem(106, );
|
|
||||||
.time_wrap{
|
|
||||||
position: absolute;
|
|
||||||
top: px2rem(440, );
|
|
||||||
left: px2rem(0, );
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 px2rem(30, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
p{
|
|
||||||
font-size: px2rem(20, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
height: px2rem(28, );
|
|
||||||
line-height: px2rem(28, );
|
|
||||||
span{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.top_three_wrap{
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(434, );
|
|
||||||
background: url('../images/single/topthree-bg.png') no-repeat 0 0/100% 100%;
|
|
||||||
// margin-top: px2rem(160, );
|
|
||||||
padding-top: px2rem(54, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
.top_three_item{
|
|
||||||
position: absolute;
|
|
||||||
width: px2rem(216, );
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
&:first-child{
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
&:nth-child(2){
|
|
||||||
left: px2rem(40, );
|
|
||||||
}
|
|
||||||
&:nth-child(2), &:nth-child(3){
|
|
||||||
.avatar{
|
|
||||||
width: px2rem(176, );
|
|
||||||
height: px2rem(168, );
|
|
||||||
margin-top: px2rem(92, );
|
|
||||||
p{
|
|
||||||
background-image: url('../images/single/second.png');
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
top: px2rem(-160, );
|
|
||||||
width: px2rem(132, );
|
|
||||||
height: px2rem(132, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:nth-child(3){
|
|
||||||
right: px2rem(40, );
|
|
||||||
.avatar{
|
|
||||||
width: px2rem(160, );
|
|
||||||
p{
|
|
||||||
background-image: url('../images/single/third.png');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.avatar{
|
|
||||||
width: px2rem(216, );
|
|
||||||
height: px2rem(210, );
|
|
||||||
margin: px2rem(0, ) auto px2rem(8, );
|
|
||||||
p{
|
|
||||||
position: relative;
|
|
||||||
z-index: 99;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url('../images/single/first.png') no-repeat 0 0/100% 100%;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
position: relative;
|
|
||||||
top: px2rem(-188, );
|
|
||||||
width: px2rem(160, );
|
|
||||||
height: px2rem(160, );
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nick{
|
|
||||||
height: px2rem(40, );
|
|
||||||
line-height: px2rem(40, );
|
|
||||||
font-size: px2rem(28, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.num{
|
|
||||||
font-size: px2rem(20, );
|
|
||||||
color: #ccc;
|
|
||||||
span{
|
|
||||||
display: inline-block;
|
|
||||||
font-family: 'din';
|
|
||||||
font-size: px2rem(24, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: px2rem(2, );
|
|
||||||
margin-bottom: px2rem(6, );
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
width: px2rem(56, );
|
|
||||||
height: px2rem(68, );
|
|
||||||
margin-top: px2rem(20, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc{
|
|
||||||
display: flex;
|
|
||||||
margin-top: px2rem(40, );
|
|
||||||
margin-bottom: px2rem(24, );
|
|
||||||
p{
|
|
||||||
font-size: px2rem(20, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
&:first-child{
|
|
||||||
margin-left: px2rem(30, );
|
|
||||||
}
|
|
||||||
&:nth-child(2){
|
|
||||||
flex: 1;
|
|
||||||
margin-left: px2rem(70, );
|
|
||||||
}
|
|
||||||
&:last-child{
|
|
||||||
margin-right: px2rem(40, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul{
|
|
||||||
// height: px2rem(280, );
|
|
||||||
// overflow: auto;
|
|
||||||
// margin-top: px2rem(34, );
|
|
||||||
margin-bottom: px2rem(150, );
|
|
||||||
li{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: px2rem(32, );
|
|
||||||
.index{
|
|
||||||
width: px2rem(20, );
|
|
||||||
text-align: center;
|
|
||||||
font-size: px2rem(32, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: px2rem(40, );
|
|
||||||
margin-right: px2rem(56, );
|
|
||||||
}
|
|
||||||
.others_avatar{
|
|
||||||
width: px2rem(88, );
|
|
||||||
height: px2rem(88, );
|
|
||||||
margin-right: px2rem(24, );
|
|
||||||
img{
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.others_nick{
|
|
||||||
flex: 1;
|
|
||||||
font-size: px2rem(28, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.others_num{
|
|
||||||
font-size: px2rem(24, );
|
|
||||||
color: #CCCCCC;
|
|
||||||
text-align: right;
|
|
||||||
margin-right: px2rem(40, );
|
|
||||||
span{
|
|
||||||
font-family: 'din';
|
|
||||||
font-size: px2rem(32, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.mine{
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(128, );
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 px2rem(-2, ) px2rem(8, ) #F4F4F4;
|
|
||||||
.mine_index{
|
|
||||||
width: px2rem(72, );
|
|
||||||
text-align: center;
|
|
||||||
font-size: px2rem(24, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: px2rem(20, );
|
|
||||||
}
|
|
||||||
.mine_avatar{
|
|
||||||
width: px2rem(88, );
|
|
||||||
height: px2rem(88, );
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 px2rem(24, );
|
|
||||||
}
|
|
||||||
.mine_nick{
|
|
||||||
flex: 1;
|
|
||||||
font-size: px2rem(28, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.mine_num{
|
|
||||||
text-align: right;
|
|
||||||
font-size: px2rem(24, );
|
|
||||||
color: #ccc;
|
|
||||||
margin-right: px2rem(40, );
|
|
||||||
p{
|
|
||||||
font-family: 'din';
|
|
||||||
font-size: px2rem(32, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: px2rem(4, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
550
view/yinmeng/modules/room_rank/css/hourRankLicense.css
Normal file
550
view/yinmeng/modules/room_rank/css/hourRankLicense.css
Normal file
@@ -0,0 +1,550 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
background: #0B1836;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
html::-webkit-scrollbar,
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layershade {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layer2 .layui-m-layerchild {
|
||||||
|
width: 3rem !important;
|
||||||
|
height: 3rem !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
color: #fff !important;
|
||||||
|
background: rgba(0, 0, 0, 0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layer2 .layui-m-layercont {
|
||||||
|
text-align: center !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
line-height: 0 !important;
|
||||||
|
margin-top: 0.8rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
top: 0.26667rem;
|
||||||
|
left: 0.32rem;
|
||||||
|
z-index: 99;
|
||||||
|
width: 0.82667rem;
|
||||||
|
height: 0.82667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back p {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.42667rem;
|
||||||
|
position: absolute;
|
||||||
|
width: 9rem;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0.82667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox {
|
||||||
|
width: 10rem;
|
||||||
|
min-height: 15.38667rem;
|
||||||
|
background: url(../images/bg.png) no-repeat;
|
||||||
|
background-size: 10rem 15.38667rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.17333rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .title {
|
||||||
|
width: 7.06667rem;
|
||||||
|
height: 1.14667rem;
|
||||||
|
position: absolute;
|
||||||
|
top: -0.12rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .lastHour {
|
||||||
|
width: 9.14667rem;
|
||||||
|
margin: 0rem auto 0.42667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .lastHour .text {
|
||||||
|
width: 100%;
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
margin-bottom: 0.24rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box {
|
||||||
|
width: 9.14667rem;
|
||||||
|
height: 2.34667rem;
|
||||||
|
background: url(../images/lastHour.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .txbox {
|
||||||
|
width: 2.02667rem;
|
||||||
|
height: 2.45333rem;
|
||||||
|
background: url(../images/hourTs.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 0.24rem;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .txbox .hourTs {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .txbox .tx {
|
||||||
|
width: 1.44rem;
|
||||||
|
height: 1.44rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo {
|
||||||
|
float: left;
|
||||||
|
width: 3.73333rem;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo p {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.37333rem;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .mvp {
|
||||||
|
width: 0.74667rem;
|
||||||
|
height: 0.74667rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.02667rem solid #FFDA24;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.06667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .mvp .mvpTx {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .mvp span {
|
||||||
|
width: 0.90667rem;
|
||||||
|
height: 0.29333rem;
|
||||||
|
line-height: 0.29333rem;
|
||||||
|
border-radius: 0.29333rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.61333rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 0.18667rem;
|
||||||
|
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||||
|
padding: 0 0.02667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member {
|
||||||
|
width: 2.29333rem;
|
||||||
|
height: 0.69333rem;
|
||||||
|
border-radius: 0.69333rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 1.2rem;
|
||||||
|
top: 1.17333rem;
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member img {
|
||||||
|
position: absolute;
|
||||||
|
width: 0.48rem;
|
||||||
|
height: 0.48rem;
|
||||||
|
border: 0.02667rem solid #FFDA24;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx1 {
|
||||||
|
left: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx2 {
|
||||||
|
left: 0.53333rem;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx3 {
|
||||||
|
left: 0.90667rem;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx4 {
|
||||||
|
left: 1.28rem;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx5 {
|
||||||
|
left: 1.65333rem;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .score {
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 2.34667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .score img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.37333rem;
|
||||||
|
height: 0.37333rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .score span {
|
||||||
|
color: #FFDA24;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.42667rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList .top {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.53333rem;
|
||||||
|
margin-bottom: 0.26667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList .top .sp {
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList .top span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList .top span b {
|
||||||
|
color: #FFDA24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul {
|
||||||
|
width: 100%;
|
||||||
|
height: 7rem;
|
||||||
|
overflow-y: scroll;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 0.66667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.13333rem;
|
||||||
|
backdrop-filter: blur(0px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.53333rem;
|
||||||
|
background: RGBA(11, 24, 57, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .num {
|
||||||
|
width: 0.64rem;
|
||||||
|
height: 0.64rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.42667rem;
|
||||||
|
font-weight: 500;
|
||||||
|
float: left;
|
||||||
|
margin-top: 0.74667rem;
|
||||||
|
margin-right: 0.42667rem;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .num1 {
|
||||||
|
background: url(../images/no1.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .num2 {
|
||||||
|
background: url(../images/no2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .num3 {
|
||||||
|
background: url(../images/no3.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .tx {
|
||||||
|
width: 1.28rem;
|
||||||
|
height: 1.28rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 0.42667rem;
|
||||||
|
margin-right: 0.32rem;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo {
|
||||||
|
float: left;
|
||||||
|
width: 3.73333rem;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo p {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.26667rem;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .mvp {
|
||||||
|
width: 0.74667rem;
|
||||||
|
height: 0.74667rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.02667rem solid #FFDA24;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.96rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .mvp .mvpTx {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .mvp span {
|
||||||
|
width: 0.90667rem;
|
||||||
|
height: 0.29333rem;
|
||||||
|
line-height: 0.29333rem;
|
||||||
|
border-radius: 0.29333rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.61333rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 0.18667rem;
|
||||||
|
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||||
|
padding: 0 0.02667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member {
|
||||||
|
width: 2.29333rem;
|
||||||
|
height: 0.69333rem;
|
||||||
|
border-radius: 0.69333rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 1.2rem;
|
||||||
|
top: 1.06667rem;
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member img {
|
||||||
|
position: absolute;
|
||||||
|
width: 0.48rem;
|
||||||
|
height: 0.48rem;
|
||||||
|
border: 0.02667rem solid #FFDA24;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx1 {
|
||||||
|
left: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx2 {
|
||||||
|
left: 0.53333rem;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx3 {
|
||||||
|
left: 0.90667rem;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx4 {
|
||||||
|
left: 1.28rem;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx5 {
|
||||||
|
left: 1.65333rem;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .score {
|
||||||
|
float: right;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 0.58667rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .score p {
|
||||||
|
margin-bottom: 0.13333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .score span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .first {
|
||||||
|
position: absolute;
|
||||||
|
width: 0.85333rem;
|
||||||
|
height: 0.37333rem;
|
||||||
|
right: 0.53333rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul .li1 {
|
||||||
|
background: linear-gradient(270deg, rgba(255, 204, 0, 0) 0%, rgba(255, 199, 44, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul .li2 {
|
||||||
|
background: linear-gradient(270deg, rgba(109, 139, 209, 0) 0%, rgba(135, 158, 204, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul .li3 {
|
||||||
|
background: linear-gradient(270deg, rgba(163, 102, 46, 0) 0%, rgba(198, 135, 81, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.my {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.05333rem;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: url(../images/my.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 2.13333rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.53333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .num {
|
||||||
|
height: 0.64rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.42667rem;
|
||||||
|
font-weight: 500;
|
||||||
|
float: left;
|
||||||
|
margin-top: 0.74667rem;
|
||||||
|
margin-right: 0.42667rem;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .tx {
|
||||||
|
width: 1.28rem;
|
||||||
|
height: 1.28rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 0.42667rem;
|
||||||
|
margin-right: 0.32rem;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score {
|
||||||
|
float: left;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 0.58667rem;
|
||||||
|
width: 3.73333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score p {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.13333rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score span b {
|
||||||
|
color: #E6ECF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .but {
|
||||||
|
width: 1.76rem;
|
||||||
|
height: 0.74667rem;
|
||||||
|
line-height: 0.74667rem;
|
||||||
|
margin-top: 0.56rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 500;
|
||||||
|
background: url(../images/myBut.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
float: right;
|
||||||
|
}
|
560
view/yinmeng/modules/room_rank/css/hourRankLicense.scss
Normal file
560
view/yinmeng/modules/room_rank/css/hourRankLicense.scss
Normal file
@@ -0,0 +1,560 @@
|
|||||||
|
@function px2rem($px) {
|
||||||
|
@return $px / 75+rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
// background: linear-gradient(0deg, #0F2E69 0%, #0B1836 99%);
|
||||||
|
background: #0B1836;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layershade {
|
||||||
|
background-color: rgba(0, 0, 0, .0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layer2 .layui-m-layerchild {
|
||||||
|
width: 3rem !important;
|
||||||
|
height: 3rem !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
color: #fff !important;
|
||||||
|
background: rgba(0, 0, 0, .6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layer2 .layui-m-layercont {
|
||||||
|
text-align: center !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
line-height: 0 !important;
|
||||||
|
margin-top: 0.8rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
top: px2rem(20);
|
||||||
|
left: px2rem(24);
|
||||||
|
z-index: 99;
|
||||||
|
width: px2rem(62);
|
||||||
|
height: px2rem(62);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fff;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
position: absolute;
|
||||||
|
width: 9rem;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: px2rem(62);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox {
|
||||||
|
width: px2rem(750);
|
||||||
|
min-height: px2rem(1154);
|
||||||
|
background: url(../images/bg.png) no-repeat;
|
||||||
|
background-size: px2rem(750) px2rem(1154);
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: px2rem(88) 0 0 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: px2rem(530);
|
||||||
|
height: px2rem(86);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(-9);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lastHour {
|
||||||
|
width: px2rem(686);
|
||||||
|
margin: px2rem(0) auto px2rem(32);
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 100%;
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
margin-bottom: px2rem(18);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: px2rem(686);
|
||||||
|
height: px2rem(176);
|
||||||
|
background: url(../images/lastHour.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(24);
|
||||||
|
|
||||||
|
.txbox {
|
||||||
|
width: px2rem(152);
|
||||||
|
height: px2rem(184);
|
||||||
|
background: url(../images/hourTs.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
margin-right: px2rem(18);
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
.hourTs {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
width: px2rem(108);
|
||||||
|
height: px2rem(108);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: px2rem(30);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.userInfo {
|
||||||
|
float: left;
|
||||||
|
width: px2rem(280);
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: px2rem(28);
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 500;
|
||||||
|
// 超出省略号
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mvp {
|
||||||
|
width: px2rem(56);
|
||||||
|
height: px2rem(56);
|
||||||
|
border-radius: 50%;
|
||||||
|
border: px2rem(2) solid #FFDA24;
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(80);
|
||||||
|
|
||||||
|
.mvpTx {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: px2rem(68);
|
||||||
|
height: px2rem(22);
|
||||||
|
line-height: px2rem(22);
|
||||||
|
border-radius: px2rem(22);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(46);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: px2rem(14);
|
||||||
|
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||||
|
padding: 0 px2rem(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member {
|
||||||
|
width: px2rem(172);
|
||||||
|
height: px2rem(52);
|
||||||
|
border-radius: px2rem(52);
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(90);
|
||||||
|
top: px2rem(88);
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: px2rem(36);
|
||||||
|
height: px2rem(36);
|
||||||
|
border: px2rem(2) solid #FFDA24;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx1 {
|
||||||
|
left: px2rem(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx2 {
|
||||||
|
left: px2rem(40);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx3 {
|
||||||
|
left: px2rem(68);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx4 {
|
||||||
|
left: px2rem(96);
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx5 {
|
||||||
|
left: px2rem(124);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
line-height: px2rem(176);
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(28);
|
||||||
|
height: px2rem(28);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #FFDA24;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hourList {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(40);
|
||||||
|
margin-bottom: px2rem(20);
|
||||||
|
|
||||||
|
.sp {
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: px2rem(24);
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #FFDA24;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
height: 7rem;
|
||||||
|
overflow-y: scroll;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: px2rem(50);
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(160);
|
||||||
|
backdrop-filter: blur(0px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(40);
|
||||||
|
background: RGBA(11, 24, 57, 1);
|
||||||
|
|
||||||
|
.num {
|
||||||
|
width: px2rem(48);
|
||||||
|
height: px2rem(48);
|
||||||
|
text-align: center;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
font-weight: 500;
|
||||||
|
float: left;
|
||||||
|
margin-top: px2rem(56);
|
||||||
|
margin-right: px2rem(32);
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num1 {
|
||||||
|
background: url(../images/no1.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num2 {
|
||||||
|
background: url(../images/no2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num3 {
|
||||||
|
background: url(../images/no3.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
width: px2rem(96);
|
||||||
|
height: px2rem(96);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: px2rem(32);
|
||||||
|
margin-right: px2rem(24);
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userInfo {
|
||||||
|
float: left;
|
||||||
|
width: px2rem(280);
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: px2rem(20);
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 500;
|
||||||
|
// 超出省略号
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mvp {
|
||||||
|
width: px2rem(56);
|
||||||
|
height: px2rem(56);
|
||||||
|
border-radius: 50%;
|
||||||
|
border: px2rem(2) solid #FFDA24;
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(72);
|
||||||
|
|
||||||
|
.mvpTx {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: px2rem(68);
|
||||||
|
height: px2rem(22);
|
||||||
|
line-height: px2rem(22);
|
||||||
|
border-radius: px2rem(22);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(46);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: px2rem(14);
|
||||||
|
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||||
|
padding: 0 px2rem(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member {
|
||||||
|
width: px2rem(172);
|
||||||
|
height: px2rem(52);
|
||||||
|
border-radius: px2rem(52);
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(90);
|
||||||
|
top: px2rem(80);
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: px2rem(36);
|
||||||
|
height: px2rem(36);
|
||||||
|
border: px2rem(2) solid #FFDA24;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx1 {
|
||||||
|
left: px2rem(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx2 {
|
||||||
|
left: px2rem(40);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx3 {
|
||||||
|
left: px2rem(68);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx4 {
|
||||||
|
left: px2rem(96);
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx5 {
|
||||||
|
left: px2rem(124);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
float: right;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: px2rem(44);
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: px2rem(10);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: px2rem(22);
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.first {
|
||||||
|
position: absolute;
|
||||||
|
width: px2rem(64);
|
||||||
|
height: px2rem(28);
|
||||||
|
right: px2rem(40);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.li1 {
|
||||||
|
background: linear-gradient(270deg, rgba(255, 204, 0, 0) 0%, rgba(255, 199, 44, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.li2 {
|
||||||
|
background: linear-gradient(270deg, rgba(109, 139, 209, 0) 0%, rgba(135, 158, 204, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.li3 {
|
||||||
|
background: linear-gradient(270deg, rgba(163, 102, 46, 0) 0%, rgba(198, 135, 81, 0.35) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(154);
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: url(../images/my.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(160);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(40);
|
||||||
|
|
||||||
|
.num {
|
||||||
|
// width: px2rem(48);
|
||||||
|
height: px2rem(48);
|
||||||
|
text-align: center;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
font-weight: 500;
|
||||||
|
float: left;
|
||||||
|
margin-top: px2rem(56);
|
||||||
|
margin-right: px2rem(32);
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
width: px2rem(96);
|
||||||
|
height: px2rem(96);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: px2rem(32);
|
||||||
|
margin-right: px2rem(24);
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
float: left;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: px2rem(44);
|
||||||
|
width: px2rem(280);
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: px2rem(10);
|
||||||
|
// 超出省略号
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: px2rem(22);
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #E6ECF5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.but {
|
||||||
|
width: px2rem(132);
|
||||||
|
height: px2rem(56);
|
||||||
|
line-height: px2rem(56);
|
||||||
|
margin-top: px2rem(42);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: px2rem(24);
|
||||||
|
font-weight: 500;
|
||||||
|
background: url(../images/myBut.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
@@ -5,11 +5,169 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>小时榜</title>
|
<title>小时榜</title>
|
||||||
|
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||||
|
<link rel="stylesheet" href="./css/hourRankLicense.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div src="./images/boxBig2.svga" loops="0" clearsAfterStop="true"></div>
|
<!-- 顶部返回 -->
|
||||||
|
<!-- <div class="back">
|
||||||
|
<img src="./images/travel/back.png" alt="">
|
||||||
|
</div> -->
|
||||||
|
<!-- 最外层容器 -->
|
||||||
|
<div class="largestBox">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<img src="./images/title.png" alt="" class="title">
|
||||||
|
<!-- 上期小时榜 -->
|
||||||
|
<div class="lastHour">
|
||||||
|
<div class="text">上小时 top1</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="txbox">
|
||||||
|
<img src="./images/hourTs.png" alt="" class="hourTs">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
</div>
|
||||||
|
<div class="userInfo">
|
||||||
|
<p></p>
|
||||||
|
<div class="mvp">
|
||||||
|
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||||
|
<span>最佳助力</span>
|
||||||
|
</div>
|
||||||
|
<div class="member">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="score">
|
||||||
|
<img src="./images/hot.png" alt="" class="hot">
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 小时榜 -->
|
||||||
|
<div class="hourList">
|
||||||
|
<div class="top">
|
||||||
|
<span class="sp">
|
||||||
|
<!-- 20点 小时榜 -->
|
||||||
|
</span>
|
||||||
|
<span class="sp2">
|
||||||
|
<!-- 剩余<b>10</b>分<b>10</b>秒 -->
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<!-- <li class="li1">
|
||||||
|
<div class="num num1"></div>
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="userInfo">
|
||||||
|
<p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
|
||||||
|
<div class="mvp">
|
||||||
|
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||||
|
<span>最佳助力</span>
|
||||||
|
</div>
|
||||||
|
<div class="member">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score">
|
||||||
|
<p>1000</p>
|
||||||
|
<span>距上一名</span>
|
||||||
|
</div>
|
||||||
|
<img src="./images/first.png" alt="" class="first">
|
||||||
|
</li>
|
||||||
|
<li class="li2">
|
||||||
|
<div class="num num2"></div>
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="userInfo">
|
||||||
|
<p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
|
||||||
|
<div class="mvp">
|
||||||
|
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||||
|
<span>最佳助力</span>
|
||||||
|
</div>
|
||||||
|
<div class="member">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score">
|
||||||
|
<p>1000</p>
|
||||||
|
<span>距上一名</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="li3">
|
||||||
|
<div class="num num3"></div>
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="userInfo">
|
||||||
|
<p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
|
||||||
|
<div class="mvp">
|
||||||
|
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||||
|
<span>最佳助力</span>
|
||||||
|
</div>
|
||||||
|
<div class="member">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score">
|
||||||
|
<p>1000</p>
|
||||||
|
<span>距上一名</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="num">4</div>
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="userInfo">
|
||||||
|
<p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
|
||||||
|
<div class="mvp">
|
||||||
|
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||||
|
<span>最佳助力</span>
|
||||||
|
</div>
|
||||||
|
<div class="member">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||||
|
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score">
|
||||||
|
<p>1000</p>
|
||||||
|
<span>距上一名</span>
|
||||||
|
</div>
|
||||||
|
</li> -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 自己榜单 -->
|
||||||
|
<div class="my">
|
||||||
|
<div class="num">未上榜</div>
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div class="score">
|
||||||
|
<p></p>
|
||||||
|
<span>距上一名还差 <b>0</b></span>
|
||||||
|
</div>
|
||||||
|
<div class="but">打榜助力</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
<script src="../../common/js/flexible.js"></script>
|
||||||
|
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||||
|
<script src="../../common/js/common2.js"></script>
|
||||||
|
<script src="../../common/js/layer.js"></script>
|
||||||
|
<script src="../../common/js/vconsole.min.js"></script>
|
||||||
|
<script src="../../common/js/route-constant.js"></script>
|
||||||
<script src="../../common/js/svga.js"></script>
|
<script src="../../common/js/svga.js"></script>
|
||||||
|
<script src="./js/hourRankLicense.js"></script>
|
@@ -1,251 +1,211 @@
|
|||||||
let urlPrefix = getUrlPrefix()
|
let urlPrefix = getUrlPrefix()
|
||||||
let browser = checkVersion()
|
let browser = checkVersion()
|
||||||
let queryObj = getQueryString()
|
let env = EnvCheck();
|
||||||
if (EnvCheck() === 'test') new VConsole
|
var urlData = getQueryString();
|
||||||
// 页面全屏
|
if (env == 'test') {
|
||||||
if (browser.app) {
|
new VConsole();
|
||||||
if (browser.android) {
|
|
||||||
// window.androidJsObj.initShowNav(false)
|
|
||||||
} else {
|
|
||||||
// window.webkit.messageHandlers.initShowNav.postMessage(0)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 封装layer消息提醒框
|
// 封装layer消息提醒框
|
||||||
let layerIndex
|
let layerIndex
|
||||||
const showLoading = () => {
|
const showLoading = (content = '加载中...') => {
|
||||||
layer.open({
|
layer.open({
|
||||||
type: 2,
|
type: 2,
|
||||||
shadeClose: false,
|
shadeClose: false,
|
||||||
content: '加载中...',
|
content,
|
||||||
success(e) {
|
success (e) {
|
||||||
layerIndex = $(e).attr('index')
|
layerIndex = $(e).attr('index')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const hideLoading = (index) => {
|
const hideLoading = (index) => {
|
||||||
layer.close(index)
|
layer.close(index)
|
||||||
}
|
}
|
||||||
const toastMsg = (content = '操作完成', time = 2) => {
|
const toastMsg = (content = '操作完成', time = 2) => {
|
||||||
layer.open({
|
layer.open({
|
||||||
content,
|
content,
|
||||||
time,
|
time,
|
||||||
skin: 'msg'
|
skin: 'msg'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
var timeOut2;
|
||||||
|
var leftTime;
|
||||||
let currHourRank = []
|
// 初始化函数
|
||||||
let lastHourRank = []
|
$(function () {
|
||||||
let currRoomInfo = {}
|
getInfoFromClient()
|
||||||
let timestamp
|
setTimeout(function () {
|
||||||
|
// 页面全屏
|
||||||
let page = 1
|
if (browser.app) {
|
||||||
let pageSize = 10
|
if (browser.android) {
|
||||||
let rankList = []
|
window.androidJsObj.initShowNav(false)
|
||||||
let canNext = true
|
} else {
|
||||||
let isLock = true
|
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||||
|
}
|
||||||
// 获取小时榜数据
|
};
|
||||||
const getHourList = () => {
|
// 顶部返回事件
|
||||||
networkRequest({
|
$('.back').click(() => {
|
||||||
type: 'GET',
|
if (browser.android) {
|
||||||
url: urlPrefix + '/room/permitRoom/hourRank',
|
window.androidJsObj.closeWebView()
|
||||||
data: {
|
} else {
|
||||||
roomUid: queryObj.roomUid
|
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||||||
},
|
}
|
||||||
success(res) {
|
})
|
||||||
if (res.code === 200) {
|
getHourRank();
|
||||||
currHourRank = res.data.currHourRank
|
}, 100)
|
||||||
lastHourRank = res.data.lastHourRank
|
})
|
||||||
currRoomInfo = res.data.currRoomInfo
|
// 小时榜接口
|
||||||
timestamp = res.timestamp
|
function getHourRank () {
|
||||||
countDown()
|
showLoading()
|
||||||
renderLastHourThree()
|
networkRequest({
|
||||||
renderCurrentList()
|
type: 'GEt',
|
||||||
renderCurrentRoomInfo()
|
url: urlPrefix + '/room/permitRoom/hourRank',
|
||||||
} else {
|
data: { roomUid: urlData.roomUid },
|
||||||
toastMsg(res.message)
|
success (res) {
|
||||||
}
|
if (res.code === 200) {
|
||||||
},
|
// ==================================设置倒计时===========================
|
||||||
error(err) {
|
nowTime = res.timestamp;
|
||||||
toastMsg('网络错误')
|
$('.largestBox .hourList .top .sp').text(`${dateFormat(nowTime, 'hh')}点 小时榜`)
|
||||||
}
|
// 获取当前时间
|
||||||
})
|
now = new Date(nowTime);
|
||||||
}
|
// 计算距离下一个小时的分钟数
|
||||||
// 渲染小时榜上一小时前三
|
var minutesToNextHour = (59 - now.getMinutes()) % 60;
|
||||||
const renderLastHourThree = () => {
|
// 计算距离下一个小时的秒数
|
||||||
lastHourRank = lastHourRank.slice(0, 3)
|
var secondsToNextHour = 59 - now.getSeconds();
|
||||||
if (lastHourRank.length < 3) {
|
// 计算距离下一个小时的总时间(以毫秒为单位)
|
||||||
let len = 3 - lastHourRank.length
|
var timeToNextHour = (minutesToNextHour * 60 * 1000) + (secondsToNextHour * 1000);
|
||||||
let arr = new Array(len).fill({
|
leftTime = timeToNextHour;
|
||||||
nick: '',
|
countup();
|
||||||
score: ''
|
// =================================上期前三===========================
|
||||||
|
lastHourRank = res.data.lastHourRank[0];
|
||||||
|
if (lastHourRank) {
|
||||||
|
$('.largestBox .box .txbox .tx').attr("src", lastHourRank.avatar);
|
||||||
|
$('.largestBox .box .txbox .hourTs').attr("roomUid", lastHourRank.uid);
|
||||||
|
$('.largestBox .box .userInfo p').text(lastHourRank.nick);
|
||||||
|
$('.largestBox .box .userInfo .mvp .mvpTx').attr("src", lastHourRank.assist.avatar);
|
||||||
|
lastHourRank.micUsers.forEach((res, i) => {
|
||||||
|
$(`.largestBox .hourList ul li .userInfo .member .memberTx${i + 1}`).attr("src", res.avatar);
|
||||||
|
});
|
||||||
|
$('.largestBox .box .score span').text(res.score);
|
||||||
|
} else {
|
||||||
|
$('.largestBox .box .txbox .tx').attr("src", './images/logo.png');
|
||||||
|
$('.largestBox .box .userInfo p').text('虚位以待');
|
||||||
|
$('.largestBox .box .userInfo .mvp .mvpTx').attr("src", './images/logo.png');
|
||||||
|
$('.largestBox .box .score span').text(0);
|
||||||
|
}
|
||||||
|
//================================= 当前小时榜===========================
|
||||||
|
$('.largestBox .hourList ul li').remove();
|
||||||
|
var str = '';
|
||||||
|
res.data.currHourRank.forEach((res, i) => {
|
||||||
|
str += `
|
||||||
|
<li class="li${i + 1}">
|
||||||
|
<div class="num num${i + 1}">${i > 2 ? i : ''}</div>
|
||||||
|
<img src="${res.avatar}" roomUid=${res.uid} alt="" class="tx">
|
||||||
|
<div class="userInfo">
|
||||||
|
<p>${res.nick}</p>
|
||||||
|
<div class="mvp">
|
||||||
|
<img src="${res.assist.avatar}" alt="" class="mvpTx">
|
||||||
|
<span>最佳助力</span>
|
||||||
|
</div>
|
||||||
|
<div class="member">
|
||||||
|
<img src="${res.micUsers[0] ? res.micUsers[0].avatar : './images/logo.png'}" alt="" class="memberTx memberTx1">
|
||||||
|
<img src="${res.micUsers[1] ? res.micUsers[1].avatar : './images/logo.png'}" alt="" class="memberTx memberTx2">
|
||||||
|
<img src="${res.micUsers[2] ? res.micUsers[2].avatar : './images/logo.png'}" alt="" class="memberTx memberTx3">
|
||||||
|
<img src="${res.micUsers[3] ? res.micUsers[3].avatar : './images/logo.png'}" alt="" class="memberTx memberTx4">
|
||||||
|
<img src="${res.micUsers[4] ? res.micUsers[4].avatar : './images/logo.png'}" alt="" class="memberTx memberTx5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score">
|
||||||
|
<p>${i == 0 ? res.score : res.data.currHourRank[i - 1].score - res.score}</p>
|
||||||
|
<span>距上一名</span>
|
||||||
|
</div>
|
||||||
|
<img style="display:${i == 0 ? 'block' : 'none'}" src="./images/first.png" alt="" class="first">
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
$('.largestBox .hourList ul').append(str);
|
||||||
|
// ====================================处理自己===========================
|
||||||
|
$('.my .tx').attr('src', res.data.currRoomInfo.avatar);
|
||||||
|
$('.my .tx').attr('uid', res.data.currRoomInfo.uid);
|
||||||
|
$('.my .score p').text(res.data.currRoomInfo.nick);
|
||||||
|
var uid = res.data.currRoomInfo.uid;
|
||||||
|
if (res.data.currHourRank.find(obj => obj.uid == res.data.currRoomInfo.uid)) {
|
||||||
|
res.data.currHourRank.forEach((val, i) => {
|
||||||
|
if (uid == val.uid) {
|
||||||
|
$('.my .score span').show();
|
||||||
|
$('.my .score span b').text(i == 0 ? 0 : res.data.currHourRank[i - 1].score - val.score);
|
||||||
|
$(`.my .num`).text(i + 1);
|
||||||
|
$(`.my .score p`).css('margin-top', '0rem')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
$('.my .score span').hide();
|
||||||
|
$(`.my .num`).text('未上榜');
|
||||||
|
$(`.my .score p`).css('margin-top', '0.3rem')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
toastMsg(res.message)
|
||||||
|
}
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
},
|
||||||
|
error (err) {
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
toastMsg('网络错误,请退出重进')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
lastHourRank.push(...arr)
|
|
||||||
}
|
|
||||||
let str = ''
|
|
||||||
lastHourRank.map((item, index) => {
|
|
||||||
if (item.score > 10000) {
|
|
||||||
item.score = (Math.floor(item.score / 1000)) / 10 + 'W'
|
|
||||||
}
|
|
||||||
str += `
|
|
||||||
<div class="top_three_item">
|
|
||||||
<div class="avatar" data-uid=${item.uid}>
|
|
||||||
<p></p>
|
|
||||||
<img src="${item.avatar ? item.avatar : `./images/${index + 1}.png`}" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</div>
|
|
||||||
<div class="num" style="display:${item.score === '' ? 'none' : 'block'}">
|
|
||||||
${index == 0 ?
|
|
||||||
'<img src="./images/single/first-icon.png" alt=""></img>' :
|
|
||||||
`<span>${item.score}</span><br>距上一名`
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
$('.top_three_wrap').html(str)
|
|
||||||
}
|
}
|
||||||
// 倒计时
|
// 倒计时
|
||||||
const countDown = () => {
|
function countup () {
|
||||||
let t = new Date(timestamp)
|
clearTimeout(timeOut2)
|
||||||
console.log(t);
|
//获取当前时间
|
||||||
console.log(timestamp);
|
// var now = nowTime;
|
||||||
let y = t.getFullYear()
|
var d = 0;
|
||||||
let m = t.getMonth() + 1
|
var h = 0;
|
||||||
let d = t.getDate()
|
var m = 0;
|
||||||
let h = t.getHours()
|
var s = 0;
|
||||||
let disT = new Date(`${y}/${m}/${d} ${h + 1}:00:00`).getTime() - timestamp
|
//定义变量 d,h,m,s保存倒计时的时间
|
||||||
let min = Math.floor(disT / 1000 / 60)
|
var d, h, m, s;
|
||||||
let s
|
//递归每秒调⽤countTime⽅法,显⽰动态时间效果
|
||||||
let delta = disT / 1000 - Math.floor(disT / 1000)
|
if (leftTime > 0) {
|
||||||
if (delta > 0.5) {
|
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
|
||||||
s = Math.ceil(disT / 1000 % 60)
|
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
|
||||||
} else {
|
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
|
||||||
s = Math.floor(disT / 1000 % 60)
|
s = getzf(Math.floor(leftTime / 1000 % 60));
|
||||||
}
|
//将倒计时赋值到div中
|
||||||
$('.time_wrap .h').html(h)
|
// console.log("最终: " + dateFormat(leftTime, '00:mm:ss'));
|
||||||
$('.time_wrap .m').html(min < 10 ? '0' + min : min)
|
$('.largestBox .hourList .top .sp2').html(`<span>剩余<b>${dateFormat(leftTime, 'mm')}</b>分<b>${dateFormat(leftTime, 'ss')}</b>秒</span>`)
|
||||||
$('.time_wrap .s').html(s < 10 ? '0' + s : s)
|
} else {
|
||||||
let timer = setInterval(() => {
|
getHourRank();
|
||||||
disT -= 1000
|
|
||||||
if (disT <= 0) {
|
|
||||||
getHourList()
|
|
||||||
clearInterval(timer)
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
min = Math.floor(disT / 1000 / 60)
|
if (leftTime > 0) {
|
||||||
s = Math.floor(disT / 1000 % 60)
|
leftTime = leftTime - 1000;
|
||||||
$('.time_wrap .m').html(min < 10 ? '0' + min : min)
|
}
|
||||||
$('.time_wrap .s').html(s < 10 ? '0' + s : s)
|
timeOut2 = setTimeout(countup, 1000);
|
||||||
}, 1000)
|
|
||||||
}
|
}
|
||||||
// 渲染小时榜当前列表
|
//补0操作
|
||||||
const renderCurrentList = () => {
|
function getzf (num) {
|
||||||
currHourRank = currHourRank.slice(0, 10)
|
if (parseInt(num) < 10) {
|
||||||
if (currHourRank.length < 10) {
|
num = '0' + num;
|
||||||
let len = 10 - currHourRank.length
|
|
||||||
let arr = new Array(len).fill({
|
|
||||||
nick: '虚位以待',
|
|
||||||
score: ''
|
|
||||||
})
|
|
||||||
currHourRank.push(...arr)
|
|
||||||
}
|
|
||||||
let str = ''
|
|
||||||
currHourRank.map((item, index) => {
|
|
||||||
if (item.score > 10000) {
|
|
||||||
item.score = (Math.floor(item.score / 1000)) / 10 + 'W'
|
|
||||||
}
|
}
|
||||||
str += `
|
return num;
|
||||||
<li>
|
|
||||||
<div class="index">${index + 1}</div>
|
|
||||||
<div class="others_avatar" data-uid=${item.uid}>
|
|
||||||
<img src="${item.avatar ? item.avatar : `./images/default-avatar.png`}" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="others_nick">${item.nick.length > 8 ? item.nick.slice(0, 8) + '...' : item.nick}</div>
|
|
||||||
<div class="others_num" style="display:${item.score === '' ? 'none' : 'block'}">
|
|
||||||
${index === 0 ?
|
|
||||||
'高居榜首' :
|
|
||||||
`距上一名<br><span>${item.score}</span>`
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
$('ul').html(str)
|
|
||||||
}
|
}
|
||||||
// 渲染当前房间榜单信息
|
// 点击前三跳转房间
|
||||||
const renderCurrentRoomInfo = () => {
|
$('.largestBox').on('click', '.lastHour .box .txbox .hourTs', function () {
|
||||||
let rank = ''
|
var roomUid = $(this).attr('roomUid');
|
||||||
let score = ''
|
if (browser.ios) {
|
||||||
currHourRank.forEach((item, index) => {
|
window.webkit.messageHandlers.openRoom.postMessage(roomUid);
|
||||||
if (item.uid == currRoomInfo.uid) {
|
} else if (browser.android) {
|
||||||
rank = index + 1
|
|
||||||
if (item.score > 10000) {
|
|
||||||
score = (Math.floor(item.score / 1000)) / 10 + 'W'
|
|
||||||
} else {
|
|
||||||
score = item.score
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
$('.mine_index').html(rank ? rank : '未上榜')
|
|
||||||
$('.mine_avatar').attr('src', currRoomInfo.avatar)
|
|
||||||
$('.mine_avatar').data('uid', currRoomInfo.uid)
|
|
||||||
$('.mine_nick').html(currRoomInfo.nick.length > 8 ? currRoomInfo.nick.slice(0, 8) + '...' : currRoomInfo.nick)
|
|
||||||
$('.mine_num').html(`
|
|
||||||
${score === 0 ?
|
|
||||||
'高居榜首' :
|
|
||||||
(score === '' ? '' :
|
|
||||||
`
|
|
||||||
距上一名
|
|
||||||
<p>${score}</p>
|
|
||||||
`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
`)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
getInfoFromClient()
|
|
||||||
setTimeout(() => {
|
|
||||||
getHourList()
|
|
||||||
}, 50)
|
|
||||||
|
|
||||||
$('.rule_icon').click(() => {
|
|
||||||
window.location.href = './ruleLicense.html'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 跳转房间函数
|
|
||||||
function openRoomFun(document, dom){
|
|
||||||
$(document).on('click', dom, function () {
|
|
||||||
let erbanUid = $(this).data('uid')
|
|
||||||
// if (!browser.app) return
|
|
||||||
if (browser.ios) {
|
|
||||||
window.webkit.messageHandlers.openRoom.postMessage(erbanUid);
|
|
||||||
} else if (browser.android) {
|
|
||||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
window.androidJsObj.openRoom(erbanUid);
|
window.androidJsObj.openRoom(roomUid);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
// 点击非前三跳转房间.
|
||||||
//跳转个人主页
|
$('.largestBox').on('click', '.hourList ul li .tx', function () {
|
||||||
// function openPerson(document, dom) {
|
var roomUid = $(this).attr('roomUid');
|
||||||
// $(document).on('click', dom, function () {
|
if (browser.ios) {
|
||||||
// let erbanUid = $(this).data('uid')
|
window.webkit.messageHandlers.openRoom.postMessage(roomUid);
|
||||||
// if (!browser.app) return
|
} else if (browser.android) {
|
||||||
// if (browser.ios) {
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
// window.webkit.messageHandlers.openPersonPage.postMessage(erbanUid);
|
window.androidJsObj.openRoom(roomUid);
|
||||||
// } else if (browser.android) {
|
}
|
||||||
// if (androidJsObj && typeof androidJsObj === 'object') {
|
}
|
||||||
// window.androidJsObj.openPersonPage(erbanUid);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
openRoomFun('.top_three_wrap', '.avatar')
|
|
||||||
openRoomFun('ul', '.others_avatar')
|
|
||||||
openRoomFun('.mine', '.mine_avatar')
|
|
||||||
})
|
})
|
Reference in New Issue
Block a user