魏超 5 years ago
parent
commit
eb9999b256

BIN
src/assets/background.png View File


BIN
src/assets/diqiu.png View File


+ 4
- 4
src/layouts/UserLayout.less View File

5
   flex-direction: column;
5
   flex-direction: column;
6
   height: 100vh;
6
   height: 100vh;
7
   overflow: auto;
7
   overflow: auto;
8
-  background: url('../assets/login-bg.png');
8
+  background: url('../assets/background.png');
9
   background-size: 100% 100%;
9
   background-size: 100% 100%;
10
 }
10
 }
11
 
11
 
21
 
21
 
22
 .content {
22
 .content {
23
   flex: 1;
23
   flex: 1;
24
-  padding: 32px 0;
24
+  // padding: 32px 0;
25
 }
25
 }
26
 
26
 
27
 @media (min-width: @screen-md-min) {
27
 @media (min-width: @screen-md-min) {
28
   .container {
28
   .container {
29
-    background-image: url('../assets/login-bg.png');
29
+    background-image: url('../assets/background.png');
30
     background-repeat: no-repeat;
30
     background-repeat: no-repeat;
31
     // background-position: center 110px;
31
     // background-position: center 110px;
32
     background-size: 100% 100%;
32
     background-size: 100% 100%;
33
   }
33
   }
34
 
34
 
35
   .content {
35
   .content {
36
-    padding: 32px 0 24px;
36
+    // padding: 32px 0 24px;
37
   }
37
   }
38
 }
38
 }
39
 
39
 

+ 1
- 1
src/pages/user/login/components/Login/LoginSubmit.jsx View File

8
   const clsString = classNames(styles.submit, className);
8
   const clsString = classNames(styles.submit, className);
9
   return (
9
   return (
10
     <FormItem>
10
     <FormItem>
11
-      <Button size="large" className={clsString} type="primary" htmlType="submit" {...rest}>登录平台</Button>
11
+      <Button size="large" className={clsString} type="primary" htmlType="submit" {...rest}>登录</Button>
12
     </FormItem>
12
     </FormItem>
13
   );
13
   );
14
 };
14
 };

+ 9
- 7
src/pages/user/login/components/Login/index.less View File

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

+ 2
- 0
src/pages/user/login/index.jsx View File

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

+ 20
- 9
src/pages/user/login/style.less View File

3
 .login-box {
3
 .login-box {
4
   display: flex;
4
   display: flex;
5
   align-items: center;
5
   align-items: center;
6
-  margin-right: 200px;
7
-  flex-direction: row-reverse;
8
-  height: 100%;
6
+  height: 58vh;
7
+  width: 58vw;
8
+  background:rgba(0,0,0,0.2979);
9
+  box-shadow:0px 2px 34px 25px rgba(30,136,253,0.22);
10
+  border-radius:12px;
11
+  margin: 21vh auto;
12
+  line-height: 100vh;
13
+  padding: 0 4vw;
14
+  justify-content: space-between;
15
+  min-width: 800px;
16
+  min-height: 450px;
17
+}
18
+.leftImg{
19
+  width: 46%; 
20
+  min-width: 368px;
9
 }
21
 }
10
 
22
 
11
 .main {
23
 .main {
12
   width: 460px;
24
   width: 460px;
13
-  background-color: #fff;
14
   @media screen and (max-width: @screen-sm) {
25
   @media screen and (max-width: @screen-sm) {
15
     width: 95%;
26
     width: 95%;
16
   }
27
   }
17
 
28
 
18
   .title {
29
   .title {
19
-    font-size:32px;
20
-    color:rgba(2,134,213,1);
21
-    line-height:96px;
30
+    font-size:29px;
31
+    color:#fff;
32
+    line-height: 1;
33
+    margin-bottom: 40px;
34
+    margin-top: 3vh;
22
     padding: 0 30px;
35
     padding: 0 30px;
23
-    height:96px;
24
-    background:rgba(241,247,251,1);
25
   }
36
   }
26
 
37
 
27
   .icon {
38
   .icon {