From 14781da78ed6c21305cf987dad038582e6fa7aa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=B7=B3?= <454313500@qq.com>
Date: Mon, 4 Mar 2024 18:18:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=89=8B=E6=92=B8=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs |   1 -
 Yi.Bbs.Vue3/src/assets/styles/login.css      | 409 +++++++--------
 Yi.Bbs.Vue3/src/assets/styles/login.min.css  |   1 -
 Yi.Bbs.Vue3/src/assets/styles/login.scss     | 204 -------
 Yi.Bbs.Vue3/src/views/login/index.bak.vue    | 525 +++++++++++++++++++
 Yi.Bbs.Vue3/src/views/login/index.vue        | 465 +++++-----------
 6 files changed, 849 insertions(+), 756 deletions(-)
 delete mode 100644 Yi.Bbs.Vue3/src/assets/styles/login.min.css
 delete mode 100644 Yi.Bbs.Vue3/src/assets/styles/login.scss
 create mode 100644 Yi.Bbs.Vue3/src/views/login/index.bak.vue

diff --git a/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs b/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs
index 5c01c453..836d832b 100644
--- a/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs
+++ b/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs
@@ -138,7 +138,6 @@ namespace Yi.Abp.Web
                 //options.TenantResolvers.RemoveAll(x => x.Name == CookieTenantResolveContributor.ContributorName);
             });
 
