feat: 登录加上loading动画，解决滑块验证二次出现时样式错乱bug

src/components/VSliderVerification/src/VSliderVerification.vue

@@ -32,8 +32,11 @@ const updateRefreshImg = () => {
   }
 }
 const addTipsNode = () => {
+  if (document.querySelector('.v-slider-verification-tips')) {
+    return
+  }
   const childNode = document.createElement('div')
-  childNode.className = 'tips'
+  childNode.className = 'v-slider-verification-tips'
   childNode.innerHTML = `
     <div style="margin-bottom: 5px; text-align: right;">
       <span class="font_family icon-icon_reject_b close-icon" style="margin-right: -20px;">
@@ -170,9 +173,6 @@ defineExpose({
   width: 400px;
   height: 365px;
   padding: 40px;
-  .tips {
-    text-align: center;
-  }
 }
 </style>
 <style lang="scss">
@@ -186,7 +186,7 @@ defineExpose({
     background-color: var(--color-slider-bg);
     border-radius: 16px;
     box-shadow: -2px 2px 12px 0 rgba(0, 0, 0, 0.5);
-    .tips {
+    .v-slider-verification-tips {
       margin-bottom: 16px;
       text-align: center;
       .close-icon {

src/views/Login/src/loginView.vue

@@ -173,13 +173,14 @@ const handleVerification = () => {
   // 这里是登录逻辑
   // handleLoginAfterVerify()
 }
+const loginLoading = ref(false)
 // 验证结束后通过status值判断调登录还是忘记密码接口
 const confirmVerification = () => {
   // 生成验证成功的密文
   const pwd = dayjs().unix()
   confirmVerifyStatus.value = encryptVerificationPwd(pwd)
   isShowSliderVerification.value = false
-
+  loginLoading.value = true
   if (status.value === 'login') {
     handleLoginAfterVerify()
   } else {
@@ -259,6 +260,9 @@ const handleLoginAfterVerify = () => {
       }
       handleResult(res)
     })
+    .finally(() => {
+      loginLoading.value = false
+    })
 }
 
 // 从忘记密码返回登录
@@ -285,6 +289,7 @@ const handleForgot = () => {
 }
 const handleSendPassword = () => {
   if (!isUserNameExit.value || !loginForm.value.username) {
+    loginLoading.value = false
     return
   }
   // 这里是发送密码逻辑
@@ -299,6 +304,9 @@ const handleSendPassword = () => {
         backLogin(true)
       }
     })
+    .finally(() => {
+      loginLoading.value = false
+    })
 }
 
 const isEmailTips = ref(false)
@@ -327,7 +335,14 @@ const firstLoginTipsRef = ref()
 </script>
 
 <template>
-  <div class="login" :class="{ 'dark-bg': themeStore.theme === 'dark' }">
+  <div
+    class="login"
+    v-loading.fullscreen.lock="loginLoading"
+    element-loading-text="Loading..."
+    element-loading-custom-class="element-loading"
+    element-loading-background="rgb(43, 47, 54, 0.7)"
+    :class="{ 'dark-bg': themeStore.theme === 'dark' }"
+  >
     <ScoringSystem class="scoring-system"></ScoringSystem>
     <el-card class="login-card" v-if="status === 'login'">
       <div class="card-title" :class="{ 'is-dark': themeStore.theme === 'dark' }">