(*)登录页调整

web/client/src/sections/auth/containers/login.js

@@ -90,163 +90,46 @@ const Login = props => {
     };
 
     return (
-        <div
-            id='loginContainer'
-            style={{
-                height: '100vh',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'aliceblue',
-                backgroundImage: 'url(/assets/images/login_bg.png)'
-            }}
-        >
-            <img src='/assets/images/logo.png' style={{ height: 42, borderRadius: 4, position: 'fixed', top: 32, left: 32 }} />
+        <div className='login'>
+            <div className='left'></div>
+            <div className='right'>
+                <div className='loginBox'>
+                    <div className='_title'>欢迎登录系统</div>
+                    <div className='_divider'></div>
+                    <Form onKeyDown={enterHandler}>
 
-            <div style={{ width: 1000, backgroundColor: '#01316d', borderRadius: 24 }}>
-                <Row>
-                    <Col span={12} style={{}}>
-                        <img src='/assets/images/login.png' width={'100%'} />
-                    </Col>
-                    <Col span={12}>
-                        <div style={{
-                            width: '100%',
-                            height: '100%',
-                            padding: 30,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            justifyContent: 'space-around'
-                        }}>
-                            <p style={{ fontSize: 30, fontWeight: 'bold', textAlign: 'center' }}>
-                                政务数据资源中心
-                            </p>
-                            <Tabs defaultActiveKey="1" animated={true} onChange={(k) => {
-                                setCurTabKey(k)
-                            }}>
-                                <Tabs.TabPane tab="用户名登录" key="1">
-                                    <Form onKeyDown={enterHandler}>
-                                        <div style={{ fontSize: 10, fontWeight: 'bold' }}>
-                                            用户名
-                                        </div>
-                                        <FormItem name="username">
-                                            <Input
-                                                type="text"
-                                                size="large"
-                                                value={username}
-                                                placeholder="用户名"
-                                                onChange={e => {
-                                                    setUserName(e.target.value)
-                                                    setInputChanged(true)
-                                                }}
-                                            />
-                                        </FormItem>
-                                        <div style={{ fontSize: 10, fontWeight: 'bold' }}>
-                                            密码
-                                        </div>
-                                        <FormItem name="password">
-                                            <Input
-                                                type="password"
-                                                size="large"
-                                                value={password}
-                                                placeholder="密码"
-                                                onChange={e => {
-                                                    setPassword(e.target.value)
-                                                    setInputChanged(true)
-                                                }}
-                                            />
-                                        </FormItem>
-                                    </Form>
-                                </Tabs.TabPane>
-                                <Tabs.TabPane tab="手机登录" key="2" disabled>
-                                    <Form onKeyDown={enterHandler}>
-                                        <div style={{ fontSize: 10, fontWeight: 'bold' }}>
-                                            手机号
-                                        </div>
-                                        <FormItem name="phone" rules={[{ pattern: /^1[3|4|5|7|8|9]\d{9}$/, message: '请输入正确的手机号码' }]}>
-                                            <Input
-                                                type="text"
-                                                size="large"
-                                                value={username}
-                                                onChange={e => {
-                                                    setPhone(e.target.value)
-                                                    setInputChanged(true)
-                                                }}
-                                            />
-                                        </FormItem>
-                                        <div style={{ fontSize: 10, fontWeight: 'bold' }}>
-                                            验证码
-                                        </div>
-                                        <FormItem name="code">
-                                            <Input.Group compact>
-                                                <Input
-                                                    size="large"
-                                                    style={{ width: 'calc(100% - 112px)' }}
-                                                    onChange={e => {
-                                                        setCode(e.target.value)
-                                                        setInputChanged(true)
-                                                    }}
-                                                />
-                                                <Button
-                                                    size="large"
-                                                    onClick={() => {
-                                                        setCodSending(true)
-                                                        const random = Math.floor(Math.random() * Math.pow(10, 4));
-                                                        const sig = Hex.stringify(SHA1(phone + random));
-                                                        setInputChanged(false)
-                                                        Request.post(ApiTable.validatePhone, {
-                                                            phone: phone,
-                                                            r: random,
-                                                            sig: sig
-                                                        }).then(res => {
-
-                                                        }, err => {
-                                                            let message = err.response.body?.message
-                                                            console.log(message);
-                                                            dispatch({
-                                                                type: LOGIN_ERROR,
-                                                                payload: { error: message || '获取验证码失败' }
-                                                            });
-                                                            setCodSending(false)
-                                                        });
-                                                    }}
-                                                    loading={codSending}
-                                                    style={{ width: 112 }}
-                                                >
-                                                    {codSending ? codCountDown + ' s' : '发送验证码'}
-                                                </Button>
-                                            </Input.Group>
-                                        </FormItem>
-                                    </Form>
-                                </Tabs.TabPane>
-                            </Tabs>
-
-                            <Row style={{
-                                textAlign: 'left'
-                            }}>
-                                {
-                                    inputChanged || !error ?
-                                        <span style={{
-                                            visibility: 'hidden'
-                                        }}>-</span> :
-                                        <span>
-                                            <ExclamationCircleOutlined style={{ color: 'red' }} />{error}
-                                        </span>
-                                }
-                            </Row>
-                            <Button
-                                shape="round"
-                                size="large"
-                                style={{ width: '100%' }}
-                                loading={isRequesting}
-                                onClick={doLogin}
-                            >
-                                登录
-                            </Button>
-                        </div>
-                    </Col>
-                </Row>
+                        <FormItem>
+                            <Input
+                                style={{ marginTop: 30 }}
+                                placeholder='请输入账号'
+                                className='loginInp'
+                                type="text"
+                                value={username}
+                                // maxlength={11}
+                                onChange={e => {
+                                    setUserName(e.target.value)
+                                    setInputChanged(true)
+                                }}
+                            />
+                        </FormItem>
+                        <FormItem>
+                            <Input
+                              style={{ marginTop: 30 }}
+                                placeholder='请输入密码'
+                                className='loginInp'
+                                type="password"
+                                value={password}
+                                onChange={e => {
+                                    setPassword(e.target.value)
+                                    setInputChanged(true)
+                                }}
+                            />
+                        </FormItem>
+                    </Form>
+                    <Button style={{ borderRadius: 28 }} type="primary" className='loginBtn' loading={isRequesting} onClick={doLogin}>登录</Button>
+                </div>
             </div>
-        </div >
+        </div>
     );
 }
 