-
             //速率限制
             //每60秒限制100个请求，滑块添加，分6段
             service.AddRateLimiter(_ =>
diff --git a/Yi.Bbs.Vue3/src/assets/styles/login.css b/Yi.Bbs.Vue3/src/assets/styles/login.css
index e92aa050..2d91f552 100644
--- a/Yi.Bbs.Vue3/src/assets/styles/login.css
+++ b/Yi.Bbs.Vue3/src/assets/styles/login.css
@@ -1,210 +1,205 @@
-@charset "UTF-8";
-* {
-  margin: 0;
-  padding: 0;
-}
-
-/*公共CSS*/
-.box {
-  width: 100vw;
-  height: 100vh;
-  background-color: #1d4359;
-}
-
-.box .content {
-  box-shadow: 0px 1px 6px #3b4859;
-}
-
-.box .content .login-wrapper h1 {
-  text-align: center;
-}
-
-.box .content .login-wrapper .login-form .form-item {
-  margin: 20px 0;
-}
-
-.box .content .login-wrapper .login-form .form-item span {
-  display: block;
-  margin: 5px 20px;
-  font-weight: 100;
-}
-
-.box .content .login-wrapper .login-form .form-item .input-item {
-  width: 100%;
-  border-radius: 40px;
-  padding: 20px;
-  box-sizing: border-box;
-  font-size: 20px;
-  font-weight: 200;
-}
-
-.box .content .login-wrapper .login-form .form-item .input-item:focus {
-  outline: none;
-}
-
-.box .content .login-wrapper .login-form .login-btn {
-  width: 100%;
-  border-radius: 40px;
-  color: #fff;
-  border: 0;
-  font-weight: 100;
-  margin-top: 10px;
-  cursor: pointer;
-}
-
-.box .content .login-wrapper .divider {
-  width: 100%;
-  margin: 20px 0;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.box .content .login-wrapper .divider span:nth-child(1) {
-  flex: 1;
-}
-
-.box .content .login-wrapper .divider span:nth-child(3) {
-  flex: 1;
-}
-
-.box .content .login-wrapper .divider .line {
-  display: inline-block;
-  max-width: 30%;
-  width: 30%;
-}
-
-.box .content .login-wrapper .divider .divider-text {
-  vertical-align: middle;
-  margin: 0px 20px;
-  line-height: 0px;
-  display: inline-block;
-  width: 100px;
-}
-
-.box .content .login-wrapper .other-login-wrapper {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.box .content .login-wrapper .other-login-item {
-  cursor: pointer;
-  border: 1px solid #d6dee4;
-  padding: 10px;
-  margin: 10px;
-}
-
-/*一般大于手机的尺寸CSS*/
-@media (min-width: 767px) {
-  .box {
-    background-color: #f0f2f5;
-  }
-  .box .content {
-    width: 85vw;
-    height: 90vh;
-    background: url("@/assets/login_images/login_two.jpg") no-repeat;
-    background-size: 90% 100%;
-    position: absolute;
-    right: 15%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 20px;
-    background-color: #fff;
-  }
-  .box .content .login-wrapper {
-    width: 25vw;
-    position: absolute;
-    right: 15%;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .box .content .login-wrapper h1 {
-    text-align: center;
-    font-size: 45px;
-    color: #516473;
-    margin-bottom: 40px;
-  }
-  .box .content .login-wrapper .login-form {
-    margin: 10px 0;
-  }
-  .box .content .login-wrapper .login-form .form-item span {
-    color: #516473;
-  }
-  .box .content .login-wrapper .login-form .form-item .input-item {
-    height: 60px;
-    border: 1px solid #d6dee4;
-  }
-  .box .content .login-wrapper .login-form .login-btn {
-    height: 50px;
-    background-color: #3b4859;
-    font-size: 20px;
-  }
-  .box .content .login-wrapper .divider .line {
-    border-bottom: 1px solid #d6dee4;
-  }
-  .box .content .login-wrapper .other-login-item {
-    border-radius: 20px;
-  }
-  .box .content .login-wrapper .other-login-item img {
-    cursor: pointer;
-    width: 40px;
-    height: 40px;
-  }
-}
-
-/*手机端CSS*/
-@media (max-width: 768px) {
-  .box .content {
-    width: 100vw;
-    height: 100vh;
-    background: url("@/assets/login_images/login_bg_phone.png") no-repeat;
-    background-size: 100% 100%;
+.container {
     display: flex;
-    align-items: flex-start;
     justify-content: center;
-  }
-  .box .content .login-wrapper {
-    width: 70%;
-    height: 60%;
-    padding-top: 15%;
-  }
-  .box .content .login-wrapper h1 {
-    font-size: 30px;
-    color: #fff;
-  }
-  .box .content .login-wrapper .login-form .form-item {
-    margin: 10px 0;
-  }
-  .box .content .login-wrapper .login-form .form-item span {
-    color: #71818d;
-  }
-  .box .content .login-wrapper .login-form .form-item .input-item {
-    height: 30px;
-    border: 1px solid #71818d;
-    background-color: transparent;
-    color: #fff;
-  }
-  .box .content .login-wrapper .login-form .login-btn {
-    height: 40px;
-    background-color: #eb5f5d;
-    font-size: 16px;
-  }
-  .box .content .login-wrapper .divider .line {
-    border-bottom: 1px solid #fff;
-  }
-  .box .content .login-wrapper .divider .divider-text {
-    color: #fff;
-  }
-  .box .content .login-wrapper .other-login-item {
-    border-radius: 15px;
-  }
-  .box .content .login-wrapper .other-login-item img {
-    cursor: pointer;
-    width: 35px;
-    height: 35px;
-  }
+    align-items: center;
+    height: 100%;
+    background-color: #272162;
 }
+
+.div-content
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.div-left
+{
+    width: 414px;
+    height:522px;
+    background-color: #FFFFFF;
+}
+.div-right
+{         
+     width: 414px;
+    height:522px;
+    background-color:#4E2665;
+}
+.left-container
+{
+padding: 40px 60px;
+
+}
+.title{
+    margin: 5px;
+    font-size: 35px;
+}
+.title-1 span
+{
+    font-size: 13px;
+    cursor: pointer;
+}
+.title-1
+{
+    color: #7F438C;
+
+    font-weight: normal;
+}
+.title-2
+{
+    color: #7F438C;
+    font-weight:bolder;
+}
+.input-content
+{
+    margin: 25px 0 10px 0;
+}
+.input
+{
+    margin: 15px 0;
+}
+.input input:focus {
+    outline: none;
+  }
+.input input
+{
+width: 100%;
+border: 1px solid #000;
+border-top: 0;
+border-left: 0;
+border-right: 0;
+height: 25px;
+
+}
+.input p
+{
+    font-weight: bold;
+    margin: 5px 0;
+}
+.left-btn
+{
+    margin: 20px 0;
+}
+.left-btn button
+{
+    border: 1px solid #000;
+    width: 100px;
+    height: 35px;
+    cursor: pointer;
+}
+.btn-login
+{
+    background-color: #EF6562;
+    color: #FFFFFF;
+
+}
+.btn-reg
+{
+    margin-left: 20px;
+    background-color: #FFFFFF;
+
+}
+.left-lable
+{
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+}
+.left-lable label{
+    margin-left: 5px;
+}
+
+.bottom-div
+{
+    font-size: 12px;
+    font-weight:bold;
+    margin-top: 30px;
+
+}
+.bottom-div span
+{
+margin-left: 10px;
+
+}
+.bottom-div span img
+{
+
+height: 20px;
+width: 20px;
+cursor: pointer;
+}
+.code{
+display:  flex;
+justify-content: space-between;
+align-items: flex-end;
+}
+.code-input
+{
+    width: 60% !important;
+}
+.code-img
+{
+    margin-left: 20px;
+    border: 0.8px solid #000;
+    width: 100px;
+    height: 30px;
+    text-align: center;
+}
+.div-bottom
+{
+  position: absolute;
+  bottom: 30px;
+  color:#CAD2D9;
+  font-size: 12px;
+}
+.div-bottom span{
+    margin: 0 5px;
+    cursor: pointer;
+}
+
+
+
+
+
+.phone-code{
+    display:  flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    }
+    .phone-code-input
+    {
+        width: 60% !important;
+    }
+    .phone-code-btn
+    {
+        border: 0.8px solid #000;
+        text-align: center;
+        width: 100px;
+        height: 30px;
+        background-color: #EF6562;
+        color: #FFFFFF;
+        cursor: pointer;
+        margin-left: 20px;
+    }
+    .register-title
+    {
+        color: #7F438C;
+        font-weight:bolder;
+        font-size: 30px;
+    }
+    .div-left-register
+    {
+        width: 414px;
+        height:522px;
+        background-color: #FFFFFF;
+      
+    }
+    .div-right-register
+    {
+        width: 414px;
+        height:522px;
+        background-color:#4E2665;
+     
+    }
+    
\ No newline at end of file
diff --git a/Yi.Bbs.Vue3/src/assets/styles/login.min.css b/Yi.Bbs.Vue3/src/assets/styles/login.min.css
deleted file mode 100644
index d82193f1..00000000
--- a/Yi.Bbs.Vue3/src/assets/styles/login.min.css
+++ /dev/null
@@ -1 +0,0 @@
-*{margin:0;padding:0}.box{width:100vw;height:100vh;background-color:#1d4359}.box .content{box-shadow:0px 1px 6px #3b4859}.box .content .login-wrapper h1{text-align:center}.box .content .login-wrapper .login-form .form-item{margin:20px 0}.box .content .login-wrapper .login-form .form-item span{display:block;margin:5px 20px;font-weight:100}.box .content .login-wrapper .login-form .form-item .input-item{width:100%;border-radius:40px;padding:20px;box-sizing:border-box;font-size:20px;font-weight:200}.box .content .login-wrapper .login-form .form-item .input-item:focus{outline:none}.box .content .login-wrapper .login-form .login-btn{width:100%;border-radius:40px;color:#fff;border:0;font-weight:100;margin-top:10px;cursor:pointer}.box .content .login-wrapper .divider{width:100%;margin:20px 0;text-align:center;display:flex;align-items:center;justify-content:center}.box .content .login-wrapper .divider span:nth-child(1){flex:1}.box .content .login-wrapper .divider span:nth-child(3){flex:1}.box .content .login-wrapper .divider .line{display:inline-block;max-width:30%;width:30%}.box .content .login-wrapper .divider .divider-text{vertical-align:middle;margin:0px 20px;line-height:0px;display:inline-block;width:100px}.box .content .login-wrapper .other-login-wrapper{width:100%;display:flex;justify-content:center;align-items:center}.box .content .login-wrapper .other-login-item{cursor:pointer;border:1px solid #d6dee4;padding:10px;margin:10px}@media (min-width: 767px){.box{background-color:#f0f2f5}.box .content{width:85vw;height:90vh;background:url("@/assets/login_images/login_two.jpg") no-repeat;background-size:90% 100%;position:absolute;right:15%;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:20px;background-color:#fff}.box .content .login-wrapper{width:25vw;position:absolute;right:15%;top:50%;transform:translateY(-50%)}.box .content .login-wrapper h1{text-align:center;font-size:45px;color:#516473;margin-bottom:40px}.box .content .login-wrapper .login-form{margin:10px 0}.box .content .login-wrapper .login-form .form-item span{color:#516473}.box .content .login-wrapper .login-form .form-item .input-item{height:60px;border:1px solid #d6dee4}.box .content .login-wrapper .login-form .login-btn{height:50px;background-color:#3b4859;font-size:20px}.box .content .login-wrapper .divider .line{border-bottom:1px solid #d6dee4}.box .content .login-wrapper .other-login-item{border-radius:20px}.box .content .login-wrapper .other-login-item img{cursor:pointer;width:40px;height:40px}}@media (max-width: 768px){.box .content{width:100vw;height:100vh;background:url("@/assets/login_images/login_bg_phone.png") no-repeat;background-size:100% 100%;display:flex;align-items:flex-start;justify-content:center}.box .content .login-wrapper{width:70%;height:60%;padding-top:15%}.box .content .login-wrapper h1{font-size:30px;color:#fff}.box .content .login-wrapper .login-form .form-item{margin:10px 0}.box .content .login-wrapper .login-form .form-item span{color:#71818d}.box .content .login-wrapper .login-form .form-item .input-item{height:30px;border:1px solid #71818d;background-color:transparent;color:#fff}.box .content .login-wrapper .login-form .login-btn{height:40px;background-color:#eb5f5d;font-size:16px}.box .content .login-wrapper .divider .line{border-bottom:1px solid #fff}.box .content .login-wrapper .divider .divider-text{color:#fff}.box .content .login-wrapper .other-login-item{border-radius:15px}.box .content .login-wrapper .other-login-item img{cursor:pointer;width:35px;height:35px}}
diff --git a/Yi.Bbs.Vue3/src/assets/styles/login.scss b/Yi.Bbs.Vue3/src/assets/styles/login.scss
deleted file mode 100644
index 12fc00da..00000000
--- a/Yi.Bbs.Vue3/src/assets/styles/login.scss
+++ /dev/null
@@ -1,204 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-/*公共CSS*/
-.box {
-  width: 100vw;
-  height: 100vh;
-  background-color: rgb(29, 67, 89);
-  .content {
-    box-shadow: 0px 1px 6px #3b4859;
-    .login-wrapper {
-      h1 {
-        text-align: center;
-      }
-      .login-form {
-        .form-item {
-          margin: 20px 0;
-          span {
-            display: block;
-            margin: 5px 20px;
-            font-weight: 100;
-          }
-          .input-item {
-            width: 100%;
-            border-radius: 40px;
-            padding: 20px;
-            box-sizing: border-box;
-            font-size: 20px;
-            font-weight: 200;
-            &:focus {
-              outline: none;
-            }
-          }
-        }
-        .login-btn {
-          width: 100%;
-          border-radius: 40px;
-          color: #fff;
-          border: 0;
-          font-weight: 100;
-          margin-top: 10px;
-          cursor: pointer;
-        }
-      }
-      .divider {
-        width: 100%;
-        margin: 20px 0;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        span:nth-child(1) {
-          flex: 1;
-        }
-        span:nth-child(3) {
-          flex: 1;
-        }
-        .line {
-          display: inline-block;
-          max-width: 30%;
-          width: 30%;
-        }
-        .divider-text {
-          vertical-align: middle;
-          margin: 0px 20px;
-          line-height: 0px;
-          display: inline-block;
-          width: 100px;
-        }
-      }
-      .other-login-wrapper {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .other-login-item {
-        border: 1px solid rgb(214, 222, 228);
-        padding: 10px;
-        margin: 10px;
-        cursor: pointer;
-      }
-    }
-  }
-}
-/*一般大于手机的尺寸CSS*/
-@media (min-width: 767px) {
-  .box {
-    background-color: #f0f2f5;
-    .content {
-      width: 85vw;
-      height: 90vh;
-      background: url("@/assets/login_images/login_two.jpg") no-repeat;
-      background-size: 90% 100%;
-      position: absolute;
-      right: 15%;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      border-radius: 20px;
-      background-color: #fff;
-      .login-wrapper {
-        width: 25vw;
-        position: absolute;
-        right: 15%;
-        top: 50%;
-        transform: translateY(-50%);
-        h1 {
-          text-align: center;
-          font-size: 45px;
-          color: rgb(81, 100, 115);
-          margin-bottom: 40px;
-        }
-        .login-form {
-          margin: 10px 0;
-          .form-item {
-            span {
-              color: rgb(81, 100, 115);
-            }
-            .input-item {
-              height: 60px;
-              border: 1px solid rgb(214, 222, 228);
-            }
-          }
-          .login-btn {
-            height: 50px;
-            background-color: rgb(59, 72, 89);
-            font-size: 20px;
-          }
-        }
-        .divider {
-          .line {
-            border-bottom: 1px solid rgb(214, 222, 228);
-          }
-        }
-        .other-login-item {
-          border-radius: 20px;
-          img {
-            width: 40px;
-            height: 40px;
-          }
-        }
-      }
-    }
-  }
-}
-/*手机端CSS*/
-@media (max-width: 768px) {
-  .box {
-    .content {
-      width: 100vw;
-      height: 100vh;
-      background: url("@/assets/login_images/login_bg_phone.png") no-repeat;
-      background-size: 100% 100%;
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      .login-wrapper {
-        width: 70%;
-        height: 60%;
-        padding-top: 15%;
-        h1 {
-          font-size: 30px;
-          color: #fff;
-        }
-        .login-form {
-          .form-item {
-            margin: 10px 0;
-            span {
-              color: rgb(113, 129, 141);
-            }
-            .input-item {
-              height: 30px;
-              border: 1px solid rgb(113, 129, 141);
-              background-color: transparent;
-              color: #fff;
-            }
-          }
-          .login-btn {
-            height: 40px;
-            background-color: rgb(235, 95, 93);
-            font-size: 16px;
-          }
-        }
-        .divider {
-          .line {
-            border-bottom: 1px solid #fff;
-          }
-          .divider-text {
-            color: #fff;
-          }
-        }
-        .other-login-item {
-          border-radius: 15px;
-          img {
-            width: 35px;
-            height: 35px;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/Yi.Bbs.Vue3/src/views/login/index.bak.vue b/Yi.Bbs.Vue3/src/views/login/index.bak.vue
new file mode 100644
index 00000000..5a8eeb44
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/views/login/index.bak.vue
@@ -0,0 +1,525 @@
+<template>
+    <div class="login">
+      <div class="login-box">
+        <div class="left"></div>
+        <div class="right">
+          <div class="header-box">
+            <div class="text" @click="guestlogin" v-if="isRegister">返回首页</div>
+            <div class="text" @click="handleSignInNow" v-else>
+              已有账号立即登录
+            </div>
+            <el-icon size="15"><DArrowRight /></el-icon>
+          </div>
+          <div class="top">
+            <div class="title" v-if="isRegister">意社区登录 | SIGN IN</div>
+            <div class="title" v-else>意社区注册 | REGISTER</div>
+          </div>
+          <div class="center">
+            <div class="login-form">
+              <el-form
+                ref="loginFormRef"
+                :model="loginForm"
+                :rules="rules"
+                v-if="isRegister"
+              >
+                <el-form-item label="用户名" class="title-item"></el-form-item>
+                <el-form-item prop="userName">
+                  <el-input
+                    type="text"
+                    v-model="loginForm.userName"
+                    placeholder="请输入用户名"
+                  />
+                </el-form-item>
+                <el-form-item label="密码" class="title-item"></el-form-item>
+                <el-form-item prop="password">
+                  <el-input
+                    type="password"
+                    v-model="loginForm.password"
+                    placeholder="请输入密码"
+                    show-password
+                  />
+                </el-form-item>
+                <el-form-item label="验证码" class="title-item"></el-form-item>
+                <div class="flex-between">
+                  <el-col :span="18">
+                    <el-form-item prop="phone">
+                      <el-input
+                        type="text"
+                        v-model.trim="loginForm.code"
+                        placeholder="请输入验证码"
+                      />
+                    </el-form-item>
+                  </el-col>
+                  <el-image
+                    @click="handleGetCodeImage"
+                    style="width: 120px; height: 40px; cursor: pointer"
+                    :src="codeImageURL"
+                    :fit="fit"
+                  />
+                </div>
+              </el-form>
+              <el-form
+                class="registerForm"
+                ref="registerFormRef"
+                :model="registerForm"
+                :rules="registerRules"
+                v-else
+              >
+                <el-form-item label="用户名" class="title-item"></el-form-item>
+                <el-form-item prop="userName">
+                  <el-input
+                    type="text"
+                    v-model.trim="registerForm.userName"
+                    placeholder="请输入用户名"
+                  />
+                </el-form-item>
+                <el-form-item label="手机号" class="title-item"></el-form-item>
+                <div class="flex-between">
+                  <div class="item">
+                    <el-form-item prop="phone">
+                      <el-input
+                        type="text"
+                        v-model.trim="registerForm.phone"
+                        placeholder="请输入手机号"
+                      />
+                    </el-form-item>
+                  </div>
+                  <el-button
+                    type="primary"
+                    @click="captcha"
+                    :disabled="isDisabledCode"
+                  >
+                    {{ codeInfo }}
+                  </el-button>
+                </div>
+                <el-form-item label="验证码" class="title-item"></el-form-item>
+                <el-form-item prop="code">
+                  <el-input
+                    type="text"
+                    v-model.trim="registerForm.code"
+                    placeholder="请输入验证码"
+                  />
+                </el-form-item>
+                <el-form-item label="新密码" class="title-item"></el-form-item>
+                <el-form-item prop="password">
+                  <el-input
+                    type="password"
+                    v-model.trim="registerForm.password"
+                    placeholder="请输入新密码"
+                  />
+                </el-form-item>
+                <el-form-item label="确认密码" class="title-item"></el-form-item>
+                <el-form-item>
+                  <el-input
+                    type="password"
+                    v-model.trim="passwordConfirm"
+                    placeholder="请确认密码"
+                    show-password
+                  />
+                </el-form-item>
+              </el-form>
+              <div class="link" v-if="isRegister">
+                <div class="text" @click="handleRegister">没有账号？前往注册</div>
+              </div>
+              <div
+                class="login-btn"
+                @click="login(loginFormRef)"
+                v-if="isRegister"
+              >
+                登 录
+              </div>
+              <div class="login-btn" @click="register(registerFormRef)" v-else>
+                注 册
+              </div>
+            </div>
+          </div>
+          <div class="bottom" v-if="isRegister">
+            <div class="title">
+              <div>或者</div>
+              <div>其他方式登录</div>
+            </div>
+            <div class="icon-list">
+              <div class="icon" @click="handleQQLogin">
+                <img src="@/assets/login_images/qq-setting.png" alt="" />
+              </div>
+              <div class="icon" @click="handleGiteeLogin">
+                <img src="@/assets/login_images/gitee-setting.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="login-footer">
+        <div class="info">站长：{{ configStore.author }}</div>
+        <div class="info btn" @click="handleContact">联系我们</div>
+        <div class="info btn">关于本站</div>
+        <div class="info btn">建议反馈</div>
+      </div>
+    </div>
+  </template>
+  <script setup>
+  import { ref, reactive, onMounted, computed } from "vue";
+  import { useRouter, useRoute } from "vue-router";
+  import useAuths from "@/hooks/useAuths";
+  import { getCodePhone } from "@/apis/accountApi";
+  import useUserStore from "@/stores/user";
+  import useConfigStore from "@/stores/config";
+  
+  const configStore = useConfigStore();
+  const { loginFun, registerFun, loginSuccess } = useAuths();
+  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 codeUUid = computed(() => useUserStore().codeUUid);
+  const login = async (formEl) => {
+    if (!formEl) return;
+    await formEl.validate((valid) => {
+      if (valid) {
+        try {
+          loginForm.uuid = codeUUid.value;
+          loginFun(loginForm);
+        } catch (error) {
+          console.log(error.message, "error.message");
+          ElMessage({
+            message: error.message,
+            type: "error",
+            duration: 2000,
+          });
+        }
+      }
+    });
+  };
+  
+  // 注册逻辑
+  const isRegister = ref(true);
+  const registerFormRef = ref();
+  // 确认密码
+  const passwordConfirm = ref("");
+  const registerForm = reactive({
+    userName: "",
+    phone: "",
+    password: "",
+    uuid: "",
+    code: "",
+  });
+  const registerRules = reactive({
+    userName: [
+      { required: true, message: "请输入用户名", trigger: "blur" },
+      { min: 2, message: "用户名需大于两位", trigger: "blur" },
+    ],
+    phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
+    code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+    password: [
+      { required: true, message: "请输入新的密码", trigger: "blur" },
+      { min: 6, message: "密码需大于六位", trigger: "blur" },
+    ],
+  });
+  const handleRegister = () => {
+    isRegister.value = !isRegister.value;
+  };
+  const register = async (formEl) => {
+    if (!formEl) return;
+    await formEl.validate(async (valid) => {
+      if (valid) {
+        try {
+          if (registerForm.password != passwordConfirm.value) {
+            ElMessage.error("两次密码输入不一致");
+            return;
+          }
+          await registerFun(registerForm);
+          handleRegister();
+        } catch (error) {
+          ElMessage({
+            message: error.message,
+            type: "error",
+            duration: 2000,
+          });
+        }
+      }
+    });
+  };
+  
+  //验证码
+  const codeInfo = ref("发送验证码");
+  const isDisabledCode = ref(false);
+  const captcha = async () => {
+    if (registerForm.phone !== "") {
+      const { data } = await getCodePhone(registerForm.phone);
+      registerForm.uuid = data.uuid;
+      ElMessage({
+        message: `已向${registerForm.phone}发送验证码，请注意查收`,
+        type: "success",
+      });
+      isDisabledCode.value = true;
+      let time = 60; //定义剩下的秒数
+      let timer = setInterval(function () {
+        if (time == 0) {
+          //清除定时器和复原按钮
+          clearInterval(timer);
+          codeInfo.value = "发送验证码";
+          time = 60; //这个10是重新开始
+        } else {
+          codeInfo.value = "剩余" + time + "秒";
+          time--;
+        }
+      }, 1000);
+    } else {
+      ElMessage({
+        message: `清先输入手机号`,
+        type: "warning",
+      });
+    }
+  };
+  
+  // 立即登录
+  const handleSignInNow = () => {
+    isRegister.value = !isRegister.value;
+  };
+  // 获取图片验证码
+  const codeImageURL = computed(() => useUserStore().codeImageURL);
+  const handleGetCodeImage = () => {
+    useUserStore().updateCodeImage();
+  };
+  onMounted(async () => {
+    await useUserStore().updateCodeImage();
+  });
+  
+  // 联系我们跳转对应页面
+  const handleContact = () => {
+    router.push("/contact");
+  };
+  
+  const handleQQLogin = () => {
+    window.open(
+      "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=102087446&redirect_uri=https://ccnetcore.com/auth/qq&state=0&scope=get_user_info",
+      undefined,
+      "width=500,height=500,left=50,top=50"
+    );
+  };
+  
+  const handleGiteeLogin = () => {
+    window.open(
+      "https://gitee.com/oauth/authorize?client_id=949f3519969adc5cfe82c209b71300e8e0868e8536f3d7f59195c8f1e5b72502&redirect_uri=https%3A%2F%2Fccnetcore.com%2Fauth%2Fgitee&state=0&response_type=code",
+      undefined,
+      "width=500,height=500,left=50,top=50"
+    );
+  };
+  
+  window.addEventListener("message", async (e) => {
+    const { authData, type } = e.data;
+    console.log(authData, "传到登录页的值");
+    if (authData) {
+      await loginSuccess({ data: JSON.parse(authData) });
+      window.close();
+    }
+  });
+  </script>
+  <style scoped lang="scss">
+  .login {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: 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: #fff;
+      box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),
+        inset 20px 20px 15px rgba(255, 255, 255, 0.7);
+      .left {
+        width: 55%;
+        height: 100%;
+        display: flex;
+        background: url("@/assets/login_images/welcome.jpg") no-repeat;
+        background-size: 100% auto;
+        background-position: 50%;
+        border-right: 2px solid #eeefef;
+      }
+      .right {
+        display: flex;
+        flex-direction: column;
+        width: 45%;
+        padding: 40px 30px 40px 30px;
+        border-radius: 20px;
+        // color: #06035a;
+  
+        background-color: #fff;
+        .header-box {
+          cursor: pointer;
+          margin-bottom: 20px;
+          height: 10px;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          color: #409eff;
+        }
+        .top {
+          height: 40px;
+          .title {
+            font-size: 25px;
+            font-weight: bold;
+          }
+          .text {
+            margin-top: 10px;
+          }
+        }
+        .center {
+          flex: 1;
+          .login-form {
+            width: 100%;
+            height: 100%;
+            padding: 10px 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            .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;
+                color: #2282fe;
+              }
+            }
+            .visitor {
+              margin-top: 10px;
+            }
+            .registerForm {
+              :deep(.el-form-item) {
+                margin-bottom: 5px;
+              }
+            }
+          }
+        }
+        .bottom {
+          width: 100%;
+          height: 150px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          .title {
+            > div {
+              text-align: center;
+              margin: 10px;
+            }
+          }
+          .icon-list {
+            margin-top: 10px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            .icon {
+              cursor: pointer;
+              width: 25px;
+              height: 25px;
+              margin: 0 10px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+    &-footer {
+      width: 70%;
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 20px;
+      color: #eee;
+      font-size: 14px;
+      .info {
+        margin: 0 10px;
+      }
+      .btn {
+        cursor: pointer;
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+  
+    :deep(.title-item) {
+      margin-bottom: 0;
+    }
+    .flex-between {
+      display: flex;
+      justify-content: space-between;
+      .item {
+        flex: 1;
+      }
+    }
+  }
+  /*手机端CSS*/
+  @media (max-width: 768px) {
+    .login {
+      background: url("@/assets/login_images/phone_login_bg.jpg") no-repeat;
+      &-box {
+        .left {
+          display: none;
+        }
+        .right {
+          flex: 1;
+          .top {
+            .title {
+              font-size: 20px;
+            }
+            .text {
+              margin-top: 10px;
+            }
+          }
+        }
+        .flex-between {
+          display: flex;
+          justify-content: space-between;
+          .item {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/Yi.Bbs.Vue3/src/views/login/index.vue b/Yi.Bbs.Vue3/src/views/login/index.vue
index 818e35f1..cc67ea7f 100644
--- a/Yi.Bbs.Vue3/src/views/login/index.vue
+++ b/Yi.Bbs.Vue3/src/views/login/index.vue
@@ -1,161 +1,131 @@
 <template>
-  <div class="login">
-    <div class="login-box">
-      <div class="left"></div>
-      <div class="right">
-        <div class="header-box">
-          <div class="text" @click="guestlogin" v-if="isRegister">返回首页</div>
-          <div class="text" @click="handleSignInNow" v-else>
-            已有账号立即登录
-          </div>
-          <el-icon size="15"><DArrowRight /></el-icon>
-        </div>
-        <div class="top">
-          <div class="title" v-if="isRegister">意社区登录 | SIGN IN</div>
-          <div class="title" v-else>意社区注册 | REGISTER</div>
-        </div>
-        <div class="center">
-          <div class="login-form">
-            <el-form
-              ref="loginFormRef"
-              :model="loginForm"
-              :rules="rules"
-              v-if="isRegister"
-            >
-              <el-form-item label="用户名" class="title-item"></el-form-item>
-              <el-form-item prop="userName">
-                <el-input
-                  type="text"
-                  v-model="loginForm.userName"
-                  placeholder="请输入用户名"
-                />
-              </el-form-item>
-              <el-form-item label="密码" class="title-item"></el-form-item>
-              <el-form-item prop="password">
-                <el-input
-                  type="password"
-                  v-model="loginForm.password"
-                  placeholder="请输入密码"
-                  show-password
-                />
-              </el-form-item>
-              <el-form-item label="验证码" class="title-item"></el-form-item>
-              <div class="flex-between">
-                <el-col :span="18">
-                  <el-form-item prop="phone">
-                    <el-input
-                      type="text"
-                      v-model.trim="loginForm.code"
-                      placeholder="请输入验证码"
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-image
-                  @click="handleGetCodeImage"
-                  style="width: 120px; height: 40px; cursor: pointer"
-                  :src="codeImageURL"
-                  :fit="fit"
-                />
-              </div>
-            </el-form>
-            <el-form
-              class="registerForm"
-              ref="registerFormRef"
-              :model="registerForm"
-              :rules="registerRules"
-              v-else
-            >
-              <el-form-item label="用户名" class="title-item"></el-form-item>
-              <el-form-item prop="userName">
-                <el-input
-                  type="text"
-                  v-model.trim="registerForm.userName"
-                  placeholder="请输入用户名"
-                />
-              </el-form-item>
-              <el-form-item label="手机号" class="title-item"></el-form-item>
-              <div class="flex-between">
-                <div class="item">
-                  <el-form-item prop="phone">
-                    <el-input
-                      type="text"
-                      v-model.trim="registerForm.phone"
-                      placeholder="请输入手机号"
-                    />
-                  </el-form-item>
-                </div>
-                <el-button
-                  type="primary"
-                  @click="captcha"
-                  :disabled="isDisabledCode"
+ <div class="container">
+  <!-- 登录 -->
+        <div class="div-content"  v-if="isRegister">
+            <div class="div-left">
+                <div class="left-container">
+                    <p class="title title-1">Hello,<span @click="guestlogin">you can go to homepage >></span></p>
+                    <p class="title title-2">Welcome to Yi!</p>
+                    <el-form
+                ref="loginFormRef"
+                :model="loginForm"
+                :rules="rules"
                 >
-                  {{ codeInfo }}
-                </el-button>
-              </div>
-              <el-form-item label="验证码" class="title-item"></el-form-item>
-              <el-form-item prop="code">
-                <el-input
-                  type="text"
-                  v-model.trim="registerForm.code"
-                  placeholder="请输入验证码"
-                />
-              </el-form-item>
-              <el-form-item label="新密码" class="title-item"></el-form-item>
-              <el-form-item prop="password">
-                <el-input
-                  type="password"
-                  v-model.trim="registerForm.password"
-                  placeholder="请输入新密码"
-                />
-              </el-form-item>
-              <el-form-item label="确认密码" class="title-item"></el-form-item>
-              <el-form-item>
-                <el-input
-                  type="password"
-                  v-model.trim="passwordConfirm"
-                  placeholder="请确认密码"
-                  show-password
-                />
-              </el-form-item>
-            </el-form>
-            <div class="link" v-if="isRegister">
-              <div class="text" @click="handleRegister">没有账号？前往注册</div>
+
+                    <div class="input-content">
+                        <div class="input">
+                            <p>用户名</p>
+                            <el-form-item prop="userName">
+                            <input type="text" v-model="loginForm.userName">
+                            </el-form-item>
+                        </div>
+
+                        <div class="input">
+                            <p>密码</p>
+                            <el-form-item prop="password">
+                            <input type="password" v-model="loginForm.password">
+                            </el-form-item>
+                        </div>
+
+                        <div class="input">
+                            <p>验证码</p>
+                            <el-form-item prop="code">
+                            <div class="code">
+                                <input class="code-input" type="text" v-model.trim="loginForm.code">
+                                <img class="code-img" alt="加载中" @click="handleGetCodeImage"  :src="codeImageURL">
+                            </div>
+                          </el-form-item>
+                        </div>
+                    </div>
+</el-form>
+                    <div class="left-lable">
+                        <input type="checkbox">
+                        <label>记住我</label>
+                    </div>
+
+                    <div class="left-btn">
+                        <button class="btn-login" @click="login(loginFormRef)">登录</button>
+                        <button class="btn-reg" @click="handleRegister">前往注册</button>
+                    </div>
+                    <div class="bottom-div">
+                        <p>其他方式: <span @click="handleQQLogin"><img src="@/assets/login_images/qq-setting.png" alt="QQ" /></span> <span @click="handleGiteeLogin"><img src="@/assets/login_images/gitee-setting.png" alt="Gitee" /></span></p>
+                    </div>
+                </div>
             </div>
-            <div
-              class="login-btn"
-              @click="login(loginFormRef)"
-              v-if="isRegister"
-            >
-              登 录
+            <div class="div-right">
+
             </div>
-            <div class="login-btn" @click="register(registerFormRef)" v-else>
-              注 册
+
+            <div class="div-bottom">
+                <span>备案：赣ICP备20008025号-3</span>
+                <span>站长：橙子</span>
+                <span @click="handleContact">联系我们</span>
+                <span>关于本站</span>
+                <span>建议反馈</span>
+                <span>原创站点</span>
             </div>
-          </div>
         </div>
-        <div class="bottom" v-if="isRegister">
-          <div class="title">
-            <div>或者</div>
-            <div>其他方式登录</div>
-          </div>
-          <div class="icon-list">
-            <div class="icon" @click="handleQQLogin">
-              <img src="@/assets/login_images/qq-setting.png" alt="" />
+  <!-- 注册 -->
+        <div class="div-content" v-else>
+            <div class="div-right-register">
+
             </div>
-            <div class="icon" @click="handleGiteeLogin">
-              <img src="@/assets/login_images/gitee-setting.png" alt="" />
+            <div class="div-left-register">
+                <div class="left-container">
+                    <p class="title  register-title">Thank Join to Yi!</p>
+                    <el-form
+                class="registerForm"
+                ref="registerFormRef"
+                :model="registerForm"
+                :rules="registerRules"
+              >
+                    <div class="input-content">
+                        <div class="input">
+                            <p>用户名</p>
+                            <el-form-item prop="userName">
+                            <input type="text"    v-model.trim="registerForm.userName">
+                          </el-form-item>
+                        </div>
+
+                        <div class="input">
+                            <p>电话</p>
+                            <el-form-item prop="phone">
+                            <div class="phone-code">
+                                <input class="phone-code-input" type="text" v-model.trim="registerForm.phone">
+                                <button class="phone-code-btn" @click="captcha">{{codeInfo}}</button>
+                            </div>
+                            </el-form-item>
+                        </div>
+                        <div class="input">
+                            <p>电话验证码</p>
+                            <el-form-item prop="code">
+                            <input type="text" v-model.trim="registerForm.code">
+                            </el-form-item>
+                        </div>
+                        <div class="input">
+                            <p>密码</p>
+                            <el-form-item prop="password">
+                            <input type="password" v-model.trim="registerForm.password">
+                            </el-form-item>
+                        </div>
+                        <div class="input">
+                            <p>确认密码</p>
+                            <el-form-item>
+                            <input type="password" v-model.trim="passwordConfirm">
+                            </el-form-item>
+                        </div>
+                 
+                    </div>
+                    </el-form>
+                    <div class="left-btn">
+                        <button class="btn-login" @click="register(registerFormRef)">注册</button>
+                        <button class="btn-reg" @click="handleSignInNow">前往登录</button>
+                    </div>
+                </div>
             </div>
-          </div>
+       
         </div>
-      </div>
     </div>
-    <div class="login-footer">
-      <div class="info">站长：{{ configStore.author }}</div>
-      <div class="info btn" @click="handleContact">联系我们</div>
-      <div class="info btn">关于本站</div>
-      <div class="info btn">建议反馈</div>
-    </div>
-  </div>
 </template>
 <script setup>
 import { ref, reactive, onMounted, computed } from "vue";
@@ -234,6 +204,7 @@ const handleRegister = () => {
 const register = async (formEl) => {
   if (!formEl) return;
   await formEl.validate(async (valid) => {
+
     if (valid) {
       try {
         if (registerForm.password != passwordConfirm.value) {
@@ -254,7 +225,7 @@ const register = async (formEl) => {
 };
 
 //验证码
-const codeInfo = ref("发送验证码");
+const codeInfo = ref("发送短信");
 const isDisabledCode = ref(false);
 const captcha = async () => {
   if (registerForm.phone !== "") {
@@ -328,197 +299,5 @@ window.addEventListener("message", async (e) => {
   }
 });
 </script>
-<style scoped lang="scss">
-.login {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: 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: #fff;
-    box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),
-      inset 20px 20px 15px rgba(255, 255, 255, 0.7);
-    .left {
-      width: 55%;
-      height: 100%;
-      display: flex;
-      background: url("@/assets/login_images/welcome.jpg") no-repeat;
-      background-size: 100% auto;
-      background-position: 50%;
-      border-right: 2px solid #eeefef;
-    }
-    .right {
-      display: flex;
-      flex-direction: column;
-      width: 45%;
-      padding: 40px 30px 40px 30px;
-      border-radius: 20px;
-      // color: #06035a;
-
-      background-color: #fff;
-      .header-box {
-        cursor: pointer;
-        margin-bottom: 20px;
-        height: 10px;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        color: #409eff;
-      }
-      .top {
-        height: 40px;
-        .title {
-          font-size: 25px;
-          font-weight: bold;
-        }
-        .text {
-          margin-top: 10px;
-        }
-      }
-      .center {
-        flex: 1;
-        .login-form {
-          width: 100%;
-          height: 100%;
-          padding: 10px 0;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          .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;
-              color: #2282fe;
-            }
-          }
-          .visitor {
-            margin-top: 10px;
-          }
-          .registerForm {
-            :deep(.el-form-item) {
-              margin-bottom: 5px;
-            }
-          }
-        }
-      }
-      .bottom {
-        width: 100%;
-        height: 150px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        .title {
-          > div {
-            text-align: center;
-            margin: 10px;
-          }
-        }
-        .icon-list {
-          margin-top: 10px;
-          width: 100%;
-          display: flex;
-          justify-content: center;
-          .icon {
-            cursor: pointer;
-            width: 25px;
-            height: 25px;
-            margin: 0 10px;
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-      }
-    }
-  }
-  &-footer {
-    width: 70%;
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 20px;
-    color: #eee;
-    font-size: 14px;
-    .info {
-      margin: 0 10px;
-    }
-    .btn {
-      cursor: pointer;
-      &:hover {
-        color: #fff;
-      }
-    }
-  }
-
-  :deep(.title-item) {
-    margin-bottom: 0;
-  }
-  .flex-between {
-    display: flex;
-    justify-content: space-between;
-    .item {
-      flex: 1;
-    }
-  }
-}
-/*手机端CSS*/
-@media (max-width: 768px) {
-  .login {
-    background: url("@/assets/login_images/phone_login_bg.jpg") no-repeat;
-    &-box {
-      .left {
-        display: none;
-      }
-      .right {
-        flex: 1;
-        .top {
-          .title {
-            font-size: 20px;
-          }
-          .text {
-            margin-top: 10px;
-          }
-        }
-      }
-      .flex-between {
-        display: flex;
-        justify-content: space-between;
-        .item {
-          flex: 1;
-        }
-      }
-    }
-  }
-}
-</style>
+<style src="@/assets/styles/login.css" scoped>
+</style>
\ No newline at end of file