|
|
@ -5,6 +5,7 @@ import { useAuthStore } from '@/stores/auth' |
|
|
import Particles from '@/components/Particles/Particles.vue' |
|
|
import Particles from '@/components/Particles/Particles.vue' |
|
|
import GlareHover from '@/components/GlareHover/GlareHover.vue' |
|
|
import GlareHover from '@/components/GlareHover/GlareHover.vue' |
|
|
import BlurText from '@/components/BlurText/BlurText.vue' |
|
|
import BlurText from '@/components/BlurText/BlurText.vue' |
|
|
|
|
|
import StarBorder from '@/components/StarBorder/StarBorder.vue' |
|
|
|
|
|
|
|
|
const router = useRouter() |
|
|
const router = useRouter() |
|
|
const authStore = useAuthStore() |
|
|
const authStore = useAuthStore() |
|
|
@ -62,26 +63,27 @@ const handleLogin = async () => { |
|
|
<form class="login-form" @submit.prevent="handleLogin"> |
|
|
<form class="login-form" @submit.prevent="handleLogin"> |
|
|
<div class="form-group"> |
|
|
<div class="form-group"> |
|
|
<label class="form-label">用户名</label> |
|
|
<label class="form-label">用户名</label> |
|
|
<input v-model="username" type="text" class="form-input" placeholder="请输入用户名" autocomplete="username" |
|
|
<input v-model="username" type="text" class="form-input" autocomplete="username" |
|
|
@keyup.enter="handleLogin" /> |
|
|
@keyup.enter="handleLogin" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
<div class="form-group"> |
|
|
<label class="form-label">密码</label> |
|
|
<label class="form-label">密码</label> |
|
|
<input v-model="password" type="password" class="form-input" placeholder="请输入密码" |
|
|
<input v-model="password" type="password" class="form-input" autocomplete="current-password" |
|
|
autocomplete="current-password" @keyup.enter="handleLogin" /> |
|
|
@keyup.enter="handleLogin" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div v-if="errorMsg" class="error-message"> |
|
|
<div v-if="errorMsg" class="error-message"> |
|
|
{{ errorMsg }} |
|
|
{{ errorMsg }} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<GlareHover width="100%" height="50px" background="transparent" border-radius="12px" |
|
|
<StarBorder as="div" color="Magenta" speed="3s" :thickness="3" @click="handleLogin"> |
|
|
border-color="rgba(255,255,255,0.15)" glare-color="#ffffff" :glare-opacity="0.15" class="login-button" |
|
|
<div class="btn-login"> |
|
|
@click="handleLogin"> |
|
|
|
|
|
<span v-if="isLoading" class="loading-text">登录中...</span> |
|
|
<span v-if="isLoading" class="loading-text">登录中...</span> |
|
|
<span v-else class="button-text">登 录</span> |
|
|
<span v-else class="button-text">登 录</span> |
|
|
</GlareHover> |
|
|
</div> |
|
|
|
|
|
</StarBorder> |
|
|
|
|
|
|
|
|
</form> |
|
|
</form> |
|
|
|
|
|
|
|
|
<div class="login-footer"> |
|
|
<div class="login-footer"> |
|
|
@ -133,7 +135,7 @@ const handleLogin = async () => { |
|
|
|
|
|
|
|
|
.login-header { |
|
|
.login-header { |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
margin-bottom: 32px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.blur-title { |
|
|
.blur-title { |
|
|
@ -190,10 +192,10 @@ const handleLogin = async () => { |
|
|
|
|
|
|
|
|
.form-input { |
|
|
.form-input { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
padding: 14px 16px; |
|
|
padding: 10px 16px; |
|
|
background: rgba(255, 255, 255, 0.03); |
|
|
background: rgba(255, 255, 255, 0.03); |
|
|
border: 1px solid rgba(255, 255, 255, 0.08); |
|
|
border: 1px solid rgba(255, 255, 255, 0.08); |
|
|
border-radius: 10px; |
|
|
border-radius: 15px; |
|
|
color: #ffffff; |
|
|
color: #ffffff; |
|
|
font-size: 0.95rem; |
|
|
font-size: 0.95rem; |
|
|
transition: all 0.3s ease; |
|
|
transition: all 0.3s ease; |
|
|
@ -227,11 +229,20 @@ const handleLogin = async () => { |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn-login { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
background: rgba(255, 255, 255, 0.03); |
|
|
|
|
|
padding: 12px 16px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.button-text, |
|
|
.button-text, |
|
|
.loading-text { |
|
|
.loading-text { |
|
|
color: #ffffff; |
|
|
color: #ffffff; |
|
|
font-size: 0.9rem; |
|
|
font-weight: bold; |
|
|
font-weight: 400; |
|
|
|
|
|
letter-spacing: 0.2em; |
|
|
letter-spacing: 0.2em; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|