|
|
@@ -0,0 +1,87 @@
|
|
|
+<template>
|
|
|
+ <div class="login-container">
|
|
|
+ <h2>Login</h2>
|
|
|
+ <form @submit.prevent="handleSubmit">
|
|
|
+ <div>
|
|
|
+ <label for="account">Account:</label>
|
|
|
+ <input id="account" v-model="account" type="text" placeholder="Enter admin" required>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="password">Password:</label>
|
|
|
+ <input id="password" v-model="password" type="password" placeholder="Enter admin" required>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label for="rememberMe">Remember Me:</label>
|
|
|
+ <input id="rememberMe" v-model="rememberMe" type="checkbox">
|
|
|
+ </div>
|
|
|
+ <button type="submit">Login</button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ account: 'admin',
|
|
|
+ password: 'admin',
|
|
|
+ rememberMe: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSubmit() {
|
|
|
+ if (this.account !== 'admin') {
|
|
|
+ alert('Invalid account');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // Handle login logic here
|
|
|
+ console.log('Login attempted with account:', this.account);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.login-container {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.login-container h2 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-container label {
|
|
|
+ display: block;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-container input[type="text"],
|
|
|
+.login-container input[type="password"] {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px;
|
|
|
+ margin-top: 5px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-container button {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ margin-top: 20px;
|
|
|
+ background-color: #007bff;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 3px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.login-container button:hover {
|
|
|
+ background-color: #0056b3;
|
|
|
+}
|
|
|
+</style>
|
genlitex