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
+
+
+

+

+
+
+
+
+

+
最佳助力
+
+
+
+
+
+

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

+
+
打榜助力
-
-
-
-

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