From c2215ffa677172227f9ca550386ed6ccd332a047 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 12 Dec 2025 17:05:05 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=9B=BA=E5=AE=9A=E6=8E=92=E8=A1=8C?=
 =?UTF-8?q?=E6=A6=9C):=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Ranking/KingAndQueen/TopList.vue    | 134 ++++++-----
 src/views/Ranking/Overall/Ranking.vue         |   3 +
 src/views/Ranking/WeeklyStar/WeeklyStar.vue   | 210 ++++++++++--------
 .../Ranking/WeeklyStar/components/topUser.vue |  30 +--
 4 files changed, 221 insertions(+), 156 deletions(-)

diff --git a/src/views/Ranking/KingAndQueen/TopList.vue b/src/views/Ranking/KingAndQueen/TopList.vue
index b0a786a..a8571df 100644
--- a/src/views/Ranking/KingAndQueen/TopList.vue
+++ b/src/views/Ranking/KingAndQueen/TopList.vue
@@ -86,12 +86,12 @@
                 <div
                   style="
                     color: #fff;
+                    font-size: 0.8em;
                     font-weight: 860;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                   "
-                  class="topName"
                 >
                   {{ topUser.userInfo.userNickname }}
                 </div>
@@ -137,12 +137,12 @@
               <itemCenter :imgUrl="imageUrl('gift')">
                 <img v-smart-img :src="gift.giftPhoto" alt="" width="50%" />
               </itemCenter>
-              <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
+              <div style="display: flex; justify-content: center; align-items: center; gap: 2px">
                 <img
                   v-smart-img
                   src="/src/assets/icon/coin.png"
                   alt=""
-                  style="width: 18%; aspect-ratio: 1/1"
+                  style="display: block; width: 1.3em; aspect-ratio: 1/1"
                 />
                 <div style="color: rgba(255, 255, 255, 1); font-weight: 590">
                   {{ gift.giftCandy }}
@@ -192,7 +192,7 @@
             <itemCenter
               :imgUrl="imageUrl('border-item-user')"
               style="margin: -2px 0"
-              :contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 4px;`"
+              :contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 8px;`"
               v-for="(listItem, index) in topList"
               :key="index"
               @click="viewUserInfo(listItem.userId)"
@@ -200,17 +200,27 @@
               <!-- 基本信息 -->
               <div
                 style="
-                  width: 75%;
+                  flex: 1;
                   min-width: 0;
+                  align-self: stretch;
+
                   display: flex;
                   justify-content: space-around;
                   align-items: center;
-                  gap: 4px;
+                  gap: 8px;
                 "
               >
                 <!-- 排名 -->
                 <div
-                  style="width: 15%; display: flex; justify-content: center; align-items: center"
+                  style="
+                    width: auto;
+                    min-width: 0;
+                    align-self: stretch;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
                 >
                   <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
                 </div>
@@ -218,7 +228,7 @@
                 <!-- 头像 -->
                 <div
                   style="
