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

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <script setup lang="ts">
  2. import { setToken } from 'libs/token'
  3. import { onBeforeUnmount, onMounted, ref } from 'vue'
  4. import { useRouter } from 'vue-router'
  5. const router = useRouter()
  6. const progress = ref(0) // 进度条数值
  7. let timer: any = null // 定时器标识
  8. // 登录成功后开始随机进度条动画
  9. const startProgress = () => {
  10. timer = setInterval(() => {
  11. // 生成1-5%的随机步长
  12. const randomStep = Math.floor(Math.random() * 9 + 1) // 1-5之间的随机整数
  13. // 计算新进度(不超过100%)
  14. progress.value = Math.min(progress.value + randomStep, 100)
  15. // 达到100%时停止并跳转
  16. if (progress.value >= 100) {
  17. clearInterval(timer)
  18. router.push('/')
  19. }
  20. }, 100) // 每500ms更新一次
  21. }
  22. onMounted(() => {
  23. setToken('111')
  24. startProgress()
  25. })
  26. // login({ username: 'admin', password: '12345' }).then((res: any) => {
  27. // setToken(res)
  28. //
  29. // })
  30. // 组件卸载时清理定时器
  31. onBeforeUnmount(() => {
  32. clearInterval(timer)
  33. })
  34. </script>
  35. <template>
  36. <div>
  37. <!-- 进度条容器 -->
  38. <div class="progress-container">
  39. <div class="progress-bar" :style="{ width: `${progress}%` }" />
  40. <div class="progress-text">
  41. v1.0.1系统初始化中 {{ progress }}%
  42. </div>
  43. </div>
  44. </div>
  45. </template>
  46. <style scoped lang="scss">
  47. .login-container {
  48. display: flex;
  49. flex-direction: column;
  50. align-items: center;
  51. justify-content: center;
  52. height: 100vh;
  53. background: #f0f2f5;
  54. }
  55. img {
  56. width: 600px;
  57. position: absolute;
  58. top: 40%;
  59. right: 20%;
  60. }
  61. .progress-container {
  62. width: 50%;
  63. height: 50px;
  64. background: #e4e7ed;
  65. border-radius: 30px;
  66. position: relative;
  67. top: 90%;
  68. margin: 0 auto;
  69. }
  70. .progress-bar {
  71. height: 100%;
  72. background: linear-gradient(90deg, #096ae0, #0657c0);
  73. border-radius: 30px;
  74. transition: width 0.3s ease;
  75. }
  76. .progress-text {
  77. position: absolute;
  78. top: 50%;
  79. left: 50%;
  80. transform: translate(-50%, -50%);
  81. color: #fff;
  82. font-size: 16px;
  83. font-weight: 500;
  84. }
  85. </style>