首页样式调整

src/components/common/login/login.jsx

@@ -71,75 +71,71 @@ class LoginComponent extends React.Component {
         }
 
         return (
-            <div className='container'>
-                <div className='content'>
-                    <div className='main'>
-                        <div className='login-header'>
-                            <div className='logo'></div>
-                            <span className='text' >BI 商业智能平台</span>
+            <div className='login-container'>
+                <div className='login-body'>
+                    <div className='login-header'></div>
+                    <div className='login-text'>登录</div>
+                    <Login
+                        className='login-content'
+                        onSubmit={this.onSubmit}
+                    >
+                        {
+                            notice &&
+                            <Alert style={{ marginBottom: 24 }} message={notice} type="error" showIcon closable />
+                        }
+                        <UserName
+                            name="username"
+                            disabled={fetching}
+                            placeholder='输入用户名'
+                            // defaultValue={autoLogin ? defaultAccount : ''}
+                            defaultValue={currentUserName}
+                            onChange={() => {
+                                this.setState({
+                                    notice: ''
+                                });
+                            }}
+                            rules={[{
+                                required: true,
+                                whitespace: true,
+                                message: '用户名不能为空！'
+                            }]}
+                            onPressEnter={(e) => {
+                                document.getElementsByClassName('antd-pro-login-submit')[0].click();
+                            }}
+                        />
+                        <Password
+                            name="password"
+                            disabled={fetching}
+                            placeholder='输入密码'
+                            defaultValue={autoLogin ? currentPassword : ''}
+                            onChange={() => {
+                                this.setState({
+                                    notice: ''
+                                });
+                            }}
+                            rules={[{
+                                required: true,
+                                whitespace: true,
+                                message: "密码不能为空！",
+                            }]}
+                            onPressEnter={(e) => {
+                                document.getElementsByClassName('antd-pro-login-submit')[0].click();
+                            }}
+                        />
+                        <div>
+                            <Checkbox className='checkbox-remember' defaultChecked={autoLogin} onChange={this.changeAutoLogin}>记住密码</Checkbox>
+                            {/* <a style={{ float: 'right' }} href="">忘记密码</a> */}
                         </div>
-                        <Login
-                            className='login'
-                            onSubmit={this.onSubmit}
-                        >
-                            {
-                                notice &&
-                                <Alert style={{ marginBottom: 24 }} message={notice} type="error" showIcon closable />
-                            }
-                            <UserName
-                                name="username"
-                                disabled={fetching}
-                                placeholder='输入用户名'
-                                // defaultValue={autoLogin ? defaultAccount : ''}
-                                defaultValue={currentUserName}
-                                onChange={() => {
-                                    this.setState({
-                                        notice: ''
-                                    });
-                                }}
-                                rules={[{
-                                    required: true,
-                                    whitespace: true,
-                                    message: '用户名不能为空！'
-                                }]}
-                                onPressEnter={(e) => {
-                                    document.getElementsByClassName('antd-pro-login-submit')[0].click();
-                                }}
-                            />
-                            <Password
-                                name="password"
-                                disabled={fetching}
-                                placeholder='输入密码'
-                                defaultValue={autoLogin ? currentPassword : ''}
-                                onChange={() => {
-                                    this.setState({
-                                        notice: ''
-                                    });
-                                }}
-                                rules={[{
-                                    required: true,
-                                    whitespace: true,
-                                    message: "密码不能为空！",
-                                }]}
-                                onPressEnter={(e) => {
-                                    document.getElementsByClassName('antd-pro-login-submit')[0].click();
-                                }}
-                            />
-                            <div>
-                                <Checkbox style={{ color: 'white' }} defaultChecked={autoLogin} onChange={this.changeAutoLogin}>记住密码</Checkbox>
-                                {/* <a style={{ float: 'right' }} href="">忘记密码</a> */}
-                            </div>
-                            <Submit disabled={fetching}>
-                                {fetching && <Icon type="loading" theme="outlined" />}
-                                {fetching ? '登录中...' : '登录'}
-                            </Submit>
-                            <div>
-                                {/* <Link to="/register">
-                                    <span style={{ float: 'right' }}>注册</span>
-                                </Link> */}
-                            </div>
-                        </Login>
-                    </div>
+                        <Submit disabled={fetching}>
+                            {fetching && <Icon type="loading" theme="outlined" />}
+                            {fetching ? '登录中...' : '登录'}
+                        </Submit>
+                        <div>
+                            {/* <Link to="/register">
+                                <span style={{ float: 'right' }}>注册</span>
+                            </Link> */}
+                        </div>
+                    </Login>
                 </div>
             </div>
         );

src/components/common/login/login.less

@@ -1,36 +1,60 @@
-.container {
+.login-container {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     height: 100%;
     overflow: auto;
     background-repeat: no-repeat;
     background-size: cover;
-    background-image: url(../../../../static/images/login-bg.png);
-    .content {
-        padding: 112px 0 24px;
-        flex: 1 1;
-        .main {
-            width: 368px;
-            margin: 0 auto;
-            .login-header {
-                height: 60px;
-                margin-bottom: 40px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                .logo {
-                    height: 100%;
-                    width: 84px;
-                    background-image: url(../../../../static/images/uas.png);
-                    background-repeat: no-repeat;
-                    background-position: center;
-                    margin-top: 2px;
-                }
-                .text {
-                    font-size: 24px;
-                    font-weight: bold;
-                    color: white;
-                }
+    background-image: url(../../../../static/images/login-bg.jpg);
+    .login-body {
+        width: 450px;
+        margin: 0 auto;
+        background: #fff;
+        box-shadow: 0 0 15px 3px rgba(199,199,199,0.27);
+        .login-header {
+            height: 160px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-image: url(../../../../static/images/login-header.png);
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        .login-text {
+            display: table;
+            width: 100%;
+            text-align: center;
+            font-size: 20px;
+            color: #293648;
+            padding: 0 36px;
+            margin: 26px 0 36px 0;
+            &:before, &:after {
+                content: "";
+                position: relative;
+                width: 36%;
+                border-top: 1px solid #e8e8e8;
+                display: table-cell;
+                transform: translateY(50%);
+            }
+        }
+        .login-content {
+            padding: 0 36px 24px;
+            .antd-pro-login-login .ant-form-item {
+                margin: 0 2px 23px;
+            }
+            .ant-form-item-control {
+                line-height: 32px;
+            }
+            input {
+                height: 32px;
+                background: #F1F3F8;
+            }
+            .ant-form-explain {
+                position: absolute;
+            }
+            .antd-pro-login-submit {
+                height: 32px;
             }
         }
     }