-                    width: 24%;
+                    width: 4em;
                     aspect-ratio: 1/1;
                     border-radius: 50%;
                     background: linear-gradient(
@@ -250,8 +260,10 @@
                 <!-- 名称 -->
                 <div
                   style="
+                    flex: 1;
                     min-width: 0;
-                    width: calc(100% - 15% - 24% - 8px);
+                    padding: 0 2px;
+
                     display: flex;
                     flex-direction: column;
                   "
@@ -259,31 +271,41 @@
                   <div
                     style="
                       width: 100%;
+
                       color: #fff;
                       font-weight: 860;
+
                       overflow: hidden;
                       white-space: nowrap;
                       text-overflow: ellipsis;
                     "
-                    class="topUserNickname"
                   >
                     {{ listItem.userNickname }}
                   </div>
-                  <div style="color: #fff; font-weight: 590" class="topUserNickname">
+                  <div style="color: #fff; font-weight: 590">
                     {{ $t('user_id_prefix') }} {{ listItem.account }}
                   </div>
                 </div>
               </div>
 
               <!-- 贡献值 -->
-              <div style="flex: 1; min-width: 0; display: flex; align-items: center">
+              <div
+                style="
+                  width: auto;
+                  min-width: 0;
+                  align-self: stretch;
+
+                  display: flex;
+                  align-items: center;
+                "
+              >
                 <img
                   v-smart-img
                   src="/src/assets/icon/coin.png"
                   alt=""
-                  style="display: block; width: 30%; aspect-ratio: 1/1"
+                  style="display: block; width: 1.3em; aspect-ratio: 1/1"
                 />
-                <div style="color: #edb247; font-weight: 700" class="topUserNickname">
+                <div style="color: #edb247; font-weight: 700">
                   {{ listItem.quantity }}
                 </div>
               </div>
@@ -380,12 +402,12 @@
                       <div
                         style="
                           color: #fff;
+                          font-size: 0.7em;
                           font-weight: 860;
                           overflow: hidden;
                           white-space: nowrap;
                           text-overflow: ellipsis;
                         "
-                        class="topName"
                       >
                         {{ topOne.userInfo.userNickname }}
                       </div>
@@ -579,34 +601,48 @@
         style="
           position: absolute;
           inset: 0;
+
+          padding: 2vw 4vw 0;
+
           display: flex;
           align-items: center;
           justify-content: space-around;
-          padding: 2% 2% 0;
           gap: 4px;
         "
       >
         <!-- 基本信息 -->
         <div
           style="
-            width: 75%;
+            flex: 1;
             min-width: 0;
+            align-self: stretch;
+
             display: flex;
-            justify-content: space-around;
             align-items: center;
-            gap: 4px;
+            gap: 8px;
           "
         >
           <!-- 排名 -->
-          <div style="width: 15%; display: flex; justify-content: center; align-items: center">
-            <div style="color: #edb247; font-weight: 700">
+          <div
+            style="
+              width: auto;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
               {{ (myRanking.userSex == 1 ? myRanking.wealthRank : myRanking.charmRank) || 999 }}
             </div>
           </div>
+
           <!-- 头像 -->
           <div
             style="
-              width: 25%;
+              width: 5em;
               aspect-ratio: 1/1;
               border-radius: 50%;
               background: linear-gradient(to bottom, rgba(255, 224, 60, 1), rgba(255, 189, 19, 1));
@@ -634,8 +670,11 @@
           <!-- 名称 -->
           <div
             style="
+              flex: 1;
               min-width: 0;
-              width: calc(100% - 15% - 25% - 8px);
+              font-weight: 700;
+              padding: 0 4px;
+
               display: flex;
               flex-direction: column;
             "
@@ -643,7 +682,9 @@
             <div
               style="
                 color: #fff;
+                font-size: 1.1em;
                 font-weight: 860;
+
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
@@ -654,18 +695,31 @@
           </div>
         </div>
 
-        <div style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px">
+        <!-- 贡献值 -->
+        <div
+          style="
+            width: auto;
+            min-width: 0;
+            align-self: stretch;
+
+            display: flex;
+            align-items: center;
+          "
+        >
           <img
             v-smart-img
             src="/src/assets/icon/coin.png"
             alt=""
-            style="display: block; width: 35%; aspect-ratio: 1/1"
+            style="display: block; width: 1.5em; aspect-ratio: 1/1"
           />
           <!-- 1:男,0:女 -->
-          <div v-if="myRanking.userSex == 1" style="color: #edb247; font-weight: 700">
+          <div
+            v-if="myRanking.userSex == 1"
+            style="color: #edb247; font-size: 1.1em; font-weight: 700"
+          >
             {{ myRanking.wealthQuantity }}
           </div>
-          <div v-else style="color: #edb247; font-weight: 700">
+          <div v-else style="color: #edb247; font-size: 1.1em; font-weight: 700">
             {{ myRanking.charmQuantity }}
           </div>
         </div>
@@ -1055,31 +1109,15 @@ onUnmounted(() => {
   font-weight: 860;
 }
 
-.topUserNickname {
-  font-size: 0.8em;
-}
-
-.topUserNickname::-webkit-scrollbar {
-  display: none;
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
   }
-
-  .topName {
-    font-size: 8px;
-  }
 }
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 16px;
-  }
-
-  .topName {
-    font-size: 10px;
+    font-size: 12px;
   }
 }
 
