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.
97 lines
2.0 KiB
97 lines
2.0 KiB
<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>
|