97 lines
1.8 KiB
Vue
97 lines
1.8 KiB
Vue
<script setup>
|
|
import {reactive} from 'vue'
|
|
import { useUserStore } from '../store/user'
|
|
|
|
const user = useUserStore()
|
|
const form = reactive({ username: '', password: '' })
|
|
|
|
const handleLogin = async () => {
|
|
try {
|
|
await user.login(form)
|
|
// 登录成功跳转逻辑
|
|
} catch (err) {
|
|
console.error('登录失败', err)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login-mask">
|
|
<div class="login-dialog">
|
|
<h3>用户登录</h3>
|
|
<form @submit.prevent="handleLogin">
|
|
<div class="input-group">
|
|
<input
|
|
v-model="form.username"
|
|
class="styled-input"
|
|
placeholder="用户名"
|
|
>
|
|
</div>
|
|
<div class="input-group">
|
|
<input
|
|
v-model="form.password"
|
|
type="password"
|
|
class="styled-input"
|
|
placeholder="密码"
|
|
>
|
|
</div>
|
|
<button type="submit" class="submit-btn">
|
|
登录
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.login-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 999;
|
|
}
|
|
|
|
.login-dialog {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
|
width: 320px;
|
|
}
|
|
|
|
.styled-input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #e4e7ed;
|
|
border-radius: 4px;
|
|
margin-bottom: 1rem;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
.styled-input:focus {
|
|
border-color: #409eff;
|
|
outline: none;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: #409eff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
</style>
|