diff --git a/src/api/login.js b/src/api/login.js
new file mode 100644
index 0000000..f5e6ce1
--- /dev/null
+++ b/src/api/login.js
@@ -0,0 +1,9 @@
+import request from "@/utils/request.js";
+
+
+export const gameLoginInterface = (username, password) => {
+    return request.post('/api/login/login', {
+        username: username,
+        password: password,
+    })
+}
diff --git a/src/assets/base.css b/src/assets/base.css
index 5d4955e..b4643ec 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -2,3 +2,8 @@
     margin: 0;
     padding: 0;
 }
+
+html.dark {
+  /* 自定义深色背景颜色 */
+  --el-bg-color: #626aef;
+}
diff --git a/src/views/layout/gameLogin.vue b/src/views/layout/gameLogin.vue
index 8444de6..24549ba 100644
--- a/src/views/layout/gameLogin.vue
+++ b/src/views/layout/gameLogin.vue
@@ -1,11 +1,67 @@
 <script setup>
 
+import {ref} from "vue";
+import {gameLoginInterface} from '@/api/login.js'
+
+const form = ref({
+  username: '',
+  password: '',
+})
+
+const rules = {
+  username: [
+    {required: true, message: '用户名不能为空', trigger: 'blur'}
+  ],
+  password: [
+    {required: true, message: '密码不能为空', trigger: 'blur'}
+  ],
+}
+
+const loginForm = ref(null)
+const gameLogin = async () => {
+  await loginForm.value.validate()
+  const res = await gameLoginInterface(form.value.context)
+  console.log(res.data)
+}
+
 </script>
 
 <template>
-登陆游戏
+  <div class="login-page">
+    <el-form
+        :model="form"
+        :rules="rules"
+        ref="loginForm"
+    >
+      <el-form-item label="账号" prop="username">
+        <el-input
+            v-model="form.username"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input
+            v-model="form.password"
+        ></el-input>
+      </el-form-item>
+      <el-form-item class="center-content">
+        <el-button type="warning" @click="gameLogin">开启本地监听</el-button>
+        <el-button type="primary" @click="gameLogin">确认</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <style scoped>
 
+.el-form {
+  max-width: 300px;
+}
+
+.center-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
 </style>
diff --git a/src/views/layoutPage.vue b/src/views/layoutPage.vue
index 1c08f1d..0d942e4 100644
--- a/src/views/layoutPage.vue
+++ b/src/views/layoutPage.vue
@@ -8,8 +8,11 @@
       <h3>DDTD后台管理</h3>
       <el-menu
           router
+          background-color="#545c64"
+          text-color="#fff"
+          active-text-color="#ffd04b"
       >
-        <el-menu-item index="/login">
+        <el-menu-item index="/gameLogin">
           <el-icon>
             <User/>
           </el-icon>
@@ -81,7 +84,7 @@
         <el-select
             style="width: 150px"
             placeholder="选择客户端"
-          >
+        >
           <el-option v-for="item in 3" :key="item" :label="'客户端'"></el-option>
 
         </el-select>
diff --git a/src/views/loginPage.vue b/src/views/loginPage.vue
deleted file mode 100644
index 5176044..0000000
--- a/src/views/loginPage.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>