mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-18 13:04:46 +08:00
fix: 修改user样式
This commit is contained in:
qitmac000249
parent
ce4a2a2729
commit
27fd5e3d01
@ -80,14 +80,15 @@
|
||||
margin-left: 40px;
|
||||
padding: 0px;
|
||||
padding-bottom: 16px;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
// min-width: 300px;
|
||||
// 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;
|
||||
|
||||
@ -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"];
|
||||
|
||||
@ -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>
|
||||
<div className="user-item-mask">
|
||||
<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>
|
||||
</div>*/}
|
||||
{userinfo.uid === this.props.curUid?<h3>个人设置</h3>:<h3>{userinfo.username} 资料设置</h3>}
|
||||
|
||||
<Row className="avatarCon" type="flex" justify="start">
|
||||
<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>
|
||||
<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"
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user