|
|
@@ -0,0 +1,54 @@
|
|
|
+<template>
|
|
|
+ <div class="bg-gray-200 flex items-center justify-center min-h-screen">
|
|
|
+ <form class="bg-white p-8 rounded-lg shadow-md w-96 space-y-4">
|
|
|
+ <h2 class="text-2xl font-bold text-gray-800 text-center">登录</h2>
|
|
|
+ <div>
|
|
|
+ <label for="username" class="block text-gray-600">用户名</label>
|
|
|
+ <input id="username" v-model="username" type="text" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-purple-500" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="password" class="block text-gray-600">密码</label>
|
|
|
+ <input id="password" v-model="password" type="password" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-purple-500" />
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <input id="remember" v-model="remember" type="checkbox" class="mr-2" />
|
|
|
+ <label for="remember" class="text-gray-600 text-sm">记住我</label>
|
|
|
+ </div>
|
|
|
+ <button @click.prevent="login" class="w-full bg-purple-600 text-white font-bold py-2 rounded hover:bg-purple-700">登录</button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ remember: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ login() {
|
|
|
+ // Simple validation
|
|
|
+ if (!this.username || !this.password) {
|
|
|
+ alert('用户名和密码不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Dummy login logic
|
|
|
+ if (this.username === 'admin' && this.password === 'admin') {
|
|
|
+ alert('登录成功');
|
|
|
+ // Redirect to home page
|
|
|
+ this.$router.push('/');
|
|
|
+ } else {
|
|
|
+ alert('用户名或密码错误');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Additional styles can be added here if needed */
|
|
|
+</style>
|
genlitex