292 lines
9.7 KiB
SCSS
292 lines
9.7 KiB
SCSS
@function px2rem($px, $rem:75) {
|
|
@return $px / $rem+rem;
|
|
}
|
|
|
|
body{
|
|
background-color: #FFD6E9;
|
|
.wrap{
|
|
.back{
|
|
position: fixed;
|
|
top: px2rem(70, );
|
|
left: px2rem(34, );
|
|
z-index: 999;
|
|
width: px2rem(62, );
|
|
height: px2rem(62, );
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.rule_icon, .award_icon{
|
|
position: fixed;
|
|
right: 0;
|
|
top: px2rem(405, );
|
|
z-index: 999;
|
|
width: px2rem(42, );
|
|
height: px2rem(114, );
|
|
}
|
|
.award_icon{
|
|
top: px2rem(535, );
|
|
}
|
|
.header{
|
|
width: 100%;
|
|
height: px2rem(800, );
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.gift_pic{
|
|
width: px2rem(718, );
|
|
height: px2rem(426, );
|
|
margin: px2rem(-124, ) auto 0;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.tab_wrap{
|
|
position: relative;
|
|
width: px2rem(612, );
|
|
height: px2rem(120, );
|
|
background: url('../images/tab1-active.png') no-repeat 0 0/100% 100%;
|
|
margin: px2rem(17, ) auto px2rem(25, );
|
|
div{
|
|
position: absolute;
|
|
top: px2rem(16, );
|
|
width: px2rem(288, );
|
|
height: px2rem(90, );
|
|
&:nth-of-type(1){
|
|
left: px2rem(16, );
|
|
}
|
|
&:nth-of-type(2){
|
|
right: px2rem(16, );
|
|
}
|
|
}
|
|
}
|
|
.rank_wrap{
|
|
width: px2rem(720, );
|
|
height: px2rem(1762, );
|
|
background: url('../images/rank-bg.png') no-repeat 0 0/100% 100%;
|
|
margin: 0 auto px2rem(70, );
|
|
overflow: hidden;
|
|
.type_wrap{
|
|
width: 46%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: px2rem(60, ) auto px2rem(22, );
|
|
img{
|
|
width: px2rem(158, );
|
|
height: px2rem(74, );
|
|
}
|
|
}
|
|
.topthree_wrap{
|
|
position: relative;
|
|
height: px2rem(360, );
|
|
.topthree_item{
|
|
position: absolute;
|
|
top: px2rem(0, );
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
&:nth-child(1){
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
&:nth-child(2){
|
|
left: px2rem(90, );
|
|
top: px2rem(83, );
|
|
}
|
|
&:nth-child(3){
|
|
right: px2rem(90, );
|
|
top: px2rem(83, );
|
|
}
|
|
// p{
|
|
// width: px2rem(134, );
|
|
// height: px2rem(170, );
|
|
// background: url('../images/first.png') no-repeat 0 0/100% 100%;
|
|
// }
|
|
.headwear{
|
|
width: px2rem(134, );
|
|
height: px2rem(170, );
|
|
z-index: 1;
|
|
}
|
|
.avatar{
|
|
position: absolute;
|
|
top: px2rem(38, );
|
|
width: px2rem(132, );
|
|
height: px2rem(132, );
|
|
border-radius: 50%;
|
|
}
|
|
.nick{
|
|
font-size: px2rem(24, );
|
|
font-weight: bold;
|
|
color: #A17BF4;
|
|
margin-top: px2rem(14, );
|
|
margin-bottom: px2rem(10, );
|
|
}
|
|
.num{
|
|
font-size: px2rem(24, );
|
|
color: #FF7DA0;
|
|
}
|
|
}
|
|
}
|
|
.others_wrap{
|
|
li{
|
|
display: flex;
|
|
align-items: center;
|
|
width: px2rem(620, );
|
|
height: px2rem(140, );
|
|
border-radius: px2rem(10, );
|
|
background-color: #FFEDF5;
|
|
margin: 0 auto px2rem(14, );
|
|
.index{
|
|
width: px2rem(42, );
|
|
height: px2rem(42, );
|
|
line-height: px2rem(42, );
|
|
border-radius: 50%;
|
|
background-color: #FFB5CA;
|
|
text-align: center;
|
|
font-size: px2rem(24, );
|
|
font-weight: bold;
|
|
color: #fff;
|
|
margin-left: px2rem(16, );
|
|
}
|
|
.others_avatar{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: px2rem(100, );
|
|
height: px2rem(100, );
|
|
border: px2rem(4, ) solid #FF769B;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
margin-left: px2rem(36, );
|
|
margin-right: px2rem(25, );
|
|
img{
|
|
width: px2rem(96, );
|
|
height: px2rem(96, );
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.others_nick{
|
|
flex: 1;
|
|
font-size: px2rem(24, );
|
|
color: #8C67EF;
|
|
}
|
|
.others_num{
|
|
line-height: 1.3;
|
|
text-align: right;
|
|
font-size: px2rem(20, );
|
|
color: #FF7DA0;
|
|
margin-right: px2rem(16, );
|
|
span{
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mine_wrap{
|
|
display: flex;
|
|
align-items: center;
|
|
width: px2rem(620, );
|
|
height: px2rem(140, );
|
|
margin: auto;
|
|
.mine_index{
|
|
width: px2rem(72, );
|
|
text-align: center;
|
|
font-size: px2rem(20, );
|
|
font-weight: bold;
|
|
color: #FFB6CA;
|
|
}
|
|
.mine_avatar{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: px2rem(100, );
|
|
height: px2rem(100, );
|
|
border: px2rem(4, ) solid #FF769B;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
margin-left: px2rem(20, );
|
|
margin-right: px2rem(25, );
|
|
img{
|
|
width: px2rem(96, );
|
|
height: px2rem(96, );
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.mine_nick{
|
|
flex: 1;
|
|
font-size: px2rem(24, );
|
|
color: #8C67EF;
|
|
}
|
|
.mine_num{
|
|
line-height: 1.3;
|
|
text-align: right;
|
|
font-size: px2rem(20, );
|
|
color: #FF7DA0;
|
|
margin-right: px2rem(16, );
|
|
span{
|
|
font-size: px2rem(30, );
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rule_popup, .award_popup{
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba($color: #040404, $alpha: .7);
|
|
.rule_content, .award_content{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: px2rem(640, );
|
|
height: px2rem(540, );
|
|
}
|
|
}
|
|
.award_popup{
|
|
.award_content{
|
|
width: px2rem(640, );
|
|
height: px2rem(712, );
|
|
background: url('../images/award-bg.png') no-repeat 0 0/100% 100%;
|
|
.award_wrap{
|
|
position: relative;
|
|
height: 84%;
|
|
overflow: auto;
|
|
margin-top: px2rem(80, );
|
|
text-align: center;
|
|
.award_tab_wrap{
|
|
display: flex;
|
|
width: px2rem(434, );
|
|
height: px2rem(88, );
|
|
background: url('../images/award-tab1.png') no-repeat 0 0/100% 100%;
|
|
margin: auto;
|
|
.award_tab_item{
|
|
flex: 1;
|
|
}
|
|
}
|
|
.award_pic_wrap{
|
|
.award_pic{
|
|
width: px2rem(600, );
|
|
height: px2rem(2378, );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar{
|
|
display: none;
|
|
}
|