From 4a16cfc84e27f8bf9cf52411bfddb1ae9b27601e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Mon, 6 May 2024 10:54:35 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E6=89=8B=E6=9C=BA=E7=AB=AF?=
 =?UTF-8?q?=E3=80=81=E5=B0=8F=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../loginRegister/LoginRegisterPage.jsx       |   6 +-
 .../loginRegister/LoginRegisterPage.scss      | 112 ++++++++++++------
 .../loginRegister/component/otherLogin.jsx    |  11 +-
 3 files changed, 84 insertions(+), 45 deletions(-)

diff --git a/src/modules/loginRegister/LoginRegisterPage.jsx b/src/modules/loginRegister/LoginRegisterPage.jsx
index ff563f58..a4f5baef 100644
--- a/src/modules/loginRegister/LoginRegisterPage.jsx
+++ b/src/modules/loginRegister/LoginRegisterPage.jsx
@@ -15,8 +15,10 @@ function LoginRegisterPage(props){
     <div className="loginRegister">
       <div className="login_register_left">
         <img src={logo} className="logo" alt="" onClick={()=>{window.location.href='/'}} />
-        <img src={ball} className="ball" alt="" />
-        <img src={banner} className="banner" alt="" />
+        <div className="spinningBall">
+          <img src={ball} className="ball" alt="" />
+          <img src={banner} className="banner" alt="" />
+        </div>
       </div>
       <div className="login_register_right">
         {props.location.pathname === "/resetPassword" ? 
diff --git a/src/modules/loginRegister/LoginRegisterPage.scss b/src/modules/loginRegister/LoginRegisterPage.scss
index 9d97fc87..10369c6d 100644
--- a/src/modules/loginRegister/LoginRegisterPage.scss
+++ b/src/modules/loginRegister/LoginRegisterPage.scss
@@ -9,45 +9,34 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-/*当页面宽度大于1000px*/
-@media screen and (min-width:1000px) {
-  .banner{
-    margin-top: 45vh;
-    height: auto;
-  }
-  .ball{ top: 51vh; }
-  .right_cont{width: 540px; }
-  .ResetPassword_content{top: 12vh; }
-}
-/*当页面宽度大于1280px*/
-@media screen and (min-width:1280px) {
-  .banner{ margin-top: 35vh; }
-  .ball{ top: 43vh; }
-}
-/*当页面宽度大于1680px*/
-@media screen and (min-width:1680px) {
-  .banner{ height: 460px; }
-  .ball{ top: 42vh; }
-  .right_cont{width: 580px; }
-  .ResetPassword_content{top: 16vh; }
-}
 .login_register_left{
   height: 100%;
   background-image: url(./img/bg.png);
   float: left;
   width: 30%;
   overflow: hidden;
+  position: relative;
   .logo{
     width: 54%;
     margin-left: 22%;
     margin-top: 20%;
     &:hover{cursor: pointer; }
   }
-  .ball{
+  .spinningBall{
+    width: 100%;
     position: absolute;
+    bottom: -10%;
+  }
+  .banner{
+    height: auto;
+    width: 100%;
+  }
+  .ball{
+    position: relative;
+    width: 50%;
+    left: 24%;
+    bottom: -15vh;
     z-index: 2;
-    width: 14vw;
-    left: 7.5vw;
     animation: moving2 10s linear infinite;
   }
   @keyframes moving2 {
@@ -185,22 +174,15 @@
     }
     
   }
-
-  //第三方登录
-  .quick_logon{
+  .quick_login{
     text-align: center;
-    .quick_logon_p{
-      border-top: 1px solid #979797;
-      margin-top: 24px;
+    .quick_login_Divider{
+      margin-top: 13px;
+      &::before, &::after{
+        border-top: 1px solid #979797;
+      }
     }
     .startlogin{
-      position: relative;
-      background: #dee1f4;
-      display: block;
-      width: 90px;
-      top: -15px;
-      left: 39%;
-      font-size: 13px;
       color: #8D8D8D;
     }
   }
@@ -240,4 +222,58 @@
     display: inline-block;
     border-bottom: 2px solid;
   }
+}
+
+/*当页面宽度大于1000px*/
+@media screen and (min-width:1000px) {
+  .right_cont{width: 540px; }
+  .ResetPassword_content{top: 12vh; }
+}
+/*当页面宽度大于1680px*/
+@media screen and (min-width:1680px) {
+  .right_cont{width: 580px; }
+  .ResetPassword_content{top: 16vh; }
+}
+@media screen and (max-width:1280px) {
+  .login_register_left .ball{
+    width: 40%;
+    bottom: -8vh;
+    left: 28%;
+  }
+}
+
+// 小屏或者手机端隐藏左侧banner
+
+@media screen and (max-width:786px) {
+  .login_register_left{
+    display: none;
+  }
+  .login_register_right .right_cont{
+    left: 20vw;
+  }
+}
+
+@media screen and (max-width:500px) {
+  .login_register_right>div{
+    padding-top: 30%;
+  }
+  .login_register_right .right_cont{
+    // left: 10vw;
+    // padding: 20px;
+    // top: 40%;
+    position: static;
+    margin: 0 auto;
+    padding: 20px;
+  }
+}
+@media screen and (max-width:360px) {
+  .login_register_right .right_cont{
+    // left: 0;
+    .login_register_head>span:first-child{
+      font-size: 1.2em;
+    }
+  }
+  .quick_login img{
+    width: 40px !important;
+  }
 }
\ No newline at end of file
diff --git a/src/modules/loginRegister/component/otherLogin.jsx b/src/modules/loginRegister/component/otherLogin.jsx
index 28f36cda..04ebf32e 100644
--- a/src/modules/loginRegister/component/otherLogin.jsx
+++ b/src/modules/loginRegister/component/otherLogin.jsx
@@ -1,5 +1,5 @@
 import React,{useState ,useEffect} from 'react';
-import { Tooltip } from 'antd';
+import { Divider, Tooltip } from 'antd';
 import educoderLogo from '../../login/educoder.png';
 import qqlogo from '../../login/qq@2x.png';
 import WeChatlogo from '../../login/WeChat@2x.png';
@@ -16,9 +16,10 @@ function OtherLogin(){
 
   return(
     setting && setting.third_party_new && setting.third_party_new.length > 0 ?
-    <p className="quick_logon">
-      <p className="quick_logon_p"></p>
-      <span className={"startlogin"}>&nbsp;快速登录&nbsp;</span>
+    <div className="quick_login">
+      <Divider className="quick_login_Divider">
+        <span className='font-13 startlogin'>快速登录</span>
+      </Divider>
       {setting.third_party_new.map((item,key)=>{
         return(
         <a href={`${item.url}`} className="ml15 mr15">
@@ -29,7 +30,7 @@ function OtherLogin(){
         )
       })
       }
-    </p>
+    </div>
     :""
   )
 }