refactor: ♻️ 添加加载动画

Former-commit-id: f0bd1999c8a520a507558ce5339c0043025b22ad
2023-11-03 17:27:09 +08:00
parent 56d4cdcac2
commit f87afc18ef
2 changed files with 98 additions and 6 deletions
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -83,7 +83,17 @@
          />

          <div class="captcha">
-            <img :src="captchaBase64" @click="getCaptcha" />
+            <el-image
+              :src="captchaBase64"
+              @click="getCaptcha"
+              class="w-[120px] h-[48px] cursor-pointer"
+            >
+              <template #error>
+                <div class="image-slot">
+                  <i-ep-picture />
+                </div>
+              </template>
+            </el-image>
          </div>
        </el-form-item>

@@ -305,10 +315,19 @@ onMounted(() => {
      top: 0;
      right: 0;

-      img {
-        width: 120px;
-        height: 48px;
-        cursor: pointer;
+      .image-slot {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+        width: 100%;
+        height: 100%;
+        font-size: 18px;
+        color: var(--el-text-color-secondary);
+        background: var(--el-fill-color-light);
+
+        svg {
+          margin-right: 10px;
+        }
      }
    }
  }