样式

src/layouts/UserLayout.less

@@ -5,7 +5,7 @@
   flex-direction: column;
   height: 100vh;
   overflow: auto;
-  background: url('../assets/login-bg.png');
+  background: url('../assets/background.png');
   background-size: 100% 100%;
 }
 
@@ -21,19 +21,19 @@
 
 .content {
   flex: 1;
-  padding: 32px 0;
+  // padding: 32px 0;
 }
 
 @media (min-width: @screen-md-min) {
   .container {
-    background-image: url('../assets/login-bg.png');
+    background-image: url('../assets/background.png');
     background-repeat: no-repeat;
     // background-position: center 110px;
     background-size: 100% 100%;
   }
 
   .content {
-    padding: 32px 0 24px;
+    // padding: 32px 0 24px;
   }
 }
 

src/pages/user/login/components/Login/LoginSubmit.jsx

@@ -8,7 +8,7 @@ const LoginSubmit = ({ className, ...rest }) => {
   const clsString = classNames(styles.submit, className);
   return (
     <FormItem>
-      <Button size="large" className={clsString} type="primary" htmlType="submit" {...rest}>登录平台</Button>
+      <Button size="large" className={clsString} type="primary" htmlType="submit" {...rest}>登录</Button>
     </FormItem>
   );
 };

src/pages/user/login/components/Login/index.less

@@ -51,12 +51,14 @@
   }
 
   .submit {
-    width: calc(100% - 92px);
-    margin: 24px 46px 0 46px;
-    font-size:32px;
-    height:64px;
-    background:rgba(2,134,213,1);
-    box-shadow:0px 0px 16px 2px rgba(3,139,197,0.61);
-    border-radius:2px;
+    width: calc(100% - 130px);
+    min-width: 200px;
+    margin: 5vh 65px 0 65px;
+    font-size:28px;
+    background:linear-gradient(360deg,rgba(29,105,193,1) 0%,rgba(31,163,255,1) 100%);
+    box-shadow:0px 0px 16px 2px rgba(30,136,253,0.22);
+    border-radius:12px;
+    line-height: 50px;
+    height: 50px;
   }
 }

src/pages/user/login/index.jsx

@@ -6,6 +6,7 @@ import { connect } from 'dva';
 import md5 from 'md5';
 import LoginComponents from './components/Login';
 import styles from './style.less';
+import leftImmg from '../../../assets/diqiu.png'
 const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginComponents;
 
 @connect(({ login, loading }) => ({
@@ -75,6 +76,7 @@ class Login extends Component {
     const { type, autoLogin } = this.state;
     return (
       <div className={styles['login-box']}>
+        <img className={styles.leftImg} src={leftImmg}></img>
         <div className={styles.main}>
           <div className={styles.title}>用户登录</div>
           <LoginComponents

src/pages/user/login/style.less

@@ -3,25 +3,36 @@
 .login-box {
   display: flex;
   align-items: center;
-  margin-right: 200px;
-  flex-direction: row-reverse;
-  height: 100%;
+  height: 58vh;
+  width: 58vw;
+  background:rgba(0,0,0,0.2979);
+  box-shadow:0px 2px 34px 25px rgba(30,136,253,0.22);
+  border-radius:12px;
+  margin: 21vh auto;
+  line-height: 100vh;
+  padding: 0 4vw;
+  justify-content: space-between;
+  min-width: 800px;
+  min-height: 450px;
+}
+.leftImg{
+  width: 46%; 
+  min-width: 368px;
 }
 
 .main {
   width: 460px;
-  background-color: #fff;
   @media screen and (max-width: @screen-sm) {
     width: 95%;
   }
 
   .title {
-    font-size:32px;
-    color:rgba(2,134,213,1);
-    line-height:96px;
+    font-size:29px;
+    color:#fff;
+    line-height: 1;
+    margin-bottom: 40px;
+    margin-top: 3vh;
     padding: 0 30px;
-    height:96px;
-    background:rgba(241,247,251,1);
   }
 
   .icon {