You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<script setup lang="ts"> import { setToken } from 'libs/token' import { onBeforeUnmount, onMounted, ref } from 'vue' import { useRouter } from 'vue-router'
const router = useRouter()
const progress = ref(0) // 进度条数值
let timer: any = null // 定时器标识
// 登录成功后开始随机进度条动画
const startProgress = () => { timer = setInterval(() => { // 生成1-5%的随机步长
const randomStep = Math.floor(Math.random() * 9 + 1) // 1-5之间的随机整数
// 计算新进度(不超过100%)
progress.value = Math.min(progress.value + randomStep, 100)
// 达到100%时停止并跳转
if (progress.value >= 100) { clearInterval(timer) router.push('/') } }, 100) // 每500ms更新一次
} onMounted(() => { setToken('111') startProgress() })
// login({ username: 'admin', password: '12345' }).then((res: any) => {
// setToken(res)
//
// })
// 组件卸载时清理定时器
onBeforeUnmount(() => { clearInterval(timer) }) </script>
<template> <div> <!-- 进度条容器 --> <div class="progress-container"> <div class="progress-bar" :style="{ width: `${progress}%` }" /> <div class="progress-text"> v1.0.1系统初始化中 {{ progress }}% </div> </div> </div> </template>
<style scoped lang="scss"> .login-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: #f0f2f5; } img { width: 600px; position: absolute; top: 40%; right: 20%; }
.progress-container { width: 50%; height: 50px; background: #e4e7ed; border-radius: 30px; position: relative; top: 90%; margin: 0 auto; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #096ae0, #0657c0); border-radius: 30px; transition: width 0.3s ease; }
.progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 16px; font-weight: 500; } </style>
|