208 lines
4.3 KiB
Vue
Raw Normal View History

2022-01-08 17:20:46 +08:00
<script setup>
import { ref, unref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/api/auth'
import { createLocalStorage } from '@/utils/cache'
import { setToken } from '@/utils/token'
const title = import.meta.env.VITE_APP_TITLE
const router = useRouter()
const query = unref(router.currentRoute).query
const loginInfo = ref({
name: 'admin',
password: 123456,
})
const ls = createLocalStorage({ prefixKey: 'login_' })
const lsLoginInfo = ls.get('loginInfo')
if (lsLoginInfo) {
loginInfo.value.name = lsLoginInfo.name || ''
loginInfo.value.password = lsLoginInfo.password || ''
}
async function handleLogin() {
const { name, password } = loginInfo.value
if (!name || !password) {
$message.warning('请输入用户名和密码')
return
}
try {
$message.loading('正在验证...')
const res = await login({ name, password: password.toString() })
if (res.code === 0) {
$message.success('登录成功')
ls.set('loginInfo', { name, password })
setToken(res.data.token)
if (query.redirect) {
router.push({ path: '/redirect', query })
} else {
router.push('/')
}
} else {
$message.warning(res.message)
}
} catch (error) {
$message.error(error.message)
}
}
</script>
<template>
<div class="login-page">
<div class="form-wrapper">
<h2 class="title">{{ title }}</h2>
<div class="form-item" mt-20>
<input
v-model="loginInfo.name"
autofocus
type="text"
class="input"
placeholder="username"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-20>
<input
v-model="loginInfo.password"
type="password"
class="input"
placeholder="password"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-20>
<button class="submit-btn" @click="handleLogin">登录</button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@property --perA {
syntax: '<percentage>';
inherits: false;
initial-value: 75%;
}
@property --perB {
syntax: '<percentage>';
inherits: false;
initial-value: 99%;
}
@property --perC {
syntax: '<percentage>';
inherits: false;
initial-value: 15%;
}
@property --perD {
syntax: '<percentage>';
inherits: false;
initial-value: 16%;
}
@property --perE {
syntax: '<percentage>';
inherits: false;
initial-value: 86%;
}
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.login-page {
height: 100%;
background-color: #e1e8ee;
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(
circle at var(--perE) 7%,
rgba(40, 40, 40, 0.04) 0%,
rgba(40, 40, 40, 0.04) 50%,
rgba(200, 200, 200, 0.04) 50%,
rgba(200, 200, 200, 0.04) 100%
),
radial-gradient(
circle at var(--perC) var(--perD),
rgba(99, 99, 99, 0.04) 0%,
rgba(99, 99, 99, 0.04) 50%,
rgba(45, 45, 45, 0.04) 50%,
rgba(45, 45, 45, 0.04) 100%
),
radial-gradient(
circle at var(--perA) var(--perB),
rgba(243, 243, 243, 0.04) 0%,
rgba(243, 243, 243, 0.04) 50%,
rgba(37, 37, 37, 0.04) 50%,
rgba(37, 37, 37, 0.04) 100%
),
linear-gradient(var(--angle), #22deed, #8759d7);
animation: move 30s infinite alternate linear;
@keyframes move {
100% {
--perA: 85%;
--perB: 49%;
--perC: 45%;
--perD: 39%;
--perE: 70%;
--angle: 360deg;
}
}
}
.form-wrapper {
text-align: center;
padding: 40px 50px;
border-radius: 15px;
background-color: rgba(#fff, 0.2);
.title {
font-size: 22px;
color: #f3f3f3;
}
.form-item {
width: 240px;
input {
width: 100%;
height: 40px;
padding: 0 15px;
border-radius: 5px;
font-size: 14px;
color: #333;
transition: 0.3s;
&:focus {
box-shadow: 0 0 5px #8759d7;
}
}
button {
width: 100%;
height: 40px;
color: #fff;
font-size: 14px;
font-weight: bold;
border: none;
border-radius: 5px;
background-color: #6683d2;
cursor: pointer;
transition: all 0.3s;
&:hover {
opacity: 0.8;
}
}
}
}
</style>