mirror of
https://github.com/YMFE/yapi.git
synced 2025-03-01 14:05:44 +08:00
feat: footer改版
This commit is contained in:
wenbo.dong
parent
9bbec027ce
commit
4d3591a8ad
@ -13,14 +13,10 @@ class Footer extends Component {
|
||||
render () {
|
||||
return (
|
||||
<div className="footer-wrapper">
|
||||
<Row>
|
||||
{ this.props.footList.map(function(item,i){
|
||||
<Row className="footer-container">
|
||||
{this.props.footList.map(function(item,i){
|
||||
return <FootItem key={ i } linkList={ item.linkList } title={ item.title } iconType={ item.iconType } ></FootItem>
|
||||
}) }
|
||||
<div className="copyRight">
|
||||
<h4>Copyright © 2017</h4>
|
||||
YMFF出品 @ YMFF
|
||||
</div>
|
||||
})}
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
@ -39,9 +35,9 @@ class FootItem extends Component {
|
||||
render () {
|
||||
return (
|
||||
<Col span={6}>
|
||||
<h4><Icon type={ this.props.iconType } style={{ fontSize: 16 }} /> { this.props.title } </h4>
|
||||
<h4 className="title"><Icon type={ this.props.iconType } className="icon" />{this.props.title}</h4>
|
||||
{ this.props.linkList.map(function(item,i){
|
||||
return (<div key={i}> <a href={ item.itemLink }><span>{ item.itemTitle }</span></a></div>);
|
||||
return (<p key={i}><a href={ item.itemLink } className="link">{ item.itemTitle }</a></p>);
|
||||
}) }
|
||||
</Col>
|
||||
);
|
||||
@ -98,7 +94,16 @@ Footer.defaultProps = {
|
||||
itemLink: 'http://ued.qunar.com/ydoc/'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
{
|
||||
title: 'Copyright © 2017',
|
||||
iconType: 'layout',
|
||||
linkList: [
|
||||
{
|
||||
itemTitle: 'YMFE 首页',
|
||||
itemLink: 'http://ymfe.org/home/'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -2,33 +2,49 @@
|
||||
@import '../../styles/mixin.scss';
|
||||
|
||||
.footer-wrapper{
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
border-top: 1px solid #ddd;
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footContent{
|
||||
@include row-width-limit;
|
||||
//width:90%;
|
||||
margin:0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.footer-container{
|
||||
@include row-width-limit;
|
||||
margin:0 auto;
|
||||
padding-top: .48rem;
|
||||
.icon {
|
||||
font-size: .16rem;
|
||||
margin-right: .08rem;
|
||||
}
|
||||
.title {
|
||||
color: #8898aa;
|
||||
font-size: .14rem;
|
||||
margin-bottom: .08rem;
|
||||
}
|
||||
.link {
|
||||
font-size: .15rem;
|
||||
font-weight: 200;
|
||||
color: #8898aa;
|
||||
line-height: .3rem;
|
||||
transition: color .2s;
|
||||
&:hover {
|
||||
color: #2e2e5a;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footItem{
|
||||
padding: 24px 2%;
|
||||
width: 25%;
|
||||
float: left;
|
||||
div{
|
||||
margin: 6px 0;
|
||||
padding: 24px 2%;
|
||||
width: 25%;
|
||||
float: left;
|
||||
div{
|
||||
margin: 6px 0;
|
||||
}
|
||||
a{
|
||||
font-weight: 200;
|
||||
color: #b3bdc1;
|
||||
&:hover{
|
||||
color: white;
|
||||
}
|
||||
a{
|
||||
font-weight: 200;
|
||||
color: #b3bdc1;
|
||||
&:hover{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.copyRight{
|
||||
padding: 24px 2%;
|
||||
@ -36,7 +52,6 @@
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
text-indent: 1em;
|
||||
|
||||
h4{
|
||||
font-size: 14px;
|
||||
margin: 0 auto 12px;
|
||||
|
||||
@ -83,7 +83,7 @@ const HomeGuest = () => (
|
||||
<Col span={8} className="section-item" key="feat-wrapper-2">
|
||||
<Icon type="code-o" className="img" />
|
||||
<h4 className="title">可部署</h4>
|
||||
<span className="desc">用户只需在项目配置线上域名和接口基本路径，通过将线上域名指到我们的YApi平台服务器，就可使用mockServer服务</span>
|
||||
<span className="desc">用户只需配置接口的基本路径，通过将线上域名指到我们的YApi平台服务器，就可使用mockServer服务</span>
|
||||
</Col>
|
||||
<Col span={8} className="section-item" key="feat-wrapper-3">
|
||||
<Icon type="team" className="img" />
|
||||
@ -111,11 +111,11 @@ const HomeGuest = () => (
|
||||
<div className="code">
|
||||
<ol start="1">
|
||||
<li className="alt"><span className="orderNum orderNum-first">1</span><span><span>{  </span></span></li>
|
||||
<li className=""><span className="orderNum">2</span><span>    <span className="string">"errcode|200-500"</span><span>: 200,  </span></span></li>
|
||||
<li className=""><span className="orderNum">2</span><span>    <span className="string">"errcode|200-500"</span><span>: <span className="number">200</span>,  </span></span></li>
|
||||
<li className="alt"><span className="orderNum">3</span><span>    <span className="string">"errmsg|4-8"</span><span>: </span><span className="string">"@string"</span><span>,  </span></span></li>
|
||||
<li className=""><span className="orderNum">4</span><span>    <span className="string">"data"</span><span>: {  </span></span></li>
|
||||
<li className="alt"><span className="orderNum">5</span><span>        <span className="string">"boolean|1"</span><span>: </span><span className="keyword">true</span><span>,  </span></span></li>
|
||||
<li className=""><span className="orderNum">6</span><span>        <span className="string">"array|4"</span><span>: 1,  </span></span></li>
|
||||
<li className=""><span className="orderNum">6</span><span>        <span className="string">"array|4"</span><span>: <span className="number">1</span>,  </span></span></li>
|
||||
<li className="alt"><span className="orderNum">7</span><span>        <span className="string">"combine"</span><span>: </span><span className="string">"@boolean & @array"</span><span>  </span></span></li>
|
||||
<li className=""><span className="orderNum">8</span><span>    }  </span></li>
|
||||
<li className="alt"><span className="orderNum orderNum-last">9</span><span>}  </span></li>
|
||||
@ -125,7 +125,7 @@ const HomeGuest = () => (
|
||||
</Col>
|
||||
<Col span={12} className="section-card mock-after">
|
||||
<Card title="生成的 Mock 数据">
|
||||
<p className="mock-desc">生成的 Mock 数据可以在线使用(配置Hosts后直接访问接口)，也可以下载到本地使用。</p>
|
||||
<p className="mock-desc">生成的 Mock 数据可以在线使用，也可以下载到本地使用。</p>
|
||||
<div className="code">
|
||||
<ol start="1">
|
||||
<li className="alt"><span className="orderNum orderNum-first">1</span><span><span>{  </span></span></li>
|
||||
@ -163,7 +163,7 @@ const HomeGuest = () => (
|
||||
</div>
|
||||
<div className="section-block block-third">
|
||||
<h4>开发者(* N) / 成员(* N)</h4>
|
||||
<p className="item"> - 不允许创建分组或项目</p>
|
||||
<p className="item"> - 不允许创建分组</p>
|
||||
<p className="item"> - 不允许修改分组或项目信息</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@ -370,7 +370,7 @@ $color-bg-lightblue: #c6e2ff;
|
||||
padding: .08rem;
|
||||
}
|
||||
.code {
|
||||
color: $color-text-dark;
|
||||
color: $color-text-light;
|
||||
background-color: $color-blue-grey-lighter;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
@ -380,6 +380,7 @@ $color-bg-lightblue: #c6e2ff;
|
||||
text-align: center;
|
||||
width: .4rem;
|
||||
margin-right: .5em;
|
||||
user-select: none;
|
||||
}
|
||||
.orderNum-first {
|
||||
padding-top: .5em;
|
||||
@ -388,6 +389,15 @@ $color-bg-lightblue: #c6e2ff;
|
||||
border-bottom-left-radius: 4px;
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
.string {
|
||||
color: #ff561b;
|
||||
}
|
||||
.number {
|
||||
color: #57cf27;
|
||||
}
|
||||
.keyword {
|
||||
color: #2359f1;
|
||||
}
|
||||
}
|
||||
.mock-after {
|
||||
.ant-card-head {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user