添加音频重新加载功能

src/components/Container.vue

@@ -66,9 +66,7 @@ const checkAudioProgress = async () => {
       if (audioInitProgress.value === 1) return resolve();
       audioTimer.value = setInterval(() => {
         const result = AudioManager.getLoadProgress();
-        if (result > audioProgress.value) {
-          audioProgress.value = result;
-        }
+        audioProgress.value = result;
         if (audioProgress.value === 1) {
           setTimeout(() => {
             audioInitProgress.value = 1;
@@ -227,7 +225,12 @@ const goCalibration = async () => {
             mode="widthFix"
           />
         </view>
-        <text>资源加载中...</text>
+      </view>
+      <view>
+        <text>若加载时间过长，请</text>
+        <button hover-class="none" @click="AudioManager.reloadAll">
+          点击这里重启
+        </button>
       </view>
     </view>
   </view>
@@ -321,11 +324,21 @@ const goCalibration = async () => {
   width: 46rpx;
   height: 26rpx;
 }
-.audio-progress > view:nth-child(2) > text {
-  width: 100%;
+.audio-progress > view:nth-child(3) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20rpx;
+}
+.audio-progress > view:nth-child(3) > text {
   font-size: 22rpx;
   color: #a2a2a2;
   text-align: center;
-  margin-top: 10rpx;
+  line-height: 32rpx;
+}
+.audio-progress > view:nth-child(3) > button {
+  font-size: 22rpx;
+  color: #ffe431;
+  line-height: 32rpx;
 }
 </style>

src/components/UserHeader.vue

@@ -66,7 +66,7 @@ watch(
         :onClick="toUserPage"
         :size="42"
       />
-      <view class="user-details" :onClick="toUserPage">
+      <view class="user-details" @click="toUserPage">
         <view class="user-name">
           <text>{{ user.nickName }}</text>
           <image
@@ -77,7 +77,6 @@ watch(
         </view>
         <view class="user-stats">
           <text class="level-tag level-tag-first">段位积分</text>
-          <!-- <text class="level-tag level-tag-second">LV{{ user.lvl }}</text> -->
           <view class="rank-tag">
             <view
               class="rank-tag-progress"
@@ -173,13 +172,9 @@ watch(
 }
 
 .level-tag-first {
-  width: 50px;
+  padding: 0 10rpx;
   background: #5f51ff;
-}
-
-.level-tag-second {
-  width: 60rpx;
-  background: #09c504;
+  word-break: keep-all;
 }
 
 .level-tag,
@@ -191,14 +186,17 @@ watch(
 .rank-tag {
   position: relative;
   background-color: #00000038;
-  width: 150rpx;
+  width: 140rpx;
   overflow: hidden;
+  word-break: keep-all;
 }
 
 .rank-tag-progress {
   background: #ffa711;
   height: 100%;
   border-radius: 12px;
+  width: 0;
+  transition: width 0.3s ease;
 }
 
 .rank-tag-text {
@@ -211,24 +209,26 @@ watch(
 }
 
 .rank-info {
-  width: 70px;
-  text-align: left;
-  font-size: 12px;
+  width: 95px;
+  height: 50px;
+  font-size: 24rpx;
   position: relative;
   color: #b3b3b3;
-  padding-left: 8px;
-  margin-left: 15rpx;
+  padding-left: 12px;
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 .rank-info-image {
   position: absolute;
-  top: -6px;
-  left: -9px;
-  width: 90px;
+  top: 0;
+  left: 0;
+  width: 95px;
 }
 .rank-info > text {
   text-align: center;
+  word-break: keep-all;
+  width: 83px;
 }
 .rank-number {
   display: block;