完成了登录页面的绘制

src/router/authentication.js

@@ -1,10 +1,10 @@
 // ！！！这是一个示例，请根据实际情况修改！！！
-// import Login from '../views/authentication/Login.vue'
+import Login from '../views/authentication/Login.vue'
 // import Register from '../views/authentication/Register.vue'
 // import Profile from '../views/authentication/Profile.vue'
 
 export default [
-    // { path: '/login', component: Login },
+    { path: '/login', component: Login },
     // { path: '/register', component: Register },
     // { path: '/profile', component: Profile }
 ]

src/views/authentication/Login.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { ref } from 'vue';
+
+const username = ref('');
+const password = ref('');
+const rememberMe = ref(false);
+
+const handleLogin = () => {
+  console.log('Logging in with', { username: username.value, password: password.value, rememberMe: rememberMe.value });
+  // 处理登录逻辑
+};
+</script>
+
+<template>
+  <div class="login-container">
+    <div class="login-box">
+      <h2>测盟汇管理系统</h2>
+      <form @submit.prevent="handleLogin">
+        <div class="input-group">
+          <label for="username">
+            <i class="fas fa-user"></i> 账号
+          </label>
+          <input v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
+        </div>
+        <div class="input-group">
+          <label for="password">
+            <i class="fas fa-lock"></i> 密码
+          </label>
+          <input v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
+        </div>
+        <div class="checkbox-group">
+          <input v-model="rememberMe" type="checkbox" id="rememberMe" />
+          <label for="rememberMe">记住密码</label>
+        </div>
+        <button type="submit" class="login-button">登录</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: url('background.jpg') no-repeat center center;
+  background-size: cover;
+}
+
+.login-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 20%;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.input-group {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.input-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.checkbox-group input {
+  margin-right: 0.5rem;
+}
+
+.login-button {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.login-button:hover {
+  background-color: #0056b3;
+}
+</style>