UI兼容调整

src/components/UserHeader.vue

@@ -39,7 +39,11 @@ const toUserPage = () => {
     <view class="user-details">
       <view class="user-name">
         <text>{{ user.nickName }}</text>
-        <image class="user-name-image" src="../static/vip1.png" mode="widthFix" />
+        <image
+          class="user-name-image"
+          src="../static/vip1.png"
+          mode="widthFix"
+        />
       </view>
       <view class="user-stats">
         <text class="level-tag level-tag-first">钻石1级</text>
@@ -51,9 +55,17 @@ const toUserPage = () => {
       </view>
     </view>
     <view v-if="showRank === true" class="rank-info">
-      <image class="rank-info-image" src="../static/global-rank.png" mode="widthFix" />
+      <image
+        class="rank-info-image"
+        src="../static/global-rank.png"
+        mode="widthFix"
+      />
       <text>本赛季全国</text>
-      <text class="rank-number">第<text :style="{ color: '#ffd700' }">{{ user.points }}/{{ user.rankLvl }}</text>名</text>
+      <text class="rank-number"
+        >第<text :style="{ color: '#ffd700' }"
+          >{{ user.points }}/{{ user.rankLvl }}</text
+        >名</text
+      >
     </view>
   </view>
 </template>
@@ -79,6 +91,14 @@ const toUserPage = () => {
   margin-bottom: 5px;
 }
 
+.user-name > text:first-child {
+  font-size: 16px;
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .user-name-image {
   margin-left: 5px;
   width: 20px;