forked from Gitlink/forgeplus-react
74 lines
1.6 KiB
JavaScript
74 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import './Component.scss';
|
|
import styled from 'styled-components';
|
|
|
|
const Img = styled.img`{
|
|
border-radius:50%;
|
|
width:50px;
|
|
height:50px;
|
|
margin-right:14px;
|
|
}`
|
|
const Name = styled.div`{
|
|
color:#5091FF;
|
|
font-size:16px;
|
|
height:22px;
|
|
line-height:22px;
|
|
margin-bottom:7px;
|
|
}`
|
|
const Time = styled.div`{
|
|
color:#888;
|
|
font-size:12px;
|
|
height:16px;
|
|
line-height:16px;
|
|
margin-bottom:9px;
|
|
display:flex;
|
|
align-item:center;
|
|
}`
|
|
const I = styled.i`{
|
|
font-size:13px!important;
|
|
color:#60B25E;
|
|
margin-right:2px;
|
|
}`
|
|
const FocusBtn = styled.a`{
|
|
display:inline-block;
|
|
height:30px;
|
|
line-height:26px;
|
|
padding:0px 12px;
|
|
background-color:#fafafa;
|
|
border:1px solid #eee;
|
|
border-radius:2px;
|
|
color:#888!important;
|
|
}`
|
|
const Ifocused = styled.i`{
|
|
font-size:16px!important;
|
|
color:#FFA802;
|
|
margin-right:4px;
|
|
}`
|
|
const Ifocus = styled.i`{
|
|
font-size:16px!important;
|
|
color:#BBBBBB;
|
|
margin-right:4px;
|
|
}`
|
|
const Div = styled.div`{
|
|
margin-bottom: 18px;
|
|
padding:20px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
border:1px solid #eee;
|
|
}`
|
|
export default (({img,name,time, focusStatus})=>{
|
|
return(
|
|
<Div>
|
|
<Img src={img}/>
|
|
<div className="m-infos">
|
|
<Name>{name}</Name>
|
|
<Time><I className="iconfont icon-shijian"></I>加入时间:{time}</Time>
|
|
{
|
|
focusStatus ?
|
|
<FocusBtn><Ifocused className="iconfont icon-shixing"></Ifocused>已关注</FocusBtn> :
|
|
<FocusBtn><Ifocus className="iconfont icon-kongxing"></Ifocus>关注</FocusBtn>
|
|
}
|
|
</div>
|
|
</Div>
|
|
)
|
|
}) |