mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-15 05:10:47 +08:00
Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev
This commit is contained in:
sean
commit
ce26d7bd59
@ -3,7 +3,7 @@
|
||||
|
||||
.footer-wrapper{
|
||||
border-top: 1px solid #ddd;
|
||||
height: 2rem;
|
||||
height: 2.4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
@include row-width-limit;
|
||||
margin: 0 auto !important;
|
||||
padding-top: .48rem;
|
||||
padding-bottom: .48rem;
|
||||
.icon {
|
||||
font-size: .16rem;
|
||||
margin-right: .08rem;
|
||||
|
||||
@ -51,13 +51,13 @@ class ProjectCard extends Component {
|
||||
// </Popconfirm>
|
||||
render() {
|
||||
const { projectData, isFollowed } = this.props;
|
||||
console.log(projectData);
|
||||
return (
|
||||
<div className="card-container">
|
||||
<Card bordered={false} bodyStyle={{padding: 16}} className="m-card" onClick={() => this.props.history.push('/project/' + projectData._id)}>
|
||||
<div className="m-card-logo">
|
||||
<Icon type="area-chart" className="icon" />
|
||||
<p className="name">{projectData.name || projectData.projectname}</p>
|
||||
</div>
|
||||
<Card bordered={false} className="m-card" onClick={() => this.props.history.push('/project/' + projectData._id)}>
|
||||
<Icon type="area-chart" className="ui-logo" />
|
||||
<h4 className="ui-title">{projectData.name || projectData.projectname}</h4>
|
||||
<p className="ui-desc">{projectData.desc || projectData.desc}</p>
|
||||
</Card>
|
||||
<div className="card-btns">
|
||||
<Tooltip placement="rightTop" title={isFollowed ? '取消关注' : '添加关注'}>
|
||||
|
||||
@ -1,25 +1,35 @@
|
||||
@import '../../styles/mixin.scss';
|
||||
.card-container {
|
||||
position: relative;
|
||||
|
||||
transition: all .2s;
|
||||
.m-card, .card-btns {
|
||||
transform: translateY(0);
|
||||
transition: all .2s;
|
||||
}
|
||||
&:hover {
|
||||
.m-card{
|
||||
background-color: #efefef;
|
||||
.m-card, .card-btns {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.card-btns {
|
||||
display: block;
|
||||
}
|
||||
&:active {
|
||||
.m-card, .card-btns {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
// 按钮组
|
||||
.card-btns {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: .48rem;
|
||||
height: .48rem;
|
||||
background: linear-gradient(225deg, #ccc, #ccc 50%, transparent 0);
|
||||
// 卡片右上角按钮
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
font-size: .2rem;
|
||||
padding: .08rem;
|
||||
font-size: .16rem;
|
||||
padding: .06rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@ -29,12 +39,44 @@
|
||||
.m-card {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin-bottom: .16rem;
|
||||
background-color: #fff;
|
||||
margin-bottom: .36rem;
|
||||
transition: all .4s;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
position: relative;
|
||||
.m-card-logo {
|
||||
.ant-card-body {
|
||||
background-color: $color-bg-gray;
|
||||
border-radius: 4px;
|
||||
padding-top: .9rem;
|
||||
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
.ui-logo {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translate(-50%, -20%);
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
background-color: #2395f1;
|
||||
line-height: 1rem;
|
||||
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
.ui-title {
|
||||
font-size: .19rem;
|
||||
margin-bottom: .08rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui-desc {
|
||||
font-size: .16rem;
|
||||
height: .24rem;
|
||||
line-height: .24rem;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgba(39, 56, 72, 0.43);
|
||||
}
|
||||
.m-card-body {
|
||||
.icon {
|
||||
font-size: .8rem;
|
||||
}
|
||||
@ -43,4 +85,5 @@
|
||||
margin-top: .16rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -69,10 +69,10 @@ class Follows extends Component {
|
||||
path: '/follow'
|
||||
}]}/>
|
||||
<div className="g-row">
|
||||
<Row gutter={16} className="follow-box">
|
||||
<Row gutter={24} className="follow-box card-panel">
|
||||
{data.map((item, index) => {
|
||||
return (
|
||||
<Col span={6} key={index}>
|
||||
<Col span={8} key={index}>
|
||||
<ProjectCard projectData={item} isFollowed={true} callbackResult={this.receiveRes} />
|
||||
</Col>);
|
||||
})}
|
||||
|
||||
@ -103,11 +103,11 @@ class ProjectList extends Component {
|
||||
render() {
|
||||
const projectData = this.state.projectData;
|
||||
return (
|
||||
<div className="m-panel">
|
||||
<Row gutter={16}>
|
||||
<div className="m-panel card-panel">
|
||||
<Row gutter={24}>
|
||||
{projectData.length ? projectData.map((item, index) => {
|
||||
return (
|
||||
<Col span={8} key={index}>
|
||||
<Col span={12} key={index}>
|
||||
<ProjectCard projectData={item} />
|
||||
</Col>);
|
||||
}) : <ErrMsg type="noProject"/>}
|
||||
|
||||
@ -344,6 +344,7 @@ $color-bg-lightblue: #c6e2ff;
|
||||
margin-top: .48rem;
|
||||
}
|
||||
.section-card {
|
||||
padding-bottom: 1rem;
|
||||
.ant-card {
|
||||
font-size: .17rem;
|
||||
border-radius: .04rem;
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
|
||||
.card-login {
|
||||
margin-top: 1.6rem;
|
||||
margin-bottom: 1.6rem;
|
||||
border-radius: .04rem;
|
||||
position: relative;
|
||||
.login-logo {
|
||||
|
||||
@ -48,11 +48,11 @@ em {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
margin-bottom: -2rem;
|
||||
margin-bottom: -2.4rem;
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 2rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,3 +81,7 @@ em {
|
||||
.ant-confirm .ant-modal-body{
|
||||
padding: .24rem !important;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
padding: .36rem .24rem 0;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
$color-white : #fff;
|
||||
$color-bg-gray: #ececec;
|
||||
$color-blue : #108ee9;
|
||||
$color-blue-deeper: #34495E;
|
||||
$color-grey-deep : #929aac;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user