108 lines
2.2 KiB
Vue
108 lines
2.2 KiB
Vue
<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>
|