forgeplus-react/src/forge/Team/List.jsx

124 lines
3.5 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from 'react';
import { Button } from 'antd';
import Search from '../Component/Search';
import Sort from '../Component/Sort';
import ListCount from '../Component/ListCount';
import Box from './Box';
import './Index.scss';
import styled from 'styled-components';
import { Menu } from 'antd';
const Span = styled.span`{
color:#888;
font-size:12px;
margin-right:10px;
}`
const Align = styled.div`{
display:flex;
aligin:center;
}`
const ListName = styled.div`{
font-size:14px;
color:#333;
margin-bottom:8px;
height:18px;
line-height:18px;
}`;
const ColorListName = styled.div`{
color:#5091FF;
font-size:14px;
margin-bottom:8px;
height:18px;
line-height:18px;
}`
const Img = styled.img`{
border-radius:50%;
width:45px;
height:45px;
margin-right:12px;
}`
export default (()=>{
function onSearch(value){
}
const menu=(
<Menu>
<Menu.Item key="updated_on">更新时间排序</Menu.Item>
<Menu.Item key="created_on">项目数排序</Menu.Item>
</Menu>
)
const menu_new=(
<Menu>
<Menu.Item key="updated_on">新建托管项目</Menu.Item>
<Menu.Item key="created_on">新建镜像项目</Menu.Item>
</Menu>
)
const leftList = (
<div className="team_project">
<p className="t_p_title">
<span className="flex1">
<span className="name">react项目react项目react项目react项目</span>
<i className="iconfont icon-banbenku font-20 color-green" />
<i className="iconfont icon-jingxiang font-18 color-green" />
<i className="iconfont icon-fork font-18 color-orange" />
</span>
<ListCount fork={1} parise={0}/>
</p>
<div className="desc">
用于构建用户界面的 JavaScript
</div>
<div className="infos">
<span className="font-12 color-grey-8">更新于1天前</span>
</div>
</div>
)
return(
<div className="list">
<div className="list-l">
<div className="head">
<div style={{width:"370px"}}>
<Search placeholder="输入仓库名称进行搜索" onSearch={onSearch}/>
</div>
<p>
<Sort menu={menu_new}>
<a className="addBtn mr30">+&nbsp;新建项目</a>
</Sort>
<Sort menu={menu}>
<a className="color-blue">排序<i className="iconfont icon-sanjiaoxing-down ml3 font-14"></i></a>
</Sort>
</p>
</div>
<div className="team">
{leftList}
</div>
</div>
<div className="list-r">
<Box name="组织成员" count={8}>
<div className="teammembers">
<Img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1990625098,3468619056&fm=111&gp=0.jpg" alt="" className="m-img"/>
<div>
<ListName>陈Professer</ListName>
<Align><i className="iconfont icon-shijian color-green mr3 font-13"></i><Span>2020-04-28</Span></Align>
</div>
</div>
</Box>
<Box
name="组织团队"
count={3}
bottom={<Button type={'primary'} to={``}>新建团队</Button>}
>
<div className="teammembers">
<div>
<ColorListName>陈Professer</ColorListName>
<Align>
<Span>2名成员</Span>
<Span>1个仓库</Span>
</Align>
</div>
</div>
</Box>
</div>
</div>
)
})