完成房间小时榜完成静态页面房间榜
This commit is contained in:
Dragon
550
view/yinmeng/modules/hourRank/css/index.css
Normal file
550
view/yinmeng/modules/hourRank/css/index.css
Normal file
@@ -0,0 +1,550 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: #0B1836;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layui-m-layershade {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.layui-m-layer2 .layui-m-layerchild {
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
color: #fff !important;
|
||||
background: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
.layui-m-layer2 .layui-m-layercont {
|
||||
text-align: center !important;
|
||||
padding: 0 !important;
|
||||
line-height: 0 !important;
|
||||
margin-top: 0.8rem !important;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 0.26667rem;
|
||||
left: 0.32rem;
|
||||
z-index: 99;
|
||||
width: 0.82667rem;
|
||||
height: 0.82667rem;
|
||||
}
|
||||
|
||||
.back img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.back p {
|
||||
color: #fff;
|
||||
font-size: 0.42667rem;
|
||||
position: absolute;
|
||||
width: 9rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: 0.82667rem;
|
||||
}
|
||||
|
||||
.largestBox {
|
||||
width: 10rem;
|
||||
min-height: 15.38667rem;
|
||||
background: url(../images/bg.png) no-repeat;
|
||||
background-size: 10rem 15.38667rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 1.17333rem 0 0 0;
|
||||
}
|
||||
|
||||
.largestBox .title {
|
||||
width: 7.06667rem;
|
||||
height: 1.14667rem;
|
||||
position: absolute;
|
||||
top: -0.12rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.largestBox .lastHour {
|
||||
width: 9.14667rem;
|
||||
margin: 0rem auto 0.42667rem;
|
||||
}
|
||||
|
||||
.largestBox .lastHour .text {
|
||||
width: 100%;
|
||||
color: #FFDA24;
|
||||
font-size: 0.37333rem;
|
||||
margin-bottom: 0.24rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.largestBox .box {
|
||||
width: 9.14667rem;
|
||||
height: 2.34667rem;
|
||||
background: url(../images/lastHour.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.32rem;
|
||||
}
|
||||
|
||||
.largestBox .box .txbox {
|
||||
width: 2.02667rem;
|
||||
height: 2.45333rem;
|
||||
background: url(../images/hourTs.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
margin-right: 0.24rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.largestBox .box .txbox .hourTs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.largestBox .box .txbox .tx {
|
||||
width: 1.44rem;
|
||||
height: 1.44rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.4rem;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo {
|
||||
float: left;
|
||||
width: 3.73333rem;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo p {
|
||||
width: 100%;
|
||||
margin-top: 0.37333rem;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .mvp {
|
||||
width: 0.74667rem;
|
||||
height: 0.74667rem;
|
||||
border-radius: 50%;
|
||||
border: 0.02667rem solid #FFDA24;
|
||||
position: absolute;
|
||||
top: 1.06667rem;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .mvp .mvpTx {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .mvp span {
|
||||
width: 0.90667rem;
|
||||
height: 0.29333rem;
|
||||
line-height: 0.29333rem;
|
||||
border-radius: 0.29333rem;
|
||||
position: absolute;
|
||||
top: 0.61333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.18667rem;
|
||||
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||
padding: 0 0.02667rem;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .member {
|
||||
width: 2.29333rem;
|
||||
height: 0.69333rem;
|
||||
border-radius: 0.69333rem;
|
||||
position: absolute;
|
||||
left: 1.2rem;
|
||||
top: 1.17333rem;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .member img {
|
||||
position: absolute;
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border: 0.02667rem solid #FFDA24;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .member .memberTx1 {
|
||||
left: 0.16rem;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .member .memberTx2 {
|
||||
left: 0.53333rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .member .memberTx3 {
|
||||
left: 0.90667rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .member .memberTx4 {
|
||||
left: 1.28rem;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.largestBox .box .userInfo .member .memberTx5 {
|
||||
left: 1.65333rem;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.largestBox .box .score {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: 2.34667rem;
|
||||
}
|
||||
|
||||
.largestBox .box .score img {
|
||||
display: inline-block;
|
||||
width: 0.37333rem;
|
||||
height: 0.37333rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.largestBox .box .score span {
|
||||
color: #FFDA24;
|
||||
font-weight: 600;
|
||||
font-size: 0.42667rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.largestBox .hourList {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.largestBox .hourList .top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.53333rem;
|
||||
margin-bottom: 0.26667rem;
|
||||
}
|
||||
|
||||
.largestBox .hourList .top .sp {
|
||||
color: #FFDA24;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.largestBox .hourList .top span {
|
||||
color: #B1B5BD;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.largestBox .hourList .top span b {
|
||||
color: #FFDA24;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul {
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0.66667rem;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li {
|
||||
width: 100%;
|
||||
height: 2.13333rem;
|
||||
backdrop-filter: blur(0px);
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.53333rem;
|
||||
background: RGBA(11, 24, 57, 1);
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .num {
|
||||
width: 0.64rem;
|
||||
height: 0.64rem;
|
||||
text-align: center;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
margin-top: 0.74667rem;
|
||||
margin-right: 0.42667rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .num1 {
|
||||
background: url(../images/no1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .num2 {
|
||||
background: url(../images/no2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .num3 {
|
||||
background: url(../images/no3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .tx {
|
||||
width: 1.28rem;
|
||||
height: 1.28rem;
|
||||
border-radius: 50%;
|
||||
margin-top: 0.42667rem;
|
||||
margin-right: 0.32rem;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo {
|
||||
float: left;
|
||||
width: 3.73333rem;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo p {
|
||||
width: 100%;
|
||||
margin-top: 0.26667rem;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .mvp {
|
||||
width: 0.74667rem;
|
||||
height: 0.74667rem;
|
||||
border-radius: 50%;
|
||||
border: 0.02667rem solid #FFDA24;
|
||||
position: absolute;
|
||||
top: 0.96rem;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .mvp .mvpTx {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .mvp span {
|
||||
width: 0.90667rem;
|
||||
height: 0.29333rem;
|
||||
line-height: 0.29333rem;
|
||||
border-radius: 0.29333rem;
|
||||
position: absolute;
|
||||
top: 0.61333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.18667rem;
|
||||
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||
padding: 0 0.02667rem;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .member {
|
||||
width: 2.29333rem;
|
||||
height: 0.69333rem;
|
||||
border-radius: 0.69333rem;
|
||||
position: absolute;
|
||||
left: 1.2rem;
|
||||
top: 1.06667rem;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .member img {
|
||||
position: absolute;
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border: 0.02667rem solid #FFDA24;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .member .memberTx1 {
|
||||
left: 0.16rem;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .member .memberTx2 {
|
||||
left: 0.53333rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .member .memberTx3 {
|
||||
left: 0.90667rem;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .member .memberTx4 {
|
||||
left: 1.28rem;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .userInfo .member .memberTx5 {
|
||||
left: 1.65333rem;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .score {
|
||||
float: right;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.58667rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .score p {
|
||||
margin-bottom: 0.13333rem;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .score span {
|
||||
color: #B1B5BD;
|
||||
font-size: 0.29333rem;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.largestBox .hourList ul li .first {
|
||||
position: absolute;
|
||||
width: 0.85333rem;
|
||||
height: 0.37333rem;
|
||||
right: 0.53333rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.largestBox .hourList ul .li1 {
|
||||
background: linear-gradient(270deg, rgba(255, 204, 0, 0) 0%, rgba(255, 199, 44, 0.35) 100%);
|
||||
}
|
||||
|
||||
.largestBox .hourList ul .li2 {
|
||||
background: linear-gradient(270deg, rgba(109, 139, 209, 0) 0%, rgba(135, 158, 204, 0.35) 100%);
|
||||
}
|
||||
|
||||
.largestBox .hourList ul .li3 {
|
||||
background: linear-gradient(270deg, rgba(163, 102, 46, 0) 0%, rgba(198, 135, 81, 0.35) 100%);
|
||||
}
|
||||
|
||||
.my {
|
||||
width: 100%;
|
||||
height: 2.05333rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: url(../images/my.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 2.13333rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.53333rem;
|
||||
}
|
||||
|
||||
.my .num {
|
||||
height: 0.64rem;
|
||||
text-align: center;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
margin-top: 0.74667rem;
|
||||
margin-right: 0.42667rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.my .tx {
|
||||
width: 1.28rem;
|
||||
height: 1.28rem;
|
||||
border-radius: 50%;
|
||||
margin-top: 0.42667rem;
|
||||
margin-right: 0.32rem;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.my .score {
|
||||
float: left;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.58667rem;
|
||||
width: 3.73333rem;
|
||||
}
|
||||
|
||||
.my .score p {
|
||||
width: 100%;
|
||||
margin-bottom: 0.13333rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.my .score span {
|
||||
color: #B1B5BD;
|
||||
font-size: 0.29333rem;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.my .score span b {
|
||||
color: #E6ECF5;
|
||||
}
|
||||
|
||||
.my .but {
|
||||
width: 1.76rem;
|
||||
height: 0.74667rem;
|
||||
line-height: 0.74667rem;
|
||||
margin-top: 0.56rem;
|
||||
text-align: center;
|
||||
color: #FFDA24;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 500;
|
||||
background: url(../images/myBut.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
float: right;
|
||||
}
|
||||
560
view/yinmeng/modules/hourRank/css/index.scss
Normal file
560
view/yinmeng/modules/hourRank/css/index.scss
Normal file
@@ -0,0 +1,560 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
// background: linear-gradient(0deg, #0F2E69 0%, #0B1836 99%);
|
||||
background: #0B1836;
|
||||
overflow: hidden;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-m-layershade {
|
||||
background-color: rgba(0, 0, 0, .0) !important;
|
||||
}
|
||||
|
||||
.layui-m-layer2 .layui-m-layerchild {
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
color: #fff !important;
|
||||
background: rgba(0, 0, 0, .6) !important;
|
||||
}
|
||||
|
||||
.layui-m-layer2 .layui-m-layercont {
|
||||
text-align: center !important;
|
||||
padding: 0 !important;
|
||||
line-height: 0 !important;
|
||||
margin-top: 0.8rem !important;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: px2rem(20);
|
||||
left: px2rem(24);
|
||||
z-index: 99;
|
||||
width: px2rem(62);
|
||||
height: px2rem(62);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: px2rem(32);
|
||||
position: absolute;
|
||||
width: 9rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: px2rem(62);
|
||||
}
|
||||
}
|
||||
|
||||
.largestBox {
|
||||
width: px2rem(750);
|
||||
min-height: px2rem(1154);
|
||||
background: url(../images/bg.png) no-repeat;
|
||||
background-size: px2rem(750) px2rem(1154);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(88) 0 0 0;
|
||||
|
||||
.title {
|
||||
width: px2rem(530);
|
||||
height: px2rem(86);
|
||||
position: absolute;
|
||||
top: px2rem(-9);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.lastHour {
|
||||
width: px2rem(686);
|
||||
margin: px2rem(0) auto px2rem(32);
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
color: #FFDA24;
|
||||
font-size: px2rem(28);
|
||||
margin-bottom: px2rem(18);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: px2rem(686);
|
||||
height: px2rem(176);
|
||||
background: url(../images/lastHour.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(24);
|
||||
|
||||
.txbox {
|
||||
width: px2rem(152);
|
||||
height: px2rem(184);
|
||||
background: url(../images/hourTs.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
margin-right: px2rem(18);
|
||||
float: left;
|
||||
|
||||
.hourTs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(108);
|
||||
height: px2rem(108);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(30);
|
||||
}
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
float: left;
|
||||
width: px2rem(280);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
margin-top: px2rem(28);
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 500;
|
||||
// 超出省略号
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mvp {
|
||||
width: px2rem(56);
|
||||
height: px2rem(56);
|
||||
border-radius: 50%;
|
||||
border: px2rem(2) solid #FFDA24;
|
||||
position: absolute;
|
||||
top: px2rem(80);
|
||||
|
||||
.mvpTx {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
width: px2rem(68);
|
||||
height: px2rem(22);
|
||||
line-height: px2rem(22);
|
||||
border-radius: px2rem(22);
|
||||
position: absolute;
|
||||
top: px2rem(46);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(14);
|
||||
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||
padding: 0 px2rem(2);
|
||||
}
|
||||
}
|
||||
|
||||
.member {
|
||||
width: px2rem(172);
|
||||
height: px2rem(52);
|
||||
border-radius: px2rem(52);
|
||||
position: absolute;
|
||||
left: px2rem(90);
|
||||
top: px2rem(88);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: px2rem(36);
|
||||
height: px2rem(36);
|
||||
border: px2rem(2) solid #FFDA24;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.memberTx1 {
|
||||
left: px2rem(12);
|
||||
}
|
||||
|
||||
.memberTx2 {
|
||||
left: px2rem(40);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.memberTx3 {
|
||||
left: px2rem(68);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.memberTx4 {
|
||||
left: px2rem(96);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.memberTx5 {
|
||||
left: px2rem(124);
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.score {
|
||||
float: right;
|
||||
height: 100%;
|
||||
line-height: px2rem(176);
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(28);
|
||||
height: px2rem(28);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #FFDA24;
|
||||
font-weight: 600;
|
||||
font-size: px2rem(32);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hourList {
|
||||
width: 100%;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(40);
|
||||
margin-bottom: px2rem(20);
|
||||
|
||||
.sp {
|
||||
color: #FFDA24;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #B1B5BD;
|
||||
font-size: px2rem(24);
|
||||
font-weight: 600;
|
||||
|
||||
b {
|
||||
color: #FFDA24;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: px2rem(50);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: px2rem(160);
|
||||
backdrop-filter: blur(0px);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(40);
|
||||
background: RGBA(11, 24, 57, 1);
|
||||
|
||||
.num {
|
||||
width: px2rem(48);
|
||||
height: px2rem(48);
|
||||
text-align: center;
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
margin-top: px2rem(56);
|
||||
margin-right: px2rem(32);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.num1 {
|
||||
background: url(../images/no1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.num2 {
|
||||
background: url(../images/no2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.num3 {
|
||||
background: url(../images/no3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(96);
|
||||
height: px2rem(96);
|
||||
border-radius: 50%;
|
||||
margin-top: px2rem(32);
|
||||
margin-right: px2rem(24);
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
float: left;
|
||||
width: px2rem(280);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
margin-top: px2rem(20);
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 500;
|
||||
// 超出省略号
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mvp {
|
||||
width: px2rem(56);
|
||||
height: px2rem(56);
|
||||
border-radius: 50%;
|
||||
border: px2rem(2) solid #FFDA24;
|
||||
position: absolute;
|
||||
top: px2rem(72);
|
||||
|
||||
.mvpTx {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
width: px2rem(68);
|
||||
height: px2rem(22);
|
||||
line-height: px2rem(22);
|
||||
border-radius: px2rem(22);
|
||||
position: absolute;
|
||||
top: px2rem(46);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: px2rem(14);
|
||||
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||
padding: 0 px2rem(2);
|
||||
}
|
||||
}
|
||||
|
||||
.member {
|
||||
width: px2rem(172);
|
||||
height: px2rem(52);
|
||||
border-radius: px2rem(52);
|
||||
position: absolute;
|
||||
left: px2rem(90);
|
||||
top: px2rem(80);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: px2rem(36);
|
||||
height: px2rem(36);
|
||||
border: px2rem(2) solid #FFDA24;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.memberTx1 {
|
||||
left: px2rem(12);
|
||||
}
|
||||
|
||||
.memberTx2 {
|
||||
left: px2rem(40);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.memberTx3 {
|
||||
left: px2rem(68);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.memberTx4 {
|
||||
left: px2rem(96);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.memberTx5 {
|
||||
left: px2rem(124);
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.score {
|
||||
float: right;
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 600;
|
||||
margin-top: px2rem(44);
|
||||
text-align: right;
|
||||
|
||||
p {
|
||||
margin-bottom: px2rem(10);
|
||||
}
|
||||
|
||||
span {
|
||||
color: #B1B5BD;
|
||||
font-size: px2rem(22);
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.first {
|
||||
position: absolute;
|
||||
width: px2rem(64);
|
||||
height: px2rem(28);
|
||||
right: px2rem(40);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.li1 {
|
||||
background: linear-gradient(270deg, rgba(255, 204, 0, 0) 0%, rgba(255, 199, 44, 0.35) 100%);
|
||||
}
|
||||
|
||||
.li2 {
|
||||
background: linear-gradient(270deg, rgba(109, 139, 209, 0) 0%, rgba(135, 158, 204, 0.35) 100%);
|
||||
}
|
||||
|
||||
.li3 {
|
||||
background: linear-gradient(270deg, rgba(163, 102, 46, 0) 0%, rgba(198, 135, 81, 0.35) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my {
|
||||
width: 100%;
|
||||
height: px2rem(154);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: url(../images/my.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: px2rem(160);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(40);
|
||||
|
||||
.num {
|
||||
// width: px2rem(48);
|
||||
height: px2rem(48);
|
||||
text-align: center;
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
margin-top: px2rem(56);
|
||||
margin-right: px2rem(32);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(96);
|
||||
height: px2rem(96);
|
||||
border-radius: 50%;
|
||||
margin-top: px2rem(32);
|
||||
margin-right: px2rem(24);
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.score {
|
||||
float: left;
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 600;
|
||||
margin-top: px2rem(44);
|
||||
width: px2rem(280);
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
margin-bottom: px2rem(10);
|
||||
// 超出省略号
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #B1B5BD;
|
||||
font-size: px2rem(22);
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
|
||||
b {
|
||||
color: #E6ECF5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.but {
|
||||
width: px2rem(132);
|
||||
height: px2rem(56);
|
||||
line-height: px2rem(56);
|
||||
margin-top: px2rem(42);
|
||||
text-align: center;
|
||||
color: #FFDA24;
|
||||
font-size: px2rem(24);
|
||||
font-weight: 500;
|
||||
background: url(../images/myBut.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
BIN
view/yinmeng/modules/hourRank/images/bg.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 342 KiB |
BIN
view/yinmeng/modules/hourRank/images/first.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/first.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
view/yinmeng/modules/hourRank/images/hot.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/hot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 991 B |
BIN
view/yinmeng/modules/hourRank/images/hourTs.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/hourTs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
view/yinmeng/modules/hourRank/images/lastHour.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/lastHour.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
view/yinmeng/modules/hourRank/images/logo.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
view/yinmeng/modules/hourRank/images/my.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/my.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
view/yinmeng/modules/hourRank/images/myBut.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/myBut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
view/yinmeng/modules/hourRank/images/no1.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
view/yinmeng/modules/hourRank/images/no2.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
view/yinmeng/modules/hourRank/images/no3.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
view/yinmeng/modules/hourRank/images/title.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
view/yinmeng/modules/hourRank/images/travel/back.png
Normal file
BIN
view/yinmeng/modules/hourRank/images/travel/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
173
view/yinmeng/modules/hourRank/index.html
Normal file
173
view/yinmeng/modules/hourRank/index.html
Normal file
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>小时榜</title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 顶部返回 -->
|
||||
<!-- <div class="back">
|
||||
<img src="./images/travel/back.png" alt="">
|
||||
</div> -->
|
||||
<!-- 最外层容器 -->
|
||||
<div class="largestBox">
|
||||
<!-- 标题 -->
|
||||
<img src="./images/title.png" alt="" class="title">
|
||||
<!-- 上期小时榜 -->
|
||||
<div class="lastHour">
|
||||
<div class="text">上小时 top1</div>
|
||||
<div class="box">
|
||||
<div class="txbox">
|
||||
<img src="./images/hourTs.png" alt="" class="hourTs">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
</div>
|
||||
<div class="userInfo">
|
||||
<p></p>
|
||||
<div class="mvp">
|
||||
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||
<span>最佳助力</span>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="score">
|
||||
<img src="./images/hot.png" alt="" class="hot">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小时榜 -->
|
||||
<div class="hourList">
|
||||
<div class="top">
|
||||
<span class="sp">
|
||||
<!-- 20点 小时榜 -->
|
||||
</span>
|
||||
<span class="sp2">
|
||||
<!-- 剩余<b>10</b>分<b>10</b>秒 -->
|
||||
</span>
|
||||
</div>
|
||||
<ul>
|
||||
<!-- <li class="li1">
|
||||
<div class="num num1"></div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="userInfo">
|
||||
<p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
|
||||
<div class="mvp">
|
||||
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||
<span>最佳助力</span>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="score">
|
||||
<p>1000</p>
|
||||
<span>距上一名</span>
|
||||
</div>
|
||||
<img src="./images/first.png" alt="" class="first">
|
||||
</li>
|
||||
<li class="li2">
|
||||
<div class="num num2"></div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="userInfo">
|
||||
<p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
|
||||
<div class="mvp">
|
||||
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||
<span>最佳助力</span>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="score">
|
||||
<p>1000</p>
|
||||
<span>距上一名</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="li3">
|
||||
<div class="num num3"></div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="userInfo">
|
||||
<p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
|
||||
<div class="mvp">
|
||||
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||
<span>最佳助力</span>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="score">
|
||||
<p>1000</p>
|
||||
<span>距上一名</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="num">4</div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="userInfo">
|
||||
<p>我的名字很长我的名字很长我的名字很长我的名字很长</p>
|
||||
<div class="mvp">
|
||||
<img src="./images/logo.png" alt="" class="mvpTx">
|
||||
<span>最佳助力</span>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="score">
|
||||
<p>1000</p>
|
||||
<span>距上一名</span>
|
||||
</div>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 自己榜单 -->
|
||||
<div class="my">
|
||||
<div class="num">未上榜</div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="score">
|
||||
<p></p>
|
||||
<span>距上一名还差 <b>0</b></span>
|
||||
</div>
|
||||
<div class="but">打榜助力</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/route-constant.js"></script>
|
||||
<script src="../../common/js/svga.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
188
view/yinmeng/modules/hourRank/js/index.js
Normal file
188
view/yinmeng/modules/hourRank/js/index.js
Normal file
@@ -0,0 +1,188 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
var urlData = getQueryString();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加载中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
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 .userInfo p').text(lastHourRank.nick);
|
||||
$('.largestBox .box .userInfo .mvp .mvpTx').attr("src", lastHourRank.assist.avatar);
|
||||
lastHourRank.micUsers.forEach((res, i) => {
|
||||
$(`.largestBox .hourList ul li .userInfo .member .memberTx${i + 1}`).attr("src", res.avatar);
|
||||
});
|
||||
$('.largestBox .box .score span').text(res.score);
|
||||
} else {
|
||||
$('.largestBox .box .txbox .tx').attr("src", './images/logo.png');
|
||||
$('.largestBox .box .userInfo p').text('虚位以待');
|
||||
$('.largestBox .box .userInfo .mvp .mvpTx').attr("src", './images/logo.png');
|
||||
$('.largestBox .box .score span').text(0);
|
||||
}
|
||||
//================================= 当前小时榜===========================
|
||||
$('.largestBox .hourList ul li').remove();
|
||||
var str = '';
|
||||
res.data.currHourRank.forEach((res, i) => {
|
||||
str += `
|
||||
<li class="li${i + 1}">
|
||||
<div class="num num${i + 1}">${i > 2 ? i : ''}</div>
|
||||
<img src="${res.avatar}" alt="" class="tx">
|
||||
<div class="userInfo">
|
||||
<p>${res.nick}</p>
|
||||
<div class="mvp">
|
||||
<img src="${res.assist.avatar}" alt="" class="mvpTx">
|
||||
<span>最佳助力</span>
|
||||
</div>
|
||||
<div class="member">
|
||||
<img src="${res.micUsers[0].avatar}" alt="" class="memberTx memberTx1">
|
||||
<img src="${res.micUsers[1].avatar}" alt="" class="memberTx memberTx2">
|
||||
<img src="${res.micUsers[2].avatar}" alt="" class="memberTx memberTx3">
|
||||
<img src="${res.micUsers[3].avatar}" alt="" class="memberTx memberTx4">
|
||||
<img src="${res.micUsers[4].avatar}" alt="" class="memberTx memberTx5">
|
||||
</div>
|
||||
</div>
|
||||
<div class="score">
|
||||
<p>${i == 0 ? res.score : res.data.currHourRank[i - 1].score - res.score}</p>
|
||||
<span>距上一名</span>
|
||||
</div>
|
||||
<img style="display:${i == 0 ? 'block' : 'none'}" src="./images/first.png" alt="" class="first">
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.largestBox .hourList ul').append(str);
|
||||
// ====================================处理自己===========================
|
||||
$('.my .tx').attr('src', res.data.currRoomInfo.avatar);
|
||||
$('.my .tx').attr('uid', res.data.currRoomInfo.uid);
|
||||
$('.my .score p').text(res.data.currRoomInfo.nick);
|
||||
var uid = res.data.currRoomInfo.uid;
|
||||
if (res.data.currHourRank.find(obj => obj.uid == res.data.currRoomInfo.uid)) {
|
||||
res.data.currHourRank.forEach((val, i) => {
|
||||
if (uid == val.uid) {
|
||||
$('.my .score span').show();
|
||||
$('.my .score span b').text(i == 0 ? 0 : res.data.currHourRank[i - 1].score - val.score);
|
||||
$(`.my .num`).text(i + 1);
|
||||
$(`.my .score p`).css('margin-top', '0rem')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
$('.my .score span').hide();
|
||||
$(`.my .num`).text('未上榜');
|
||||
$(`.my .score p`).css('margin-top', '0.3rem')
|
||||
}
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 倒计时
|
||||
function countup () {
|
||||
clearTimeout(timeOut2)
|
||||
//获取当前时间
|
||||
// var now = nowTime;
|
||||
var d = 0;
|
||||
var h = 0;
|
||||
var m = 0;
|
||||
var s = 0;
|
||||
//定义变量 d,h,m,s保存倒计时的时间
|
||||
var d, h, m, s;
|
||||
//递归每秒调⽤countTime⽅法，显⽰动态时间效果
|
||||
if (leftTime > 0) {
|
||||
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
|
||||
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
|
||||
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
|
||||
s = getzf(Math.floor(leftTime / 1000 % 60));
|
||||
//将倒计时赋值到div中
|
||||
// console.log("最终: " + dateFormat(leftTime, '00:mm:ss'));
|
||||
$('.largestBox .hourList .top .sp2').html(`<span>剩余<b>${dateFormat(leftTime, 'mm')}</b>分<b>${dateFormat(leftTime, 'ss')}</b>秒</span>`)
|
||||
} else {
|
||||
getHourRank();
|
||||
}
|
||||
if (leftTime > 0) {
|
||||
leftTime = leftTime - 1000;
|
||||
}
|
||||
timeOut2 = setTimeout(countup, 1000);
|
||||
}
|
||||
//补0操作
|
||||
function getzf (num) {
|
||||
if (parseInt(num) < 10) {
|
||||
num = '0' + num;
|
||||
}
|
||||
return num;
|
||||
}
|
||||
544
view/yinmeng/modules/roomRank/css/index.css
Normal file
544
view/yinmeng/modules/roomRank/css/index.css
Normal file
@@ -0,0 +1,544 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, #020B27 0%, #1D181B 99%);
|
||||
backdrop-filter: blur(0px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: 0.26667rem;
|
||||
left: 0.32rem;
|
||||
z-index: 99;
|
||||
width: 0.82667rem;
|
||||
height: 0.82667rem;
|
||||
}
|
||||
|
||||
.back img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.back p {
|
||||
color: #fff;
|
||||
font-size: 0.42667rem;
|
||||
position: absolute;
|
||||
width: 9rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: 0.82667rem;
|
||||
}
|
||||
|
||||
.largestBox {
|
||||
width: 10rem;
|
||||
min-height: 15.38667rem;
|
||||
background: url(../images/bg.png) no-repeat;
|
||||
background-size: 10rem 15.38667rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 1.2rem 0 0 0;
|
||||
}
|
||||
|
||||
.largestBox .title {
|
||||
width: 7.06667rem;
|
||||
height: 1.14667rem;
|
||||
position: absolute;
|
||||
top: -0.14667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.largestBox .tab {
|
||||
width: 3.65333rem;
|
||||
height: 0.53333rem;
|
||||
line-height: 0.53333rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
.largestBox .tab div {
|
||||
position: relative;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.largestBox .tab div span {
|
||||
background: none;
|
||||
width: 0.32rem;
|
||||
height: 0.08rem;
|
||||
border-radius: 0.08rem;
|
||||
position: absolute;
|
||||
bottom: -0.10667rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.largestBox .tab .tabColor1 {
|
||||
color: #fff;
|
||||
font-size: 0.37333rem;
|
||||
}
|
||||
|
||||
.largestBox .tab .tabColor1 span {
|
||||
background: #FA7814;
|
||||
}
|
||||
|
||||
.largestBox .tab .tabColor2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.largestBox .tab .tabColor2 span {
|
||||
background: #A34DFF;
|
||||
}
|
||||
|
||||
.largestBox .dayTab {
|
||||
width: 5.33333rem;
|
||||
height: 0.61333rem;
|
||||
margin: 0.34667rem auto 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.largestBox .dayTab div {
|
||||
width: 1.33333rem;
|
||||
height: 0.61333rem;
|
||||
line-height: 0.61333rem;
|
||||
border-radius: 0.61333rem;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(210, 172, 252, 0.4);
|
||||
font-size: 0.32rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.largestBox .dayTab .dayTabColor1 {
|
||||
background: #fff;
|
||||
color: #FA7814;
|
||||
}
|
||||
|
||||
.largestBox .dayTab .dayTabColor2 {
|
||||
background: #fff;
|
||||
color: #A34DFF;
|
||||
}
|
||||
|
||||
.largestBox .top3 {
|
||||
width: 8.8rem;
|
||||
height: 0.01333rem;
|
||||
margin: 3.04rem auto 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 {
|
||||
width: 3.17333rem;
|
||||
height: 2.88rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: -2.88rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box .tx {
|
||||
width: 2.08rem;
|
||||
height: 2.08rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0.58667rem;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box p {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.56rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box p span {
|
||||
vertical-align: middle;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.37333rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box p .sp {
|
||||
width: 0.37333rem;
|
||||
height: 0.37333rem;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box p .sp img {
|
||||
display: inline-block;
|
||||
width: 0.21333rem;
|
||||
height: 0.21333rem;
|
||||
border-radius: 50%;
|
||||
margin: 0.06667rem auto 0;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box p .boy {
|
||||
background: #6BB3FF;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box p .woman {
|
||||
background: #FF80CC;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box .icon {
|
||||
width: 100%;
|
||||
height: 0.48rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
bottom: -1.12rem;
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box .icon img {
|
||||
display: block;
|
||||
width: 0.96rem;
|
||||
height: 0.48rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no1 .box .score {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFDA24;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1.53333rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 {
|
||||
width: 2.66667rem;
|
||||
height: 2.37333rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2.4rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box .tx {
|
||||
width: 1.70667rem;
|
||||
height: 1.70667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0.45333rem;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box p {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.56rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box p span {
|
||||
vertical-align: middle;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.37333rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box p .sp {
|
||||
width: 0.37333rem;
|
||||
height: 0.37333rem;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box p .sp img {
|
||||
display: inline-block;
|
||||
width: 0.21333rem;
|
||||
height: 0.21333rem;
|
||||
border-radius: 50%;
|
||||
margin: 0.06667rem auto 0;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box p .boy {
|
||||
background: #6BB3FF;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box p .woman {
|
||||
background: #FF80CC;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box .icon {
|
||||
width: 100%;
|
||||
height: 0.48rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
bottom: -1.12rem;
|
||||
padding: 0 0.33333rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box .icon img {
|
||||
display: block;
|
||||
width: 0.96rem;
|
||||
height: 0.48rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no2 .box .score {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFDA24;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1.53333rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 {
|
||||
width: 2.66667rem;
|
||||
height: 2.37333rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2.4rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box .ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box .tx {
|
||||
width: 1.70667rem;
|
||||
height: 1.70667rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0.45333rem;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box p {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.56rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box p span {
|
||||
vertical-align: middle;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.37333rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box p .sp {
|
||||
width: 0.37333rem;
|
||||
height: 0.37333rem;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box p .sp img {
|
||||
display: inline-block;
|
||||
width: 0.21333rem;
|
||||
height: 0.21333rem;
|
||||
border-radius: 50%;
|
||||
margin: 0.06667rem auto 0;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box p .boy {
|
||||
background: #6BB3FF;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box p .woman {
|
||||
background: #FF80CC;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box .icon {
|
||||
width: 100%;
|
||||
height: 0.48rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
bottom: -1.12rem;
|
||||
padding: 0 0.33333rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box .icon img {
|
||||
display: block;
|
||||
width: 0.96rem;
|
||||
height: 0.48rem;
|
||||
}
|
||||
|
||||
.largestBox .top3 .no3 .box .score {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFDA24;
|
||||
font-size: 0.32rem;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -1.53333rem;
|
||||
}
|
||||
|
||||
.largestBox ul {
|
||||
width: 9.57333rem;
|
||||
height: 7.70667rem;
|
||||
margin: 1.81333rem auto 0;
|
||||
background: rgba(255, 167, 141, 0.16);
|
||||
border-radius: 0.42667rem 0.42667rem 0px 0px;
|
||||
border: 0.02667rem solid rgba(255, 217, 115, 0.5);
|
||||
backdrop-filter: blur(7px);
|
||||
border-bottom: none;
|
||||
box-sizing: border-box;
|
||||
padding: 0.21333rem 0 1.86667rem;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.largestBox ul::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.largestBox ul li {
|
||||
width: 100%;
|
||||
height: 1.92rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.33333rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.largestBox ul li .num {
|
||||
width: 0.53333rem;
|
||||
height: 100%;
|
||||
line-height: 1.92rem;
|
||||
text-align: center;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
margin-right: 0.16rem;
|
||||
}
|
||||
|
||||
.largestBox ul li .tx {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 1.28rem;
|
||||
height: 1.28rem;
|
||||
border-radius: 1.28rem;
|
||||
margin-top: 0.32rem;
|
||||
margin-right: 0.21333rem;
|
||||
}
|
||||
|
||||
.largestBox ul li .userInfo {
|
||||
width: 2.8rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.largestBox ul li .userInfo p {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 0.10667rem;
|
||||
color: #E6ECF5;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.largestBox ul li .userInfo img {
|
||||
display: inline-block;
|
||||
width: 0.96rem;
|
||||
height: 0.48rem;
|
||||
margin-right: 0.10667rem;
|
||||
}
|
||||
|
||||
.largestBox ul li .score {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.largestBox ul li .score p {
|
||||
color: #E6ECF5;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.48rem;
|
||||
margin-bottom: 0.06667rem;
|
||||
}
|
||||
|
||||
.largestBox ul li .score span {
|
||||
color: #B1B5BD;
|
||||
font-size: 0.29333rem;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
552
view/yinmeng/modules/roomRank/css/index.scss
Normal file
552
view/yinmeng/modules/roomRank/css/index.scss
Normal file
@@ -0,0 +1,552 @@
|
||||
@function px2rem($px) {
|
||||
@return $px / 75+rem;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, #020B27 0%, #1D181B 99%);
|
||||
backdrop-filter: blur(0px);
|
||||
// background: #0B1836;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: fixed;
|
||||
top: px2rem(20);
|
||||
left: px2rem(24);
|
||||
z-index: 99;
|
||||
width: px2rem(62);
|
||||
height: px2rem(62);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: px2rem(32);
|
||||
position: absolute;
|
||||
width: 9rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: px2rem(62);
|
||||
}
|
||||
}
|
||||
|
||||
.largestBox {
|
||||
width: px2rem(750);
|
||||
min-height: px2rem(1154);
|
||||
background: url(../images/bg.png) no-repeat;
|
||||
background-size: px2rem(750) px2rem(1154);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(90) 0 0 0;
|
||||
|
||||
.title {
|
||||
width: px2rem(530);
|
||||
height: px2rem(86);
|
||||
position: absolute;
|
||||
top: px2rem(-11);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: px2rem(274);
|
||||
height: px2rem(40);
|
||||
line-height: px2rem(40);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto 0;
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
color: rgba(255, 255, 255, .7);
|
||||
font-size: px2rem(28);
|
||||
font-weight: 600;
|
||||
|
||||
span {
|
||||
background: none;
|
||||
width: px2rem(24);
|
||||
height: px2rem(6);
|
||||
border-radius: px2rem(6);
|
||||
position: absolute;
|
||||
bottom: px2rem(-8);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tabColor1 {
|
||||
color: #fff;
|
||||
font-size: px2rem(28);
|
||||
|
||||
span {
|
||||
background: #FA7814;
|
||||
}
|
||||
}
|
||||
|
||||
.tabColor2 {
|
||||
color: #fff;
|
||||
|
||||
span {
|
||||
background: #A34DFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dayTab {
|
||||
width: px2rem(400);
|
||||
height: px2rem(46);
|
||||
margin: px2rem(26) auto 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
width: px2rem(100);
|
||||
height: px2rem(46);
|
||||
line-height: px2rem(46);
|
||||
border-radius: px2rem(46);
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, .7);
|
||||
background: rgba(210, 172, 252, .4);
|
||||
font-size: px2rem(24);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dayTabColor1 {
|
||||
background: #fff;
|
||||
color: #FA7814;
|
||||
}
|
||||
|
||||
.dayTabColor2 {
|
||||
background: #fff;
|
||||
color: #A34DFF;
|
||||
}
|
||||
}
|
||||
|
||||
.top3 {
|
||||
width: px2rem(660);
|
||||
height: px2rem(1);
|
||||
margin: px2rem(228) auto 0;
|
||||
position: relative;
|
||||
|
||||
.no1 {
|
||||
width: px2rem(238);
|
||||
height: px2rem(216);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(-216);
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(156);
|
||||
height: px2rem(156);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: px2rem(44);
|
||||
// top: px2rem(34);
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-42);
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(28);
|
||||
}
|
||||
|
||||
.sp {
|
||||
width: px2rem(28);
|
||||
height: px2rem(28);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(16);
|
||||
height: px2rem(16);
|
||||
border-radius: 50%;
|
||||
margin: px2rem(5) auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.boy {
|
||||
background: #6BB3FF;
|
||||
}
|
||||
|
||||
.woman {
|
||||
background: #FF80CC;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: px2rem(36);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
bottom: px2rem(-84);
|
||||
padding: 0 px2rem(45);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: px2rem(72);
|
||||
height: px2rem(36);
|
||||
}
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFDA24;
|
||||
font-size: px2rem(24);
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-115);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no2 {
|
||||
width: px2rem(200);
|
||||
height: px2rem(178);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: px2rem(-180);
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(128);
|
||||
height: px2rem(128);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: px2rem(34);
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-42);
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(28);
|
||||
}
|
||||
|
||||
.sp {
|
||||
width: px2rem(28);
|
||||
height: px2rem(28);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(16);
|
||||
height: px2rem(16);
|
||||
border-radius: 50%;
|
||||
margin: px2rem(5) auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.boy {
|
||||
background: #6BB3FF;
|
||||
}
|
||||
|
||||
.woman {
|
||||
background: #FF80CC;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: px2rem(36);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
bottom: px2rem(-84);
|
||||
padding: 0 px2rem(25);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: px2rem(72);
|
||||
height: px2rem(36);
|
||||
}
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFDA24;
|
||||
font-size: px2rem(24);
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-115);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no3 {
|
||||
width: px2rem(200);
|
||||
height: px2rem(178);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: px2rem(-180);
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
.ts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tx {
|
||||
width: px2rem(128);
|
||||
height: px2rem(128);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: px2rem(34);
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-42);
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(28);
|
||||
}
|
||||
|
||||
.sp {
|
||||
width: px2rem(28);
|
||||
height: px2rem(28);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(16);
|
||||
height: px2rem(16);
|
||||
border-radius: 50%;
|
||||
margin: px2rem(5) auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.boy {
|
||||
background: #6BB3FF;
|
||||
}
|
||||
|
||||
.woman {
|
||||
background: #FF80CC;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: px2rem(36);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
bottom: px2rem(-84);
|
||||
padding: 0 px2rem(25);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: px2rem(72);
|
||||
height: px2rem(36);
|
||||
}
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #FFDA24;
|
||||
font-size: px2rem(24);
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: px2rem(-115);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
width: px2rem(718);
|
||||
height: px2rem(578);
|
||||
margin: px2rem(136) auto 0;
|
||||
background: rgba(255, 167, 141, 0.16);
|
||||
border-radius: px2rem(32) px2rem(32) 0px 0px;
|
||||
border: px2rem(2) solid rgba(255, 217, 115, 0.5);
|
||||
backdrop-filter: blur(7px);
|
||||
border-bottom: none;
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(16) 0 px2rem(140);
|
||||
overflow-y: scroll;
|
||||
&::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: px2rem(144);
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(25);
|
||||
overflow: hidden;
|
||||
|
||||
.num {
|
||||
width: px2rem(40);
|
||||
height: 100%;
|
||||
line-height: px2rem(144);
|
||||
text-align: center;
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(32);
|
||||
font-weight: 500;
|
||||
float: left;
|
||||
margin-right: px2rem(12);
|
||||
}
|
||||
|
||||
.tx {
|
||||
display: block;
|
||||
float: left;
|
||||
width: px2rem(96);
|
||||
height: px2rem(96);
|
||||
border-radius: px2rem(96);
|
||||
margin-top: px2rem(24);
|
||||
margin-right: px2rem(16);
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
width: px2rem(210);
|
||||
float: left;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: px2rem(30);
|
||||
margin-bottom: px2rem(8);
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: px2rem(72);
|
||||
height: px2rem(36);
|
||||
margin-right: px2rem(8);
|
||||
}
|
||||
}
|
||||
|
||||
.score {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
p {
|
||||
color: #E6ECF5;
|
||||
font-size: px2rem(28);
|
||||
font-weight: 600;
|
||||
margin-top: px2rem(36);
|
||||
margin-bottom: px2rem(5);
|
||||
}
|
||||
|
||||
span {
|
||||
color: #B1B5BD;
|
||||
font-size: px2rem(22);
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
BIN
view/yinmeng/modules/roomRank/images/bg.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 379 KiB |
BIN
view/yinmeng/modules/roomRank/images/boy.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/boy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 457 B |
BIN
view/yinmeng/modules/roomRank/images/icon1.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
view/yinmeng/modules/roomRank/images/icon2.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
view/yinmeng/modules/roomRank/images/logo.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
view/yinmeng/modules/roomRank/images/no1.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
view/yinmeng/modules/roomRank/images/no2.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
view/yinmeng/modules/roomRank/images/no3.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
view/yinmeng/modules/roomRank/images/title.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
view/yinmeng/modules/roomRank/images/woman.png
Normal file
BIN
view/yinmeng/modules/roomRank/images/woman.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
110
view/yinmeng/modules/roomRank/index.html
Normal file
110
view/yinmeng/modules/roomRank/index.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>房间榜</title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- 最外层容器 -->
|
||||
<div class="largestBox">
|
||||
<!-- 标题 -->
|
||||
<img src="./images/title.png" alt="" class="title">
|
||||
<!-- 财富榜&魅力榜 -->
|
||||
<div class="tab">
|
||||
<div class="tabColor1">
|
||||
财富榜
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="">
|
||||
魅力榜
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 日榜&周榜&月榜 -->
|
||||
<div class="dayTab">
|
||||
<div class="dayTabColor1">日榜</div>
|
||||
<div>周榜</div>
|
||||
<div>月榜</div>
|
||||
</div>
|
||||
<!-- 前三 -->
|
||||
<div class="top3">
|
||||
<div class="no no1">
|
||||
<div class="box">
|
||||
<img src="./images/no1.png" alt="" class="ts">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<p>
|
||||
<span>我是很长的...</span>
|
||||
<span class="sp boy"><img src="./images/boy.png" alt=""></span>
|
||||
</p>
|
||||
<div class="icon">
|
||||
<img src="./images/icon1.png" alt="" class="icon1">
|
||||
<img src="./images/icon2.png" alt="" class="icon1">
|
||||
</div>
|
||||
<div class="score">10000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no no2">
|
||||
<div class="box">
|
||||
<img src="./images/no2.png" alt="" class="ts">
|
||||
<img src="" alt="" class="tx">
|
||||
<p>
|
||||
<span></span>
|
||||
<span class="sp woman"><img src="" alt=""></span>
|
||||
</p>
|
||||
<div class="icon">
|
||||
<img src="" alt="" class="icon1">
|
||||
<img src="" alt="" class="icon1">
|
||||
</div>
|
||||
<div class="score"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no no3">
|
||||
<div class="box">
|
||||
<img src="./images/no3.png" alt="" class="ts">
|
||||
<img src="" alt="" class="tx">
|
||||
<p>
|
||||
<span></span>
|
||||
<span class="sp boy"><img src="" alt=""></span>
|
||||
</p>
|
||||
<div class="icon">
|
||||
<img src="" alt="" class="icon1">
|
||||
<img src="" alt="" class="icon1">
|
||||
</div>
|
||||
<div class="score"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 非前三 -->
|
||||
<ul>
|
||||
<li>
|
||||
<div class="num">4</div>
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="userInfo">
|
||||
<p>我是名字名字名字名字名字</p>
|
||||
<img src="./images/icon1.png" alt="" class="icon1">
|
||||
<img src="./images/icon2.png" alt="" class="icon2">
|
||||
</div>
|
||||
<div class="score">
|
||||
<p>1000</p>
|
||||
<span>魅力值</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/route-constant.js"></script>
|
||||
<script src="../../common/js/svga.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
73
view/yinmeng/modules/roomRank/js/index.js
Normal file
73
view/yinmeng/modules/roomRank/js/index.js
Normal file
@@ -0,0 +1,73 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let env = EnvCheck();
|
||||
var urlData = getQueryString();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加载中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
// 初始化函数
|
||||
$(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)
|
||||
}
|
||||
})
|
||||
|
||||
}, 100)
|
||||
})
|
||||
// 接口
|
||||
function get () {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GEt',
|
||||
url: urlPrefix + '',
|
||||
data: { roomUid: urlData.roomUid },
|
||||
success (res) {
|
||||
if (res.code === 200) {
|
||||
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
hideLoading(layerIndex)
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex)
|
||||
toastMsg('网络错误，请退出重进')
|
||||
}
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user