opti: 个人信息页样式微调

This commit is contained in:
wenbo.dong 2017-07-27 19:08:40 +08:00
parent 526d5bdab3
commit 296faec3be
3 changed files with 31 additions and 38 deletions

View File

@ -39,7 +39,7 @@ class LeftMenu extends Component {
this.interval = setInterval(() => { this.interval = setInterval(() => {
if (this.searchSign === this._searchSign) { if (this.searchSign === this._searchSign) {
this.interval = clearInterval(this.interval) this.interval = clearInterval(this.interval)
axios.get('/user/search?q=' + value).then((res) => { axios.get('/user/search?q=' + value).then((res) => {
if (res.data.errcode === 0) { if (res.data.errcode === 0) {
this.setState({ this.setState({
dataSource: res.data.data dataSource: res.data.data
@ -103,7 +103,7 @@ class LeftMenu extends Component {
</div> </div>
</Col> </Col>
</Row> </Row>
<Menu mode='inline' defaultSelectedKeys={[location.hash]}> <Menu mode='inline' defaultSelectedKeys={[location.hash]} className="user-nav">
{content} {content}
</Menu> </Menu>
</div> </div>
@ -111,4 +111,4 @@ class LeftMenu extends Component {
} }
} }
export default LeftMenu export default LeftMenu

View File

@ -22,7 +22,7 @@ class Profile extends Component {
} }
} }
} }
componentDidMount(){ componentDidMount(){
@ -51,7 +51,7 @@ class Profile extends Component {
let value = this.state._userinfo[name]; let value = this.state._userinfo[name];
let params = {uid: state.userinfo.uid} let params = {uid: state.userinfo.uid}
params[name] = value; params[name] = value;
axios.post('/user/update', params).then( (res)=>{ axios.post('/user/update', params).then( (res)=>{
let data = res.data; let data = res.data;
if(data.errcode === 0){ if(data.errcode === 0){
@ -66,7 +66,7 @@ class Profile extends Component {
}else{ }else{
message.error(data.errmsg) message.error(data.errmsg)
} }
}, (err) => { }, (err) => {
message.error(err.message) message.error(err.message)
} ) } )
@ -104,8 +104,8 @@ class Profile extends Component {
password: password, password: password,
old_password: old_password old_password: old_password
} }
axios.post('/user/change_password', params).then( (res)=>{ axios.post('/user/change_password', params).then( (res)=>{
let data = res.data; let data = res.data;
if(data.errcode === 0){ if(data.errcode === 0){
@ -114,11 +114,11 @@ class Profile extends Component {
}else{ }else{
message.error(data.errmsg) message.error(data.errmsg)
} }
}, (err) => { }, (err) => {
message.error(err.message) message.error(err.message)
} ) } )
} }
render() { render() {
@ -138,8 +138,8 @@ class Profile extends Component {
userNameEditHtml = <div> userNameEditHtml = <div>
<Input value={_userinfo.username} name="username" onChange={this.changeUserinfo} placeholder="用户名" /> <Input value={_userinfo.username} name="username" onChange={this.changeUserinfo} placeholder="用户名" />
<ButtonGroup className="edit-buttons" > <ButtonGroup className="edit-buttons" >
<Button className="edit-button" onClick={() => { this.handleEdit('usernameEdit', false) }} >Cancel</Button> <Button className="edit-button" onClick={() => { this.handleEdit('usernameEdit', false) }} >取消</Button>
<Button className="edit-button" onClick={ () => { this.updateUserinfo('username')} } type="primary">OK</Button> <Button className="edit-button" onClick={ () => { this.updateUserinfo('username')} } type="primary">确定</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
} }
@ -154,8 +154,8 @@ class Profile extends Component {
emailEditHtml = <div> emailEditHtml = <div>
<Input placeholder="Email" value={_userinfo.email} name="email" onChange={this.changeUserinfo} /> <Input placeholder="Email" value={_userinfo.email} name="email" onChange={this.changeUserinfo} />
<ButtonGroup className="edit-buttons" > <ButtonGroup className="edit-buttons" >
<Button className="edit-button" onClick={() => { this.handleEdit('emailEdit', false) }} >Cancel</Button> <Button className="edit-button" onClick={() => { this.handleEdit('emailEdit', false) }} >取消</Button>
<Button className="edit-button" type="primary" onClick={ () => { this.updateUserinfo('email')} }>OK</Button> <Button className="edit-button" type="primary" onClick={ () => { this.updateUserinfo('email')} }>确定</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
} }
@ -182,8 +182,8 @@ class Profile extends Component {
<Input placeholder="新的密码" type="password" name="password" id="password" /> <Input placeholder="新的密码" type="password" name="password" id="password" />
<Input placeholder="确认密码" type="password" name="verify_pass" id="verify_pass" /> <Input placeholder="确认密码" type="password" name="verify_pass" id="verify_pass" />
<ButtonGroup className="edit-buttons" > <ButtonGroup className="edit-buttons" >
<Button className="edit-button" onClick={() => { this.handleEdit('secureEdit', false) }}>Cancel</Button> <Button className="edit-button" onClick={() => { this.handleEdit('secureEdit', false) }}>取消</Button>
<Button className="edit-button" onClick={this.updatePassword} type="primary">OK</Button> <Button className="edit-button" onClick={this.updatePassword} type="primary">确定</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
} }

View File

@ -22,7 +22,7 @@
.user-list { .user-list {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background: #FFF; background: #FFF;
border-radius:5px; border-radius:4px;
margin-top: 15px; margin-top: 15px;
.search{ .search{
padding: 5px; padding: 5px;
@ -34,13 +34,13 @@
} }
} }
.user-name{ .user-name{
padding: 24px 10px; padding: .24rem;
// text-align: center; // text-align: center;
background-color: #34495e; background-color: #34495e;
color: white; color: white;
font-size: 16px; font-size: 16px;
border-top-left-radius:5px; border-top-left-radius: 4px;
border-top-right-radius: 5px; border-top-right-radius: 4px;
span{ span{
margin-right: 5px; margin-right: 5px;
} }
@ -51,8 +51,7 @@
.user-table { .user-table {
-webkit-box-flex: 1; -webkit-box-flex: 1;
padding: 24px; padding: 24px;
margin-left: 15px; border-radius: 4px;
border-radius:5px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background: #FFF; background: #FFF;
margin-top: 15px; margin-top: 15px;
@ -69,19 +68,18 @@
.user-profile { .user-profile {
-webkit-box-flex: 1; -webkit-box-flex: 1;
margin-top: 15px; margin-top: 15px;
margin-left: 15px;
padding: 24px; padding: 24px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background: #FFF; background: #FFF;
border-radius:5px; border-radius: .04rem;
.user-item { .user-item {
min-height:35px; min-height:35px;
line-height:35px; line-height:35px;
margin: 5px; margin: 5px;
margin-left: 0px; margin-left: 0px;
margin-bottom:10px; margin-bottom: 16px;
border-bottom: 1px solid #f1f3f6; border-bottom: 1px solid #f1f3f6;
padding-bottom: 10px; padding-bottom: 16px;
#old_password,#password,#verify_pass{ #old_password,#password,#verify_pass{
margin-top: 20px; margin-top: 20px;
} }
@ -91,15 +89,15 @@
.ant-col-12{ .ant-col-12{
.ant-input{ .ant-input{
width: 60%; width: 60%;
margin-right: 24px; margin-right: 16px;
} }
} }
.ant-col-4{ .ant-col-4{
color: rgba(0,0,0,0.85); color: rgba(0,0,0,0.85);
padding: 0px 10px; padding: 0px 16px;
text-indent: .7em; text-indent: .7em;
// background-color: #f1f3f6; // background-color: #f1f3f6;
border-left: 5px solid #f1f3f6; border-left: 4px solid #f1f3f6;
margin-right: 30px; margin-right: 30px;
} }
.text{ .text{
@ -110,16 +108,11 @@
color: #657289; color: #657289;
cursor: pointer cursor: pointer
} }
// .edit-buttons{
// margin:10px;
// }
// .edit-button{
// margin: 5px;
// }
} }
} }
.user-nav {
border-bottom-left-radius: .04rem;
border-bottom-right-radius: .04rem;
}
} }