首屏进度条

src/pages/homePage/index.vue

 <template>
-    <view class="container">w</view>
+    <view class="container">
+        <view class="title">
+            <image src="./image/title.png" class="angelTitle" />
+            <image src="./image/title2.png" class="gameTitle" />
+            <view class="items">
+                <!-- 进度条背景，包含Vector图片 -->
+                <view class="jindutiaoImg">
+                    <!-- 进度条填充部分 -->
+                    <view 
+                        class="progress-fill" 
+                        :style="{ width: progressWidth + 'rpx' }"
+                    ></view>
+                    <!-- Vector 图片在进度条内部，根据进度位置移动 -->
+                    <image 
+                        src="./image/Vector.png" 
+                        class="Vector" 
+                        :style="{ left: vectorLeft + 'rpx' }" 
+                    />
+                </view>
+                <view class="progress">加载资源中<text style="margin-left: 10rpx;">{{ displayProgress }}%</text></view>
+            </view>
+        </view>
+    </view>
 </template>
-<script setup></script>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+// 进度值（0-100）
+const progress = ref(0)
+// Vector图片的left位置（rpx单位）
+const vectorLeft = ref(0)
+// 进度条填充宽度（rpx单位）
+const progressWidth = ref(0)
+
+// 计算属性：显示用的整数进度值
+const displayProgress = computed(() => {
+    return Math.floor(progress.value) // 取整，去掉小数部分
+})
+
+// 进度条总长度
+const PROGRESS_TOTAL_WIDTH = 654 // rpx
+// 进度条边框宽度
+const PROGRESS_BORDER_WIDTH = 4 // rpx
+// Vector图片宽度
+const VECTOR_WIDTH = 36 // rpx
+// Vector图片在进度条内的垂直位置调整
+const VECTOR_TOP_OFFSET = -24 // rpx，使其在进度条内部居中显示
+
+// 模拟加载进度
+let timer = null
+
+const startLoading = () => {
+    // 清除之前的定时器
+    if (timer) clearInterval(timer)
+    
+    // 重置进度
+    progress.value = 0
+    vectorLeft.value = 0
+    progressWidth.value = 0
+    
+    // 模拟加载进度
+    timer = setInterval(() => {
+        if (progress.value < 100) {
+            const increment = Math.random() * 5 + 1
+            progress.value = Math.min(progress.value + increment, 100)
+            
+            // 计算Vector图片位置（使其在进度条内部移动）
+            // 有效进度条宽度 = 总宽度 - 2 * 边框宽度
+            const effectiveWidth = PROGRESS_TOTAL_WIDTH - 2 * PROGRESS_BORDER_WIDTH
+            // Vector图片位置 = 进度百分比 * 有效宽度 - Vector图片宽度/2
+            // 减去VECTOR_WIDTH/2是为了让图片中心对齐进度条末端
+            vectorLeft.value = (progress.value / 100) * effectiveWidth - VECTOR_WIDTH / 2
+            // 确保Vector图片不超过进度条范围
+            vectorLeft.value = Math.max(0, Math.min(vectorLeft.value, effectiveWidth - VECTOR_WIDTH))
+            
+            // 计算进度条填充宽度
+            progressWidth.value = (progress.value / 100) * effectiveWidth
+        } else {
+            // 加载完成
+            clearInterval(timer)
+            progress.value = 100
+            // Vector图片移动到最右边
+            const effectiveWidth = PROGRESS_TOTAL_WIDTH - 2 * PROGRESS_BORDER_WIDTH
+            vectorLeft.value = effectiveWidth - VECTOR_WIDTH
+            progressWidth.value = effectiveWidth
+            
+            // 加载完成后的处理
+            setTimeout(() => {
+                console.log('资源加载完成！')
+                // 这里可以跳转到下一个页面
+                // uni.navigateTo({ url: '' })
+            }, 500)
+        }
+    }, 100)
+}
+
+// 页面加载时开始加载进度
+onMounted(() => {
+    startLoading()
+})
+
+// 页面卸载时清除定时器
+onUnmounted(() => {
+    if (timer) clearInterval(timer)
+})
+
+defineExpose({
+    startLoading,
+    getProgress: () => Math.floor(progress.value) // 返回整数进度
+})
+</script>
+
 <style scoped lang="scss">
-.container{
+.container {
     width: 100%;
-    min-height: 100%;
+    min-height: 100vh;
+    background: radial-gradient(79.78% 40.09% at 50% 50%, #5FA5EC 0%, var(--, #06C) 100%);
+    position: relative;
+
+    .title {
+        position: absolute;
+        top: 350rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .angelTitle {
+            width: 275rpx;
+            height: 34.9rpx;
+        }
+
+        .gameTitle {
+            width: 560rpx;
+            height: 336rpx;
+            margin-top: 33rpx;
+        }
+        
+        .items {
+            text-align: center;
+            position: relative;
+            width: 654rpx;
+            margin-top: 154rpx;
+            
+            .jindutiaoImg {
+                position: relative;
+                width: 654rpx;
+                height: 46rpx;
+                border-radius: 44rpx;
+                border: 4rpx solid #000;
+                background: #495165;
+                box-sizing: border-box;
+                
+                .progress-fill {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    height: 100%;
+                    background: linear-gradient(90deg, #3D8FE0 0%, #214E7A 100%);
+                    border-radius: 44rpx;
+                    transition: width 0.3s ease;
+                    z-index: 1;
+                }
+                
+                .Vector {
+                    width: 60rpx;
+                    height: 70rpx;
+                    position: absolute;
+                    top: -17rpx;
+                    z-index: 10;
+                    transition: left 0.3s ease;
+                }
+            }
+            
+            .progress {
+                margin-top: 40rpx;
+                font-size: 26rpx;
+                font-weight: 400;
+                color: #FFFFFF;
+                 letter-spacing: 2.86rpx;
                 
+                text {
+                    margin-left: 10rpx;
+                }
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file