房间榜单：长头像变形修复
This commit is contained in:
qf
@@ -1,108 +1,94 @@
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
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';
|
||||
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';
|
||||
font-family: "pingfang-bold";
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 2.66667rem;
|
||||
height: 2.6666666667rem;
|
||||
background: url("../images/top.png") no-repeat 0 0/100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .tab_contain {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 8.53333rem;
|
||||
width: 8.5333333333rem;
|
||||
height: 0.96rem;
|
||||
margin: 0.66667rem auto 0.34667rem;
|
||||
margin: 0.6666666667rem auto 0.3466666667rem;
|
||||
background-color: #9785FA;
|
||||
border-radius: 0.53333rem;
|
||||
border-radius: 0.5333333333rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .tab_contain p {
|
||||
width: 4.16rem;
|
||||
height: 0.85333rem;
|
||||
line-height: 0.85333rem;
|
||||
margin: 0 0.05333rem;
|
||||
height: 0.8533333333rem;
|
||||
line-height: 0.8533333333rem;
|
||||
margin: 0 0.0533333333rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .tab_contain p.active {
|
||||
background-color: #fff;
|
||||
color: #7898F3;
|
||||
border-radius: 0.53333rem;
|
||||
border-radius: 0.5333333333rem;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .rank_type {
|
||||
display: flex;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .rank_type p {
|
||||
position: relative;
|
||||
margin-right: 0.42667rem;
|
||||
margin-right: 0.4266666667rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .rank_type p.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .rank_type p.active::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -0.21333rem;
|
||||
bottom: -0.2133333333rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0.26667rem;
|
||||
height: 0.10667rem;
|
||||
border-radius: 0.05333rem;
|
||||
width: 0.2666666667rem;
|
||||
height: 0.1066666667rem;
|
||||
border-radius: 0.0533333333rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wrap .tab_wrap .rank_type p:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 5.33333rem;
|
||||
height: 5.3333333333rem;
|
||||
background: url("../images/topthree-bg.png") no-repeat 0 0/100% 100%;
|
||||
margin-top: 2.66667rem;
|
||||
margin-top: 2.6666666667rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@@ -111,42 +97,34 @@ body {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(2), .wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) {
|
||||
left: 0.8rem;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.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: 1.89333rem;
|
||||
height: 2.18667rem;
|
||||
margin-top: 1.49333rem;
|
||||
width: 1.8933333333rem;
|
||||
height: 2.1866666667rem;
|
||||
margin-top: 1.4933333333rem;
|
||||
}
|
||||
|
||||
.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/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: -1.76rem;
|
||||
width: 1.54667rem;
|
||||
height: 1.54667rem;
|
||||
width: 1.5466666667rem;
|
||||
height: 1.5466666667rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) {
|
||||
left: 6.88rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item:nth-child(3) .avatar p {
|
||||
background-image: url("../images/third.png");
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar {
|
||||
width: 2.32rem;
|
||||
height: 2.66667rem;
|
||||
margin: 0.45333rem auto 0.32rem;
|
||||
height: 2.6666666667rem;
|
||||
margin: 0.4533333333rem auto 0.32rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar p {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
@@ -154,99 +132,88 @@ body {
|
||||
height: 100%;
|
||||
background: url("../images/first.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .avatar img {
|
||||
position: relative;
|
||||
top: -2.13333rem;
|
||||
top: -2.1333333333rem;
|
||||
width: 1.92rem;
|
||||
height: 1.92rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .nick {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .nick img {
|
||||
width: 0.4rem;
|
||||
width: 0.4rem;
|
||||
margin-left: 0.05333rem;
|
||||
margin-left: 0.0533333333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .erbanNo {
|
||||
font-size: 0.26667rem;
|
||||
font-size: 0.2666666667rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 0.10667rem 0 0.10667rem;
|
||||
margin: 0.1066666667rem 0 0.1066666667rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap .top_three_wrap .top_three_item .num {
|
||||
font-size: 0.37333rem;
|
||||
font-size: 0.3733333333rem;
|
||||
color: #FF7979;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul {
|
||||
height: 3.73333rem;
|
||||
margin-top: 0.45333rem;
|
||||
height: 3.7333333333rem;
|
||||
margin-top: 0.4533333333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.42667rem;
|
||||
margin-bottom: 0.4266666667rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .index {
|
||||
width: 0.4rem;
|
||||
text-align: center;
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
margin: 0 0.53333rem;
|
||||
margin: 0 0.5333333333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .others_avatar {
|
||||
width: 1.33333rem;
|
||||
height: 1.33333rem;
|
||||
margin-right: 0.42667rem;
|
||||
width: 1.3333333333rem;
|
||||
height: 1.3333333333rem;
|
||||
margin-right: 0.4266666667rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .others_avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .info_wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 0.93333rem;
|
||||
height: 0.9333333333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .info_wrap .others_nick {
|
||||
color: #333;
|
||||
font-size: 0.37333rem;
|
||||
font-size: 0.3733333333rem;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .info_wrap .others_nick img {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .info_wrap .others_erbanNo {
|
||||
color: rgba(102, 102, 102, 0.6);
|
||||
}
|
||||
|
||||
.wrap .rank_wrap ul li .others_num {
|
||||
color: #FF7979;
|
||||
font-size: 0.37333rem;
|
||||
font-size: 0.3733333333rem;
|
||||
font-weight: bold;
|
||||
margin-right: 0.66667rem;
|
||||
margin-right: 0.6666666667rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
||||
@@ -191,6 +191,8 @@ body{
|
||||
height: px2rem(100, );
|
||||
margin-right: px2rem(32, );
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user