fix: 修改user样式

client/containers/Project/Activity/Activity.scss

@@ -80,14 +80,15 @@
         margin-left: 40px;
         padding: 0px;
         padding-bottom: 16px;
-        min-width: 300px;
+        // min-width: 300px;
-        max-width: 600px;
+        // max-width: 600px;
+        width: 625px;
         border-radius: 8px;
         
         .logMesHeade{
           color: white;
           padding: 16px 8px 8px 8px;
-          background-color: gray;
+          background-color: rgba(35, 149, 241, 0.88);
           border-top-left-radius: 8px;
           border-top-right-radius: 8px;
         }
@@ -107,7 +108,7 @@
         padding: 0px;
         .ant-timeline-item-content{
           padding: 0px;
-          min-width: auto;
+          width: auto;
           margin-top: 15px;
           .loggetMore{
             margin: 0px;

client/containers/Project/Interface/InterfaceList/View.js

@@ -173,7 +173,8 @@ class View extends Component {
           key: i,
           name: item.name,
           required: item.required,
-          value: item.value
+          value: item.value,
+          desc: item.desc
         })
       })
     }
@@ -181,16 +182,23 @@ class View extends Component {
     const columns = [{
       title: '参数名称',
       dataIndex: 'name',
-      key: 'name'
+      key: 'name',
+      width: 2
     }, {
       title: '参数值',
       dataIndex: 'value',
-      key: 'value'
+      key: 'value',
+      width: 2
     }, {
-      title: '备注',
+      title: '是否必须',
       dataIndex: 'required',
       key: 'required',
-      width: '45%'
+      width: 1
+    },{
+      title: '备注',
+      dataIndex: 'desc',
+      key: 'desc',
+      width: 4
     }];
     let status = {
       undone: "未完成",
@@ -208,6 +216,14 @@ class View extends Component {
       get: {
         bac: "#cfefdf",
         color: "#00a854"
+      },
+      input: {
+        bac: "#57cf27",
+        color: "#9c82a2"
+      },
+      delete: {
+        bac: "#57cf27",
+        color: "#57cf27"
       }
     }
     methodColor = methodColor[this.props.curData.method?this.props.curData.method.toLowerCase():"get"];

client/containers/User/Profile.js

@@ -3,7 +3,7 @@ import { Row, Col, Input, Button, Select, message, Upload, Tooltip} from 'antd'
 import axios from 'axios';
 import {formatTime} from '../../common.js'
 import PropTypes from 'prop-types'
-import { Link } from 'react-router-dom'
+// import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
 @connect(state=>{
@@ -40,7 +40,19 @@ class Profile extends Component {
   }
 
   componentDidMount(){
-    const uid = this.props.match.params.uid;
+    this._uid = this.props.match.params.uid;
+    this.handleUserinfo(this.props)
+  }
+
+  componentWillReceiveProps(nextProps){
+    if(!nextProps.match.params.uid) return;
+    if(this._uid !== nextProps.match.params.uid){
+      this.handleUserinfo(nextProps)
+    }
+  }
+
+  handleUserinfo(props){
+    const uid = props.match.params.uid;
     this.getUserInfo(uid)
   }
 
@@ -253,33 +265,13 @@ class Profile extends Component {
         </ButtonGroup>
       </div>
     }
-    let bacToPer = "";
-    if(userinfo.uid != this.props.curUid){
-      bacToPer = <div className="bacToPer"><Link to={`/user/profile/${this.props.curUid}`}><Button onClick={()=>{this.getUserInfo(this.props.curUid)}}>返回到当前用户</Button></Link></div>
-    }
     return <div className="user-profile">
-      {
-        bacToPer
-      }
-      <Row  className="avatarCon" type="flex" justify="start">
-        <div className="m-bg">
-          <div className="m-bg-mask m-bg-mask0"></div>
-          <div className="m-bg-mask m-bg-mask1"></div>
-          <div className="m-bg-mask m-bg-mask2"></div>
-          <div className="m-bg-mask m-bg-mask3"></div>
-        </div>
-        <Col  span={24}>{userinfo.uid === this.props.curUid?<AvatarUpload uid={userinfo.uid}>点击上传头像</AvatarUpload>:<div className = "avatarImg"><img src = {`/api/user/avatar?uid=${userinfo.uid}`} /></div>}</Col>
-      </Row>
       <div className="user-item-body">
-        {/*<div className="user-item-mask-top"></div>
+        {userinfo.uid === this.props.curUid?<h3>个人设置</h3>:<h3>{userinfo.username} 资料设置</h3>}
-        <div className="user-item-mask">
+        
-          <div className="m-bg">
+        <Row  className="avatarCon" type="flex" justify="start">
-            <div className="m-bg-mask m-bg-mask0"></div>
+          <Col  span={24}>{userinfo.uid === this.props.curUid?<AvatarUpload uid={userinfo.uid}>点击上传头像</AvatarUpload>:<div className = "avatarImg"><img src = {`/api/user/avatar?uid=${userinfo.uid}`} /></div>}</Col>
-            <div className="m-bg-mask m-bg-mask1"></div>
+        </Row>
-            <div className="m-bg-mask m-bg-mask2"></div>
-            <div className="m-bg-mask m-bg-mask3"></div>
-          </div>
-        </div>*/}
         <Row className="user-item" type="flex" justify="start">
           <div className="maoboli"></div>
           <Col span={4}>用户id</Col>
@@ -365,7 +357,7 @@ class AvatarUpload extends Component {
     // console.log(this.props.uid);
     
     return <div className="avatar-box">
-      <Tooltip placement="left" title={<div>点击头像更换 (只支持jpg、png格式且大小不超过200kb的图片)</div>}>
+      <Tooltip placement="right" title={<div>点击头像更换 (只支持jpg、png格式且大小不超过200kb的图片)</div>}>
         <div>
           <Upload
             className="avatar-uploader"

client/containers/User/index.scss

@@ -76,6 +76,11 @@
       padding: 32px;
       position: relative;
       // box-shadow: 0 4px 6px rgba(50, 50, 93, 0.3), 0 1px 3px rgba(0, 0, 0, 0.01);
+      h3{
+        font-size: 20px;
+        font-weight: 500;
+        margin-bottom: 16px;
+      }
       .user-item-mask-top{
         position: absolute;
         top: 0px;
@@ -102,7 +107,7 @@
         padding: 8px 0px;
         
         .maoboli{
-          background-color: rgba(225,225,225,0.16);
+          // background-color: rgba(225,225,225,0.16);
           position: absolute;
           width: 100%;
           height: 100%;
@@ -118,8 +123,6 @@
       line-height:35px;
       margin: 5px;
       margin-left: 0px;
-      margin-bottom: 16px;
-      padding-bottom: 16px;
       font-size: 14px;
       #old_password,#password,#verify_pass{
         margin-top: 20px;
@@ -134,11 +137,13 @@
         }
       }
       .ant-col-4{
-        color: rgba(0,0,0,0.66);
+        color: rgba(71, 86, 99, .8);
+        font-weight: 500;
         padding: 0px 16px;
         text-indent: .7em;
         margin-right: 30px;
         white-space: nowrap;
+        text-align: right;
       }
       .text{
         padding-right: 15px;
@@ -175,7 +180,6 @@
     overflow: hidden;
     height: 100px;
     background-color: white;
-    margin: 0px auto;
     box-shadow: 0 4px 6px rgba(50, 50, 93, 0.31), 0 1px 3px rgba(0, 0, 0, 0.08);
     img{
       width: 100%;
@@ -191,57 +195,18 @@
   }
   .avatar-box{
     width: 100px;
-    margin: 0px auto;
     position: relative;
+    // margin-left: 160px;
   }
   .avatarCon{
-    background: gray;
+    // background: gray;
     padding: 16px 0px;
-    margin-bottom: 16px;
     width: 100%;
     overflow: hidden;
     position: relative;
     
   }
-  .m-bg {
+  
-      position: absolute;
-      left: 0;
-      top: -300px;
-      height: 1200px;
-      width: 100%;
-      transform: skewY(-11deg);
-      background-image: linear-gradient(-20deg, #21d4fd 0%, #b721ff 100%);
-      .m-bg-mask {
-        position: absolute;
-        height: 180px;
-      }
-      .m-bg-mask0 {
-        bottom: 0;
-        left: 0;
-        width: 30%;
-        background-image: linear-gradient(120deg, #6ab3fd 0%, #8ba3fd 102%);
-      }
-      .m-bg-mask1 {
-        bottom: 180px;
-        right: 0;
-        width: 36%;
-        background-image: linear-gradient(120deg, #28c5f5 0%, #6682fe 100%);
-      }
-      .m-bg-mask2 {
-        bottom: 540px;
-        left: 0;
-        width: 20%;
-        height: 240px;
-        background-image: linear-gradient(120deg, #8121ff 0%, #5e5ef7 100%);
-      }
-      .m-bg-mask3 {
-        bottom: 540px;
-        left: 20%;
-        width: 70%;
-        height: 240px;
-        background-image: linear-gradient(-225deg, #5f2bff 0%, #6088fe 48%, #22ccf6 100%);
-      }
-    }
   .avatar-uploader-trigger {
     display: table-cell;
     vertical-align: middle;