diff --git a/Yi.Bbs.Vue3/src/assets/login_images/login_bg.jpg b/Yi.Bbs.Vue3/src/assets/login_images/login_bg.jpg
new file mode 100644
index 00000000..e7f0d715
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/login_images/login_bg.jpg differ
diff --git a/Yi.Bbs.Vue3/src/assets/login_images/phone_login_bg.jpg b/Yi.Bbs.Vue3/src/assets/login_images/phone_login_bg.jpg
new file mode 100644
index 00000000..7122c3aa
Binary files /dev/null and b/Yi.Bbs.Vue3/src/assets/login_images/phone_login_bg.jpg differ
diff --git a/Yi.Bbs.Vue3/src/layout/LoginLayout.vue b/Yi.Bbs.Vue3/src/layout/LoginLayout.vue
index 8ca146df..14ff19e7 100644
--- a/Yi.Bbs.Vue3/src/layout/LoginLayout.vue
+++ b/Yi.Bbs.Vue3/src/layout/LoginLayout.vue
@@ -1,8 +1,19 @@
 <template>
-   <div class="box">
-        <div class="content">
-           <RouterView/>
-        </div>
+  <div class="box">
+    <div class="content">
+      <RouterView />
     </div>
-  </template>
-  <style src="@/assets/styles/login.scss" scoped></style>
\ No newline at end of file
+  </div>
+</template>
+<!-- <style src="@/assets/styles/login.scss" scoped></style> -->
+
+<style scoped lang="scss">
+.box {
+  width: 100vw;
+  height: 100vh;
+  .content {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/Yi.Bbs.Vue3/src/router/index.js b/Yi.Bbs.Vue3/src/router/index.js
index 4ffdd002..0251936a 100644
--- a/Yi.Bbs.Vue3/src/router/index.js
+++ b/Yi.Bbs.Vue3/src/router/index.js
@@ -23,7 +23,8 @@ const router = createRouter({
         {
           name: "login",
           path: "/login",
-          component: () => import("../views/Login.vue"),
+          // component: () => import("../views/Login.vue"),
+          component: () => import("../views/login/index.vue"),
         },
         {
           name: "register",
diff --git a/Yi.Bbs.Vue3/src/views/login/index.vue b/Yi.Bbs.Vue3/src/views/login/index.vue
new file mode 100644
index 00000000..936297ba
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/views/login/index.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="login">
+    <div class="login-box">
+      <div class="left"></div>
+      <div class="right">
+        <div class="top">
+          <div class="title">{{ configStore.name }}-登录</div>
+          <div class="text">若要继续，请登录</div>
+        </div>
+        <div class="center">
+          <div class="login-form">
+            <el-form ref="loginFormRef" :model="loginForm" :rules="rules">
+              <div class="username form-item">
+                <el-form-item prop="userName">
+                  <input
+                    type="text"
+                    class="input-item"
+                    v-model="loginForm.userName"
+                    placeholder="请输入用户名"
+                  />
+                </el-form-item>
+              </div>
+              <div class="password form-item">
+                <el-form-item prop="password">
+                  <input
+                    type="password"
+                    class="input-item"
+                    v-model="loginForm.password"
+                    placeholder="请输入密码"
+                  />
+                </el-form-item>
+              </div>
+            </el-form>
+            <div class="link">
+              <div class="text" @click="handleRegister">没有账号？前往注册</div>
+              <div class="text" @click="guestlogin">访客入口</div>
+            </div>
+            <div class="login-btn" @click="login(loginFormRef)">登 录</div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="title">
+            <div>或者</div>
+            <div>其他方式登录</div>
+          </div>
+          <div class="icon-list">
+            <div class="icon">
+              <img src="@/assets/login_images/QQ.png" alt="" />
+            </div>
+            <div class="icon">
+              <img src="@/assets/login_images/WeChat.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import useConfigStore from "@/stores/config";
+import useAuths from "@/hooks/useAuths";
+
+const { loginFun } = useAuths();
+const configStore = useConfigStore();
+const router = useRouter();
+const route = useRoute();
+const loginFormRef = ref();
+const rules = reactive({
+  userName: [{ required: true, message: "请输入账号名", trigger: "blur" }],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+});
+const loginForm = reactive({
+  userName: "",
+  password: "",
+  uuid: "",
+  code: "",
+});
+const guestlogin = async () => {
+  const redirect = route.query?.redirect ?? "/index";
+  router.push(redirect);
+};
+const login = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid) => {
+    if (valid) {
+      try {
+        loginFun(loginForm);
+      } catch (error) {
+        ElMessage({
+          message: error.message,
+          type: "error",
+          duration: 2000,
+        });
+      }
+    }
+  });
+};
+
+// 注册逻辑
+const handleRegister = () => {
+  console.log("注册");
+};
+</script>
+<style scoped lang="scss">
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: url("@/assets/login_images/login_bg.jpg") no-repeat;
+  &-box {
+    display: flex;
+    width: 70%;
+    height: 80%;
+    border-radius: 20px;
+    background-color: #e0edfd;
+    .left {
+      width: 55%;
+    }
+    .right {
+      display: flex;
+      flex-direction: column;
+      width: 45%;
+      padding: 40px 30px 10px 30px;
+      border-radius: 20px;
+      color: #06035a;
+
+      background-color: #fff;
+      .top {
+        flex: 2;
+        .title {
+          font-size: 30px;
+          font-weight: bold;
+        }
+        .text {
+          margin-top: 10px;
+        }
+      }
+      .center {
+        flex: 4;
+        .login-form {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          .input-item {
+            width: 100%;
+            height: 45px;
+            outline: none;
+            border: 2px solid #dde0df;
+            border-radius: 5px;
+            padding: 0 10px;
+            &:hover {
+              outline: none;
+            }
+          }
+          .login-btn {
+            cursor: pointer;
+            width: 100%;
+            height: 45px;
+            color: #fff;
+            text-align: center;
+            line-height: 50px;
+            border-radius: 5px;
+            background-color: #2282fe;
+          }
+          .link {
+            margin-bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .text {
+              cursor: pointer;
+            }
+          }
+          .visitor {
+            margin-top: 10px;
+          }
+        }
+      }
+      .bottom {
+        margin-top: 20px;
+        flex: 2;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        .title {
+          > div {
+            text-align: center;
+            margin: 10px;
+          }
+        }
+        .icon-list {
+          margin-top: 10px;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          .icon {
+            width: 20px;
+            height: 20px;
+            margin: 0 10px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>