diff --git a/index.html b/index.html
index 030a6ff51bfc6f6adcc472f6d8c02db92ce947a8..adb99921560c44d4a593bead97a8d20392ef3283 100644
--- a/index.html
+++ b/index.html
@@ -11,3 +11,74 @@
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>登录页面</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f2f2f2;
+      }
+
+      #login-form {
+        width: 400px;
+        margin: 50px auto;
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 5px;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+      }
+
+      h1 {
+        text-align: center;
+      }
+
+      label {
+        display: block;
+        margin-bottom: 10px;
+      }
+
+      input[type="text"],
+      input[type="password"] {
+        width: 100%;
+        padding: 10px;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+        margin-bottom: 20px;
+      }
+
+      button {
+        display: block;
+        width: 100%;
+        padding: 10px;
+        border: none;
+        background-color: #4caf50;
+        color: #fff;
+        font-size: 16px;
+        cursor: pointer;
+        border-radius: 5px;
+      }
+
+      button:hover {
+        background-color: #3e8e41;
+      }
+
+      .error {
+        color: red;
+        margin-bottom: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <form id="login-form" method="post">
+      <h1>登录</h1>
+      <label for="username">用户名</label>
+      <input type="text" id="username" name="username" required>
+      <label for="password">密码</label>
+      <input type="password" id="password" name="password" required>
+      <button type="submit">登录</button>
+      <div class="error">用户名或密码不正确</div> <!-- 这里只是用于示例，实际使用时可根据需要展示或隐藏该元素 -->
+    </form>
+  </body>
+</html>
