You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.4 KiB
51 lines
1.4 KiB
<template>
|
|
<div class="login-container">
|
|
<!-- 背景图 -->
|
|
<div class="background-image"></div>
|
|
<!-- 登录表单 -->
|
|
<div class="login-form">
|
|
<h2>登录</h2>
|
|
<!-- 用户名输入框 -->
|
|
<div class="login-user-input">
|
|
<input
|
|
type="text"
|
|
v-model="username"
|
|
placeholder="用户名"
|
|
class="input-field"
|
|
/>
|
|
</div>
|
|
<!-- 密码输入框 -->
|
|
<div style="margin-top: 5%;">
|
|
<input
|
|
type="password"
|
|
v-model="password"
|
|
placeholder="密码"
|
|
class="input-field"
|
|
/>
|
|
</div>
|
|
<!-- 登录按钮 -->
|
|
<button @click="handleLogin" class="login-button">登录</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
// 定义用户名和密码的响应式变量
|
|
const username = ref('');
|
|
const password = ref('');
|
|
|
|
// 处理登录的函数
|
|
const handleLogin = () => {
|
|
console.log('用户名:', username.value);
|
|
console.log('密码:', password.value);
|
|
router.push('/home')
|
|
// 这里可以添加实际的登录逻辑，比如发送请求到后端进行验证
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import './login.css'
|
|
</style>
|