UI细节调整

src/pages/index.vue

@@ -74,10 +74,14 @@ const comingSoon = () => {
     icon: "none",
   });
 };
+const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
 </script>
 
 <template>
-  <view class="root-container" :style="{ paddingTop: isIos ? '45px' : '40px' }">
+  <view
+    class="root-container"
+    :style="{ paddingTop: isIos ? '86rpx' : '70rpx' }"
+  >
     <AppBackground />
     <UserHeader showRank :onSignin="() => (showModal = true)" />
     <view class="container">
@@ -106,7 +110,6 @@ const comingSoon = () => {
           <image src="../static/a3@2x.png" mode="widthFix" />
         </view>
       </view>
-
       <view class="ranking-section">
         <image src="../static/a4@2x.png" mode="widthFix" />
         <button
@@ -116,12 +119,16 @@ const comingSoon = () => {
         ></button>
         <view class="ranking-players">
           <img src="../static/juezhanbang.png" mode="widthFix" />
+          <view class="divide-line"></view>
           <view class="player-avatars">
             <view
               v-for="i in 6"
               :key="i"
               class="player-avatar"
-              :style="{ zIndex: 6 - i }"
+              :style="{
+                zIndex: 6 - i,
+                borderColor: topThreeColors[i - 1] || '#000',
+              }"
             >
               <image v-if="i === 1" src="../static/champ1.png" />
               <image v-if="i === 2" src="../static/champ2.png" />
@@ -277,7 +284,7 @@ const comingSoon = () => {
 
 .ranking-players > image:first-child {
   width: 28%;
-  margin-right: 10px;
+  transform: translateX(-10px);
 }
 
 .player-avatars {
@@ -285,13 +292,20 @@ const comingSoon = () => {
   align-items: center;
 }
 
+.divide-line {
+  width: 1px;
+  height: 35px;
+  background-color: #80808033;
+  margin-right: 8px;
+}
+
 .player-avatar,
 .more-players {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   margin-right: -10px;
-  border: 1px solid white;
+  border: 1px solid #000;
   position: relative;
 }
 
@@ -299,18 +313,18 @@ const comingSoon = () => {
 .player-avatar > view:first-child {
   position: absolute;
   top: -10px;
-  left: 10px;
-  width: 18px;
-  height: 18px;
+  left: 12px;
+  width: 16px;
+  height: 16px;
 }
 .player-avatar > view:first-child {
   border-radius: 50%;
   background: #777777;
   text-align: center;
-  font-size: 11px;
-  line-height: 20px;
-  width: 20px;
-  height: 20px;
+  font-size: 10px;
+  line-height: 18px;
+  width: 18px;
+  height: 18px;
 }
 .player-avatar > image:last-child {
   width: 100%;
@@ -320,15 +334,14 @@ const comingSoon = () => {
 
 .more-players {
   background: rgba(255, 255, 255, 0.2);
-  border: none;
-  font-size: 10px;
+  font-size: 9px;
   line-height: 40px;
-  display: flex;
-  justify-content: flex-end;
+  text-align: center;
+  z-index: -1;
 }
 
 .more-players > text {
-  margin-right: 4px;
+  margin-left: 4px;
 }
 
 .region-stats {