web/client/src/sections/auth/style.less

@@ -1,13 +1,112 @@
-#loginContainer {
-    .ant-form {
-        color: aliceblue;
+.login {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-image: url('/assets/images/login_bg.png');
+    background-size: 100% 100%;
+
+    .left {
+
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 55%;
+        height: 100%;
+        float: left;
+        top: 0px;
+        left: 0px;
+    }
+
+    .right {
+        width: 45%;
+        height: 100%;
+        // background-color: #000066;
+        float: left;
+        right: 0px;
+        bottom: 0px;
+    }
+}
+
+@media screen and (max-height:1440px) {
+    .loginBox {
+        top: 25%;
+    }
+}
+
+@media screen and (max-height: 768px) {
+    .loginBox {
+        top: 20%;
+    }
+}
+
+@media screen and (max-height: 630px) {
+    .loginBox {
+        top: 10%;
+    }
+}
+
+.loginBox {
+    height: 50%;
+    width: 25%;
+    position: absolute;
+    right: 16.5%;
+    z-index: 20;
+    background: #fff;
+    text-align: center;
+    padding-top: 30px;
+
+    @media screen and (min-height:1080px) {
+        height: 40%;
+    }
+
+    ._title {
+        font-family: SourceHanSansCN-Medium;
+        font-weight: 500;
+        font-size: 24px;
+        color: rgba(0, 0, 0, 0.75);
+        letter-spacing: 0;
+    }
+
+    ._divider {
+        width: 58px;
+        height: 4px;
+        background: #4263F7;
+        display: inline-block;
+    }
+
+    h1 {
+        color: #fff;
+        font-size: 58px;
+    }
+
+    .loginFormTit {
+        width: 20%;
+        font-size: 18px;
+        color: rgb(255, 255, 255);
+        // margin-bottom: 10px;
+    }
+
+    .loginInp {
+        width: 80%;
+        height: 50px;
+        background: #ffffff;
+        border: 1px solid #C2C2C2;
+        border-radius: 5px;
     }
 
-    .ant-tabs {
-        color: aliceblue;
+    .loginBtn {
+        width: 80%;
+        height: 50px;
+        margin-top: 40px;
+        border-radius: 5px;
+        font-size: 16px;
+        background: #4263F7;
+        border-color: #4263F7;
     }
 
-    .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-        color: aliceblue;
+    .loginBtn:hover {
+        background: #4263F7;
+        border-color: #4263F7;
     }
 }