lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: ♻️ 添加加载动画

This commit is contained in:
郝先瑞 2023-11-03 17:27:09 +08:00
parent fbd82fa911
commit f0bd1999c8
2 changed files with 98 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
index.html
View File

@ -13,10 +13,83 @@
</head>
<body>
<div id="app" class="app"></div>
<div id="app" class="app">
<!--加载动画-->
<div class="cm-spinner"></div>
</div>
<script type="module" src="/src/main.ts"></script>
<script>
global = globalThis;
</script>
<style>
html,
body,
#app {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
}
.cm-spinner {
position: relative;
width: 150px;
height: 150px;
border: 3px solid transparent;
border-top: 4px solid #f15e41;
border-radius: 50%;
animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
.cm-spinner::before,
.cm-spinner::after {
position: absolute;
inset: 6px;
content: "";
border: 4px solid transparent;
border-radius: 50%;
}
.cm-spinner::before {
border-top-color: #bad375;
animation: 3s spin linear infinite;
animation: 3s spin linear infinite;
}
.cm-spinner::after {
border-top-color: #26a9e0;
animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</body>
</html>

29
src/views/login/index.vue
View File

@ -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;
}
}
}
}