add user config page

src/app/graphqlService/dataStorage/schemaCreate/SchemaCreate.jsx

@@ -1,14 +0,0 @@
-import React, {Component} from 'react';
-
-class SchemaCreate extends Component {
-
-    render() {
-        return (
-            <div>
-                Schema Create
-            </div>
-        )
-    }
-}
-
-export default SchemaCreate;

src/login/AccountConfig.js

@@ -1,14 +1,12 @@
 import React, {Component} from 'react';
-import {Icon} from 'antd';
-
-
+import {Icon, Row, Col} from 'antd';
+import './index.css'
+import avatar from '../images/avatar.jpg';
 
 class AccountConfig extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-
-        };
+        this.state = {};
 
     }
 
@@ -16,13 +14,53 @@ class AccountConfig extends Component {
     render() {
         return (
             <div>
-                <div className="column-menu" onClick={()=>{
-                    this.props.history.push({
-                        pathname: '/login',
-                    })
-                }}>
-                    <Icon type="left" style={{color: '#3187FA'}}/> login
-                </div>
+                <Row style={{marginTop: 100}}>
+                    <Col span={12} offset={6} className={'login-wrapper'}>
+                        <div className={'mask'} style={{backgroundImage: `url(${avatar})`}}>
+                            <div className={'mask-black'}>
+                                <div className={'tip'}>
+                                    <Icon style={{fontSize: 30, display: 'block'}} type="camera"/>
+                                    <span style={{paddingTop: 5, display: 'block'}} className={'tip-span'}>修改我的头像</span>
+                                </div>
+                            </div>
+                        </div>
+                        <Row>
+                            <Col span={20} offset={4} className={'message-wrapper'}>
+                                <div className={'message-top'}>
+                                    <div className={'nickname'}>
+                                        xy
+                                    </div>
+                                    <div className="back-to-login" onClick={() => {
+                                        this.props.history.push({
+                                            pathname: '/login',
+                                        })
+                                    }}>
+                                        login <Icon type="right" style={{color: '#848fa6'}}/>
+                                    </div>
+                                </div>
+
+                                <Row className={'message'}>
+                                    <Col span={5}>
+                                        <span className={'message-title'}>tel</span>
+                                    </Col>
+                                    <Col span={19}>
+                                        <span className={'message-content'}>16655168985</span>
+                                    </Col>
+
+                                </Row>
+
+                                <Row className={'message'}>
+                                    <Col span={5}>
+                                        <span className={'message-title'}>email</span>
+                                    </Col>
+                                    <Col span={19}>
+                                        <span className={'message-content'}>contact@szu.im</span>
+                                    </Col>
+                                </Row>
+                            </Col>
+                        </Row>
+                    </Col>
+                </Row>
             </div>
         )
     }

src/login/CloudConfig.js

@@ -61,7 +61,7 @@ class CloudConfig extends Component {
                 let varObj = {
                     id: idGen('cloud'),
                     user_id: this.state.userID,
-                    appId: '',
+                    appId: 'account-id',
                     cloudName,
                     secretId,
                     secretKey,

src/login/Login.js

@@ -26,7 +26,7 @@ class Login extends Component {
         return (
             <Layout style={{padding: '24px', zIndex: '0'}}>
                 <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
-                    <div>
+
                         {
                             this.props.match.params.setting ?
                                 this.props.match.params.setting === 'account' ?
@@ -36,7 +36,7 @@ class Login extends Component {
                                 :
                                 <LoginInput history={this.props.history} getUserId={this.getUserId}/>
                         }
-                    </div>
+
                 </Content>
             </Layout>
         )

src/login/index.css

@@ -1,4 +1,94 @@
 .item-title-cloud {
   display: inline-block;
   width: 50px;
+}
+
+.login-wrapper {
+  background-color: #f6f6f6;
+  height: 500px;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(26,26,26,.1);
+  box-sizing: border-box;
+}
+
+.message-wrapper {
+  margin-top: 10px;
+  padding-right: 13px;
+  /*background-color: white;*/
+}
+
+.nickname {
+  display: inline-block;
+  font-weight: 600;
+  font-size: 26px;
+}
+
+.back-to-login {
+  display: inline-block;
+  line-height: 50px;
+  font-weight: 600;
+  cursor: pointer;
+  color: #848fa6;
+  float: right;
+}
+
+.back-to-login:hover {
+  color: #646464;
+}
+
+.mask {
+  position: absolute;
+  top: -40px;
+  left: -70px;
+  width: 150px;
+  height: 150px;
+  border: 4px solid #fff;
+  border-radius: 8px;
+  background-size: 100% 100%;
+}
+
+.mask-black {
+  border-radius: 8px;
+  width: 142px;
+  height: 142px;
+  background: #1a1a1a4f;
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.tip {
+  padding-top: 33px;
+  text-align: center;
+}
+
+.tip.tip-span {
+  margin-top: 10px;
+  display: block;
+}
+
+.message-top {
+  width: 100%;
+  height: 36px;
+  margin: 0 0 16px 0;
+}
+
+.message {
+  height: 96px;
+  line-height: 96px;
+  border-bottom: 1px solid #ebebeb;
+}
+
+.message-title {
+  display: inline-block;
+  line-height: 36px;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.message-content {
+  display: inline-block;
+  line-height: 36px;
+  font-size: 16px;
 }