moliparty/molistar-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改房间榜单样式2

Browse Source
This commit is contained in:
chenruiye
2025-03-18 19:10:18 +08:00
parent cfef7b6d88
commit 1369003805
3 changed files with 132 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
view/molistar/modules/room_rank/css/index.css
View File

@@ -32,19 +32,20 @@ body {
.largestBox {
width: 10rem;
min-height: 15.3866666667rem;
min-height: 12.7466666667rem;
background: url(../images/bg.png) no-repeat;
background-size: 10rem 15.3866666667rem;
background-size: 10rem 12.7466666667rem;
margin: 0 auto;
position: relative;
box-sizing: border-box;
padding: 1.2rem 0 0 0;
background-color: #2B1102;
}
.largestBox .title {
width: 5.6266666667rem;
height: 1.0666666667rem;
position: absolute;
top: -0.1466666667rem;
top: 0rem;
left: 50%;
transform: translateX(-50%);
}
@@ -103,6 +104,7 @@ body {
color: #FFF7B7;
font-size: 0.32rem;
font-weight: 500;
z-index: 999;
}
.largestBox .dayTab .dayTabColor1 {
background: linear-gradient(0deg, #FFC478, #FFE9D4);
@@ -115,7 +117,7 @@ body {
.largestBox .top3 {
width: 8.8rem;
height: 0.0133333333rem;
margin: 3.7333333333rem auto 0;
margin: 2.5333333333rem auto 0;
position: relative;
}
.largestBox .top3 .no1 {
@@ -124,7 +126,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -2.88rem;
top: -3.0133333333rem;
}
.largestBox .top3 .no1 .box {
width: 100%;
@@ -205,14 +207,14 @@ body {
font-weight: 500;
position: absolute;
left: 0;
bottom: -1rem;
bottom: -0.8666666667rem;
}
.largestBox .top3 .no2 {
width: 2.9333333333rem;
height: 2.9333333333rem;
position: absolute;
left: 0;
top: -1.8666666667rem;
top: -1.9466666667rem;
}
.largestBox .top3 .no2 .box {
width: 100%;
@@ -277,7 +279,7 @@ body {
display: flex;
justify-content: center;
box-sizing: border-box;
bottom: -0.72rem;
bottom: -0.6666666667rem;
padding: 0 0.3333333333rem;
}
.largestBox .top3 .no2 .box .icon img {
@@ -294,14 +296,14 @@ body {
font-weight: 500;
position: absolute;
left: 0;
bottom: -1.1333333333rem;
bottom: -0.9333333333rem;
}
.largestBox .top3 .no3 {
width: 2.9333333333rem;
height: 2.9333333333rem;
position: absolute;
right: 0;
top: -1.8666666667rem;
top: -1.9466666667rem;
}
.largestBox .top3 .no3 .box {
width: 100%;
@@ -365,7 +367,7 @@ body {
display: flex;
justify-content: center;
box-sizing: border-box;
bottom: -0.72rem;
bottom: -0.6666666667rem;
padding: 0 0.3333333333rem;
}
.largestBox .top3 .no3 .box .icon img {
@@ -382,12 +384,12 @@ body {
font-weight: 500;
position: absolute;
left: 0;
bottom: -1.1333333333rem;
bottom: -0.9333333333rem;
}
.largestBox ul {
height: 7.7066666667rem;
margin: 3.0666666667rem 0.4266666667rem 0;
padding: 0.2133333333rem 0 1.8666666667rem;
height: 6.7733333333rem;
margin: 2.6666666667rem 0.4266666667rem 0;
padding: 0.2133333333rem 0 2.6666666667rem;
overflow-y: scroll;
}
.largestBox ul::-webkit-scrollbar {
@@ -428,8 +430,45 @@ body {
width: 2.8rem;
float: left;
}
.largestBox ul li .userInfo .nick {
display: flex;
align-items: end;
}
.largestBox ul li .userInfo .nick .boy {
width: 0.3733333333rem;
height: 0.3733333333rem;
border-radius: 50%;
background: #6BB3FF;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.1066666667rem;
margin-left: 0.0666666667rem;
}
.largestBox ul li .userInfo .nick .boy img {
width: 0.2133333333rem;
height: 0.2133333333rem;
border-radius: 50%;
margin: 0;
}
.largestBox ul li .userInfo .nick .woman {
width: 0.3733333333rem;
height: 0.3733333333rem;
border-radius: 50%;
background: #FF80CC;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.1066666667rem;
margin-left: 0.0666666667rem;
}
.largestBox ul li .userInfo .nick .woman img {
width: 0.2133333333rem;
height: 0.2133333333rem;
border-radius: 50%;
margin: 0;
}
.largestBox ul li .userInfo p {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

89
view/molistar/modules/room_rank/css/index.scss
View File

@@ -39,19 +39,19 @@ body {
.largestBox {
width: px2rem(750);
min-height: px2rem(1154);
min-height: px2rem(956);
background: url(../images/bg.png) no-repeat;
background-size: px2rem(750) px2rem(1154);
background-size: px2rem(750) px2rem(956);
margin: 0 auto;
position: relative;
box-sizing: border-box;
padding: px2rem(90) 0 0 0;
background-color: #2B1102;
.title {
width: px2rem(422);
height: px2rem(80);
position: absolute;
top: px2rem(-11);
top: px2rem(0);
left: 50%;
transform: translateX(-50%);
}
@@ -69,6 +69,7 @@ body {
color: #FFF7B7;
font-size: px2rem(28);
font-weight: 600;
// margin-right: px2rem();
span {
background: none;
@@ -109,6 +110,7 @@ body {
justify-content: space-between;
background: rgba(0, 0, 0, 0.5);
border-radius: px2rem(22);
div {
width: px2rem(180);
height: px2rem(46);
@@ -119,6 +121,7 @@ body {
// background: rgba(210, 172, 252, .4);
font-size: px2rem(24);
font-weight: 500;
z-index: 999;
}
.dayTabColor1 {
@@ -135,7 +138,7 @@ body {
.top3 {
width: px2rem(660);
height: px2rem(1);
margin: px2rem(280) auto 0;
margin: px2rem(190) auto 0;
position: relative;
.no1 {
@@ -144,7 +147,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: px2rem(-216);
top: px2rem(-226);
.box {
width: 100%;
@@ -237,7 +240,7 @@ body {
font-weight: 500;
position: absolute;
left: 0;
bottom: px2rem(-75);
bottom: px2rem(-65);
}
}
}
@@ -247,7 +250,7 @@ body {
height: px2rem(220);
position: absolute;
left: 0;
top: px2rem(-140);
top: px2rem(-146);
.box {
width: 100%;
@@ -321,7 +324,7 @@ body {
display: flex;
justify-content: center;
box-sizing: border-box;
bottom: px2rem(-54);
bottom: px2rem(-50);
padding: 0 px2rem(25);
img {
@@ -340,7 +343,7 @@ body {
font-weight: 500;
position: absolute;
left: 0;
bottom: px2rem(-85);
bottom: px2rem(-70);
}
}
}
@@ -350,7 +353,7 @@ body {
height: px2rem(220);
position: absolute;
right: 0;
top: px2rem(-140);
top: px2rem(-146);
.box {
width: 100%;
@@ -423,7 +426,7 @@ body {
display: flex;
justify-content: center;
box-sizing: border-box;
bottom: px2rem(-54);
bottom: px2rem(-50);
padding: 0 px2rem(25);
img {
@@ -442,7 +445,7 @@ body {
font-weight: 500;
position: absolute;
left: 0;
bottom: px2rem(-85);
bottom: px2rem(-70);
}
}
}
@@ -450,17 +453,18 @@ body {
ul {
// width: px2rem(718);
height: px2rem(578);
margin: px2rem(230) px2rem(32) 0;
height: px2rem(508);
margin: px2rem(200) px2rem(32) 0;
// background: rgba(255, 167, 141, 0.16);
// border-radius: px2rem(32) px2rem(32) 0px 0px;
// border: px2rem(2) solid rgba(255, 217, 115, 0.5);
// backdrop-filter: blur(7px);
// border-bottom: none;
// box-sizing: border-box;
padding: px2rem(16) 0 px2rem(140);
padding: px2rem(16) 0 px2rem(200);
overflow-y: scroll;
&::-webkit-scrollbar{
&::-webkit-scrollbar {
display: none;
}
@@ -470,10 +474,11 @@ body {
box-sizing: border-box;
padding: 0 px2rem(25);
overflow: hidden;
background: linear-gradient(90deg,#A0641E, #3D1901);
background: linear-gradient(90deg, #A0641E, #3D1901);
border-radius: px2rem(21);
border: px2rem(2) solid #DCA452;
margin-top: px2rem(21);
.num {
width: px2rem(40);
height: 100%;
@@ -500,8 +505,54 @@ body {
width: px2rem(210);
float: left;
.nick {
display: flex;
// justify-content: center;
align-items: end;
.boy {
width: px2rem(28);
height: px2rem(28);
border-radius: 50%;
background: #6BB3FF;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: px2rem(8);
margin-left: px2rem(5);
img {
width: px2rem(16);
height: px2rem(16);
border-radius: 50%;
// margin: px2rem(5) auto 0;
// margin: 0 0 0 px2rem(4);
margin: 0;
}
}
.woman {
width: px2rem(28);
height: px2rem(28);
border-radius: 50%;
background: #FF80CC;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: px2rem(8);
margin-left: px2rem(5);
img {
width: px2rem(16);
height: px2rem(16);
border-radius: 50%;
// margin: px2rem(5) auto 0;
margin: 0;
}
}
}
p {
width: 100%;
// width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

8
view/molistar/modules/room_rank/js/index.js
View File

@@ -202,7 +202,13 @@ function listDomFun(res, num) {
<div class="num">${i + 4}</div>
<img src="${res.avatar}" uid=${res.uid} alt="" class="tx">
<div class="userInfo">
<p>${res.nick}</p>
<div class="nick">
<p>${res.nick}</p>
<div class="${res.gender == 1?'boy':'woman'}">
<img src="${res.gender == 1?'./images/boy.png' : './images/woman.png'}" alt="" class="icon"></img>
</div>
</div>
<img src="${res.experUrl}" alt="" class="icon1">
<img src="${res.charmUrl}" alt="" class="icon2">
</div>