yapi/client/containers/Home/Home.js

112 lines
3.0 KiB
JavaScript
Raw Normal View History

2017-07-10 11:50:56 +08:00
import './Home.scss'
2017-07-06 17:01:48 +08:00
import React, { Component } from 'react'
2017-07-19 14:08:24 +08:00
import { connect } from 'react-redux'
2017-07-19 17:53:39 +08:00
import { Link } from 'react-router-dom'
2017-07-19 14:08:24 +08:00
import { Row, Col, Button } from 'antd'
2017-07-17 21:11:58 +08:00
import PropTypes from "prop-types"
2017-07-19 22:36:04 +08:00
import Login from '../Login/Login-wrap'
2017-07-17 21:11:58 +08:00
import Intro from '../../components/Intro/Intro'
2017-07-19 14:08:24 +08:00
import Footer from "../../components/Footer/Footer";
2017-07-19 14:08:24 +08:00
const HomeGuest = (props) => (
<div>
<div className="main-one">
<div className="container">
<Row>
<Col span={24}>
<div className="home-des">
<p className="title">YAPI</p>
<div className="detail">一个高效易用功能强大的api管理系统</div>
</div>
</Col>
</Row>
<Row>
<Col span={8} className="main-one-left">
<Login/>
</Col>
<Col span={16} className="main-one-right">
<div className="img-container">
<img src="./image/demo-img.png"/>
</div>
</Col>
</Row>
</div>
</div>
{ props.introList.map(function(intro,i){
return (
<div className="main-part" key={i}>
<div className="container">
<Intro intro={intro}/>
</div>
</div>
)
})}
</div>
);
HomeGuest.propTypes ={
introList: PropTypes.array
}
@connect(
state => ({
login: state.login.isLogin
})
)
2017-07-05 14:10:06 +08:00
2017-07-06 17:01:48 +08:00
class Home extends Component {
constructor(props) {
super(props)
}
2017-07-17 21:11:58 +08:00
static propTypes = {
2017-07-19 14:08:24 +08:00
introList: PropTypes.array,
login : PropTypes.bool
2017-07-17 21:11:58 +08:00
}
2017-07-06 17:01:48 +08:00
render () {
2017-07-19 14:08:24 +08:00
const { login } = this.props;
2017-07-06 17:01:48 +08:00
return (
<div className="home-main">
2017-07-19 14:08:24 +08:00
{login?
(
2017-07-19 17:53:39 +08:00
<div className="user-home">
<div className="user-des">
<p className="title">YAPI</p>
<p className="des">一个高效易用功能强大的api管理系统</p>
<div className="btn">
<Button type="primary" size="large">
<Link to="/ProjectGroups" onClick={this.toStart}>开始</Link>
</Button>
</div>
2017-07-17 21:11:58 +08:00
</div>
2017-07-19 17:53:39 +08:00
</div>
)
2017-07-19 14:08:24 +08:00
: <HomeGuest introList={this.props.introList}/>}
<Footer/>
</div>
2017-07-06 17:01:48 +08:00
)
}
2017-07-05 21:08:51 +08:00
}
2017-07-06 17:01:48 +08:00
2017-07-17 21:11:58 +08:00
Home.defaultProps={
introList:[{
title:"接口管理",
des:"yapi将满足你的所有接口管理需求。不再需要 为每个项目搭建独立的接口管理平台和编写离线的接口文档",
detail:[
{title:"接口管理",des:"强大的接口文档"},
{title:"接口管理",des:"强大的接口文档"},
{title:"接口管理",des:"强大的接口文档"}
],
2017-07-18 18:25:53 +08:00
img:"./image/demo-img.png"
2017-07-17 21:11:58 +08:00
},{
title:"接口管理",
des:"yapi将满足你的所有接口管理需求。不再需要 为每个项目搭建独立的接口管理平台和编写离线的接口文档",
detail:[
{title:"接口管理",des:"强大的接口文档"},
{title:"接口管理",des:"强大的接口文档"}
],
2017-07-18 18:25:53 +08:00
img:"./image/demo-img.png"
2017-07-17 21:11:58 +08:00
}
]
};
2017-07-10 21:29:03 +08:00
export default Home