247 lines
5.4 KiB
SCSS
247 lines
5.4 KiB
SCSS
@charset "UTF-8";
|
|
|
|
@function px2rem($px) {
|
|
@return $px / 37.5+rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
img {
|
|
// width: 100%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
.rank-three {
|
|
// position: fixed;
|
|
// top: 0;
|
|
// left: 0;
|
|
width: 100%;
|
|
height: px2rem(226);
|
|
background: url("../images/top-bg.png");
|
|
background-size: 100% 100%;
|
|
|
|
.rank-three-detail {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: px2rem(110);
|
|
height: px2rem(160);
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
|
|
.user-img {
|
|
width: px2rem(97);
|
|
height: px2rem(97);
|
|
position: relative;
|
|
|
|
.ranking-bg {
|
|
width: px2rem(97);
|
|
height: px2rem(97);
|
|
position: relative;
|
|
z-index: 3;
|
|
background: url("../images/one.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
img {
|
|
width: px2rem(60);
|
|
height: px2rem(60);
|
|
position: absolute;
|
|
top: px2rem(18);
|
|
left: px2rem(18);
|
|
border-radius: 50%;
|
|
|
|
&.un-url {
|
|
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-nick {
|
|
font-size: px2rem(14);
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.user-grade {
|
|
display: flex;
|
|
height: px2rem(20);
|
|
align-items: center;
|
|
|
|
img {
|
|
height: 0.5rem;
|
|
width: 1rem;
|
|
|
|
&:last-child {
|
|
height: 0.5rem;
|
|
width: 1rem;
|
|
margin-left: px2rem(2);
|
|
}
|
|
|
|
&.active {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-charm {
|
|
height: px2rem(22);
|
|
background: rgba(255, 255, 255, 0.2);
|
|
min-width: px2rem(70);
|
|
padding: 0 px2rem(3);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: px2rem(11);
|
|
|
|
img {
|
|
width: px2rem(12);
|
|
height: px2rem(10);
|
|
margin-right: px2rem(2);
|
|
}
|
|
|
|
span {
|
|
color: #7154ee;
|
|
font-size: px2rem(14);
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
top: px2rem(7);
|
|
left: px2rem(132);
|
|
|
|
.user-img {
|
|
.ranking-bg {
|
|
background: url("../images/one.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
img {
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
top: px2rem(39);
|
|
left: px2rem(20);
|
|
|
|
.user-img {
|
|
.ranking-bg {
|
|
background: url("../images/two.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
top: px2rem(48);
|
|
right: px2rem(20);
|
|
|
|
.user-img {
|
|
.ranking-bg {
|
|
background: url("../images/three.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.renk-other {
|
|
// overflow-y: scroll;
|
|
// -webkit-overflow-scrolling: touch;
|
|
// &::-webkit-scrollbar {
|
|
// display: none;
|
|
// }
|
|
// padding-top: px2rem(230);
|
|
padding-bottom: px2rem(20);
|
|
|
|
.rank-other-detail {
|
|
margin-bottom: px2rem(20);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.user-rank {
|
|
width: px2rem(45);
|
|
text-align: center;
|
|
font-size: px2rem(20);
|
|
color: #333333;
|
|
}
|
|
|
|
.user-img {
|
|
width: px2rem(50);
|
|
height: px2rem(50);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-detail {
|
|
margin-left: px2rem(25);
|
|
width: px2rem(180);
|
|
|
|
.nick {
|
|
font-size: px2rem(15);
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.user-grade {
|
|
display: flex;
|
|
height: px2rem(20);
|
|
align-items: center;
|
|
|
|
img {
|
|
height: 0.5rem;
|
|
width: 1rem;
|
|
|
|
&:last-child {
|
|
height: 0.5rem;
|
|
width: 1rem;
|
|
margin-left: px2rem(2);
|
|
}
|
|
|
|
&.active {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-charm {
|
|
height: px2rem(22);
|
|
background: rgba(255, 255, 255, 0.2);
|
|
width: px2rem(90);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: px2rem(11);
|
|
|
|
img {
|
|
width: px2rem(12);
|
|
height: px2rem(10);
|
|
margin-right: px2rem(2);
|
|
}
|
|
|
|
span {
|
|
color: #333;
|
|
font-size: px2rem(14);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.message {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: px2rem(20);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: px2rem(16);
|
|
color: #000;
|
|
} |