diff --git a/view/yinmeng/modules/hourRank/js/index.js b/view/yinmeng/modules/hourRank/js/index.js index 6e5cd0a..1370a43 100644 --- a/view/yinmeng/modules/hourRank/js/index.js +++ b/view/yinmeng/modules/hourRank/js/index.js @@ -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 += `
  • ${i > 2 ? i : ''}
    - +

    ${res.nick}

    @@ -105,11 +106,11 @@ function getHourRank () { 最佳助力
    - - - - - + + + + +
    @@ -185,4 +186,26 @@ function getzf (num) { num = '0' + num; } return num; -} \ No newline at end of file +} +// 点击前三跳转房间 +$('.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); + } + } +}) \ No newline at end of file diff --git a/view/yinmeng/modules/roomRank/index.html b/view/yinmeng/modules/roomRank/index.html index e821520..3a86489 100644 --- a/view/yinmeng/modules/roomRank/index.html +++ b/view/yinmeng/modules/roomRank/index.html @@ -18,7 +18,7 @@
    - 财富榜 + 爱意榜
    @@ -39,12 +39,12 @@

    - 我是很长的... + 我是很长的...

    - +
    10000
    @@ -54,12 +54,12 @@

    - - + +

    - +
    @@ -69,12 +69,12 @@

    - +

    - +
    diff --git a/view/yinmeng/modules/roomRank/js/index.js b/view/yinmeng/modules/roomRank/js/index.js index 2ed0421..f87344a 100644 --- a/view/yinmeng/modules/roomRank/js/index.js +++ b/view/yinmeng/modules/roomRank/js/index.js @@ -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) } @@ -70,4 +112,106 @@ function get () { toastMsg('网络错误,请退出重进') } }) -} \ No newline at end of file +} +// 魅力榜接口 +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 += ` +
  • +
    ${i + 4}
    + +
    +

    ${res.nick}

    + + +
    +
    +

    ${unitProcessing(res.goldAmount, 10000, 1, 'W')}

    + ${num == 1 ? '爱意值' : '魅力值'} +
    +
  • + ` + }) + $('.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); + } + } +}) \ No newline at end of file diff --git a/view/yinmeng/modules/room_rank/css/hourRank.css b/view/yinmeng/modules/room_rank/css/hourRank.css index 9c67ea4..336d6c5 100644 --- a/view/yinmeng/modules/room_rank/css/hourRank.css +++ b/view/yinmeng/modules/room_rank/css/hourRank.css @@ -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; } diff --git a/view/yinmeng/modules/room_rank/css/hourRank.scss b/view/yinmeng/modules/room_rank/css/hourRank.scss index 19bf83e..4edd0f8 100644 --- a/view/yinmeng/modules/room_rank/css/hourRank.scss +++ b/view/yinmeng/modules/room_rank/css/hourRank.scss @@ -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, ); - } - } - } - - 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, ); + .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; } - .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; + } +} \ No newline at end of file diff --git a/view/yinmeng/modules/room_rank/hourRank.html b/view/yinmeng/modules/room_rank/hourRank.html index a27e116..def1ed9 100644 --- a/view/yinmeng/modules/room_rank/hourRank.html +++ b/view/yinmeng/modules/room_rank/hourRank.html @@ -2,58 +2,172 @@ - - - 小时榜 - - - + + + 小时榜 + + -
    -
    -
    -

    小时榜

    - - -
    + + + +
    + + + +
    +
    上小时 top1
    +
    +
    + + +
    +
    +

    +
    + + 最佳助力 +
    +
    + + + + + +
    +
    + +
    + + +
    +
    +
    + +
    +
    + + + + + + +
    +
      + +
    +
    - -
    -
    -

    点小时榜

           -

    距榜单截止

    -
    - -
    -
    - -
    -

    排名

    -

    主播

    -

    礼物值

    -
    - -
      + +
      +
      未上榜
      + +
      +

      + 距上一名还差 0 +
      +
      打榜助力
      - -
      -

      - -

      -
      -
      -
      -
      - - - - - - - - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/view/yinmeng/modules/room_rank/images/bg.png b/view/yinmeng/modules/room_rank/images/bg.png new file mode 100644 index 0000000..f8afc86 Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/bg.png differ diff --git a/view/yinmeng/modules/room_rank/images/first.png b/view/yinmeng/modules/room_rank/images/first.png new file mode 100644 index 0000000..efd43cb Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/first.png differ diff --git a/view/yinmeng/modules/room_rank/images/hot.png b/view/yinmeng/modules/room_rank/images/hot.png new file mode 100644 index 0000000..3b08c52 Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/hot.png differ diff --git a/view/yinmeng/modules/room_rank/images/hourTs.png b/view/yinmeng/modules/room_rank/images/hourTs.png new file mode 100644 index 0000000..2a0a426 Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/hourTs.png differ diff --git a/view/yinmeng/modules/room_rank/images/lastHour.png b/view/yinmeng/modules/room_rank/images/lastHour.png new file mode 100644 index 0000000..68f9e9b Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/lastHour.png differ diff --git a/view/yinmeng/modules/room_rank/images/logo.png b/view/yinmeng/modules/room_rank/images/logo.png index f51a3a1..4c661e5 100644 Binary files a/view/yinmeng/modules/room_rank/images/logo.png and b/view/yinmeng/modules/room_rank/images/logo.png differ diff --git a/view/yinmeng/modules/room_rank/images/my.png b/view/yinmeng/modules/room_rank/images/my.png new file mode 100644 index 0000000..f6631ef Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/my.png differ diff --git a/view/yinmeng/modules/room_rank/images/myBut.png b/view/yinmeng/modules/room_rank/images/myBut.png new file mode 100644 index 0000000..5afd716 Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/myBut.png differ diff --git a/view/yinmeng/modules/room_rank/images/no1.png b/view/yinmeng/modules/room_rank/images/no1.png new file mode 100644 index 0000000..72c6b2b Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/no1.png differ diff --git a/view/yinmeng/modules/room_rank/images/no2.png b/view/yinmeng/modules/room_rank/images/no2.png new file mode 100644 index 0000000..d2925cc Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/no2.png differ diff --git a/view/yinmeng/modules/room_rank/images/no3.png b/view/yinmeng/modules/room_rank/images/no3.png new file mode 100644 index 0000000..f1c8501 Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/no3.png differ diff --git a/view/yinmeng/modules/room_rank/images/title.png b/view/yinmeng/modules/room_rank/images/title.png new file mode 100644 index 0000000..6966222 Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/title.png differ diff --git a/view/yinmeng/modules/room_rank/images/travel/back.png b/view/yinmeng/modules/room_rank/images/travel/back.png new file mode 100644 index 0000000..7b81adb Binary files /dev/null and b/view/yinmeng/modules/room_rank/images/travel/back.png differ diff --git a/view/yinmeng/modules/room_rank/js/hourRank.js b/view/yinmeng/modules/room_rank/js/hourRank.js index 7cd0f5d..1370a43 100644 --- a/view/yinmeng/modules/room_rank/js/hourRank.js +++ b/view/yinmeng/modules/room_rank/js/hourRank.js @@ -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 += ` +
    • +
      ${i > 2 ? i : ''}
      + +
      +

      ${res.nick}

      +
      + + 最佳助力 +
      +
      + + + + + +
      +
      +
      +

      ${i == 0 ? res.score : res.data.currHourRank[i - 1].score - res.score}

      + 距上一名 +
      + +
    • + ` + }) + $('.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 += ` -
      -
      -

      - -
      -
      ${item.nick.length>5?item.nick.slice(0, 5)+'...' : item.nick}
      -
      - ${ - index == 0 ? - '' : - `${item.score}
      距上一名` - } -
      -
      - ` - }) - $('.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(`剩余${dateFormat(leftTime, 'mm')}${dateFormat(leftTime, 'ss')}`) + } 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 += ` -
    • -
      ${index+1}
      -
      - -
      -
      ${item.nick.length>8?item.nick.slice(0, 8)+'...' : item.nick}
      -
      - ${ - index === 0 ? - '高居榜首' : - `距上一名
      ${item.score}` - } -
      -
    • - ` - }) - $('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 === '' ? '' : - ` - 距上一名 -

      ${score}

      - ` - ) - } - `) -} - - -$(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); + } + } }) \ No newline at end of file