233 lines
7.6 KiB
SCSS
233 lines
7.6 KiB
SCSS
@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');
|
|
}
|
|
|
|
body{
|
|
width: 100%;
|
|
font-family: 'pingfang-bold';
|
|
background-color: #fff;
|
|
}
|
|
|
|
.wrap{
|
|
display: none;
|
|
.tab_wrap{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: px2rem(200, );
|
|
background: url('../images/top.png') no-repeat 0 0/100% 100%;
|
|
overflow: hidden;
|
|
.tab_contain{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: px2rem(640, );
|
|
height: px2rem(72, );
|
|
margin: px2rem(50, ) auto px2rem(26, );
|
|
background-color: #9785FA;
|
|
border-radius: px2rem(40, );
|
|
color: rgba($color: #fff, $alpha: .6);
|
|
font-size: px2rem(30, );
|
|
p{
|
|
width: px2rem(312, );
|
|
height: px2rem(64, );
|
|
line-height: px2rem(64, );
|
|
margin: 0 px2rem(4, );
|
|
text-align: center;
|
|
font-weight: bold;
|
|
&.active{
|
|
background-color: #fff;
|
|
color: #7898F3;
|
|
border-radius: px2rem(40, );
|
|
}
|
|
}
|
|
}
|
|
.rank_type{
|
|
display: flex;
|
|
margin-left: px2rem(60, );
|
|
p{
|
|
position: relative;
|
|
margin-right: px2rem(32, );
|
|
color: rgba($color: #fff, $alpha: .6);
|
|
font-size: px2rem(24, );
|
|
&.active{
|
|
color: rgba($color: #fff, $alpha: 1);
|
|
&::after{
|
|
content: '';
|
|
position: absolute;
|
|
bottom: px2rem(-16, );
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: px2rem(20, );
|
|
height: px2rem(8, );
|
|
border-radius: px2rem(4, );
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
&:last-child{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rank_wrap{
|
|
overflow: auto;
|
|
|
|
.top_three_wrap{
|
|
position: relative;
|
|
width: 100%;
|
|
height: px2rem(400, );
|
|
background: url('../images/topthree-bg.png') no-repeat 0 0/100% 100%;
|
|
margin-top: px2rem(200, );
|
|
.top_three_item{
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: px2rem(174, );
|
|
text-align: center;
|
|
color: #fff;
|
|
&:nth-child(2), &:nth-child(3){
|
|
left: px2rem(60, );
|
|
transform: translateX(0);
|
|
.avatar{
|
|
width: px2rem(142, );
|
|
height: px2rem(164, );
|
|
margin-top: px2rem(112, );
|
|
p{
|
|
background-image: url('../images/second.png');
|
|
}
|
|
img{
|
|
top: px2rem(-132, );
|
|
width: px2rem(116, );
|
|
height: px2rem(116, );
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(3){
|
|
left: px2rem(516, );
|
|
.avatar{
|
|
p{
|
|
background-image: url('../images/third.png');
|
|
}
|
|
}
|
|
}
|
|
.avatar{
|
|
width: px2rem(174, );
|
|
height: px2rem(200, );
|
|
margin: px2rem(34, ) auto px2rem(24, );
|
|
p{
|
|
position: relative;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url('../images/first.png') no-repeat 0 0/100% 100%;
|
|
}
|
|
img{
|
|
position: relative;
|
|
top: px2rem(-160, );
|
|
width: px2rem(144, );
|
|
height: px2rem(144, );
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.nick{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: px2rem(24, );
|
|
img{
|
|
width: px2rem(30, );
|
|
width: px2rem(30, );
|
|
margin-left: px2rem(4, );
|
|
}
|
|
}
|
|
.erbanNo{
|
|
font-size: px2rem(20, );
|
|
color: rgba($color: #fff, $alpha: .6);
|
|
margin: px2rem(8, ) 0 px2rem(8, );
|
|
}
|
|
.num{
|
|
font-size: px2rem(28, );
|
|
color: #FF7979;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul{
|
|
height: px2rem(280, );
|
|
// overflow: auto;
|
|
margin-top: px2rem(34, );
|
|
li{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: px2rem(32, );
|
|
.index{
|
|
width: px2rem(30, );
|
|
text-align: center;
|
|
font-size: px2rem(36, );
|
|
font-weight: bold;
|
|
color: #666;
|
|
margin: 0 px2rem(40, );
|
|
}
|
|
.others_avatar{
|
|
width: px2rem(100, );
|
|
height: px2rem(100, );
|
|
margin-right: px2rem(32, );
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.info_wrap{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
height: px2rem(70, );
|
|
.others_nick{
|
|
color: #333;
|
|
font-size: px2rem(28, );
|
|
img{
|
|
width: px2rem(30, );
|
|
height: px2rem(30, );
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
.others_erbanNo{
|
|
color: rgba($color: #666, $alpha: .6);
|
|
}
|
|
}
|
|
.others_num{
|
|
color: #FF7979;
|
|
font-size: px2rem(28, );
|
|
font-weight: bold;
|
|
margin-right: px2rem(50, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
|