@@ -1087,19 +1125,11 @@ onUnmounted(() => {
   * {
     font-size: 24px;
   }
-
-  .topName {
-    font-size: 20px;
-  }
 }
 
 @media screen and (min-width: 1024px) {
   * {
     font-size: 32px;
   }
-
-  .topName {
-    font-size: 30px;
-  }
 }
 </style>
diff --git a/src/views/Ranking/Overall/Ranking.vue b/src/views/Ranking/Overall/Ranking.vue
index 6a0c92c..e7a47b4 100644
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/src/views/Ranking/Overall/Ranking.vue
@@ -231,6 +231,7 @@
                 style="
                   display: block;
                   width: 3em;
+
                   aspect-ratio: 1/1;
                   border-radius: 50%;
                   object-fit: cover;
@@ -244,6 +245,7 @@
                 style="
                   flex: 1;
                   min-width: 0;
+                  padding: 0 4px;
 
                   font-weight: 700;
                   overflow: hidden;
@@ -356,6 +358,7 @@
               flex: 1;
               min-width: 0;
               font-weight: 700;
+              padding: 0 4px;
 
               overflow: hidden;
               white-space: nowrap;
diff --git a/src/views/Ranking/WeeklyStar/WeeklyStar.vue b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
index 0d2a0f6..8cc31c7 100644
--- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue
+++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
@@ -164,13 +164,15 @@
             style="margin-top: 3%; position: relative"
             @click="viewUserInfo(listItem.userId)"
             :imgUrl="imageUrl('itemUser')"
-            :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 4px;`"
+            :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
           >
             <!-- 基本信息 -->
             <div
               style="
-                width: 75%;
+                flex: 1;
                 min-width: 0;
+                align-self: stretch;
+
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
@@ -178,7 +180,17 @@
               "
             >
               <!-- 排名 -->
-              <div style="width: 15%; display: flex; justify-content: center; align-items: center">
+              <div
+                style="
+                  width: auto;
+                  min-width: 0;
+                  align-self: stretch;
+
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                "
+              >
                 <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
               </div>
 
@@ -188,8 +200,9 @@
                 :src="listItem.userAvatar || ''"
                 alt=""
                 style="
-                  width: 25%;
-                  margin: 0 2%;
+                  display: block;
+                  width: 3em;
+
                   aspect-ratio: 1/1;
                   border-radius: 50%;
                   object-fit: cover;
@@ -200,8 +213,10 @@
               <!-- 名称、id -->
               <div
                 style="
+                  flex: 1;
                   min-width: 0;
-                  width: calc(100% - 15% - 25% - 8px);
+                  padding: 0 2px;
+
                   display: flex;
                   flex-direction: column;
                 "
@@ -210,24 +225,38 @@
                   style="
                     color: #fff;
                     font-weight: 860;
+
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                   "
-                  class="UserNickname"
                 >
                   {{ listItem.userNickname }}
                 </div>
-                <div style="color: #fff; font-weight: 590" class="UserNickname">
+                <div style="color: #fff; font-weight: 590">
                   {{ $t('user_id_prefix') }} {{ listItem.account }}
                 </div>
               </div>
             </div>
 
             <!-- 贡献值 -->
-            <div style="flex: 1; min-width: 0; display: flex; align-items: center">
-              <img v-smart-img src="/src/assets/icon/coin.png" alt="" style="width: 30%" />
-              <div style="color: #edb247; font-weight: 700" class="UserNickname">
+            <div
+              style="
+                width: auto;
+                min-width: 0;
+                align-self: stretch;
+
+                display: flex;
+                align-items: center;
+              "
+            >
+              <img
+                v-smart-img
+                src="/src/assets/icon/coin.png"
+                alt=""
+                style="display: block; width: 1.3em; aspect-ratio: 1/1"
+              />
+              <div style="color: #edb247; font-weight: 700">
                 {{ listItem.quantity }}
               </div>
             </div>
@@ -384,103 +413,106 @@
     <div style="height: 25vw"></div>
 
     <!-- 我的排名 -->
-    <div
+    <itemCenter
       style="
-        position: fixed;
-        bottom: 0;
         width: 100vw;
         background-color: #311300;
-        display: flex;
-        justify-content: center;
         margin-top: 10px;
+
+        position: fixed;
+        bottom: 0;
         z-index: 999;
       "
+      :imgUrl="imageUrl('myRankingBg')"
+      :contentStyle="`padding: 4vw;gap: 8px;`"
     >
-      <img
-        v-smart-img
-        :src="imageUrl('myRankingBg')"
-        alt=""
-        style="width: calc(100% - 1px); display: block"
-      />
-
+      <!-- 基本信息 -->
       <div
         style="
-          position: absolute;
-          inset: 0;
+          flex: 1;
+          min-width: 0;
+          align-self: stretch;
+
           display: flex;
+          justify-content: space-around;
           align-items: center;
-          justify-content: center;
-          padding: 4% 2%;
-          gap: 4px;
+          gap: 8px;
         "
       >
-        <!-- 基本信息 -->
+        <!-- 排名 -->
         <div
           style="
-            width: 79%;
+            width: auto;
             min-width: 0;
+            align-self: stretch;
+
             display: flex;
-            justify-content: space-around;
+            justify-content: center;
             align-items: center;
-            gap: 4px;
           "
         >
-          <!-- 排名 -->
-          <div style="width: 15%; display: flex; justify-content: center; align-items: center">
-            <div style="color: #edb247; font-weight: 700">{{ myRanking.rank || 999 }}</div>
-          </div>
-          <!-- 头像 -->
-          <img
-            v-smart-img
-            :src="myRanking.userAvatar || ''"
-            alt=""
-            style="
-              display: block;
-              width: 20%;
-              aspect-ratio: 1/1;
-              border-radius: 50%;
-              object-fit: cover;
-            "
-            @error="handleAvatarImageError"
-          />
-          <!-- 名称 -->
-          <div
-            style="
-              min-width: 0;
-              width: calc(100% - 15% - 20% - 8px);
-              display: flex;
-              flex-direction: column;
-            "
-          >
-            <div
-              style="
-                color: #fff;
-                font-weight: 860;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              "
-              class="UserNickname"
-            >
-              {{ myRanking.userNickname }}
-            </div>
+          <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
+            {{ myRanking.rank || 999 }}
           </div>
         </div>
 
-        <!-- 贡献值 -->
-        <div style="flex: 1; min-width: 0; display: flex; align-items: center">
-          <img
-            v-smart-img
-            src="/src/assets/icon/coin.png"
-            alt=""
-            style="display: block; width: 30%; aspect-ratio: 1/1"
-          />
-          <div style="color: #edb247; font-weight: 700">
-            {{ myRanking.quantity || 0 }}
-          </div>
+        <!-- 头像 -->
+        <img
+          v-smart-img
+          :src="myRanking.userAvatar || ''"
+          alt=""
+          style="
+            display: block;
+            width: 3.5em;
+            aspect-ratio: 1/1;
+            border-radius: 50%;
+            object-fit: cover;
+          "
+          @error="handleAvatarImageError"
+        />
+
+        <!-- 名称 -->
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+
+            color: #fff;
+            font-size: 1.1em;
+            font-weight: 860;
+            padding: 0 4px;
+
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          "
+        >
+          {{ myRanking.userNickname || '' }}
         </div>
       </div>
-    </div>
+
+      <!-- 贡献值 -->
+      <div
+        style="
+          width: auto;
+          min-width: 0;
+          align-self: stretch;
+
+          display: flex;
+          align-items: center;
+        "
+      >
+        <img
+          v-smart-img
+          src="/src/assets/icon/coin.png"
+          alt=""
+          style="display: block; width: 1.4em; aspect-ratio: 1/1"
+        />
+        <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
+          {{ myRanking.quantity || 0 }}
+        </div>
+      </div>
+    </itemCenter>
 
     <!-- 弹窗遮罩层 -->
     <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
@@ -650,14 +682,14 @@
           </itemCenter>
 
           <!-- 礼物价值 -->
-          <div style="display: flex; justify-content: center">
+          <div style="display: flex; justify-content: center; align-items: center; gap: 2px">
             <img
               v-smart-img
               src="/src/assets/icon/coin.png"
               alt=""
-              style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+              style="display: block; width: 1.3em; aspect-ratio: 1/1; object-fit: cover"
             />
-            <div style="color: #fff; font-weight: 590; margin-left: 2px">
+            <div style="color: #fff; font-weight: 590">
               {{ gift.giftCandy }}
             </div>
           </div>
@@ -1167,10 +1199,6 @@ onUnmounted(() => {
   font-size: 0.8em;
 }
 
-.UserNickname {
-  font-size: 0.8em;
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
@@ -1179,7 +1207,7 @@ onUnmounted(() => {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 16px;
+    font-size: 12px;
   }
 }
 
diff --git a/src/views/Ranking/WeeklyStar/components/topUser.vue b/src/views/Ranking/WeeklyStar/components/topUser.vue
index fb33040..98ba52f 100644
--- a/src/views/Ranking/WeeklyStar/components/topUser.vue
+++ b/src/views/Ranking/WeeklyStar/components/topUser.vue
@@ -58,7 +58,7 @@
           </div>
         </div>
         <div
-          style="height: 36%; display: flex; justify-content: center; align-items: center"
+          style="height: 40%; display: flex; justify-content: center; align-items: center"
           :style="{ width: isTopOne ? '30%' : '40%' }"
         >
           <div
@@ -120,30 +120,34 @@ const props = defineProps({
 }
 
 .top1Text {
-  font-size: 12px;
+  font-size: 0.9em;
 }
 
 .text {
-  font-size: 10px;
+  font-size: 0.8em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
 }
 
 @media screen and (min-width: 768px) {
-  .top1Text {
+  * {
     font-size: 24px;
   }
-
-  .text {
-    font-size: 20px;
-  }
 }
 
 @media screen and (min-width: 1024px) {
-  .top1Text {
+  * {
     font-size: 32px;
   }
-
-  .text {
-    font-size: 28px;
-  }
 }
 </style>