|
|
@@ -0,0 +1,69 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-gradient-to-r from-white to-purple-500 flex items-center justify-center">
|
|
|
+ <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-sm">
|
|
|
+ <h2 class="text-2xl font-bold mb-6">登录</h2>
|
|
|
+ <form @submit.prevent="handleLogin">
|
|
|
+ <div class="mb-4">
|
|
|
+ <label for="username" class="block text-gray-700 font-bold mb-2">用户名</label>
|
|
|
+ <input v-model="username" type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Username">
|
|
|
+ </div>
|
|
|
+ <div class="mb-4">
|
|
|
+ <label for="password" class="block text-gray-700 font-bold mb-2">密码</label>
|
|
|
+ <input v-model="password" type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Password">
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <input id="remember" type="checkbox" class="form-checkbox h-5 w-5 text-blue-600">
|
|
|
+ <label for="remember" class="ml-2 block text-sm text-gray-900">记住我</label>
|
|
|
+ </div>
|
|
|
+ <a href="#" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">忘记密码？</a>
|
|
|
+ </div>
|
|
|
+ <div class="mb-4">
|
|
|
+ <label for="language" class="block text-gray-700 font-bold mb-2">语言选择</label>
|
|
|
+ <select v-model="language" id="language" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
|
+ <option value="zh-CN">中文</option>
|
|
|
+ <option value="en-US">英文</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center justify-center">
|
|
|
+ <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">登录</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ref } from 'vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+
|
|
|
+export default {
|
|
|
+ setup() {
|
|
|
+ const username = ref('');
|
|
|
+ const password = ref('');
|
|
|
+ const remember = ref(false);
|
|
|
+ const language = ref('zh-CN');
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ const handleLogin = () => {
|
|
|
+ if (username.value === 'admin' && password.value === 'admin') {
|
|
|
+ router.push('/portal');
|
|
|
+ } else {
|
|
|
+ alert('Invalid credentials');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ username,
|
|
|
+ password,
|
|
|
+ remember,
|
|
|
+ language,
|
|
|
+ handleLogin,
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Add any additional styles here */
|
|
|
+</style>
|
genlitex