forgeplus-react/src/forge/Main/IndexItem.js

import React, { Component } from 'react';
import { Tooltip } from 'antd';
import { getImageUrl } from 'educoder';
import { AlignCenter } from '../Component/layout';
import { Link } from 'react-router-dom';
import '../css/index.scss';
import Nodata from '../Nodata';
import './list.scss';
import img_parise from '../Images/parise.png';

class IndexItem extends Component {
  TurnToDetail = (login, url) => {
    this.props.history.push({
      pathname: url,
      state: login
    })
  }
  render() {
    const { projects } = this.props;
    return (
      <div className="project-list minH-670" style={{padding:"0px 20px"}}>
        { projects && projects.length > 0 ? projects.map((item, key) => {
          return (
            <div className="p-r-Item" key={key}>
              {
                item.platform === "educoder" ?
                <a href="javascript:void(0)" style={{cursor:"default"}} className="show-user-link">
                  <img className="p-r-photo" alt="" src={item.author && item.author.image_url} ></img>
                </a>
                :
                <Link to={`/${item.author && item.author.login}`} className="show-user-link">
                  <img className="p-r-photo" alt="" src={getImageUrl(`/${item.author && item.author.image_url}`)} ></img>
                </Link>
              }
              <div className="p-r-Infos">
                <div className="p-r-name">
                  <AlignCenter>
                    <Link to={`/${item.author.login}/${item.identifier}`} target="_blank" title={`${item.author.name}/${item.name}`} className="color-grey-3 font-18 task-hide " style={{maxWidth: 470 }}>
                      {item.author.name}/{item.name}
                    </Link>
                    { !item.is_public && <span className="privateTag">私有</span> }
                    {
                      item.forked_from_project_id ?
                        <Tooltip title="该项目是一个fork仓库" className="ml5">
                          <i className="iconfont icon-fork font-18 color-orange" />
                        </Tooltip>
                        : ""
                    }
                    {
                      item.type && item.type === 2 ?
                      <Tooltip title="该项目是一个同步镜像仓库" className="ml5">
                        <i className="iconfont icon-banbenku font-18 color-green" />
                      </Tooltip>:""
                    }
                  </AlignCenter>
                  <span className="p-r-tags">
                    {
                      item.praises_count && item.praises_count>0 ?
                      <span className="pariseTag">
                        <img src={img_parise} alt="" className="pariseImg" />赞 {item.praises_count}
                      </span>:""
                    }
                    {
                      item.forked_count && item.forked_count>0 ?
                      <span>
                        <i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork {item.forked_count}
                      </span>:""
                    }
                  </span>
                </div>
                <p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>{item.description}</p>

                <div className="p-r-about">
                  <span className="p-r-detail">
                    {item.last_update_time ? <span><label>更新于</label>{item.time_ago}</span> : ""}
                    {item.language && item.language.id ? <span className="color-grey-3">{item.language.name}</span> : ""}
                  </span>
                </div>
              </div>
            </div>
          )
        }) : <Nodata _html="暂无数据~"></Nodata>}
      </div>
    )
  }
}
export default IndexItem;