dev_forge
parent
8b9de56f93
commit
a2550aab1e
@ -0,0 +1,116 @@
|
||||
import React , { Component } from 'react';
|
||||
|
||||
import { Menu , Input , Dropdown , Icon, Result } from 'antd';
|
||||
import { Link } from 'react-router-dom'
|
||||
import '../css/index.css'
|
||||
import './list.css';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
const Search = Input.Search;
|
||||
const { SubMenu } = Menu;
|
||||
class Index extends Component{
|
||||
|
||||
componentDidMount=()=>{
|
||||
this.getListData();
|
||||
}
|
||||
|
||||
getListData=()=>{
|
||||
const {current_user} = this.props;
|
||||
const url = `/projects.json`;
|
||||
axios.get(url,{
|
||||
user_id:current_user && current_user.user_id
|
||||
}).then((result)=>{
|
||||
if(result){
|
||||
|
||||
}
|
||||
}).catch((error)=>{})
|
||||
}
|
||||
|
||||
render(){
|
||||
const menu=(
|
||||
<Menu>
|
||||
<Menu.Item key="0">
|
||||
<a href="http://www.alipay.com/">1st menu item</a>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="1">
|
||||
<a href="http://www.taobao.com/">2nd menu item</a>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
)
|
||||
return(
|
||||
<div className="main ProjectListIndex">
|
||||
<div className="list-left">
|
||||
<ul className="list-l-Menu">
|
||||
<li className="MenuTitle">项目类型</li>
|
||||
<li>
|
||||
<Link to={``}>
|
||||
<span>开源托管项目</span>
|
||||
<span>85</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={``}>
|
||||
<span>开源镜像项目</span>
|
||||
<span>85</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="list-l-Menu">
|
||||
<li className="MenuTitle">项目类别</li>
|
||||
<Menu
|
||||
mode="inline"
|
||||
>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<span>Navigation One</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Menu.ItemGroup key="g1">
|
||||
<Menu.Item key="1">Option 1</Menu.Item>
|
||||
<Menu.Item key="2">Option 2</Menu.Item>
|
||||
<Menu.Item key="3">Option 3</Menu.Item>
|
||||
<Menu.Item key="4">Option 4</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="list-right">
|
||||
<div className="list-r-operation">
|
||||
<Search
|
||||
placeholder="输入项目名称关键字进行搜索"
|
||||
enterButton="搜索"
|
||||
size="large"
|
||||
onSearch={value => console.log(value)}
|
||||
className="list-r-Search"
|
||||
/>
|
||||
<Dropdown overlay={menu} trigger={['click']} placement='bottomRight'>
|
||||
<a className="ant-dropdown-link">
|
||||
排序 <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div className="project-list">
|
||||
<div className="p-r-Item">
|
||||
<img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></img>
|
||||
<div className="p-r-Infos">
|
||||
<p>C+++++++++++++++++++</p>
|
||||
<span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Index;
|
||||
@ -0,0 +1,93 @@
|
||||
.ProjectListIndex{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
.list-left{
|
||||
width: 26%;
|
||||
padding-right: 20px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.list-right{
|
||||
width:74%;
|
||||
}
|
||||
.list-l-Menu{
|
||||
border:1px solid #f4f4f4;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.list-l-Menu>li{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 1rem;
|
||||
padding:0px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
}
|
||||
.list-l-Menu>li a{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.list-l-Menu li a span:last-child{
|
||||
color: #999;
|
||||
}
|
||||
.list-l-Menu .MenuTitle{
|
||||
background-color: #efefef;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.list-l-Menu > li:not(.MenuTitle):hover{
|
||||
background-color: #5fb8ff;
|
||||
}
|
||||
.list-l-Menu > li:not(.MenuTitle):hover a{
|
||||
color: #fff;
|
||||
}
|
||||
/* 左侧menu */
|
||||
.list-l-Menu .ant-menu-inline{
|
||||
border:none;
|
||||
}
|
||||
.list-l-Menu .ant-menu-inline .ant-menu-item{
|
||||
width:100%!important;
|
||||
}
|
||||
.list-l-Menu .ant-menu-item-group-title{
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
.list-r-operation{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.list-r-Search{
|
||||
flex: 1;
|
||||
width: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.list-r-Search .ant-btn-lg{
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.p-r-Item{
|
||||
display: flex;
|
||||
padding:15px 0px;
|
||||
}
|
||||
.p-r-photo{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.p-r-Infos{
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px){
|
||||
.list-left,.list-right{
|
||||
width: 100%;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue