zbytest003-2025-02-17 03:03:57

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import Login from '../views/Login.vue'
 
 const routes = [
   {
@@ -7,6 +8,11 @@ const routes = [
     name: 'home',
     component: HomeView
   },
+  {
+    path: '/login',
+    name: 'login',
+    component: Login
+  },
   {
     // path: '/about',
     // name: 'about',

src/views/Login.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="login">
+    <h2>Login</h2>
+    <form @submit.prevent="handleLogin">
+      <div>
+        <label for="username">Username:</label>
+        <input id="username" v-model="username" type="text" required>
+      </div>
+      <div>
+        <label for="password">Password:</label>
+        <input id="password" v-model="password" type="password" required>
+      </div>
+      <button type="submit">Login</button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: ''
+    };
+  },
+  methods: {
+    handleLogin() {
+      // Handle login logic here
+      console.log('Username:', this.username);
+      console.log('Password:', this.password);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.login {
+  width: 300px;
+  padding: 16px;
+  margin: 100px auto;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.login h2 {
+  margin-bottom: 16px;
+}
+
+.login label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.login input {
+  width: calc(100% - 20px);
+  padding: 8px;
+  margin-bottom: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.login button {
+  width: 100%;
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  background-color: #5cb85c;
+  color: white;
+  cursor: pointer;
+}
+
+.login button:hover {
+  background-color: #4cae4c;
+}
+</style>