yinmeng/yinmeng-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

深海：修复榜单文案掉落问题

Browse Source
This commit is contained in:
Dragon
2023-03-17 17:37:36 +08:00
parent 7740884dba
commit e88b427b95
2 changed files with 59 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
view/yinmeng/activity/act-ocean/css/rank.css
View File

@@ -1,163 +1,141 @@
@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: 'din-medium';
font-family: "din-medium";
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");
}
@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");
}
@font-face {
font-family: 'pingfang-regular';
font-family: "pingfang-regular";
src: url("../../../common/fonts/PingFang-Regular.ttf");
src: url("../../../common/fonts/PingFang-Regular.ttf") format("woff"), url("../../../common/fonts/PingFang-Regular.ttf") format("truetype"), url("../../../common/fonts/PingFang-Regular.ttf") format("svg");
}
html, body {
font-family: 'pingfang-bold';
font-family: "pingfang-bold";
position: relative;
}
.rank-top {
height: 6.66667rem;
height: 6.6666666667rem;
background-image: linear-gradient(#3491F5, #60C7FC);
overflow: hidden;
}
.rank-top .tab-wrap {
font-family: 'pingfang-regular';
width: 5.33333rem;
height: 0.93333rem;
font-family: "pingfang-regular";
width: 6rem;
height: 0.9333333333rem;
background-color: #7ABDF9;
border-radius: 0.48rem;
margin: 0.48rem auto 0.29333rem;
margin: 0.48rem auto 0.2933333333rem;
display: flex;
justify-content: space-between;
}
.rank-top .tab-wrap span {
display: inline-block;
width: 2.53333rem;
width: 2.8rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
font-size: 0.4rem;
color: white;
margin-top: 0.06667rem;
margin-top: 0.0666666667rem;
}
.rank-top .tab-wrap span:first-child {
margin-left: 0.08rem;
}
.rank-top .tab-wrap .active {
background-color: white;
color: #3C9BF7;
border-radius: 0.4rem;
}
.rank-top .topthree-wrap {
position: relative;
}
.rank-top .topthree-wrap .info-wrap {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 2.66667rem;
width: 2.6666666667rem;
height: 3.2rem;
background-image: linear-gradient(#3F9EF7, #52B6FA);
margin-top: 1.68rem;
border-radius: 0.26667rem 0.26667rem 0 0;
border-radius: 0.2666666667rem 0.2666666667rem 0 0;
}
.rank-top .topthree-wrap .info-wrap:first-child {
width: 3.2rem;
height: 3.73333rem;
margin-top: 1.14667rem;
height: 3.7333333333rem;
margin-top: 1.1466666667rem;
left: 50%;
transform: translateX(-50%);
}
.rank-top .topthree-wrap .info-wrap:nth-child(2) {
left: 0.48rem;
}
.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar {
width: 1.86667rem;
height: 2.53333rem;
margin-top: -1.14667rem;
width: 1.8666666667rem;
height: 2.5333333333rem;
margin-top: -1.1466666667rem;
}
.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar p {
background-image: url("../images/second.png");
}
.rank-top .topthree-wrap .info-wrap:nth-child(2) .avatar img {
width: 1.86667rem;
height: 1.86667rem;
top: -1.97333rem;
width: 1.8666666667rem;
height: 1.8666666667rem;
top: -1.9733333333rem;
}
.rank-top .topthree-wrap .info-wrap:nth-child(3) {
right: 0.48rem;
}
.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar {
width: 1.86667rem;
height: 2.53333rem;
margin-top: -1.14667rem;
width: 1.8666666667rem;
height: 2.5333333333rem;
margin-top: -1.1466666667rem;
}
.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar p {
background-image: url("../images/third.png");
}
.rank-top .topthree-wrap .info-wrap:nth-child(3) .avatar img {
width: 1.86667rem;
height: 1.86667rem;
top: -1.97333rem;
width: 1.8666666667rem;
height: 1.8666666667rem;
top: -1.9733333333rem;
}
.rank-top .topthree-wrap .info-wrap .avatar {
width: 2.13333rem;
height: 2.85333rem;
margin-top: -0.93333rem;
width: 2.1333333333rem;
height: 2.8533333333rem;
margin-top: -0.9333333333rem;
}
.rank-top .topthree-wrap .info-wrap .avatar p {
position: relative;
z-index: 99;
height: 100%;
background: url("../images/first.png") no-repeat 0 0/100% 100%;
}
.rank-top .topthree-wrap .info-wrap .avatar img {
position: relative;
z-index: 9;
top: -2.24rem;
width: 2.13333rem;
height: 2.13333rem;
width: 2.1333333333rem;
height: 2.1333333333rem;
border-radius: 50%;
}
.rank-top .topthree-wrap .info-wrap .nick, .rank-top .topthree-wrap .info-wrap .diamond-num {
font-size: 0.4rem;
font-weight: bold;
color: white;
margin: 0.21333rem 0;
margin: 0.2133333333rem 0;
}
.rank-top .topthree-wrap .info-wrap .diamond-num {
font-family: 'din-medium';
font-family: "din-medium";
margin: 0;
}
@@ -166,22 +144,19 @@ html, body {
position: absolute;
width: 100%;
border-radius: 0.4rem 0.4rem 0 0;
margin-top: -0.34667rem;
margin-top: -0.3466666667rem;
background-color: white;
padding: 0.53333rem 0.77333rem 0;
padding: 0.5333333333rem 0.7733333333rem 0;
box-sizing: border-box;
}
.other-rank li {
display: flex;
align-items: center;
margin-bottom: 0.53333rem;
margin-bottom: 0.5333333333rem;
}
.other-rank li:last-child {
margin-bottom: 1.86667rem;
margin-bottom: 1.8666666667rem;
}
.other-rank li .index {
display: inline-block;
width: 0.4rem;
@@ -189,29 +164,25 @@ html, body {
font-weight: bold;
color: #333333;
}
.other-rank li .others-info {
flex: 1;
display: flex;
align-items: center;
margin-left: 0.4rem;
}
.other-rank li .others-info img {
width: 1.33333rem;
height: 1.33333rem;
width: 1.3333333333rem;
height: 1.3333333333rem;
border-radius: 50%;
margin-right: 0.26667rem;
margin-right: 0.2666666667rem;
}
.other-rank li .others-info .others-nick {
font-size: 0.37333rem;
font-size: 0.3733333333rem;
font-weight: bold;
color: #333333;
}
.other-rank li .others-diamond-num {
font-size: 0.34667rem;
font-size: 0.3466666667rem;
font-weight: bold;
color: #ED7B50;
}
@@ -224,40 +195,35 @@ html, body {
width: 100%;
height: 1.6rem;
background-color: rgba(0, 0, 0, 0.8);
padding: 0 0.77333rem;
padding: 0 0.7733333333rem;
box-sizing: border-box;
display: flex;
align-items: center;
}
.mine .mine-rank {
font-size: 0.34667rem;
font-size: 0.3466666667rem;
font-weight: bold;
color: white;
}
.mine .mine-info {
flex: 1;
display: flex;
align-items: center;
}
.mine .mine-info img {
width: 1.33333rem;
height: 1.33333rem;
width: 1.3333333333rem;
height: 1.3333333333rem;
border-radius: 50%;
margin-left: 0.4rem;
margin-right: 0.26667rem;
margin-right: 0.2666666667rem;
}
.mine .mine-info .mine-nick {
font-size: 0.37333rem;
font-size: 0.3733333333rem;
font-weight: bold;
color: white;
}
.mine .mine-diamond-num {
font-size: 0.34667rem;
font-size: 0.3466666667rem;
font-weight: bold;
color: #ED7B50;
}
@@ -272,3 +238,5 @@ html, body {
z-index: 99999;
background-color: white;
}
/*# sourceMappingURL=rank.css.map */

6
view/yinmeng/activity/act-ocean/css/rank.scss
View File

@@ -46,14 +46,16 @@ html,body{
overflow: hidden;
.tab-wrap{
font-family: 'pingfang-regular';
width: px2rem(400);
width: 6rem;
height: px2rem(70);
background-color: #7ABDF9;
border-radius: px2rem(36);
margin: px2rem(36) auto px2rem(22);
display: flex;
justify-content: space-between;
span{
display: inline-block;
width: px2rem(190);
width: 2.8rem;
height: px2rem(60);
line-height: px2rem(60);
text-align: center;