添加音频loading页面

src/pages/load-resources.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import AudioManager from "@/audioManager";
+
+const timer = ref(null);
+const progress = ref(0);
+
+onMounted(() => {
+  timer.value = setInterval(() => {
+    const result = AudioManager.getLoadProgress();
+    if (result > progress.value) {
+      progress.value = result;
+    }
+    if (progress.value === 1) {
+      clearInterval(timer.value);
+      uni.redirectTo({
+        url: "/pages/index",
+      });
+    }
+  }, 200);
+});
+
+onBeforeUnmount(() => {
+  if (timer.value) clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="container">
+    <image
+      src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91bppqmq1mwf3f.png"
+      mode="aspectFill"
+    />
+    <image
+      src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a4hjot4ulumg.png"
+      mode="widthFix"
+    />
+    <view>
+      <view :style="{ width: `${progress * 100}%` }">
+        <image
+          src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
+          mode="widthFix"
+        />
+      </view>
+      <text>资源加载中...</text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  display: flex;
+}
+.container > image:first-child {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.container > image:nth-child(2) {
+  width: 300rpx;
+  height: 420rpx;
+  position: fixed;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.container > view:nth-child(3) {
+  width: 380rpx;
+  height: 6rpx;
+  background: #000000;
+  border-radius: 4rpx;
+  position: fixed;
+  top: 80%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.container > view:nth-child(3) > view {
+  background: #ffe431;
+  min-height: 6rpx;
+  border-radius: 4rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  transition: width 0.5s ease;
+}
+.container > view:nth-child(3) > view > image {
+  width: 46rpx;
+  height: 26rpx;
+}
+.container > view:nth-child(3) > text {
+  width: 100%;
+  opacity: 0.5;
+  font-size: 22rpx;
+  color: #ffffff;
+  text-align: center;
+  margin-top: 20rpx;
+}
+</style>