From 1369003805b86ba1fde2d8a38b66f61bc40c4fa5 Mon Sep 17 00:00:00 2001
From: chenruiye <862859104@qq.com>
Date: Tue, 18 Mar 2025 19:10:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=BF=E9=97=B4=E6=A6=9C?=
=?UTF-8?q?=E5=8D=95=E6=A0=B7=E5=BC=8F2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
view/molistar/modules/room_rank/css/index.css | 71 +++++++++++----
.../molistar/modules/room_rank/css/index.scss | 89 +++++++++++++++----
view/molistar/modules/room_rank/js/index.js | 8 +-
3 files changed, 132 insertions(+), 36 deletions(-)
diff --git a/view/molistar/modules/room_rank/css/index.css b/view/molistar/modules/room_rank/css/index.css
index b891ed03..b4c13229 100644
--- a/view/molistar/modules/room_rank/css/index.css
+++ b/view/molistar/modules/room_rank/css/index.css
@@ -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;
diff --git a/view/molistar/modules/room_rank/css/index.scss b/view/molistar/modules/room_rank/css/index.scss
index a1d88533..785012b2 100644
--- a/view/molistar/modules/room_rank/css/index.scss
+++ b/view/molistar/modules/room_rank/css/index.scss
@@ -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;
diff --git a/view/molistar/modules/room_rank/js/index.js b/view/molistar/modules/room_rank/js/index.js
index 973ac9fe..f079c22a 100644
--- a/view/molistar/modules/room_rank/js/index.js
+++ b/view/molistar/modules/room_rank/js/index.js
@@ -202,7 +202,13 @@ function listDomFun(res, num) {
${i + 4}
-
${res.nick}
+
+
${res.nick}
+
+
+
+
+
