diff --git a/src/components/html/login.html b/src/components/html/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..6b345b2e14174f067327caf1e09f12c034faad1d
--- /dev/null
+++ b/src/components/html/login.html
@@ -0,0 +1,94 @@
+<template>
+  <div class="container">
+    <div class="form-container">
+      <h2>登录</h2>
+      <form>
+        <div class="form-group">
+          <label for="username">用户名</label>
+          <input type="text" id="username" v-model="username" required>
+        </div>
+        <div class="form-group">
+          <label for="password">密码</label>
+          <input type="password" id="password" v-model="password" required>
+        </div>
+        <button type="submit" @click.prevent="login">登录</button>
+      </form>
+    </div>
+    <div class="form-container">
+      <h2>注册</h2>
+      <form>
+        <div class="form-group">
+          <label for="reg-username">用户名</label>
+          <input type="text" id="reg-username" v-model="regUsername" required>
+        </div>
+        <div class="form-group">
+          <label for="reg-password">密码</label>
+          <input type="password" id="reg-password" v-model="regPassword" required>
+        </div>
+        <div class="form-group">
+          <label for="confirm-password">确认密码</label>
+          <input type="password" id="confirm-password" v-model="confirmPassword" required>
+        </div>
+        <button type="submit" @click.prevent="register">注册</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: '',
+      regUsername: '',
+      regPassword: '',
+      confirmPassword: ''
+    }
+  },
+  methods: {
+    login() {
+      // 登录功能
+    },
+    register() {
+      // 注册功能
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  background-image: url('背景图片地址');
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.form-container {
+  width: 400px;
+  background-color: #fff;
+  padding: 30px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px #ccc;
+  margin: 20px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+input {
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+</style>