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