style:登录框优化

src/modules/root/Login.jsx

@@ -153,11 +153,11 @@ function Login(props) {
     <div className="login-page" >
     <div className="login-page" >
       <div className="login-main">
       <div className="login-main">
         <div className="left-banner">
         <div className="left-banner">
-          <div><img src="https://image.xiaomaiketang.com/xm/Newk4NrxKC.png" alt="" style={{ width: 60, height: 61 }} /></div>
-          <div className="name">小麦企学院</div>
-          <div className="desc">一键开启直播授课 让知识更有价值</div>
+          <div className="img-box"><img src="https://image.xiaomaiketang.com/xm/tFsjQktcQh.png" alt="" /></div>
         </div>
         </div>
         <div className="login-box">
         <div className="login-box">
+          <div className="left-top-block color-block"></div>
+          <div className="right-bottom-block color-block"></div>
           <div className="login">
           <div className="login">
             <div className="r">
             <div className="r">
               <Tabs defaultActiveKey="1">
               <Tabs defaultActiveKey="1">
@@ -173,7 +173,7 @@ function Login(props) {
                           autoComplete="off"
                           autoComplete="off"
                           name="account"
                           name="account"
                           maxLength={11}
                           maxLength={11}
-                          placeholder="手机号"
+                          placeholder="请输入手机号"
                           value={phone}
                           value={phone}
                           onChange={(e) => { setPhone(e.target.value) }}
                           onChange={(e) => { setPhone(e.target.value) }}
                         />
                         />
@@ -186,7 +186,7 @@ function Login(props) {
                           type="text"
                           type="text"
                           id="phoneverify"
                           id="phoneverify"
                           name="phoneverify"
                           name="phoneverify"
-                          placeholder="验证码"
+                          placeholder="请输入验证码"
                           autoComplete="off"
                           autoComplete="off"
                           value={phoneverify}
                           value={phoneverify}
                           maxLength={4}
                           maxLength={4}

src/modules/root/Login.less

@@ -4,49 +4,49 @@
   font-family: "微软雅黑";
   font-family: "微软雅黑";
   padding: 0;
   padding: 0;
   min-width: 1200px;
   min-width: 1200px;
-  background: #21242e;
+  background: #F4F6FA;
   height: 100%;
   height: 100%;
   .login-main {
   .login-main {
     min-width: 1200px;
     min-width: 1200px;
+    display: flex;
   }
   }
   .left-banner {
   .left-banner {
-    position: fixed;
-    min-width: 315px;
-    text-align: center;
-    top: 50%;
-    left: 30%;
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    .name {
-      font-size: 30px;
-      font-weight: 500;
-      color: #ffffff;
-      line-height: 42px;
-      margin-top: 11px;
-    }
-    .desc {
-      font-size: 14px;
-      font-weight: 400;
-      color: #ffffff;
-      line-height: 20px;
-      margin-top: 10px;
+    position: relative;
+    width: 540px;
+    height: 100vh;
+    .img-box {
+      background: #2966FF;
+      width: 540px;
+      height: 100vh;
+      img {
+        width: 540px;
+        height: 800px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+      }
     }
     }
   }
   }
   .login-box {
   .login-box {
-    min-width: 360px;
-    height: 340px;
-    position: fixed;
-    top: 50%;
-    left: 70%;
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-
+    min-width: 740px;
+    height: 100vh;
+    width: calc(100vw - 500px);
+    position: relative;
+    .color-block {
+      width: 256px;
+      height: 256px;
+      background: rgba(41, 102, 255, 0.05);
+      position: absolute;
+      top:0;
+      left: 0;
+      &.right-bottom-block {
+        top:auto;
+        left: auto;
+        bottom: 0;
+        right: 0;
+      }
+    }
     .go-to-site {
     .go-to-site {
       position: absolute;
       position: absolute;
       bottom: -80px;
       bottom: -80px;
@@ -74,10 +74,15 @@
       display: -webkit-flex;
       display: -webkit-flex;
       flex-direction: row;
       flex-direction: row;
       -webkit-flex-direction: row;
       -webkit-flex-direction: row;
-      height: 100%;
+      width: 380px;
+      height: 380px;
+      position: absolute;
+      left: 50%;
+      top:50%;
+      transform: translate(-50%,-50%);
       overflow: hidden;
       overflow: hidden;
       background-color: #ffffff;
       background-color: #ffffff;
-      border-radius: 4px; //box-shadow: 0 0 17px @sun;
+      border-radius: 4px; 
       .ant-tabs-tab-btn {
       .ant-tabs-tab-btn {
         color: #999999;
         color: #999999;
         font-size: 16px;
         font-size: 16px;
@@ -411,7 +416,7 @@
           }
           }
         }
         }
         .submit {
         .submit {
-          margin-top: 11px;
+          margin-top: 24px;
           button {
           button {
             // font-weight: 300;
             // font-weight: 300;
           }
           }