Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
8380e1a212 | ||
|
|
a12c92c3cb | ||
|
|
a80a580369 | ||
|
|
9587b72908 | ||
|
|
a78675c230 | ||
|
|
f696a3dcb4 | ||
|
|
932f4003f6 | ||
|
|
d7914c1dbf | ||
|
|
2a4cd12fe0 | ||
|
|
ccdc66b6e8 | ||
|
|
e856a0a6c5 | ||
|
|
1421103a4f | ||
|
|
51dea0d288 | ||
|
|
f49e536409 |
1
view/yinmeng/common/js/svga.js
Normal file
1
view/yinmeng/common/js/svga.js
Normal file
File diff suppressed because one or more lines are too long
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>
|
||||||
211
view/yinmeng/modules/hourRank/js/index.js
Normal file
211
view/yinmeng/modules/hourRank/js/index.js
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
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 + '/single/broadcast/listHourRank',
|
||||||
|
data: { roomUid: urlData.roomUid },
|
||||||
|
success (res) {
|
||||||
|
if (res.code === 200) {
|
||||||
|
// ==================================设置倒计时===========================
|
||||||
|
nowTime = res.timestamp;
|
||||||
|
$('.largestBox .hourList .top .sp').text(`${dateFormat(nowTime, 'hh')}点 小时榜`)
|
||||||
|
// 获取当前时间
|
||||||
|
now = new Date(nowTime);
|
||||||
|
// 计算距离下一个小时的分钟数
|
||||||
|
var minutesToNextHour = (59 - now.getMinutes()) % 60;
|
||||||
|
// 计算距离下一个小时的秒数
|
||||||
|
var secondsToNextHour = 59 - now.getSeconds();
|
||||||
|
// 计算距离下一个小时的总时间（以毫秒为单位）
|
||||||
|
var timeToNextHour = (minutesToNextHour * 60 * 1000) + (secondsToNextHour * 1000);
|
||||||
|
leftTime = timeToNextHour;
|
||||||
|
countup();
|
||||||
|
// =================================上期前三===========================
|
||||||
|
lastHourRank = res.data.lastHourRank[0];
|
||||||
|
if (lastHourRank) {
|
||||||
|
$('.largestBox .box .txbox .tx').attr("src", lastHourRank.avatar);
|
||||||
|
$('.largestBox .box .txbox .hourTs').attr("roomUid", lastHourRank.uid);
|
||||||
|
$('.largestBox .box .userInfo p').text(lastHourRank.nick);
|
||||||
|
$('.largestBox .box .userInfo .mvp .mvpTx').attr("src", lastHourRank.assist.avatar);
|
||||||
|
lastHourRank.micUsers.forEach((res, i) => {
|
||||||
|
$(`.largestBox .hourList ul li .userInfo .member .memberTx${i + 1}`).attr("src", res.avatar);
|
||||||
|
});
|
||||||
|
$('.largestBox .box .score span').text(res.score);
|
||||||
|
} else {
|
||||||
|
$('.largestBox .box .txbox .tx').attr("src", './images/logo.png');
|
||||||
|
$('.largestBox .box .userInfo p').text('虚位以待');
|
||||||
|
$('.largestBox .box .userInfo .mvp .mvpTx').attr("src", './images/logo.png');
|
||||||
|
$('.largestBox .box .score span').text(0);
|
||||||
|
}
|
||||||
|
//================================= 当前小时榜===========================
|
||||||
|
$('.largestBox .hourList ul li').remove();
|
||||||
|
var str = '';
|
||||||
|
res.data.currHourRank.forEach((res, i) => {
|
||||||
|
str += `
|
||||||
|
<li class="li${i + 1}">
|
||||||
|
<div class="num num${i + 1}">${i > 2 ? i : ''}</div>
|
||||||
|
<img src="${res.avatar}" roomUid=${res.uid} alt="" class="tx">
|
||||||
|
<div class="userInfo">
|
||||||
|
<p>${res.nick}</p>
|
||||||
|
<div class="mvp">
|
||||||
|
<img src="${res.assist.avatar}" alt="" class="mvpTx">
|
||||||
|
<span>最佳助力</span>
|
||||||
|
</div>
|
||||||
|
<div class="member">
|
||||||
|
<img src="${res.micUsers[0] ? res.micUsers[0].avatar : './images/logo.png'}" alt="" class="memberTx memberTx1">
|
||||||
|
<img src="${res.micUsers[1] ? res.micUsers[1].avatar : './images/logo.png'}" alt="" class="memberTx memberTx2">
|
||||||
|
<img src="${res.micUsers[2] ? res.micUsers[2].avatar : './images/logo.png'}" alt="" class="memberTx memberTx3">
|
||||||
|
<img src="${res.micUsers[3] ? res.micUsers[3].avatar : './images/logo.png'}" alt="" class="memberTx memberTx4">
|
||||||
|
<img src="${res.micUsers[4] ? res.micUsers[4].avatar : './images/logo.png'}" alt="" class="memberTx memberTx5">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="score">
|
||||||
|
<p>${i == 0 ? res.score : res.data.currHourRank[i - 1].score - res.score}</p>
|
||||||
|
<span>距上一名</span>
|
||||||
|
</div>
|
||||||
|
<img style="display:${i == 0 ? 'block' : 'none'}" src="./images/first.png" alt="" class="first">
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
$('.largestBox .hourList ul').append(str);
|
||||||
|
// ====================================处理自己===========================
|
||||||
|
$('.my .tx').attr('src', res.data.currRoomInfo.avatar);
|
||||||
|
$('.my .tx').attr('uid', res.data.currRoomInfo.uid);
|
||||||
|
$('.my .score p').text(res.data.currRoomInfo.nick);
|
||||||
|
var uid = res.data.currRoomInfo.uid;
|
||||||
|
if (res.data.currHourRank.find(obj => obj.uid == res.data.currRoomInfo.uid)) {
|
||||||
|
res.data.currHourRank.forEach((val, i) => {
|
||||||
|
if (uid == val.uid) {
|
||||||
|
$('.my .score span').show();
|
||||||
|
$('.my .score span b').text(i == 0 ? 0 : res.data.currHourRank[i - 1].score - val.score);
|
||||||
|
$(`.my .num`).text(i + 1);
|
||||||
|
$(`.my .score p`).css('margin-top', '0rem')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
$('.my .score span').hide();
|
||||||
|
$(`.my .num`).text('未上榜');
|
||||||
|
$(`.my .score p`).css('margin-top', '0.3rem')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
toastMsg(res.message)
|
||||||
|
}
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
},
|
||||||
|
error (err) {
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
toastMsg('网络错误，请退出重进')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 倒计时
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
// 点击前三跳转房间
|
||||||
|
$('.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 266 KiB After Width: | Height: | Size: 234 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 539 KiB After Width: | Height: | Size: 486 KiB |
1271
view/yinmeng/modules/ranks/css/index.css
Normal file
1271
view/yinmeng/modules/ranks/css/index.css
Normal file
File diff suppressed because it is too large
Load Diff
1282
view/yinmeng/modules/ranks/css/index.scss
Normal file
1282
view/yinmeng/modules/ranks/css/index.scss
Normal file
File diff suppressed because it is too large
Load Diff
BIN
view/yinmeng/modules/ranks/images/back.png
Normal file
BIN
view/yinmeng/modules/ranks/images/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
BIN
view/yinmeng/modules/ranks/images/boy.png
Normal file
BIN
view/yinmeng/modules/ranks/images/boy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 368 B |
BIN
view/yinmeng/modules/ranks/images/girl.png
Normal file
BIN
view/yinmeng/modules/ranks/images/girl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 396 B |
BIN
view/yinmeng/modules/ranks/images/header1.png
Normal file
BIN
view/yinmeng/modules/ranks/images/header1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
view/yinmeng/modules/ranks/images/header2.png
Normal file
BIN
view/yinmeng/modules/ranks/images/header2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
view/yinmeng/modules/ranks/images/header3.png
Normal file
BIN
view/yinmeng/modules/ranks/images/header3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
view/yinmeng/modules/ranks/images/header4.png
Normal file
BIN
view/yinmeng/modules/ranks/images/header4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
view/yinmeng/modules/ranks/images/icon1.png
Normal file
BIN
view/yinmeng/modules/ranks/images/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
view/yinmeng/modules/ranks/images/icon2.png
Normal file
BIN
view/yinmeng/modules/ranks/images/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
view/yinmeng/modules/ranks/images/lastTopThree_in.png
Normal file
BIN
view/yinmeng/modules/ranks/images/lastTopThree_in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
view/yinmeng/modules/ranks/images/listLast.png
Normal file
BIN
view/yinmeng/modules/ranks/images/listLast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 B |
BIN
view/yinmeng/modules/ranks/images/live.svga
Normal file
BIN
view/yinmeng/modules/ranks/images/live.svga
Normal file
Binary file not shown.
BIN
view/yinmeng/modules/ranks/images/logo.png
Normal file
BIN
view/yinmeng/modules/ranks/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
view/yinmeng/modules/ranks/images/my.png
Normal file
BIN
view/yinmeng/modules/ranks/images/my.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
view/yinmeng/modules/ranks/images/no1.png
Normal file
BIN
view/yinmeng/modules/ranks/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
view/yinmeng/modules/ranks/images/no2.png
Normal file
BIN
view/yinmeng/modules/ranks/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
view/yinmeng/modules/ranks/images/no3.png
Normal file
BIN
view/yinmeng/modules/ranks/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
view/yinmeng/modules/ranks/images/topList1.png
Normal file
BIN
view/yinmeng/modules/ranks/images/topList1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
view/yinmeng/modules/ranks/images/topList2.png
Normal file
BIN
view/yinmeng/modules/ranks/images/topList2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
view/yinmeng/modules/ranks/images/topList3.png
Normal file
BIN
view/yinmeng/modules/ranks/images/topList3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
view/yinmeng/modules/ranks/images/topList4.png
Normal file
BIN
view/yinmeng/modules/ranks/images/topList4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
177
view/yinmeng/modules/ranks/index.html
Normal file
177
view/yinmeng/modules/ranks/index.html
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
<!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="header">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div class="title">
|
||||||
|
<img src="./images/back.png" alt="" class="back">
|
||||||
|
<span>荣耀榜</span>
|
||||||
|
</div>
|
||||||
|
<!-- tab榜单切换 -->
|
||||||
|
<div class="tab">
|
||||||
|
<div class="active1">爱意榜<span></span></div>
|
||||||
|
<div>魅力榜<span></span></div>
|
||||||
|
<div>房间榜<span></span></div>
|
||||||
|
<div>公会榜<span></span></div>
|
||||||
|
</div>
|
||||||
|
<!-- 榜单周期切换 timeTab2-->
|
||||||
|
<div class="timeTab ">
|
||||||
|
<div class="active divBg1">小时榜</div>
|
||||||
|
<div class="active1 divBg1">日榜</div>
|
||||||
|
<div class="divBg1">周榜</div>
|
||||||
|
<div class="divBg1">月榜</div>
|
||||||
|
</div>
|
||||||
|
<!-- 上期前三 -->
|
||||||
|
<div class="listLast">
|
||||||
|
<span class="sp1">上期TOP3 ></span>
|
||||||
|
</div>
|
||||||
|
<!-- 前三榜单 -->
|
||||||
|
<div class="topBox topBox1">
|
||||||
|
<div class="no no1">
|
||||||
|
<img src="./images/no1.png" alt="" class="ts">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<img src="./images/logo.png" alt="" class="zl">
|
||||||
|
<div src="./images/live.svga" loops="0" clearsAfterStop="true" class="svga"></div>
|
||||||
|
<p>
|
||||||
|
<span class="girl"><img src="./images/girl.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img class="icon1" src="" alt="">
|
||||||
|
<img class="icon2" src="" alt="">
|
||||||
|
</div>
|
||||||
|
<!-- <i>距上一名111.5W</i> -->
|
||||||
|
<img src="" alt="" class="icon_gh">
|
||||||
|
</div>
|
||||||
|
<div class="no no2">
|
||||||
|
<img src="./images/no2.png" alt="" class="ts">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<img src="./images/logo.png" alt="" class="zl">
|
||||||
|
<div src="./images/live.svga" loops="0" clearsAfterStop="true" class="svga"></div>
|
||||||
|
<p>
|
||||||
|
<span class="girl"><img src="./images/girl.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img class="icon1" src="" alt="">
|
||||||
|
<img class="icon2" src="" alt="">
|
||||||
|
</div>
|
||||||
|
<i></i>
|
||||||
|
<img src="" alt="" class="icon_gh">
|
||||||
|
</div>
|
||||||
|
<div class="no no3">
|
||||||
|
<img src="./images/no3.png" alt="" class="ts">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<img src="./images/logo.png" alt="" class="zl">
|
||||||
|
<div src="./images/live.svga" loops="0" clearsAfterStop="true" class="svga"></div>
|
||||||
|
<p>
|
||||||
|
<span class="girl"><img src="./images/girl.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img class="icon1" src="" alt="">
|
||||||
|
<img class="icon2" src="" alt="">
|
||||||
|
</div>
|
||||||
|
<i></i>
|
||||||
|
<img src="" alt="" class="icon_gh">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 非前三 -->
|
||||||
|
<ul class="list">
|
||||||
|
<li>
|
||||||
|
<div class="num">44.</div>
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div src="./images/live.svga" loops="0" clearsAfterStop="true" class="svga" style="display: block;"></div>
|
||||||
|
<div class="nameBox">
|
||||||
|
<p>我的名嗷字啊啊...
|
||||||
|
<span class="girl"><img src="./images/girl.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="./images/icon1.png" alt="">
|
||||||
|
<img src="./images/icon2.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<img src="./images/logo.png" alt="">
|
||||||
|
<div class="nick">啊啊啊啊啊啊啊啊啊啊啊</div>
|
||||||
|
<p>最佳助力</p>
|
||||||
|
</div>
|
||||||
|
<div class="score">
|
||||||
|
<b>191.1W</b>
|
||||||
|
<i>距上一名</i>
|
||||||
|
</div>
|
||||||
|
<img src="" alt="" class="icon_gh">
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- 自己榜单 -->
|
||||||
|
<div class="my">
|
||||||
|
<div class="num">未上榜</div>
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<p class="name"></p>
|
||||||
|
<div class="score"><b>0</b> <i>爱意值</i></div>
|
||||||
|
</div>
|
||||||
|
<!-- 上期前弹窗 -->
|
||||||
|
<div class="lastTopThree">
|
||||||
|
<div class="lastTopThree_in">
|
||||||
|
<div class="box">
|
||||||
|
<div class="no no1">
|
||||||
|
<img src="./images/no1.png" alt="" class="ts">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div src="./images/live.svga" loops="0" clearsAfterStop="true" class="svga"></div>
|
||||||
|
<p>
|
||||||
|
<span class="girl"><img src="./images/girl.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img class="icon1" src="./images/icon1.png" alt="">
|
||||||
|
<img class="icon2" src="./images/icon2.png" alt="">
|
||||||
|
</div>
|
||||||
|
<img src="" alt="" class="icon_gh">
|
||||||
|
</div>
|
||||||
|
<div class="no no2">
|
||||||
|
<img src="./images/no2.png" alt="" class="ts">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div src="./images/live.svga" loops="0" clearsAfterStop="true" class="svga"></div>
|
||||||
|
<p>
|
||||||
|
<span class="girl"><img src="./images/girl.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img class="icon1" src="./images/icon1.png" alt="">
|
||||||
|
<img class="icon2" src="./images/icon2.png" alt="">
|
||||||
|
</div>
|
||||||
|
<img src="" alt="" class="icon_gh">
|
||||||
|
</div>
|
||||||
|
<div class="no no3">
|
||||||
|
<img src="./images/no3.png" alt="" class="ts">
|
||||||
|
<img src="./images/logo.png" alt="" class="tx">
|
||||||
|
<div src="./images/live.svga" loops="0" clearsAfterStop="true" class="svga"></div>
|
||||||
|
<p>
|
||||||
|
<span class="girl"><img src="./images/girl.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img class="icon1" src="./images/icon1.png" alt="">
|
||||||
|
<img class="icon2" src="./images/icon2.png" alt="">
|
||||||
|
</div>
|
||||||
|
<img src="" alt="" class="icon_gh">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
488
view/yinmeng/modules/ranks/js/index.js
Normal file
488
view/yinmeng/modules/ranks/js/index.js
Normal file
@@ -0,0 +1,488 @@
|
|||||||
|
let urlPrefix = getUrlPrefix()
|
||||||
|
let browser = checkVersion()
|
||||||
|
let env = EnvCheck();
|
||||||
|
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 listType = 1;//榜单类型
|
||||||
|
var datetype = 1;//时间类型 1 日 2 周 3 总 4 半小时 5 月 6 小时
|
||||||
|
var type = 2;//榜单类型 1 收礼榜 2 送礼榜 3 房间榜
|
||||||
|
var charmImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_charm_';
|
||||||
|
var experImgUrl = 'https://yinmeng-1318633625.cos.ap-guangzhou.myqcloud.com/new_exper_';
|
||||||
|
// 初始化函数
|
||||||
|
$(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)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
getRank(type, datetype);
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
// 获取榜单接口
|
||||||
|
function getRank (type, datetype) {
|
||||||
|
$('.list li').remove();
|
||||||
|
showLoading()
|
||||||
|
networkRequest({
|
||||||
|
type: 'GEt',
|
||||||
|
url: urlPrefix + '/allrank/geth5',
|
||||||
|
data: { type, datetype, uid: pubInfo.uid },
|
||||||
|
success (res) {
|
||||||
|
if (res.code === 200) {
|
||||||
|
var top3 = res.data.rankVoList.slice(0, 3);
|
||||||
|
var notTop3 = res.data.rankVoList.slice(3);
|
||||||
|
var arrAll = res.data.rankVoList;
|
||||||
|
// 处理前三
|
||||||
|
if (top3.length < 3) {
|
||||||
|
let arr = new Array(3 - top3.length).fill({
|
||||||
|
avatar: './images/logo.png',
|
||||||
|
nick: '虚位以待',
|
||||||
|
totalNum: "",
|
||||||
|
gender: '',
|
||||||
|
uid: '',
|
||||||
|
inMic: '',
|
||||||
|
inRoomUid: '',
|
||||||
|
})
|
||||||
|
top3.push(...arr)
|
||||||
|
}
|
||||||
|
top3.forEach((res, i) => {
|
||||||
|
if (res.nick == '虚位以待') {
|
||||||
|
$(`.header .topBox .no${i + 1} p span img`).hide();
|
||||||
|
$(`.header .topBox .no${i + 1} .icon`).hide();
|
||||||
|
$(`.header .topBox .no${i + 1} i`).hide();
|
||||||
|
$(`.header .topBox .no${i + 1} .zl`).hide();
|
||||||
|
} else {
|
||||||
|
$(`.header .topBox .no${i + 1} p span img`).show();
|
||||||
|
$(`.header .topBox .no${i + 1} .icon`).show();
|
||||||
|
$(`.header .topBox .no${i + 1} i`).show();
|
||||||
|
$(`.header .topBox .no${i + 1} .zl`).show();
|
||||||
|
}
|
||||||
|
if (type == 2) {
|
||||||
|
$(`.header .topBox .no${i + 1} .zl`).hide();
|
||||||
|
} else {
|
||||||
|
$(`.header .topBox .no${i + 1} .zl`).show();
|
||||||
|
}
|
||||||
|
$(`.header .topBox .no${i + 1} .ts`).attr('uid', res.uid);
|
||||||
|
$(`.header .topBox .no${i + 1} .ts`).attr('inRoomUid', res.inRoomUid);
|
||||||
|
$(`.header .topBox .no${i + 1} .ts`).attr('inMic', res.inMic);
|
||||||
|
$(`.header .topBox .no${i + 1} .tx`).attr('src', res.avatar);
|
||||||
|
$(`.header .topBox .no${i + 1} .zl`).attr('src', res.assist ? res.assist.avatar : './images/logo.png');
|
||||||
|
$(`.header .topBox .no${i + 1} p`).html(`${res.nick.length > 6 ? `${res.nick.slice(0, 6)}...` : res.nick}<span class="${res.gender == 1 ? 'boy' : 'girl'}"><img src="./images/${res.gender == 1 ? 'boy' : 'girl'}.png" alt=""></span>`);
|
||||||
|
$(`.header .topBox .no${i + 1} .icon .icon1`).attr('src', experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`);
|
||||||
|
$(`.header .topBox .no${i + 1} .icon .icon2`).attr('src', charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`);
|
||||||
|
if (i >= 1) {
|
||||||
|
$(`.header .topBox .no${i + 1} i`).text(`距上一名${unitProcessing((top3[i - 1].totalNum - res.totalNum), 10000, 1, 'W')}`);
|
||||||
|
}
|
||||||
|
if (res.inMic) {
|
||||||
|
$(`.header .topBox .no${i + 1} .svga`).show();
|
||||||
|
} else {
|
||||||
|
$(`.header .topBox .no${i + 1} .svga`).hide();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 处理非前三
|
||||||
|
var str = '';
|
||||||
|
notTop3.forEach((res, i) => {
|
||||||
|
|
||||||
|
str += `
|
||||||
|
<li>
|
||||||
|
<div class="num">${res.seqNo}</div>
|
||||||
|
<img src="${res.avatar}" alt="" class="tx" uid="${res.uid}" inRoomUid = '${res.inRoomUid}' inMic="${res.inMic}" ">
|
||||||
|
<div src="./images/live.svga" loops="0" clearsafterstop="true" class="svga svga${i}" style="display: ${res.inMic ? 'block' : 'none'};"></div>
|
||||||
|
<div class="nameBox">
|
||||||
|
<p>${res.nick.length > 7 ? `${res.nick.slice(0, 7)}...` : res.nick}
|
||||||
|
<span class="${res.gender == 1 ? 'boy' : 'girl'}"><img src="./images/${res.gender == 1 ? 'boy' : 'girl'}.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="${experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`}" alt="">
|
||||||
|
<img src="${charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`}" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right" style=display:${res.assist ? 'block' : 'none'}>
|
||||||
|
<img src="${res.assist ? res.assist.avatar : './images/logo.png'}" alt="">
|
||||||
|
<div class="nick">${res.assist ? res.assist.nick : ''}</div>
|
||||||
|
<p>最佳助力</p>
|
||||||
|
</div>
|
||||||
|
<div class="score">
|
||||||
|
<b>${unitProcessing((arrAll[0 + 2].totalNum - res.totalNum), 10000, 1, 'W')}</b><br>
|
||||||
|
<i>距上一名</i>
|
||||||
|
</div>
|
||||||
|
</li>`
|
||||||
|
})
|
||||||
|
$('.list').append(str);
|
||||||
|
notTop3.forEach((res, i) => {
|
||||||
|
var player = new SVGA.Player(`.svga${i}`);
|
||||||
|
var parser = new SVGA.Parser(`.svga${i}`); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
|
||||||
|
parser.load('./images/live.svga', function (videoItem) {
|
||||||
|
// 创建动画
|
||||||
|
player.setVideoItem(videoItem);
|
||||||
|
// 开始动画 后面api会讲到
|
||||||
|
player.startAnimation();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 处理自己榜单
|
||||||
|
$('.my .num').text(res.data.me.seqNo ? res.data.me.seqNo : '未上榜');
|
||||||
|
$('.my .tx').attr('src', res.data.me.avatar);
|
||||||
|
$('.my .p').text(res.data.me.nick);
|
||||||
|
$('.my .score b').text(unitProcessing(res.data.me.totalNum, 10000, 1, 'W'));
|
||||||
|
} else {
|
||||||
|
toastMsg(res.message)
|
||||||
|
}
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
},
|
||||||
|
error (err) {
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
toastMsg('网络错误，请退出重进')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取上期榜单接口
|
||||||
|
function getlastTop (type, datetype) {
|
||||||
|
showLoading()
|
||||||
|
networkRequest({
|
||||||
|
type: 'GEt',
|
||||||
|
url: urlPrefix + '/allrank/last/top3',
|
||||||
|
data: { type, datetype, uid: pubInfo.uid },
|
||||||
|
success (res) {
|
||||||
|
if (res.code === 200) {
|
||||||
|
var top3 = res.data.rankVoList.slice(0, 3);
|
||||||
|
// 处理前三
|
||||||
|
if (top3.length < 3) {
|
||||||
|
let arr = new Array(3 - top3.length).fill({
|
||||||
|
avatar: './images/logo.png',
|
||||||
|
nick: '虚位以待',
|
||||||
|
totalNum: "",
|
||||||
|
gender: '',
|
||||||
|
assist: {
|
||||||
|
avatar: './images/logo.png'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
top3.push(...arr)
|
||||||
|
}
|
||||||
|
top3.forEach((res, i) => {
|
||||||
|
console.log(res.nick);
|
||||||
|
if (res.nick == '虚位以待') {
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon`).hide();
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} i`).hide();
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon_gh`).hide();
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} p span`).hide();
|
||||||
|
console.log('123');
|
||||||
|
} else {
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} p span img`).show();
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon`).show();
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} i`).show();
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon_gh`).show();
|
||||||
|
}
|
||||||
|
if (listType == 3 || listType == 2) {
|
||||||
|
$('.lastTopThree .lastTopThree_in .box .no .icon_gh').show();
|
||||||
|
} else {
|
||||||
|
$('.lastTopThree .lastTopThree_in .box .no .icon_gh').hide();
|
||||||
|
}
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon_gh`).attr('src', res.assist ? res.assist.avatar : './images/logo.png')
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .ts`).attr('uid', res.uid);
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .ts`).attr('inRoomUid', res.inRoomUid);
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .tx`).attr('src', res.avatar);
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} p`).html(`${res.nick.length > 6 ? `${res.nick.slice(0, 6)}...` : res.nick}<span class="${res.gender == 1 ? 'boy' : 'girl'}" style="display:${res.nick == '虚位以待' ? 'none' : 'inline-block'};"><img src="./images/${res.gender == 1 ? 'boy' : 'girl'}.png" alt=""></span>`);
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon .icon1`).attr('src', experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`);
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .icon .icon2`).attr('src', charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`);
|
||||||
|
|
||||||
|
if (res.inMic) {
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .svga`).show();
|
||||||
|
} else {
|
||||||
|
$(`.lastTopThree .lastTopThree_in .box .no${i + 1} .svga`).hide();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
$('.lastTopThree').show();
|
||||||
|
} else {
|
||||||
|
toastMsg(res.message)
|
||||||
|
}
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
},
|
||||||
|
error (err) {
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
toastMsg('网络错误，请退出重进')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 获取工会榜单接口
|
||||||
|
function clanListRank () {
|
||||||
|
$('.list li').remove();
|
||||||
|
showLoading()
|
||||||
|
networkRequest({
|
||||||
|
type: 'GEt',
|
||||||
|
url: urlPrefix + '/clan/listRank',
|
||||||
|
success (res) {
|
||||||
|
if (res.code === 200) {
|
||||||
|
// 处理前三
|
||||||
|
var top3 = res.data.slice(0, 3);
|
||||||
|
if (top3.length < 3) {
|
||||||
|
let arr = new Array(3 - top3.length).fill({
|
||||||
|
avatar: './images/logo.png',
|
||||||
|
name: '虚位以待',
|
||||||
|
})
|
||||||
|
top3.push(...arr);
|
||||||
|
}
|
||||||
|
top3.forEach((res, i) => {
|
||||||
|
$(`.header .topBox .no${i + 1} .ts`).attr('uid', res.uid);
|
||||||
|
$(`.header .topBox .no${i + 1} .ts`).attr('inRoomUid', res.inRoomUid);
|
||||||
|
$(`.header .topBox .no${i + 1} .ts`).attr('inMic', res.inMic);
|
||||||
|
$(`.header .topBox .no${i + 1} .tx`).attr('src', res.avatar);
|
||||||
|
$(`.header .topBox .no${i + 1} .icon_gh`).attr('src', res.levelIcon);
|
||||||
|
$(`.header .topBox .no${i + 1} p`).html(`${res.name.length > 6 ? `${res.name.slice(0, 6)}...` : res.name}<span class="${res.gender == 1 ? 'boy' : 'girl'}"><img src="./images/${res.gender == 1 ? 'boy' : 'girl'}.png" alt=""></span>`);
|
||||||
|
$(`.header .topBox .no${i + 1} .icon .icon1`).attr('src', experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`);
|
||||||
|
$(`.header .topBox .no${i + 1} .icon .icon2`).attr('src', charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`);
|
||||||
|
if (i >= 1) {
|
||||||
|
$(`.header .topBox .no${i + 1} i`).text(`距上一名${unitProcessing((top3[i - 1].totalNum - res.totalNum), 10000, 1, 'W')}`);
|
||||||
|
}
|
||||||
|
if (res.inMic) {
|
||||||
|
$(`.header .topBox .no${i + 1} .svga`).show();
|
||||||
|
} else {
|
||||||
|
$(`.header .topBox .no${i + 1} .svga`).hide();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 处理非前三
|
||||||
|
var notTop3 = res.data.slice(3);
|
||||||
|
var str = '';
|
||||||
|
notTop3.forEach((res, i) => {
|
||||||
|
str += `
|
||||||
|
<li>
|
||||||
|
<div class="num">${i + 4}</div>
|
||||||
|
<img src="${res.avatar}" alt="" class="tx" uid="${res.uid}" inRoomUid = '${res.inRoomUid}' inMic="${res.inMic}" ">
|
||||||
|
<div src="./images/live.svga" loops="0" clearsAfterStop="true" class="svga" style="display: ${res.inMic ? 'block' : 'none'};"></div>
|
||||||
|
<div class="nameBox">
|
||||||
|
<p>${res.name.length > 7 ? `${res.name.slice(0, 7)}...` : res.name}
|
||||||
|
<span class="${res.gender == 1 ? 'boy' : 'girl'}"><img src="./images/${res.gender == 1 ? 'boy' : 'girl'}.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img style="display: block;" src="${res.levelIcon}" alt="" class="icon_gh">
|
||||||
|
</li>`
|
||||||
|
})
|
||||||
|
$('.list').append(str);
|
||||||
|
} else {
|
||||||
|
toastMsg(res.message)
|
||||||
|
}
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
},
|
||||||
|
error (err) {
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
toastMsg('网络错误，请退出重进')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 榜单切换按钮
|
||||||
|
$('.header .tab div').click(function () {
|
||||||
|
var i = $(this).index() + 1;
|
||||||
|
listType = i;
|
||||||
|
$('.header .timeTab div').css('color', 'rgba(255, 255, 255, 0.9)');
|
||||||
|
$('.header .tab div').removeClass('active1').removeClass('active2').removeClass('active3').removeClass('active4');
|
||||||
|
$('.header .tab div').eq(i - 1).addClass(`active${i}`);
|
||||||
|
$('.header .timeTab div').removeClass('divBg1').removeClass('divBg2').removeClass('divBg3')
|
||||||
|
$('.header .timeTab div').removeClass('active1').removeClass('active2').removeClass('active3').removeClass('active4')
|
||||||
|
$('.header .timeTab div').addClass(`divBg${i}`);
|
||||||
|
$('.header').removeClass('header2').removeClass('header3').removeClass('header4');
|
||||||
|
$('.header .listLast span').removeClass('sp1').removeClass('sp2').removeClass('sp3');
|
||||||
|
$('.header .listLast span').addClass(`sp${i}`)
|
||||||
|
$('.header').addClass(`header${i}`);
|
||||||
|
$('.header .topBox').removeClass('topBox1').removeClass('topBox2').removeClass('topBox3').removeClass('topBox4');
|
||||||
|
$('.header .topBox').addClass(`topBox${i}`);
|
||||||
|
$('.header .listLast').show();
|
||||||
|
$('.my').show();
|
||||||
|
$('.list li .right').hide();
|
||||||
|
$('.header .topBox .no .zl').hide();
|
||||||
|
$('.list li .icon_gh').hide();
|
||||||
|
$('.list li .score').show();
|
||||||
|
$('.list li .nameBox .icon').show();
|
||||||
|
$('.list li .nameBox p span').show();
|
||||||
|
$('.header .topBox .no .icon_gh').hide();
|
||||||
|
$('.header .topBox .no .svga').show()
|
||||||
|
$('.header .topBox .no .icon').show()
|
||||||
|
$('.header .topBox .no p span').show()
|
||||||
|
$('.header .topBox .no i').show()
|
||||||
|
if (i == 1) {
|
||||||
|
$('.my .score i').text('爱意值');
|
||||||
|
type = 2;
|
||||||
|
datetype = 1;
|
||||||
|
getRank(type, datetype);
|
||||||
|
} else if (i == 2) {
|
||||||
|
$('.my .score i').text('魅力值');
|
||||||
|
$('.list li .right').show();
|
||||||
|
$('.header .topBox .no .zl').show();
|
||||||
|
type = 1;
|
||||||
|
datetype = 1;
|
||||||
|
getRank(type, datetype);
|
||||||
|
}
|
||||||
|
if (i == 3) {
|
||||||
|
$('.list li .right').show();
|
||||||
|
$('.header .topBox .no .zl').show();
|
||||||
|
$('.header .timeTab').addClass('timeTab2');
|
||||||
|
$('.header .timeTab').show();
|
||||||
|
$('.header .timeTab div').eq(0).addClass(`active${i}`);
|
||||||
|
$('.header .timeTab div').eq(0).css('color', `${listType == 1 ? '#FF5391' : listType == 2 ? '#A34DFF' : listType == 3 ? '#5C68F2' : ''}`).siblings().css('color', 'rgba(255, 255, 255, 0.9)')
|
||||||
|
$('.my .score i').text('房间值');
|
||||||
|
$('.header .topBox .no p span').hide();
|
||||||
|
type = 3;
|
||||||
|
datetype = 6;
|
||||||
|
getRank(type, datetype);
|
||||||
|
} else if (i == 4) {
|
||||||
|
$('.header .listLast').hide();
|
||||||
|
$('.header .timeTab').hide();
|
||||||
|
$('.header .timeTab div').eq(1).addClass(`active${i}`);
|
||||||
|
$('.my').hide();
|
||||||
|
$('.list li .icon_gh').show();
|
||||||
|
$('.list li .score').hide();
|
||||||
|
$('.list li .nameBox .icon').hide();
|
||||||
|
$('.list li .nameBox p span').hide();
|
||||||
|
$('.header .topBox .no .icon_gh').show();
|
||||||
|
$('.header .topBox .no .svga').hide()
|
||||||
|
$('.header .topBox .no .icon').hide()
|
||||||
|
$('.header .topBox .no p span').hide()
|
||||||
|
$('.header .topBox .no i').hide()
|
||||||
|
clanListRank();
|
||||||
|
} else {
|
||||||
|
$('.header .timeTab').show();
|
||||||
|
$('.header .timeTab').removeClass('timeTab2');
|
||||||
|
$('.header .timeTab div').eq(1).addClass(`active${i}`);
|
||||||
|
$('.header .timeTab div').eq(1).css('color', `${listType == 1 ? '#FF5391' : listType == 2 ? '#A34DFF' : listType == 3 ? '#5C68F2' : ''}`).siblings().css('color', 'rgba(255, 255, 255, 0.9)')
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
})
|
||||||
|
// 时间周期榜单切换
|
||||||
|
$('.header .timeTab div').click(function () {
|
||||||
|
var i = $(this).index() + 1;
|
||||||
|
console.log(i);
|
||||||
|
$('.header .timeTab div').removeClass('active1').removeClass('active2').removeClass('active3').removeClass('active4')
|
||||||
|
$('.header .timeTab div').eq(i - 1).addClass(`active${i}`);
|
||||||
|
$(this).css('color', `${listType == 1 ? '#FF5391' : listType == 2 ? '#A34DFF' : listType == 3 ? '#5C68F2' : ''}`).siblings().css('color', 'rgba(255, 255, 255, 0.9)')
|
||||||
|
if (i == 1) {
|
||||||
|
datetype = 6;
|
||||||
|
} else if (i == 2) {
|
||||||
|
datetype = 1;
|
||||||
|
} else if (i == 3) {
|
||||||
|
datetype = 2;
|
||||||
|
} else if (i == 4) {
|
||||||
|
datetype = 5;
|
||||||
|
};
|
||||||
|
getRank(type, datetype);
|
||||||
|
})
|
||||||
|
// 关闭上期前三
|
||||||
|
$('.lastTopThree').click(function () {
|
||||||
|
$('.lastTopThree').hide();
|
||||||
|
})
|
||||||
|
// 打开上期前三
|
||||||
|
$('.header .listLast').click(function () {
|
||||||
|
getlastTop(type, datetype);
|
||||||
|
})
|
||||||
|
// 点击前三按钮
|
||||||
|
$('.header .topBox .no .ts').on('click', function () {
|
||||||
|
var uid = $(this).attr('uid');
|
||||||
|
var inRoomUid = $(this).attr('inRoomUid');
|
||||||
|
var inMic = $(this).attr('inMic');
|
||||||
|
if (listType == 4) {
|
||||||
|
console.log('工会');
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (listType == 3) {
|
||||||
|
if (browser.ios) {
|
||||||
|
window.webkit.messageHandlers.openRoom.postMessage(uid);
|
||||||
|
} else if (browser.android) {
|
||||||
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
|
window.androidJsObj.openRoom(uid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('房间3', uid, inRoomUid, inMic);
|
||||||
|
} else if (inMic == "true") {
|
||||||
|
if (browser.ios) {
|
||||||
|
window.webkit.messageHandlers.openRoom.postMessage(inRoomUid);
|
||||||
|
} else if (browser.android) {
|
||||||
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
|
window.androidJsObj.openRoom(inRoomUid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('房间', uid, inRoomUid, inMic);
|
||||||
|
} else {
|
||||||
|
if (browser.ios) {
|
||||||
|
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||||
|
} else if (browser.android) {
|
||||||
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
|
window.androidJsObj.openPersonPage(uid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('信息页', uid, inRoomUid, inMic);
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
// 点击非前三按钮
|
||||||
|
$('.list').on('click', 'li .tx', function () {
|
||||||
|
var uid = $(this).attr('uid');
|
||||||
|
var inRoomUid = $(this).attr('inRoomUid');
|
||||||
|
var inMic = $(this).attr('inMic');
|
||||||
|
if (listType == 4) {
|
||||||
|
console.log('工会');
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (listType == 3) {
|
||||||
|
if (browser.ios) {
|
||||||
|
window.webkit.messageHandlers.openRoom.postMessage(uid);
|
||||||
|
} else if (browser.android) {
|
||||||
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
|
window.androidJsObj.openRoom(uid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('房间3', uid, inRoomUid, inMic);
|
||||||
|
} else if (inMic == "true") {
|
||||||
|
if (browser.ios) {
|
||||||
|
window.webkit.messageHandlers.openRoom.postMessage(inRoomUid);
|
||||||
|
} else if (browser.android) {
|
||||||
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
|
window.androidJsObj.openRoom(inRoomUid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('房间', uid, inRoomUid, inMic);
|
||||||
|
} else {
|
||||||
|
if (browser.ios) {
|
||||||
|
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||||
|
} else if (browser.android) {
|
||||||
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
|
window.androidJsObj.openPersonPage(uid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('信息页', uid, inRoomUid, inMic);
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
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 class="sp1">我是很长的...</span>
|
||||||
|
<span class="sp boy"><img src="./images/boy.png" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="./images/icon1.png" alt="" class="icon1">
|
||||||
|
<img src="./images/icon2.png" alt="" class="icon2">
|
||||||
|
</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 class="sp1"></span>
|
||||||
|
<span class="sp"><img src="" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="" alt="" class="icon1">
|
||||||
|
<img src="" alt="" class="icon2">
|
||||||
|
</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 class="sp1"></span>
|
||||||
|
<span class="sp boy"><img src="" alt=""></span>
|
||||||
|
</p>
|
||||||
|
<div class="icon">
|
||||||
|
<img src="" alt="" class="icon1">
|
||||||
|
<img src="" alt="" class="icon2">
|
||||||
|
</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>
|
||||||
215
view/yinmeng/modules/roomRank/js/index.js
Normal file
215
view/yinmeng/modules/roomRank/js/index.js
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
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 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()
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
getRankingsWealth();
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
// 榜单切换
|
||||||
|
$('.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 () {
|
||||||
|
showLoading()
|
||||||
|
networkRequest({
|
||||||
|
type: 'GEt',
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
},
|
||||||
|
error (err) {
|
||||||
|
hideLoading(layerIndex)
|
||||||
|
toastMsg('网络错误，请退出重进')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 魅力榜接口
|
||||||
|
function getReciveRankingsWealth () {
|
||||||
|
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) {
|
||||||
|
$('.largestBox ul li').remove();
|
||||||
|
// 处理前三
|
||||||
|
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('uid', res.uid);
|
||||||
|
$(`.largestBox .top3 .no${i + 1} .box p .sp1`).text(res.nick.length > 6 ? res.nick.slice(0, 6) + '...' : res.nick);
|
||||||
|
$(`.largestBox .top3 .no${i + 1} .box p .sp`).removeClass('boy').removeClass('woman')
|
||||||
|
$(`.largestBox .top3 .no${i + 1} .box p .sp`).addClass(`${res.gender == 1 ? 'boy' : 'woman'}`);
|
||||||
|
$(`.largestBox .top3 .no${i + 1} .box p .sp img`).attr('src', res.gender == 1 ? './images/boy.png' : './images/woman.png');
|
||||||
|
$(`.largestBox .top3 .no${i + 1} .box .icon .icon1`).attr('src', experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`)
|
||||||
|
$(`.largestBox .top3 .no${i + 1} .box .icon .icon2`).attr('src', charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`)
|
||||||
|
$(`.largestBox .top3 .no${i + 1} .box .score`).text(unitProcessing(res.goldAmount, 10000, 1, 'W'));
|
||||||
|
})
|
||||||
|
// 处理非前三
|
||||||
|
var notTop3 = res.data.rankings.slice(3);
|
||||||
|
var str = '';
|
||||||
|
notTop3.forEach((res, i) => {
|
||||||
|
str += `
|
||||||
|
<li>
|
||||||
|
<div class="num">${i + 4}</div>
|
||||||
|
<img src="${res.avatar}" uid=${res.uid} alt="" class="tx">
|
||||||
|
<div class="userInfo">
|
||||||
|
<p>${res.nick}</p>
|
||||||
|
<img src="${experImgUrl + `${res.experSeq <= 9 ? '0' + res.experSeq : res.experSeq}.png`}" alt="" class="icon1">
|
||||||
|
<img src="${charmImgUrl + `${res.charmSeq <= 9 ? '0' + res.charmSeq : res.charmSeq}.png`}" alt="" class="icon2">
|
||||||
|
</div>
|
||||||
|
<div class="score">
|
||||||
|
<p>${unitProcessing(res.goldAmount, 10000, 1, 'W')}</p>
|
||||||
|
<span>${num == 1 ? '爱意值' : '魅力值'}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
$('.largestBox ul').append(str);
|
||||||
|
}
|
||||||
|
// 点击前三跳转房间
|
||||||
|
$('.largestBox').on('click', '.top3 .no .box .ts', function () {
|
||||||
|
var uid = $(this).attr('uid');
|
||||||
|
if (browser.ios) {
|
||||||
|
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||||
|
} else if (browser.android) {
|
||||||
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
|
window.androidJsObj.openPersonPage(uid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 点击非前三跳转房间
|
||||||
|
$('.largestBox').on('click', 'ul li .tx', function () {
|
||||||
|
var uid = $(this).attr('uid');
|
||||||
|
if (browser.ios) {
|
||||||
|
window.webkit.messageHandlers.openPersonPage.postMessage(uid);
|
||||||
|
} else if (browser.android) {
|
||||||
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
||||||
|
window.androidJsObj.openPersonPage(uid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -1,341 +1,550 @@
|
|||||||
@font-face {
|
html,
|
||||||
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 {
|
body {
|
||||||
width: 100%;
|
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;
|
position: fixed;
|
||||||
top: 0;
|
top: 0.26667rem;
|
||||||
left: 0;
|
left: 0.32rem;
|
||||||
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;
|
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
width: 0.82667rem;
|
||||||
|
height: 0.82667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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 {
|
.back p {
|
||||||
position: relative;
|
color: #fff;
|
||||||
top: -2.50667rem;
|
font-size: 0.42667rem;
|
||||||
width: 2.13333rem;
|
position: absolute;
|
||||||
height: 2.13333rem;
|
width: 9rem;
|
||||||
border-radius: 50%;
|
left: 0;
|
||||||
}
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
.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;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.42667rem;
|
line-height: 0.82667rem;
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: 0.53333rem;
|
|
||||||
margin-right: 0.74667rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .rank_wrap ul li .others_avatar {
|
.largestBox {
|
||||||
width: 1.17333rem;
|
width: 10rem;
|
||||||
height: 1.17333rem;
|
min-height: 15.38667rem;
|
||||||
margin-right: 0.32rem;
|
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%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .rank_wrap ul li .others_nick {
|
.largestBox .box .userInfo .mvp span {
|
||||||
flex: 1;
|
width: 0.90667rem;
|
||||||
font-size: 0.37333rem;
|
height: 0.29333rem;
|
||||||
font-weight: bold;
|
line-height: 0.29333rem;
|
||||||
color: #333;
|
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 {
|
.largestBox .box .userInfo .member {
|
||||||
font-size: 0.32rem;
|
width: 2.29333rem;
|
||||||
color: #CCCCCC;
|
height: 0.69333rem;
|
||||||
text-align: right;
|
border-radius: 0.69333rem;
|
||||||
margin-right: 0.53333rem;
|
position: absolute;
|
||||||
|
left: 1.2rem;
|
||||||
|
top: 1.17333rem;
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .rank_wrap ul li .others_num span {
|
.largestBox .box .userInfo .member img {
|
||||||
font-family: 'din';
|
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-size: 0.42667rem;
|
||||||
font-weight: bold;
|
vertical-align: middle;
|
||||||
color: #B95CFF;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 9999;
|
background: url(../images/my.png) no-repeat;
|
||||||
display: flex;
|
background-size: 100% 100%;
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1.70667rem;
|
height: 2.13333rem;
|
||||||
background-color: #fff;
|
box-sizing: border-box;
|
||||||
box-shadow: 0 -0.02667rem 0.10667rem #F4F4F4;
|
padding: 0 0.53333rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap .mine .mine_index {
|
.my .num {
|
||||||
width: 0.96rem;
|
height: 0.64rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.32rem;
|
color: #E6ECF5;
|
||||||
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';
|
|
||||||
font-size: 0.42667rem;
|
font-size: 0.42667rem;
|
||||||
font-weight: bold;
|
font-weight: 500;
|
||||||
color: #B95CFF;
|
float: left;
|
||||||
margin-top: 0.05333rem;
|
margin-top: 0.74667rem;
|
||||||
|
margin-right: 0.42667rem;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
.my .tx {
|
||||||
display: none;
|
width: 1.28rem;
|
||||||
|
height: 1.28rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 0.42667rem;
|
||||||
|
margin-right: 0.32rem;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score {
|
||||||
|
float: left;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 0.58667rem;
|
||||||
|
width: 3.73333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score p {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.13333rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score span b {
|
||||||
|
color: #E6ECF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .but {
|
||||||
|
width: 1.76rem;
|
||||||
|
height: 0.74667rem;
|
||||||
|
line-height: 0.74667rem;
|
||||||
|
margin-top: 0.56rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 500;
|
||||||
|
background: url(../images/myBut.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,321 +1,560 @@
|
|||||||
@function px2rem($px, $rem:75) {
|
@function px2rem($px) {
|
||||||
@return $px / $rem+rem;
|
@return $px / 75+rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face{
|
html,
|
||||||
font-family: 'pingfang-bold';
|
body {
|
||||||
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%;
|
width: 100%;
|
||||||
// font-family: 'pingfang-bold';
|
// background: linear-gradient(0deg, #0F2E69 0%, #0B1836 99%);
|
||||||
// background-color: #fff;
|
background: #0B1836;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap{
|
.layui-m-layershade {
|
||||||
.tab_wrap{
|
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;
|
position: fixed;
|
||||||
top: 0;
|
top: px2rem(20);
|
||||||
left: 0;
|
left: px2rem(24);
|
||||||
z-index: 999;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(106, );
|
|
||||||
background: url('../images/single/top.png') no-repeat 0 0/100% 100%;
|
|
||||||
.tab_contain{
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(88, );
|
|
||||||
padding-top: px2rem(16, );
|
|
||||||
// box-sizing: border-box;
|
|
||||||
margin-bottom: px2rem(8, );
|
|
||||||
p{
|
|
||||||
position: relative;
|
|
||||||
height: px2rem(50, );
|
|
||||||
line-height: px2rem(50, );
|
|
||||||
padding: 0 px2rem(56, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: px2rem(36, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
&.active{
|
|
||||||
font-size: px2rem(36, );
|
|
||||||
&::after{
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: px2rem(-12, );
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: px2rem(32, );
|
|
||||||
height: px2rem(8, );
|
|
||||||
border-radius: px2rem(8, );
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rule_icon{
|
|
||||||
position: absolute;
|
|
||||||
right: px2rem(30, );
|
|
||||||
width: px2rem(40, );
|
|
||||||
height: px2rem(40, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rank_wrap{
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
margin-top: px2rem(106, );
|
|
||||||
.time_wrap{
|
|
||||||
position: absolute;
|
|
||||||
top: px2rem(440, );
|
|
||||||
left: px2rem(0, );
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 px2rem(30, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
p{
|
|
||||||
font-size: px2rem(20, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
height: px2rem(28, );
|
|
||||||
line-height: px2rem(28, );
|
|
||||||
span{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.top_three_wrap{
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(434, );
|
|
||||||
background: url('../images/single/topthree-bg.png') no-repeat 0 0/100% 100%;
|
|
||||||
// margin-top: px2rem(160, );
|
|
||||||
padding-top: px2rem(54, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
.top_three_item{
|
|
||||||
position: absolute;
|
|
||||||
width: px2rem(216, );
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
&:first-child{
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
&:nth-child(2){
|
|
||||||
left: px2rem(40, );
|
|
||||||
}
|
|
||||||
&:nth-child(2), &:nth-child(3){
|
|
||||||
.avatar{
|
|
||||||
width: px2rem(176, );
|
|
||||||
height: px2rem(168, );
|
|
||||||
margin-top: px2rem(92, );
|
|
||||||
p{
|
|
||||||
background-image: url('../images/single/second.png');
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
top: px2rem(-160, );
|
|
||||||
width: px2rem(132, );
|
|
||||||
height: px2rem(132, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:nth-child(3){
|
|
||||||
right: px2rem(40, );
|
|
||||||
.avatar{
|
|
||||||
width: px2rem(160, );
|
|
||||||
p{
|
|
||||||
background-image: url('../images/single/third.png');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.avatar{
|
|
||||||
width: px2rem(216, );
|
|
||||||
height: px2rem(210, );
|
|
||||||
margin: px2rem(0, ) auto px2rem(8, );
|
|
||||||
p{
|
|
||||||
position: relative;
|
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
width: px2rem(62);
|
||||||
|
height: px2rem(62);
|
||||||
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url('../images/single/first.png') no-repeat 0 0/100% 100%;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
position: relative;
|
|
||||||
top: px2rem(-188, );
|
|
||||||
width: px2rem(160, );
|
|
||||||
height: px2rem(160, );
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nick{
|
|
||||||
height: px2rem(40, );
|
|
||||||
line-height: px2rem(40, );
|
|
||||||
font-size: px2rem(28, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.num{
|
|
||||||
font-size: px2rem(20, );
|
|
||||||
color: #ccc;
|
|
||||||
span{
|
|
||||||
display: inline-block;
|
|
||||||
font-family: 'din';
|
|
||||||
font-size: px2rem(24, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: px2rem(2, );
|
|
||||||
margin-bottom: px2rem(6, );
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
width: px2rem(56, );
|
|
||||||
height: px2rem(68, );
|
|
||||||
margin-top: px2rem(20, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc{
|
p {
|
||||||
display: flex;
|
color: #fff;
|
||||||
margin-top: px2rem(40, );
|
font-size: px2rem(32);
|
||||||
margin-bottom: px2rem(24, );
|
position: absolute;
|
||||||
p{
|
width: 9rem;
|
||||||
font-size: px2rem(20, );
|
left: 0;
|
||||||
font-weight: bold;
|
top: 0;
|
||||||
color: #999;
|
height: 100%;
|
||||||
&: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;
|
text-align: center;
|
||||||
font-size: px2rem(32, );
|
line-height: px2rem(62);
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: px2rem(40, );
|
|
||||||
margin-right: px2rem(56, );
|
|
||||||
}
|
}
|
||||||
.others_avatar{
|
}
|
||||||
width: px2rem(88, );
|
|
||||||
height: px2rem(88, );
|
.largestBox {
|
||||||
margin-right: px2rem(24, );
|
width: px2rem(750);
|
||||||
img{
|
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%;
|
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);
|
||||||
}
|
}
|
||||||
.others_nick{
|
|
||||||
flex: 1;
|
|
||||||
font-size: px2rem(28, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
}
|
||||||
.others_num{
|
|
||||||
font-size: px2rem(24, );
|
.member {
|
||||||
color: #CCCCCC;
|
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;
|
text-align: right;
|
||||||
margin-right: px2rem(40, );
|
|
||||||
span{
|
p {
|
||||||
font-family: 'din';
|
margin-bottom: px2rem(10);
|
||||||
font-size: px2rem(32, );
|
}
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.mine{
|
.my {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(154);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 9999;
|
background: url(../images/my.png) no-repeat;
|
||||||
display: flex;
|
background-size: 100% 100%;
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: px2rem(128, );
|
height: px2rem(160);
|
||||||
background-color: #fff;
|
box-sizing: border-box;
|
||||||
box-shadow: 0 px2rem(-2, ) px2rem(8, ) #F4F4F4;
|
padding: 0 px2rem(40);
|
||||||
.mine_index{
|
|
||||||
width: px2rem(72, );
|
.num {
|
||||||
|
// width: px2rem(48);
|
||||||
|
height: px2rem(48);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: px2rem(24, );
|
color: #E6ECF5;
|
||||||
font-weight: bold;
|
font-size: px2rem(32);
|
||||||
color: #999;
|
font-weight: 500;
|
||||||
margin-left: px2rem(20, );
|
float: left;
|
||||||
|
margin-top: px2rem(56);
|
||||||
|
margin-right: px2rem(32);
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
.mine_avatar{
|
|
||||||
width: px2rem(88, );
|
.tx {
|
||||||
height: px2rem(88, );
|
width: px2rem(96);
|
||||||
|
height: px2rem(96);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin: 0 px2rem(24, );
|
margin-top: px2rem(32);
|
||||||
|
margin-right: px2rem(24);
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
.mine_nick{
|
|
||||||
flex: 1;
|
.score {
|
||||||
font-size: px2rem(28, );
|
float: left;
|
||||||
font-weight: bold;
|
color: #E6ECF5;
|
||||||
color: #333;
|
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;
|
||||||
}
|
}
|
||||||
.mine_num{
|
|
||||||
text-align: right;
|
span {
|
||||||
font-size: px2rem(24, );
|
color: #B1B5BD;
|
||||||
color: #ccc;
|
font-size: px2rem(22);
|
||||||
margin-right: px2rem(40, );
|
font-weight: 400;
|
||||||
p{
|
display: block;
|
||||||
font-family: 'din';
|
|
||||||
font-size: px2rem(32, );
|
b {
|
||||||
font-weight: bold;
|
color: #E6ECF5;
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: px2rem(4, );
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,295 +0,0 @@
|
|||||||
@font-face {
|
|
||||||
font-family: "pingfang-bold";
|
|
||||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
|
||||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: "pingfang-medium";
|
|
||||||
src: url("../../../common/fonts/PingFang Medium.ttf");
|
|
||||||
src: url("../../../common/fonts/PingFang Medium.ttf") format("woff"), url("../../../common/fonts/PingFang Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang Medium.ttf") format("svg");
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: "din";
|
|
||||||
src: url("../../../common/fonts/DINCond-Medium.ttf");
|
|
||||||
src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap .tab_wrap {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 999;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.4133333333rem;
|
|
||||||
background: url("../images/single/top.png") no-repeat 0 0/100% 100%;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.1733333333rem;
|
|
||||||
padding-top: 0.2133333333rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: -0.1066666667rem;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain p {
|
|
||||||
position: relative;
|
|
||||||
height: 0.6666666667rem;
|
|
||||||
line-height: 0.6666666667rem;
|
|
||||||
padding: 0 0.7466666667rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 0.48rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain p.active {
|
|
||||||
font-size: 0.48rem;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain p.active::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: -0.16rem;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 0.4266666667rem;
|
|
||||||
height: 0.1066666667rem;
|
|
||||||
border-radius: 0.1066666667rem;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.wrap .tab_wrap .tab_contain .rule_icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 0.4rem;
|
|
||||||
width: 0.5333333333rem;
|
|
||||||
height: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap {
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .time_wrap {
|
|
||||||
position: absolute;
|
|
||||||
top: 5.8666666667rem;
|
|
||||||
left: 0rem;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 0.4rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .time_wrap p {
|
|
||||||
font-size: 0.2666666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
height: 0.3733333333rem;
|
|
||||||
line-height: 0.3733333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .time_wrap p span {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 5.7866666667rem;
|
|
||||||
background: url("../images/single/topthree-bg.png") no-repeat 0 0/100% 100%;
|
|
||||||
padding-top: 0.72rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item {
|
|
||||||
position: absolute;
|
|
||||||
width: 2.88rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:first-child {
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) {
|
|
||||||
left: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
|
|
||||||
width: 2.3466666667rem;
|
|
||||||
height: 2.24rem;
|
|
||||||
margin-top: 1.2266666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar p, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
|
|
||||||
background-image: url("../images/single/second.png");
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2) .avatar img, .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar img {
|
|
||||||
top: -2.1333333333rem;
|
|
||||||
width: 1.76rem;
|
|
||||||
height: 1.76rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) {
|
|
||||||
right: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar {
|
|
||||||
width: 2.1333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
|
|
||||||
background-image: url("../images/single/third.png");
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar {
|
|
||||||
width: 2.88rem;
|
|
||||||
height: 2.8rem;
|
|
||||||
margin: 0rem auto 0.1066666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar p {
|
|
||||||
position: relative;
|
|
||||||
z-index: 99;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url("../images/single/first.png") no-repeat 0 0/100% 100%;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar img {
|
|
||||||
position: relative;
|
|
||||||
top: -2.5066666667rem;
|
|
||||||
width: 2.1333333333rem;
|
|
||||||
height: 2.1333333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .nick {
|
|
||||||
height: 0.5333333333rem;
|
|
||||||
line-height: 0.5333333333rem;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .num {
|
|
||||||
font-size: 0.2666666667rem;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .num span {
|
|
||||||
display: inline-block;
|
|
||||||
font-family: "din";
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: 0.0266666667rem;
|
|
||||||
margin-bottom: 0.08rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .top_three_wrap .top_three_item .num img {
|
|
||||||
width: 0.7466666667rem;
|
|
||||||
height: 0.9066666667rem;
|
|
||||||
margin-top: 0.2666666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 0.5333333333rem;
|
|
||||||
margin-bottom: 0.32rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc p {
|
|
||||||
font-size: 0.2666666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc p:first-child {
|
|
||||||
margin-left: 0.4rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc p:nth-child(2) {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 0.9333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap .desc p:last-child {
|
|
||||||
margin-right: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.4266666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .index {
|
|
||||||
width: 0.2666666667rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: 0.5333333333rem;
|
|
||||||
margin-right: 0.7466666667rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_avatar {
|
|
||||||
width: 1.1733333333rem;
|
|
||||||
height: 1.1733333333rem;
|
|
||||||
margin-right: 0.32rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_avatar img {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_nick {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_num {
|
|
||||||
font-size: 0.32rem;
|
|
||||||
color: #CCCCCC;
|
|
||||||
text-align: right;
|
|
||||||
margin-right: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .rank_wrap ul li .others_num span {
|
|
||||||
font-family: "din";
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
}
|
|
||||||
.wrap .mine {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.7066666667rem;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 -0.0266666667rem 0.1066666667rem #F4F4F4;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_index {
|
|
||||||
width: 0.96rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: 0.2666666667rem;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_avatar {
|
|
||||||
width: 1.1733333333rem;
|
|
||||||
height: 1.1733333333rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 0.32rem;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_nick {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.3733333333rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_num {
|
|
||||||
text-align: right;
|
|
||||||
font-size: 0.32rem;
|
|
||||||
color: #ccc;
|
|
||||||
margin-right: 0.5333333333rem;
|
|
||||||
}
|
|
||||||
.wrap .mine .mine_num p {
|
|
||||||
font-family: "din";
|
|
||||||
font-size: 0.4266666667rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: 0.0533333333rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*# sourceMappingURL=hourRank1.css.map */
|
|
||||||
@@ -1,321 +0,0 @@
|
|||||||
@function px2rem($px, $rem:75) {
|
|
||||||
@return $px / $rem+rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family: 'pingfang-bold';
|
|
||||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
|
||||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
|
||||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
|
||||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family: 'pingfang-medium';
|
|
||||||
src: url('../../../common/fonts/PingFang\ Medium.ttf');
|
|
||||||
src: url('../../../common/fonts/PingFang\ Medium.ttf') format('woff'),
|
|
||||||
url('../../../common/fonts/PingFang\ Medium.ttf') format('truetype'),
|
|
||||||
url('../../../common/fonts/PingFang\ Medium.ttf') format('svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family: 'din';
|
|
||||||
src: url('../../../common/fonts/DINCond-Medium.ttf');
|
|
||||||
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
|
|
||||||
url('../../../common/fonts/DINCond-Medium.ttf') format('truetype'),
|
|
||||||
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
body{
|
|
||||||
width: 100%;
|
|
||||||
// font-family: 'pingfang-bold';
|
|
||||||
// background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap{
|
|
||||||
.tab_wrap{
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 999;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(106, );
|
|
||||||
background: url('../images/single/top.png') no-repeat 0 0/100% 100%;
|
|
||||||
.tab_contain{
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(88, );
|
|
||||||
padding-top: px2rem(16, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: px2rem(-8, );
|
|
||||||
p{
|
|
||||||
position: relative;
|
|
||||||
height: px2rem(50, );
|
|
||||||
line-height: px2rem(50, );
|
|
||||||
padding: 0 px2rem(56, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: px2rem(36, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
&.active{
|
|
||||||
font-size: px2rem(36, );
|
|
||||||
&::after{
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: px2rem(-12, );
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: px2rem(32, );
|
|
||||||
height: px2rem(8, );
|
|
||||||
border-radius: px2rem(8, );
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rule_icon{
|
|
||||||
position: absolute;
|
|
||||||
right: px2rem(30, );
|
|
||||||
width: px2rem(40, );
|
|
||||||
height: px2rem(40, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rank_wrap{
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
// margin-top: px2rem(106, );
|
|
||||||
.time_wrap{
|
|
||||||
position: absolute;
|
|
||||||
top: px2rem(440, );
|
|
||||||
left: px2rem(0, );
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 px2rem(30, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
p{
|
|
||||||
font-size: px2rem(20, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
height: px2rem(28, );
|
|
||||||
line-height: px2rem(28, );
|
|
||||||
span{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.top_three_wrap{
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(434, );
|
|
||||||
background: url('../images/single/topthree-bg.png') no-repeat 0 0/100% 100%;
|
|
||||||
// margin-top: px2rem(160, );
|
|
||||||
padding-top: px2rem(54, );
|
|
||||||
box-sizing: border-box;
|
|
||||||
.top_three_item{
|
|
||||||
position: absolute;
|
|
||||||
width: px2rem(216, );
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
&:first-child{
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
&:nth-child(2){
|
|
||||||
left: px2rem(40, );
|
|
||||||
}
|
|
||||||
&:nth-child(2), &:nth-child(3){
|
|
||||||
.avatar{
|
|
||||||
width: px2rem(176, );
|
|
||||||
height: px2rem(168, );
|
|
||||||
margin-top: px2rem(92, );
|
|
||||||
p{
|
|
||||||
background-image: url('../images/single/second.png');
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
top: px2rem(-160, );
|
|
||||||
width: px2rem(132, );
|
|
||||||
height: px2rem(132, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:nth-child(3){
|
|
||||||
right: px2rem(40, );
|
|
||||||
.avatar{
|
|
||||||
width: px2rem(160, );
|
|
||||||
p{
|
|
||||||
background-image: url('../images/single/third.png');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.avatar{
|
|
||||||
width: px2rem(216, );
|
|
||||||
height: px2rem(210, );
|
|
||||||
margin: px2rem(0, ) auto px2rem(8, );
|
|
||||||
p{
|
|
||||||
position: relative;
|
|
||||||
z-index: 99;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url('../images/single/first.png') no-repeat 0 0/100% 100%;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
position: relative;
|
|
||||||
top: px2rem(-188, );
|
|
||||||
width: px2rem(160, );
|
|
||||||
height: px2rem(160, );
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nick{
|
|
||||||
height: px2rem(40, );
|
|
||||||
line-height: px2rem(40, );
|
|
||||||
font-size: px2rem(28, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.num{
|
|
||||||
font-size: px2rem(20, );
|
|
||||||
color: #ccc;
|
|
||||||
span{
|
|
||||||
display: inline-block;
|
|
||||||
font-family: 'din';
|
|
||||||
font-size: px2rem(24, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: px2rem(2, );
|
|
||||||
margin-bottom: px2rem(6, );
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
width: px2rem(56, );
|
|
||||||
height: px2rem(68, );
|
|
||||||
margin-top: px2rem(20, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc{
|
|
||||||
display: flex;
|
|
||||||
margin-top: px2rem(40, );
|
|
||||||
margin-bottom: px2rem(24, );
|
|
||||||
p{
|
|
||||||
font-size: px2rem(20, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
&:first-child{
|
|
||||||
margin-left: px2rem(30, );
|
|
||||||
}
|
|
||||||
&:nth-child(2){
|
|
||||||
flex: 1;
|
|
||||||
margin-left: px2rem(70, );
|
|
||||||
}
|
|
||||||
&:last-child{
|
|
||||||
margin-right: px2rem(40, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul{
|
|
||||||
// height: px2rem(280, );
|
|
||||||
// overflow: auto;
|
|
||||||
// margin-top: px2rem(34, );
|
|
||||||
margin-bottom: px2rem(150, );
|
|
||||||
li{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: px2rem(32, );
|
|
||||||
.index{
|
|
||||||
width: px2rem(20, );
|
|
||||||
text-align: center;
|
|
||||||
font-size: px2rem(32, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: px2rem(40, );
|
|
||||||
margin-right: px2rem(56, );
|
|
||||||
}
|
|
||||||
.others_avatar{
|
|
||||||
width: px2rem(88, );
|
|
||||||
height: px2rem(88, );
|
|
||||||
margin-right: px2rem(24, );
|
|
||||||
img{
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.others_nick{
|
|
||||||
flex: 1;
|
|
||||||
font-size: px2rem(28, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.others_num{
|
|
||||||
font-size: px2rem(24, );
|
|
||||||
color: #CCCCCC;
|
|
||||||
text-align: right;
|
|
||||||
margin-right: px2rem(40, );
|
|
||||||
span{
|
|
||||||
font-family: 'din';
|
|
||||||
font-size: px2rem(32, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.mine{
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: px2rem(128, );
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 px2rem(-2, ) px2rem(8, ) #F4F4F4;
|
|
||||||
.mine_index{
|
|
||||||
width: px2rem(72, );
|
|
||||||
text-align: center;
|
|
||||||
font-size: px2rem(24, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #999;
|
|
||||||
margin-left: px2rem(20, );
|
|
||||||
}
|
|
||||||
.mine_avatar{
|
|
||||||
width: px2rem(88, );
|
|
||||||
height: px2rem(88, );
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 px2rem(24, );
|
|
||||||
}
|
|
||||||
.mine_nick{
|
|
||||||
flex: 1;
|
|
||||||
font-size: px2rem(28, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.mine_num{
|
|
||||||
text-align: right;
|
|
||||||
font-size: px2rem(24, );
|
|
||||||
color: #ccc;
|
|
||||||
margin-right: px2rem(40, );
|
|
||||||
p{
|
|
||||||
font-family: 'din';
|
|
||||||
font-size: px2rem(32, );
|
|
||||||
font-weight: bold;
|
|
||||||
color: #B95CFF;
|
|
||||||
margin-top: px2rem(4, );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
550
view/yinmeng/modules/room_rank/css/hourRankLicense.css
Normal file
550
view/yinmeng/modules/room_rank/css/hourRankLicense.css
Normal file
@@ -0,0 +1,550 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
background: #0B1836;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
html::-webkit-scrollbar,
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layershade {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layer2 .layui-m-layerchild {
|
||||||
|
width: 3rem !important;
|
||||||
|
height: 3rem !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
color: #fff !important;
|
||||||
|
background: rgba(0, 0, 0, 0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layer2 .layui-m-layercont {
|
||||||
|
text-align: center !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
line-height: 0 !important;
|
||||||
|
margin-top: 0.8rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
top: 0.26667rem;
|
||||||
|
left: 0.32rem;
|
||||||
|
z-index: 99;
|
||||||
|
width: 0.82667rem;
|
||||||
|
height: 0.82667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back p {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.42667rem;
|
||||||
|
position: absolute;
|
||||||
|
width: 9rem;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0.82667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox {
|
||||||
|
width: 10rem;
|
||||||
|
min-height: 15.38667rem;
|
||||||
|
background: url(../images/bg.png) no-repeat;
|
||||||
|
background-size: 10rem 15.38667rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.17333rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .title {
|
||||||
|
width: 7.06667rem;
|
||||||
|
height: 1.14667rem;
|
||||||
|
position: absolute;
|
||||||
|
top: -0.12rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .lastHour {
|
||||||
|
width: 9.14667rem;
|
||||||
|
margin: 0rem auto 0.42667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .lastHour .text {
|
||||||
|
width: 100%;
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
margin-bottom: 0.24rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box {
|
||||||
|
width: 9.14667rem;
|
||||||
|
height: 2.34667rem;
|
||||||
|
background: url(../images/lastHour.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .txbox {
|
||||||
|
width: 2.02667rem;
|
||||||
|
height: 2.45333rem;
|
||||||
|
background: url(../images/hourTs.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 0.24rem;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .txbox .hourTs {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .txbox .tx {
|
||||||
|
width: 1.44rem;
|
||||||
|
height: 1.44rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo {
|
||||||
|
float: left;
|
||||||
|
width: 3.73333rem;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo p {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.37333rem;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .mvp {
|
||||||
|
width: 0.74667rem;
|
||||||
|
height: 0.74667rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.02667rem solid #FFDA24;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.06667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .mvp .mvpTx {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .mvp span {
|
||||||
|
width: 0.90667rem;
|
||||||
|
height: 0.29333rem;
|
||||||
|
line-height: 0.29333rem;
|
||||||
|
border-radius: 0.29333rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.61333rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 0.18667rem;
|
||||||
|
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||||
|
padding: 0 0.02667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member {
|
||||||
|
width: 2.29333rem;
|
||||||
|
height: 0.69333rem;
|
||||||
|
border-radius: 0.69333rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 1.2rem;
|
||||||
|
top: 1.17333rem;
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member img {
|
||||||
|
position: absolute;
|
||||||
|
width: 0.48rem;
|
||||||
|
height: 0.48rem;
|
||||||
|
border: 0.02667rem solid #FFDA24;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx1 {
|
||||||
|
left: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx2 {
|
||||||
|
left: 0.53333rem;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx3 {
|
||||||
|
left: 0.90667rem;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx4 {
|
||||||
|
left: 1.28rem;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .userInfo .member .memberTx5 {
|
||||||
|
left: 1.65333rem;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .score {
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 2.34667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .score img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.37333rem;
|
||||||
|
height: 0.37333rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .box .score span {
|
||||||
|
color: #FFDA24;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.42667rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList .top {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.53333rem;
|
||||||
|
margin-bottom: 0.26667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList .top .sp {
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList .top span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList .top span b {
|
||||||
|
color: #FFDA24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul {
|
||||||
|
width: 100%;
|
||||||
|
height: 7rem;
|
||||||
|
overflow-y: scroll;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 0.66667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.13333rem;
|
||||||
|
backdrop-filter: blur(0px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.53333rem;
|
||||||
|
background: RGBA(11, 24, 57, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .num {
|
||||||
|
width: 0.64rem;
|
||||||
|
height: 0.64rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.42667rem;
|
||||||
|
font-weight: 500;
|
||||||
|
float: left;
|
||||||
|
margin-top: 0.74667rem;
|
||||||
|
margin-right: 0.42667rem;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .num1 {
|
||||||
|
background: url(../images/no1.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .num2 {
|
||||||
|
background: url(../images/no2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .num3 {
|
||||||
|
background: url(../images/no3.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .tx {
|
||||||
|
width: 1.28rem;
|
||||||
|
height: 1.28rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 0.42667rem;
|
||||||
|
margin-right: 0.32rem;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo {
|
||||||
|
float: left;
|
||||||
|
width: 3.73333rem;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo p {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.26667rem;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .mvp {
|
||||||
|
width: 0.74667rem;
|
||||||
|
height: 0.74667rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.02667rem solid #FFDA24;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.96rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .mvp .mvpTx {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .mvp span {
|
||||||
|
width: 0.90667rem;
|
||||||
|
height: 0.29333rem;
|
||||||
|
line-height: 0.29333rem;
|
||||||
|
border-radius: 0.29333rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0.61333rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 0.18667rem;
|
||||||
|
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||||
|
padding: 0 0.02667rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member {
|
||||||
|
width: 2.29333rem;
|
||||||
|
height: 0.69333rem;
|
||||||
|
border-radius: 0.69333rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 1.2rem;
|
||||||
|
top: 1.06667rem;
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member img {
|
||||||
|
position: absolute;
|
||||||
|
width: 0.48rem;
|
||||||
|
height: 0.48rem;
|
||||||
|
border: 0.02667rem solid #FFDA24;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx1 {
|
||||||
|
left: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx2 {
|
||||||
|
left: 0.53333rem;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx3 {
|
||||||
|
left: 0.90667rem;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx4 {
|
||||||
|
left: 1.28rem;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .userInfo .member .memberTx5 {
|
||||||
|
left: 1.65333rem;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .score {
|
||||||
|
float: right;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 0.58667rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .score p {
|
||||||
|
margin-bottom: 0.13333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .score span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul li .first {
|
||||||
|
position: absolute;
|
||||||
|
width: 0.85333rem;
|
||||||
|
height: 0.37333rem;
|
||||||
|
right: 0.53333rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul .li1 {
|
||||||
|
background: linear-gradient(270deg, rgba(255, 204, 0, 0) 0%, rgba(255, 199, 44, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul .li2 {
|
||||||
|
background: linear-gradient(270deg, rgba(109, 139, 209, 0) 0%, rgba(135, 158, 204, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox .hourList ul .li3 {
|
||||||
|
background: linear-gradient(270deg, rgba(163, 102, 46, 0) 0%, rgba(198, 135, 81, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.my {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.05333rem;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: url(../images/my.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 2.13333rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0.53333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .num {
|
||||||
|
height: 0.64rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.42667rem;
|
||||||
|
font-weight: 500;
|
||||||
|
float: left;
|
||||||
|
margin-top: 0.74667rem;
|
||||||
|
margin-right: 0.42667rem;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .tx {
|
||||||
|
width: 1.28rem;
|
||||||
|
height: 1.28rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 0.42667rem;
|
||||||
|
margin-right: 0.32rem;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score {
|
||||||
|
float: left;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: 0.37333rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 0.58667rem;
|
||||||
|
width: 3.73333rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score p {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.13333rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: 0.29333rem;
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .score span b {
|
||||||
|
color: #E6ECF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my .but {
|
||||||
|
width: 1.76rem;
|
||||||
|
height: 0.74667rem;
|
||||||
|
line-height: 0.74667rem;
|
||||||
|
margin-top: 0.56rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
font-weight: 500;
|
||||||
|
background: url(../images/myBut.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
560
view/yinmeng/modules/room_rank/css/hourRankLicense.scss
Normal file
560
view/yinmeng/modules/room_rank/css/hourRankLicense.scss
Normal file
@@ -0,0 +1,560 @@
|
|||||||
|
@function px2rem($px) {
|
||||||
|
@return $px / 75+rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
// background: linear-gradient(0deg, #0F2E69 0%, #0B1836 99%);
|
||||||
|
background: #0B1836;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layershade {
|
||||||
|
background-color: rgba(0, 0, 0, .0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layer2 .layui-m-layerchild {
|
||||||
|
width: 3rem !important;
|
||||||
|
height: 3rem !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
color: #fff !important;
|
||||||
|
background: rgba(0, 0, 0, .6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-m-layer2 .layui-m-layercont {
|
||||||
|
text-align: center !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
line-height: 0 !important;
|
||||||
|
margin-top: 0.8rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
top: px2rem(20);
|
||||||
|
left: px2rem(24);
|
||||||
|
z-index: 99;
|
||||||
|
width: px2rem(62);
|
||||||
|
height: px2rem(62);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fff;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
position: absolute;
|
||||||
|
width: 9rem;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: px2rem(62);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.largestBox {
|
||||||
|
width: px2rem(750);
|
||||||
|
min-height: px2rem(1154);
|
||||||
|
background: url(../images/bg.png) no-repeat;
|
||||||
|
background-size: px2rem(750) px2rem(1154);
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: px2rem(88) 0 0 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: px2rem(530);
|
||||||
|
height: px2rem(86);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(-9);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lastHour {
|
||||||
|
width: px2rem(686);
|
||||||
|
margin: px2rem(0) auto px2rem(32);
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 100%;
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
margin-bottom: px2rem(18);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: px2rem(686);
|
||||||
|
height: px2rem(176);
|
||||||
|
background: url(../images/lastHour.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(24);
|
||||||
|
|
||||||
|
.txbox {
|
||||||
|
width: px2rem(152);
|
||||||
|
height: px2rem(184);
|
||||||
|
background: url(../images/hourTs.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
margin-right: px2rem(18);
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
.hourTs {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
width: px2rem(108);
|
||||||
|
height: px2rem(108);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: px2rem(30);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.userInfo {
|
||||||
|
float: left;
|
||||||
|
width: px2rem(280);
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: px2rem(28);
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 500;
|
||||||
|
// 超出省略号
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mvp {
|
||||||
|
width: px2rem(56);
|
||||||
|
height: px2rem(56);
|
||||||
|
border-radius: 50%;
|
||||||
|
border: px2rem(2) solid #FFDA24;
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(80);
|
||||||
|
|
||||||
|
.mvpTx {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: px2rem(68);
|
||||||
|
height: px2rem(22);
|
||||||
|
line-height: px2rem(22);
|
||||||
|
border-radius: px2rem(22);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(46);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: px2rem(14);
|
||||||
|
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||||
|
padding: 0 px2rem(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member {
|
||||||
|
width: px2rem(172);
|
||||||
|
height: px2rem(52);
|
||||||
|
border-radius: px2rem(52);
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(90);
|
||||||
|
top: px2rem(88);
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: px2rem(36);
|
||||||
|
height: px2rem(36);
|
||||||
|
border: px2rem(2) solid #FFDA24;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx1 {
|
||||||
|
left: px2rem(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx2 {
|
||||||
|
left: px2rem(40);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx3 {
|
||||||
|
left: px2rem(68);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx4 {
|
||||||
|
left: px2rem(96);
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx5 {
|
||||||
|
left: px2rem(124);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
line-height: px2rem(176);
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
width: px2rem(28);
|
||||||
|
height: px2rem(28);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #FFDA24;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hourList {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(40);
|
||||||
|
margin-bottom: px2rem(20);
|
||||||
|
|
||||||
|
.sp {
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: px2rem(24);
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #FFDA24;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
height: 7rem;
|
||||||
|
overflow-y: scroll;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: px2rem(50);
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(160);
|
||||||
|
backdrop-filter: blur(0px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(40);
|
||||||
|
background: RGBA(11, 24, 57, 1);
|
||||||
|
|
||||||
|
.num {
|
||||||
|
width: px2rem(48);
|
||||||
|
height: px2rem(48);
|
||||||
|
text-align: center;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
font-weight: 500;
|
||||||
|
float: left;
|
||||||
|
margin-top: px2rem(56);
|
||||||
|
margin-right: px2rem(32);
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num1 {
|
||||||
|
background: url(../images/no1.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num2 {
|
||||||
|
background: url(../images/no2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num3 {
|
||||||
|
background: url(../images/no3.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
width: px2rem(96);
|
||||||
|
height: px2rem(96);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: px2rem(32);
|
||||||
|
margin-right: px2rem(24);
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userInfo {
|
||||||
|
float: left;
|
||||||
|
width: px2rem(280);
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: px2rem(20);
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 500;
|
||||||
|
// 超出省略号
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mvp {
|
||||||
|
width: px2rem(56);
|
||||||
|
height: px2rem(56);
|
||||||
|
border-radius: 50%;
|
||||||
|
border: px2rem(2) solid #FFDA24;
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(72);
|
||||||
|
|
||||||
|
.mvpTx {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: px2rem(68);
|
||||||
|
height: px2rem(22);
|
||||||
|
line-height: px2rem(22);
|
||||||
|
border-radius: px2rem(22);
|
||||||
|
position: absolute;
|
||||||
|
top: px2rem(46);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: px2rem(14);
|
||||||
|
background: linear-gradient(180deg, #FFDA24 0%, #FF8615 100%);
|
||||||
|
padding: 0 px2rem(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member {
|
||||||
|
width: px2rem(172);
|
||||||
|
height: px2rem(52);
|
||||||
|
border-radius: px2rem(52);
|
||||||
|
position: absolute;
|
||||||
|
left: px2rem(90);
|
||||||
|
top: px2rem(80);
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: px2rem(36);
|
||||||
|
height: px2rem(36);
|
||||||
|
border: px2rem(2) solid #FFDA24;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx1 {
|
||||||
|
left: px2rem(12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx2 {
|
||||||
|
left: px2rem(40);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx3 {
|
||||||
|
left: px2rem(68);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx4 {
|
||||||
|
left: px2rem(96);
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.memberTx5 {
|
||||||
|
left: px2rem(124);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
float: right;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: px2rem(44);
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: px2rem(10);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: px2rem(22);
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.first {
|
||||||
|
position: absolute;
|
||||||
|
width: px2rem(64);
|
||||||
|
height: px2rem(28);
|
||||||
|
right: px2rem(40);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.li1 {
|
||||||
|
background: linear-gradient(270deg, rgba(255, 204, 0, 0) 0%, rgba(255, 199, 44, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.li2 {
|
||||||
|
background: linear-gradient(270deg, rgba(109, 139, 209, 0) 0%, rgba(135, 158, 204, 0.35) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.li3 {
|
||||||
|
background: linear-gradient(270deg, rgba(163, 102, 46, 0) 0%, rgba(198, 135, 81, 0.35) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my {
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(154);
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: url(../images/my.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: px2rem(160);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 px2rem(40);
|
||||||
|
|
||||||
|
.num {
|
||||||
|
// width: px2rem(48);
|
||||||
|
height: px2rem(48);
|
||||||
|
text-align: center;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(32);
|
||||||
|
font-weight: 500;
|
||||||
|
float: left;
|
||||||
|
margin-top: px2rem(56);
|
||||||
|
margin-right: px2rem(32);
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx {
|
||||||
|
width: px2rem(96);
|
||||||
|
height: px2rem(96);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: px2rem(32);
|
||||||
|
margin-right: px2rem(24);
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
float: left;
|
||||||
|
color: #E6ECF5;
|
||||||
|
font-size: px2rem(28);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: px2rem(44);
|
||||||
|
width: px2rem(280);
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: px2rem(10);
|
||||||
|
// 超出省略号
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #B1B5BD;
|
||||||
|
font-size: px2rem(22);
|
||||||
|
font-weight: 400;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #E6ECF5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.but {
|
||||||
|
width: px2rem(132);
|
||||||
|
height: px2rem(56);
|
||||||
|
line-height: px2rem(56);
|
||||||
|
margin-top: px2rem(42);
|
||||||
|
text-align: center;
|
||||||
|
color: #FFDA24;
|
||||||
|
font-size: px2rem(24);
|
||||||
|
font-weight: 500;
|
||||||
|
background: url(../images/myBut.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -3,57 +3,171 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport"
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
||||||
<title>小时榜</title>
|
<title>小时榜</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||||
<link rel="stylesheet" href="./css/hourRank.css?v=1.1">
|
<link rel="stylesheet" href="./css/hourRank.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="wrap hour">
|
<!-- 顶部返回 -->
|
||||||
<div class="tab_wrap">
|
<!-- <div class="back">
|
||||||
<div class="tab_contain">
|
<img src="./images/travel/back.png" alt="">
|
||||||
<p>小时榜</p>
|
</div> -->
|
||||||
<!-- <p>贡献月榜</p> -->
|
<!-- 最外层容器 -->
|
||||||
<img src="./images/single/rule-icon.png" alt="" class="rule_icon">
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="rank_wrap">
|
<div class="score">
|
||||||
<div class="time_wrap">
|
<img src="./images/hot.png" alt="" class="hot">
|
||||||
<p><span class="h"></span>点小时榜</p>
|
<span></span>
|
||||||
<p>距榜单截止<span class="m"></span>分<span class="s"></span>秒</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="top_three_wrap">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="desc">
|
|
||||||
<p>排名</p>
|
|
||||||
<p>主播</p>
|
|
||||||
<p>礼物值</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul></ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mine">
|
|
||||||
<p class="mine_index"></p>
|
|
||||||
<img src="./images/default-avatar.png" alt="" class="mine_avatar">
|
|
||||||
<p class="mine_nick"></p>
|
|
||||||
<div class="mine_num">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 小时榜 -->
|
||||||
<script src="../../common/js/flexible.js"></script>
|
<div class="hourList">
|
||||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
<div class="top">
|
||||||
<script src="../../common/js/common2.js"></script>
|
<span class="sp">
|
||||||
<script src="../../common/js/layer.js"></script>
|
<!-- 20点 小时榜 -->
|
||||||
<script src="../../common/js/vconsole.min.js"></script>
|
</span>
|
||||||
<script src="./js/hourRank.js"></script>
|
<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" style="display: none;">打榜助力</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
<script src="../../common/js/flexible.js"></script>
|
||||||
|
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||||
|
<script src="../../common/js/common2.js"></script>
|
||||||
|
<script src="../../common/js/layer.js"></script>
|
||||||
|
<script src="../../common/js/vconsole.min.js"></script>
|
||||||
|
<script src="../../common/js/route-constant.js"></script>
|
||||||
|
<script src="../../common/js/svga.js"></script>
|
||||||
|
<script src="./js/hourRank.js"></script>
|
||||||
@@ -3,57 +3,171 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport"
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
||||||
<title>小时榜</title>
|
<title>小时榜</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||||
<link rel="stylesheet" href="./css/hourRank1.css?v=1.1">
|
<link rel="stylesheet" href="./css/hourRankLicense.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="wrap hour">
|
<!-- 顶部返回 -->
|
||||||
<div class="tab_wrap">
|
<!-- <div class="back">
|
||||||
<div class="tab_contain">
|
<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>
|
<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>
|
||||||
<!-- 小时榜 -->
|
<!-- 小时榜 -->
|
||||||
<!-- <p>贡献月榜</p> -->
|
<div class="hourList">
|
||||||
<img src="./images/single/rule-icon.png" alt="" class="rule_icon">
|
<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>
|
</div>
|
||||||
|
<div class="score">
|
||||||
<div class="rank_wrap">
|
<p>1000</p>
|
||||||
<div class="time_wrap">
|
<span>距上一名</span>
|
||||||
<p><span class="h"></span>点小时榜</p>
|
|
||||||
<p>距榜单截止<span class="m"></span>分<span class="s"></span>秒</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img src="./images/first.png" alt="" class="first">
|
||||||
<div class="top_three_wrap">
|
</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>
|
||||||
|
<div class="member">
|
||||||
<div class="desc">
|
<img src="./images/logo.png" alt="" class="memberTx memberTx1">
|
||||||
<p>排名</p>
|
<img src="./images/logo.png" alt="" class="memberTx memberTx2">
|
||||||
<p>房间</p>
|
<img src="./images/logo.png" alt="" class="memberTx memberTx3">
|
||||||
<p>礼物值</p>
|
<img src="./images/logo.png" alt="" class="memberTx memberTx4">
|
||||||
</div>
|
<img src="./images/logo.png" alt="" class="memberTx memberTx5">
|
||||||
|
|
||||||
<ul></ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mine">
|
|
||||||
<p class="mine_index"></p>
|
|
||||||
<img src="./images/default-avatar.png" alt="" class="mine_avatar">
|
|
||||||
<p class="mine_nick"></p>
|
|
||||||
<div class="mine_num">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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" style="display: none;">打榜助力</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="../../common/js/flexible.js"></script>
|
|
||||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
|
||||||
<script src="../../common/js/common2.js"></script>
|
|
||||||
<script src="../../common/js/layer.js"></script>
|
|
||||||
<script src="../../common/js/vconsole.min.js"></script>
|
|
||||||
<script src="./js/hourRankLicense.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
<script src="../../common/js/flexible.js"></script>
|
||||||
|
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||||
|
<script src="../../common/js/common2.js"></script>
|
||||||
|
<script src="../../common/js/layer.js"></script>
|
||||||
|
<script src="../../common/js/vconsole.min.js"></script>
|
||||||
|
<script src="../../common/js/route-constant.js"></script>
|
||||||
|
<script src="../../common/js/svga.js"></script>
|
||||||
|
<script src="./js/hourRankLicense.js"></script>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 340 B |
BIN
view/yinmeng/modules/room_rank/images/bg.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 342 KiB |
BIN
view/yinmeng/modules/room_rank/images/boxBig2.svga
Normal file
BIN
view/yinmeng/modules/room_rank/images/boxBig2.svga
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 451 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.0 KiB |
BIN
view/yinmeng/modules/room_rank/images/hot.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/hot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 991 B |
BIN
view/yinmeng/modules/room_rank/images/hourTs.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/hourTs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
view/yinmeng/modules/room_rank/images/lastHour.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/lastHour.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 466 B |
BIN
view/yinmeng/modules/room_rank/images/my.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/my.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
view/yinmeng/modules/room_rank/images/myBut.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/myBut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
view/yinmeng/modules/room_rank/images/no1.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/no1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
view/yinmeng/modules/room_rank/images/no2.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/no2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
view/yinmeng/modules/room_rank/images/no3.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/no3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 651 B |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
BIN
view/yinmeng/modules/room_rank/images/title.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
BIN
view/yinmeng/modules/room_rank/images/travel/back.png
Normal file
BIN
view/yinmeng/modules/room_rank/images/travel/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user