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

Merge branch 'master' of https://gitee.com/youlaiorg/vue3-element-admin

This commit is contained in:
hxr 2023-11-05 10:56:38 +08:00
parent 0f6344792e f0bd1999c8
commit 26926dfbc9
2 changed files with 109 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>

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

@ -84,7 +84,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>
@ -275,6 +285,16 @@ function handleLogin() {
onMounted(() => {
getCaptcha();
// 主题初始化
const theme = useSettingsStore().theme;
console.log("登录页面主题", theme);
useSettingsStore().changeSetting({ key: "theme", value: theme });
if (theme == "dark") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
});
</script>
@ -286,6 +306,7 @@ onMounted(() => {
.login-container {
@apply w-full h-full flex-center;
overflow-y: auto;
background: url("@/assets/images/login-bg.jpg") no-repeat center right;
.login-form {
@ -296,10 +317,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;
}
}
}
}