细节调整

src/pages/index.vue

@@ -88,7 +88,7 @@ const comingSoon = () => {
 <template>
   <view
     class="root-container"
-    :style="{ paddingTop: isIos ? '86rpx' : '70rpx' }"
+    :style="{ paddingTop: isIos ? '100rpx' : '70rpx' }"
   >
     <AppBackground />
     <UserHeader showRank :onSignin="() => (showModal = true)" />
@@ -125,7 +125,7 @@ const comingSoon = () => {
           @click="() => toPage('/pages/ranking')"
           hover-class="none"
         ></button>
-        <view class="ranking-players">
+        <view class="ranking-players" @click="toRankListPage">
           <img src="../static/juezhanbang.png" mode="widthFix" />
           <view class="divide-line"></view>
           <view class="player-avatars">
@@ -146,7 +146,7 @@ const comingSoon = () => {
                 </view>
               </block>
             </block>
-            <view class="more-players" @click="toRankListPage">
+            <view class="more-players">
               <text>{{ rankData.rank.length }}</text>
             </view>
           </view>

src/pages/ranking.vue

@@ -264,8 +264,8 @@ const toRankListPage = () => {
             </view>
           </block>
         </block>
+        <view class="see-more" @click="toRankListPage">点击查看更多</view>
       </view>
-      <view class="see-more" @click="toRankListPage">点击查看更多</view>
     </view>
   </Container>
 </template>
@@ -284,6 +284,9 @@ const toRankListPage = () => {
   border-radius: 10px;
   margin: 0 15px;
 }
+.ranking-data {
+  margin-bottom: 20px;
+}
 .ranking-my-data {
   margin-bottom: 15px;
 }
@@ -452,7 +455,7 @@ const toRankListPage = () => {
   font-size: 14px;
   text-align: center;
   width: 100%;
-  margin-top: 10px;
-  margin-bottom: 20px;
+  margin-top: 5px;
+  margin-bottom: 10px;
 }
 </style>

src/util.js

@@ -85,7 +85,7 @@ export function renderRankTitle(ctx, text) {
   const textY = 50;
   const x = textX - padding - 10; // 文字 x 坐标减去内边距
   const y = textY - fontSize - padding / 2 + 2; // 文字 y 坐标减去字体大小和内边距
-  const width = textWidth + padding * 2 - 27; // 背景宽度
+  const width = textWidth + padding * 2 - 25; // 背景宽度
   const height = fontSize + padding - 2; // 背景高度
 
   // 开始绘制圆角矩形
@@ -109,6 +109,7 @@ export function renderRankTitle(ctx, text) {
   ctx.fillStyle = "#5F51FF";
   ctx.fill();
   ctx.setFontSize(fontSize);
+  ctx.setTextAlign("center");
   ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
   ctx.fillText(text, textX, textY); // 绘制文字
 }
@@ -156,8 +157,8 @@ export function generateCanvasImage(canvasId, type, user, data) {
   ctx.drawImage("../static/share-bg.png", 0, 0, width, height);
   drawRoundImage(ctx, user.avatar, 17, 20, 32, 32, 20);
   ctx.drawImage("../static/avatar-frame.png", 12, 15, 42, 42);
-  renderText(ctx, user.nickName, 13, "#fff", 72, 34, "center");
-  renderRankTitle(ctx, user.lvlName, "center");
+  renderText(ctx, user.nickName, 13, "#fff", 58, 34);
+  renderRankTitle(ctx, user.lvlName);
 
   let titleImage = "../static/first-try-title.png";
   let subTitle = "正式开启弓箭手之路";