适配手机端、小屏

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" ? 

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;
+  }
 }

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>
     :""
   )
 }