完成小时榜和房间榜
This commit is contained in:
Dragon
@@ -78,6 +78,7 @@ function getHourRank () {
|
||||
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) => {
|
||||
@@ -97,7 +98,7 @@ function getHourRank () {
|
||||
str += `
|
||||
<li class="li${i + 1}">
|
||||
<div class="num num${i + 1}">${i > 2 ? i : ''}</div>
|
||||
<img src="${res.avatar}" alt="" class="tx">
|
||||
<img src="${res.avatar}" roomUid=${res.uid} alt="" class="tx">
|
||||
<div class="userInfo">
|
||||
<p>${res.nick}</p>
|
||||
<div class="mvp">
|
||||
@@ -105,11 +106,11 @@ function getHourRank () {
|
||||
<span>最佳助力</span>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="${res.micUsers[0].avatar}" alt="" class="memberTx memberTx1">
|
||||
<img src="${res.micUsers[1].avatar}" alt="" class="memberTx memberTx2">
|
||||
<img src="${res.micUsers[2].avatar}" alt="" class="memberTx memberTx3">
|
||||
<img src="${res.micUsers[3].avatar}" alt="" class="memberTx memberTx4">
|
||||
<img src="${res.micUsers[4].avatar}" alt="" class="memberTx memberTx5">
|
||||
<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">
|
||||
@@ -186,3 +187,25 @@ function getzf (num) {
|
||||
}
|
||||
return num;
|
||||
}
|
||||
// 点击前三跳转房间
|
||||
$('.largestBox').on('click', '.lastHour .box .txbox .hourTs', function () {
|
||||
var roomUid = $(this).attr('roomUid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openRoom.postMessage(roomUid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openRoom(roomUid);
|
||||
}
|
||||
}
|
||||
})
|
||||
// 点击非前三跳转房间.
|
||||
$('.largestBox').on('click', '.hourList ul li .tx', function () {
|
||||
var roomUid = $(this).attr('roomUid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openRoom.postMessage(roomUid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openRoom(roomUid);
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -18,7 +18,7 @@
|
||||
<!-- 财富榜&魅力榜 -->
|
||||
<div class="tab">
|
||||
<div class="tabColor1">
|
||||
财富榜
|
||||
爱意榜
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="">
|
||||
@@ -39,12 +39,12 @@
|
||||
<img src="./images/no1.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<p>
|
||||
<span>我是很长的...</span>
|
||||
<span class="sp1">我是很长的...</span>
|
||||
<span class="sp boy"><img src="./images/boy.png" alt=""></span>
|
||||
</p>
|
||||
<div class="icon">
|
||||
<img src="./images/icon1.png" alt="" class="icon1">
|
||||
<img src="./images/icon2.png" alt="" class="icon1">
|
||||
<img src="./images/icon2.png" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score">10000</div>
|
||||
</div>
|
||||
@@ -54,12 +54,12 @@
|
||||
<img src="./images/no2.png" alt="" class="ts">
|
||||
<img src="" alt="" class="tx">
|
||||
<p>
|
||||
<span></span>
|
||||
<span class="sp woman"><img src="" alt=""></span>
|
||||
<span class="sp1"></span>
|
||||
<span class="sp"><img src="" alt=""></span>
|
||||
</p>
|
||||
<div class="icon">
|
||||
<img src="" alt="" class="icon1">
|
||||
<img src="" alt="" class="icon1">
|
||||
<img src="" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score"></div>
|
||||
</div>
|
||||
@@ -69,12 +69,12 @@
|
||||
<img src="./images/no3.png" alt="" class="ts">
|
||||
<img src="" alt="" class="tx">
|
||||
<p>
|
||||
<span></span>
|
||||
<span class="sp1"></span>
|
||||
<span class="sp boy"><img src="" alt=""></span>
|
||||
</p>
|
||||
<div class="icon">
|
||||
<img src="" alt="" class="icon1">
|
||||
<img src="" alt="" class="icon1">
|
||||
<img src="" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score"></div>
|
||||
</div>
|
||||
|
||||
@@ -27,6 +27,10 @@ const toastMsg = (content = '操作完成', time = 2) => {
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
var listType = 1;
|
||||
var experImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_exper_';
|
||||
var charmImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_charm_';
|
||||
var typeWealth = 'day';//财富榜类型day 日 week 周 month 月 total 总
|
||||
// 初始化函数
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
@@ -47,19 +51,57 @@ $(function () {
|
||||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||||
}
|
||||
})
|
||||
|
||||
getRankingsWealth();
|
||||
}, 100)
|
||||
})
|
||||
// 接口
|
||||
function get () {
|
||||
// 榜单切换
|
||||
$('.largestBox .tab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
listType = i;
|
||||
$('.largestBox .tab div').removeClass('tabColor1').removeClass('tabColor2')
|
||||
$(this).addClass(`tabColor${listType}`);
|
||||
$('.largestBox .dayTab div').removeClass('dayTabColor1').removeClass('dayTabColor2');
|
||||
$('.largestBox .dayTab div').eq(0).addClass(`dayTabColor${listType}`);
|
||||
typeWealth = 'day';
|
||||
if (listType == 1) {
|
||||
getRankingsWealth();
|
||||
} else {
|
||||
getReciveRankingsWealth();
|
||||
}
|
||||
})
|
||||
// 日榜切换
|
||||
$('.largestBox .dayTab div').click(function () {
|
||||
var i = $(this).index() + 1;
|
||||
$(this).addClass(`dayTabColor${listType}`).siblings().removeClass('dayTabColor1').removeClass('dayTabColor2');
|
||||
if (i == 1) {
|
||||
typeWealth = 'day';//财富榜类型day 日 week 周 month 月 total 总
|
||||
} else if (i == 2) {
|
||||
typeWealth = 'week';
|
||||
} else if (i == 3) {
|
||||
typeWealth = 'month';
|
||||
}
|
||||
if (listType == 1) {
|
||||
getRankingsWealth();
|
||||
} else {
|
||||
getReciveRankingsWealth();
|
||||
}
|
||||
})
|
||||
// 爱意榜接口
|
||||
function getRankingsWealth () {
|
||||
// $('.largestBox ul li').remove();
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GEt',
|
||||
url: urlPrefix + '',
|
||||
data: { roomUid: urlData.roomUid },
|
||||
url: urlPrefix + '/room/rankings',
|
||||
data: {
|
||||
roomUid: urlData.roomUid,
|
||||
type: typeWealth,
|
||||
page: 1,
|
||||
pageSize: 30,
|
||||
},
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
|
||||
listDomFun(res, 1);
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
@@ -71,3 +113,105 @@ function get () {
|
||||
}
|
||||
})
|
||||
}
|
||||
// 魅力榜接口
|
||||
function getReciveRankingsWealth () {
|
||||
$('.largestBox ul li').remove();
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GEt',
|
||||
url: urlPrefix + '/room/recive/rankings',
|
||||
data: {
|
||||
roomUid: urlData.roomUid,
|
||||
type: typeWealth,
|
||||
page: 1,
|
||||
pageSize: 30,
|
||||
},
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
listDomFun(res, 2);
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 渲染样式
|
||||
function listDomFun (res, num) {
|
||||
console.log(res);
|
||||
// 处理前三
|
||||
var top3 = res.data.rankings.slice(0, 3);
|
||||
if (top3.length < 3) {
|
||||
let arr = new Array(3 - top3.length).fill({
|
||||
avatar: './images/logo.png',
|
||||
nick: '虚位以待',
|
||||
goldAmount: '',
|
||||
})
|
||||
top3.push(...arr);
|
||||
}
|
||||
top3.forEach((res, i) => {
|
||||
if (res.avatar == './images/logo.png') {
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp`).hide();
|
||||
$(`.largestBox .top3 .no${i + 1} .box .icon`).hide();
|
||||
} else {
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp`).show();
|
||||
$(`.largestBox .top3 .no${i + 1} .box .icon`).show();
|
||||
}
|
||||
$(`.largestBox .top3 .no${i + 1} .box .tx`).attr('src', res.avatar);
|
||||
$(`.largestBox .top3 .no${i + 1} .box .ts`).attr('roomUid', res.roomUid);
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp1`).text(res.nick.length > 6 ? res.nick.slice(0, 6) + '...' : res.nick);
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp`).removeClass('boy').removeClass('woman')
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp`).addClass(`${res.gender == 1 ? 'boy' : 'woman'}`);
|
||||
$(`.largestBox .top3 .no${i + 1} .box p .sp img`).attr('src', res.gender == 1 ? './images/boy.png' : './images/woman.png');
|
||||
$(`.largestBox .top3 .no${i + 1} .box .icon .icon1`).attr('src', experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`)
|
||||
$(`.largestBox .top3 .no${i + 1} .box .icon .icon2`).attr('src', charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`)
|
||||
$(`.largestBox .top3 .no${i + 1} .box .score`).text(unitProcessing(res.goldAmount, 10000, 1, 'W'));
|
||||
})
|
||||
// 处理非前三
|
||||
var notTop3 = res.data.rankings.slice(3);
|
||||
var str = '';
|
||||
notTop3.forEach((res, i) => {
|
||||
str += `
|
||||
<li>
|
||||
<div class="num">${i + 4}</div>
|
||||
<img src="${res.avatar}" roomUid=${res.roomUid} alt="" class="tx">
|
||||
<div class="userInfo">
|
||||
<p>${res.nick}</p>
|
||||
<img src="${experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`}" alt="" class="icon1">
|
||||
<img src="${charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`}" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score">
|
||||
<p>${unitProcessing(res.goldAmount, 10000, 1, 'W')}</p>
|
||||
<span>${num == 1 ? '爱意值' : '魅力值'}</span>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.largestBox ul li').append(str);
|
||||
}
|
||||
// 点击前三跳转房间
|
||||
$('.largestBox').on('click', '.top3 .no .box .ts', function () {
|
||||
var roomUid = $(this).attr('roomUid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openRoom.postMessage(roomUid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openRoom(roomUid);
|
||||
}
|
||||
}
|
||||
})
|
||||
// 点击非前三跳转房间
|
||||
$('.largestBox').on('click', 'ul li .tx', function () {
|
||||
var roomUid = $(this).attr('roomUid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openRoom.postMessage(roomUid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openRoom(roomUid);
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,341 +1,550 @@
|
||||
@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");
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #0B1836;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap {
|
||||
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;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 1.41333rem;
|
||||
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.17333rem;
|
||||
padding-top: 0.21333rem;
|
||||
margin-bottom: 0.10667rem;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .tab_contain p {
|
||||
position: relative;
|
||||
height: 0.66667rem;
|
||||
line-height: 0.66667rem;
|
||||
padding: 0 0.74667rem;
|
||||
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.42667rem;
|
||||
height: 0.10667rem;
|
||||
border-radius: 0.10667rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .tab_contain .rule_icon {
|
||||
position: absolute;
|
||||
right: 0.4rem;
|
||||
width: 0.53333rem;
|
||||
height: 0.53333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
margin-top: 1.41333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .time_wrap {
|
||||
position: absolute;
|
||||
top: 5.86667rem;
|
||||
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.26667rem;
|
||||
font-weight: bold;
|
||||
color: #B95CFF;
|
||||
height: 0.37333rem;
|
||||
line-height: 0.37333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .time_wrap p span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 5.78667rem;
|
||||
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.53333rem;
|
||||
}
|
||||
|
||||
.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.34667rem;
|
||||
height: 2.24rem;
|
||||
margin-top: 1.22667rem;
|
||||
}
|
||||
|
||||
.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.13333rem;
|
||||
width: 1.76rem;
|
||||
height: 1.76rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) {
|
||||
right: 0.53333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
|
||||
width: 2.13333rem;
|
||||
}
|
||||
|
||||
.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.10667rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar p {
|
||||
position: relative;
|
||||
top: 0.26667rem;
|
||||
left: 0.32rem;
|
||||
z-index: 99;
|
||||
width: 0.82667rem;
|
||||
height: 0.82667rem;
|
||||
}
|
||||
|
||||
.back img {
|
||||
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.50667rem;
|
||||
width: 2.13333rem;
|
||||
height: 2.13333rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .nick {
|
||||
height: 0.53333rem;
|
||||
line-height: 0.53333rem;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .num {
|
||||
font-size: 0.26667rem;
|
||||
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.02667rem;
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .num img {
|
||||
width: 0.74667rem;
|
||||
height: 0.90667rem;
|
||||
margin-top: 0.26667rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .desc {
|
||||
display: flex;
|
||||
margin-top: 0.53333rem;
|
||||
margin-bottom: 0.32rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .desc p {
|
||||
font-size: 0.26667rem;
|
||||
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.93333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .desc p:last-child {
|
||||
margin-right: 0.53333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.42667rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .index {
|
||||
width: 0.26667rem;
|
||||
.back p {
|
||||
color: #fff;
|
||||
font-size: 0.42667rem;
|
||||
position: absolute;
|
||||
width: 9rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
margin-left: 0.53333rem;
|
||||
margin-right: 0.74667rem;
|
||||
line-height: 0.82667rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .others_avatar {
|
||||
width: 1.17333rem;
|
||||
height: 1.17333rem;
|
||||
margin-right: 0.32rem;
|
||||
.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;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .others_avatar img {
|
||||
.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%;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .others_nick {
|
||||
flex: 1;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
.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;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .others_num {
|
||||
font-size: 0.32rem;
|
||||
color: #CCCCCC;
|
||||
text-align: right;
|
||||
margin-right: 0.53333rem;
|
||||
.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);
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .others_num span {
|
||||
font-family: 'din';
|
||||
.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;
|
||||
font-weight: bold;
|
||||
color: #B95CFF;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wrap .mine {
|
||||
.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;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: url(../images/my.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 1.70667rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 -0.02667rem 0.10667rem #F4F4F4;
|
||||
height: 2.13333rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.53333rem;
|
||||
}
|
||||
|
||||
.wrap .mine .mine_index {
|
||||
width: 0.96rem;
|
||||
.my .num {
|
||||
height: 0.64rem;
|
||||
text-align: center;
|
||||
font-size: 0.32rem;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
margin-left: 0.26667rem;
|
||||
}
|
||||
|
||||
.wrap .mine .mine_avatar {
|
||||
width: 1.17333rem;
|
||||
height: 1.17333rem;
|
||||
border-radius: 50%;
|
||||
margin: 0 0.32rem;
|
||||
}
|
||||
|
||||
.wrap .mine .mine_nick {
|
||||
flex: 1;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.wrap .mine .mine_num {
|
||||
text-align: right;
|
||||
font-size: 0.32rem;
|
||||
color: #ccc;
|
||||
margin-right: 0.53333rem;
|
||||
}
|
||||
|
||||
.wrap .mine .mine_num p {
|
||||
font-family: 'din';
|
||||
color: #E6ECF5;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #B95CFF;
|
||||
margin-top: 0.05333rem;
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
margin-top: 0.74667rem;
|
||||
margin-right: 0.42667rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -1,321 +1,560 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+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: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
html,
|
||||
body {
|
||||
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;
|
||||
// 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;
|
||||
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{
|
||||
font-size: px2rem(32);
|
||||
position: absolute;
|
||||
right: px2rem(30, );
|
||||
width: px2rem(40, );
|
||||
height: px2rem(40, );
|
||||
}
|
||||
width: 9rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: px2rem(62);
|
||||
}
|
||||
}
|
||||
.rank_wrap{
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
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%);
|
||||
}
|
||||
|
||||
.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, );
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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, );
|
||||
}
|
||||
}
|
||||
}
|
||||
.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);
|
||||
|
||||
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, );
|
||||
.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;
|
||||
}
|
||||
.others_avatar{
|
||||
width: px2rem(88, );
|
||||
height: px2rem(88, );
|
||||
margin-right: px2rem(24, );
|
||||
img{
|
||||
|
||||
.tx {
|
||||
width: px2rem(108);
|
||||
height: px2rem(108);
|
||||
border-radius: 50%;
|
||||
}
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(30);
|
||||
}
|
||||
.others_nick{
|
||||
flex: 1;
|
||||
font-size: px2rem(28, );
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mine{
|
||||
|
||||
.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;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: url(../images/my.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
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, );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
height: px2rem(160);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(40);
|
||||
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -2,58 +2,172 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>小时榜</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/hourRank.css?v=1.1">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>小时榜</title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/hourRank.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrap hour">
|
||||
<div class="tab_wrap">
|
||||
<div class="tab_contain">
|
||||
<p>小时榜</p>
|
||||
<!-- <p>贡献月榜</p> -->
|
||||
<img src="./images/single/rule-icon.png" alt="" class="rule_icon">
|
||||
</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="rank_wrap">
|
||||
<div class="time_wrap">
|
||||
<p><span class="h"></span>点小时榜</p>
|
||||
<p>距榜单截止<span class="m"></span>分<span class="s"></span>秒</p>
|
||||
</div>
|
||||
|
||||
<div class="top_three_wrap">
|
||||
</div>
|
||||
|
||||
<div class="desc">
|
||||
<p>排名</p>
|
||||
<p>主播</p>
|
||||
<p>礼物值</p>
|
||||
</div>
|
||||
|
||||
<ul></ul>
|
||||
<!-- 自己榜单 -->
|
||||
<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>
|
||||
|
||||
<div class="mine">
|
||||
<p class="mine_index"></p>
|
||||
<img src="./images/default-avatar.png" alt="" class="mine_avatar">
|
||||
<p class="mine_nick"></p>
|
||||
<div class="mine_num">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="./js/hourRank.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/route-constant.js"></script>
|
||||
<script src="../../common/js/svga.js"></script>
|
||||
<script src="./js/hourRank.js"></script>
|
||||
BIN
view/yinmeng/modules/room_rank/images/bg.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 342 KiB |
BIN
view/yinmeng/modules/room_rank/images/first.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/first.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
view/yinmeng/modules/room_rank/images/hot.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/hot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 991 B |
BIN
view/yinmeng/modules/room_rank/images/hourTs.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/hourTs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
view/yinmeng/modules/room_rank/images/lastHour.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/lastHour.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 21 KiB |
BIN
view/yinmeng/modules/room_rank/images/my.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/my.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
view/yinmeng/modules/room_rank/images/myBut.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/myBut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
view/yinmeng/modules/room_rank/images/no1.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
view/yinmeng/modules/room_rank/images/no2.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
view/yinmeng/modules/room_rank/images/no3.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
view/yinmeng/modules/room_rank/images/title.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
view/yinmeng/modules/room_rank/images/travel/back.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/travel/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -1,254 +1,211 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let queryObj = getQueryString()
|
||||
if (EnvCheck() === 'test') new VConsole
|
||||
// 页面全屏
|
||||
if(browser.app) {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.initShowNav(false)
|
||||
} else {
|
||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||
}
|
||||
let env = EnvCheck();
|
||||
var urlData = getQueryString();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = () => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content: '加载中...',
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
const showLoading = (content = '加载中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let currHourRank = []
|
||||
let lastHourRank = []
|
||||
let currRoomInfo = {}
|
||||
let timestamp
|
||||
|
||||
let page = 1
|
||||
let pageSize = 10
|
||||
let rankList = []
|
||||
let canNext = true
|
||||
let isLock = true
|
||||
|
||||
// 获取小时榜数据
|
||||
const getHourList = () => {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/single/broadcast/listHourRank',
|
||||
data: {
|
||||
roomUid: queryObj.roomUid
|
||||
},
|
||||
success(res) {
|
||||
if (res.code === 200) {
|
||||
currHourRank = res.data.currHourRank
|
||||
lastHourRank = res.data.lastHourRank
|
||||
currRoomInfo = res.data.currRoomInfo
|
||||
timestamp = res.timestamp
|
||||
countDown()
|
||||
renderLastHourThree()
|
||||
renderCurrentList()
|
||||
renderCurrentRoomInfo()
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(err) {
|
||||
toastMsg('网络错误')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 渲染小时榜上一小时前三
|
||||
const renderLastHourThree = () => {
|
||||
lastHourRank = lastHourRank.slice(0, 3)
|
||||
if(lastHourRank.length < 3) {
|
||||
let len = 3 - lastHourRank.length
|
||||
let arr = new Array(len).fill({
|
||||
nick: '',
|
||||
score: ''
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
var timeOut2;
|
||||
var leftTime;
|
||||
// 初始化函数
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
setTimeout(function () {
|
||||
// 页面全屏
|
||||
if (browser.app) {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.initShowNav(false)
|
||||
} else {
|
||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||
}
|
||||
};
|
||||
// 顶部返回事件
|
||||
$('.back').click(() => {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.closeWebView()
|
||||
} else {
|
||||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||||
}
|
||||
})
|
||||
getHourRank();
|
||||
}, 100)
|
||||
})
|
||||
// 小时榜接口
|
||||
function getHourRank () {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GEt',
|
||||
url: urlPrefix + '/room/permitRoom/hourRank',
|
||||
data: { roomUid: urlData.roomUid },
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
// ==================================设置倒计时===========================
|
||||
nowTime = res.timestamp;
|
||||
$('.largestBox .hourList .top .sp').text(`${dateFormat(nowTime, 'hh')}点 小时榜`)
|
||||
// 获取当前时间
|
||||
now = new Date(nowTime);
|
||||
// 计算距离下一个小时的分钟数
|
||||
var minutesToNextHour = (59 - now.getMinutes()) % 60;
|
||||
// 计算距离下一个小时的秒数
|
||||
var secondsToNextHour = 59 - now.getSeconds();
|
||||
// 计算距离下一个小时的总时间（以毫秒为单位）
|
||||
var timeToNextHour = (minutesToNextHour * 60 * 1000) + (secondsToNextHour * 1000);
|
||||
leftTime = timeToNextHour;
|
||||
countup();
|
||||
// =================================上期前三===========================
|
||||
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 = () => {
|
||||
let t = new Date(timestamp)
|
||||
console.log(t);
|
||||
console.log(timestamp);
|
||||
let y = t.getFullYear()
|
||||
let m = t.getMonth()+1
|
||||
let d = t.getDate()
|
||||
let h = t.getHours()
|
||||
let disT = new Date(`${y}/${m}/${d} ${h+1}:00:00`).getTime() - timestamp
|
||||
let min = Math.floor(disT / 1000 / 60)
|
||||
let s
|
||||
let delta = disT/1000 - Math.floor(disT / 1000)
|
||||
if(delta > 0.5) {
|
||||
s = Math.ceil(disT / 1000 % 60)
|
||||
}else {
|
||||
s = Math.floor(disT / 1000 % 60)
|
||||
}
|
||||
$('.time_wrap .h').html(h)
|
||||
$('.time_wrap .m').html(min<10 ? '0'+min : min)
|
||||
$('.time_wrap .s').html(s<10? '0'+s : s)
|
||||
let timer = setInterval(() => {
|
||||
disT -= 1000
|
||||
if(disT <= 0) {
|
||||
getHourList()
|
||||
clearInterval(timer)
|
||||
return
|
||||
function countup () {
|
||||
clearTimeout(timeOut2)
|
||||
//获取当前时间
|
||||
// var now = nowTime;
|
||||
var d = 0;
|
||||
var h = 0;
|
||||
var m = 0;
|
||||
var s = 0;
|
||||
//定义变量 d,h,m,s保存倒计时的时间
|
||||
var d, h, m, s;
|
||||
//递归每秒调⽤countTime⽅法，显⽰动态时间效果
|
||||
if (leftTime > 0) {
|
||||
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
|
||||
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
|
||||
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
|
||||
s = getzf(Math.floor(leftTime / 1000 % 60));
|
||||
//将倒计时赋值到div中
|
||||
// console.log("最终: " + dateFormat(leftTime, '00:mm:ss'));
|
||||
$('.largestBox .hourList .top .sp2').html(`<span>剩余<b>${dateFormat(leftTime, 'mm')}</b>分<b>${dateFormat(leftTime, 'ss')}</b>秒</span>`)
|
||||
} else {
|
||||
getHourRank();
|
||||
}
|
||||
min = Math.floor(disT / 1000 / 60)
|
||||
s = Math.floor(disT / 1000 % 60)
|
||||
$('.time_wrap .m').html(min<10 ? '0'+min : min)
|
||||
$('.time_wrap .s').html(s<10? '0'+s : s)
|
||||
}, 1000)
|
||||
if (leftTime > 0) {
|
||||
leftTime = leftTime - 1000;
|
||||
}
|
||||
timeOut2 = setTimeout(countup, 1000);
|
||||
}
|
||||
// 渲染小时榜当前列表
|
||||
const renderCurrentList = () => {
|
||||
currHourRank = currHourRank.slice(0, 10)
|
||||
if(currHourRank.length < 10) {
|
||||
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'
|
||||
//补0操作
|
||||
function getzf (num) {
|
||||
if (parseInt(num) < 10) {
|
||||
num = '0' + num;
|
||||
}
|
||||
str += `
|
||||
<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)
|
||||
return num;
|
||||
}
|
||||
// 渲染当前房间榜单信息
|
||||
const renderCurrentRoomInfo = () => {
|
||||
let rank = ''
|
||||
let score = ''
|
||||
currHourRank.forEach((item, index) => {
|
||||
if(item.uid == currRoomInfo.uid) {
|
||||
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 = './rule.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) {
|
||||
// 点击前三跳转房间
|
||||
$('.largestBox').on('click', '.lastHour .box .txbox .hourTs', function () {
|
||||
var roomUid = $(this).attr('roomUid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openRoom.postMessage(roomUid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openRoom(erbanUid);
|
||||
window.androidJsObj.openRoom(roomUid);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
//跳转个人主页
|
||||
// function openPerson(document, dom) {
|
||||
// $(document).on('click', dom, function () {
|
||||
// let erbanUid = $(this).data('uid')
|
||||
// if (!browser.app) return
|
||||
// if (browser.ios) {
|
||||
// window.webkit.messageHandlers.openPersonPage.postMessage(erbanUid);
|
||||
// } 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')
|
||||
}
|
||||
})
|
||||
// 点击非前三跳转房间.
|
||||
$('.largestBox').on('click', '.hourList ul li .tx', function () {
|
||||
var roomUid = $(this).attr('roomUid');
|
||||
if (browser.ios) {
|
||||
window.webkit.messageHandlers.openRoom.postMessage(roomUid);
|
||||
} else if (browser.android) {
|
||||
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||
window.androidJsObj.openRoom(roomUid);
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user