forgeplus-react/src/forge/Issues/Component/datas.jsx

import React from 'react';
import { Checkbox , Tooltip } from 'antd';
import issue from '../Img/issue.png';
import { Link } from "react-router-dom";

// issue列表显示
function Datas({checkbox}){
  return(
    <div className="listdatas">
      <div>
        <div className="issuedetail">
          {checkbox}
          <div className="ilog">
            <span className="status normal">正常</span>
            <span className="number">#1</span>
          </div>
          <div style={{marginTop:"-2px"}}>
            <div className="idetails">
              <img src={issue} alt="" width="16px" className="mr5" />
              <p>如何参与到项目的开发，提升技术能力？</p>
              <Tooltip title="点击复制链接" placement="bottom"><span style={{color: "#ee955a"}}><i className="iconfont icon-biaoji mr3 font-12"></i>invalid</span></Tooltip>
            </div>
            <div className="infos">
              <img src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
              <span className="mr20">张嘉佳</span>
              <span className="mr25">2022/11/25 15:25 发布</span>
              <span className="mr50">2022/11/29 15:25更新</span>
              <span><i className="iconfont icon-lichengbeiicon1 font-12 mr2"></i>里程碑名称标题</span>
            </div>
          </div>
        </div>
        <div className="issuecondition">
          <div className="principal">
            <img style={{right:`${5*(20-7)}px`,zIndex:1}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${4*(20-7)}px`,zIndex:2}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" /> 
            <img style={{right:`${3*(20-7)}px`,zIndex:3}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${2*(20-7)}px`,zIndex:4}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${20-7}px`,zIndex:5}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <span>...</span>
          </div>
          <div>正在解决</div>
          <div className="commentnum"><i className="iconfont icon-a-xiaoxi1 mr5 font-15"></i>10</div>
        </div>
      </div>
      <div>
        <div className="issuedetail">
          <Checkbox style={{marginRight: "16px"}} value={1}></Checkbox>
          <div className="ilog">
            <span className="status urgent">紧急</span>
            <span className="number">#2</span>
          </div>
          <div style={{marginTop:"-2px"}}>
            <div className="idetails">
              <img src={issue} alt="" width="16px" className="mr5" />
              <p>如何参与到项目的开发，提升技术能力？</p>
              <Tooltip title="点击复制链接" placement="bottom"><span style={{color: "#009a43"}}><i className="iconfont icon-biaoji mr3 font-12"></i>test</span></Tooltip>
            </div>
            <div className="infos">
              <img src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
              <span className="mr20">张嘉佳</span>
              <span className="mr25">2022/11/25 15:25 发布</span>
              <span className="mr50">2022/11/29 15:25更新</span>
              <span><i className="iconfont icon-lichengbeiicon1 font-12 mr2"></i>里程碑名称标题</span>
            </div>
          </div>
        </div>
        <div className="issuecondition">
          <div className="principal">
            <img style={{right:`${4*20}px`,zIndex:1}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${3*20}px`,zIndex:2}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" /> 
            <img style={{right:`${2*20}px`,zIndex:3}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${1*20}px`,zIndex:4}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${0*20}px`,zIndex:5}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
          </div>
          <div>拒绝</div>
          <div className="commentnum"><i className="iconfont icon-a-xiaoxi1 mr5 font-15"></i>10</div>
        </div>
      </div>
      <div>
        <div className="issuedetail">
          <Checkbox style={{marginRight: "16px"}} value={2}></Checkbox>
          <div className="ilog">
            <span className="status hight">高</span>
            <span className="number">#3</span>
          </div>
          <div style={{marginTop:"-2px"}}>
            <div className="idetails">
              <img src={issue} alt="" width="16px" className="mr5" />
              <Link to={``}>如何参与到项目的开发，提升技术能力？</Link>
              <Tooltip title="点击复制链接" placement="bottom"><span style={{color: "#c1a30d"}}><i className="iconfont icon-biaoji mr3 font-12"></i>feature</span></Tooltip>
            </div>
            <div className="infos">
              <img src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
              <span className="mr20">张嘉佳</span>
              <span className="mr25">2022/11/25 15:25 发布</span>
              <span className="mr50">2022/11/29 15:25更新</span>
              <span><i className="iconfont icon-lichengbeiicon1 font-12 mr2"></i>里程碑名称标题</span>
            </div>
          </div>
        </div>
        <div className="issuecondition">
          <div className="principal">
            <img style={{right:`${2*20}px`,zIndex:3}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${1*20}px`,zIndex:4}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${0*20}px`,zIndex:5}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
          </div>
          <div>反馈</div>
          <div className="commentnum"><i className="iconfont icon-a-xiaoxi1 mr5 font-15"></i>10</div>
        </div>
      </div>
      <div>
        <div className="issuedetail">
          <Checkbox style={{marginRight: "16px"}}  value={3}></Checkbox>
          <div className="ilog">
            <span className="status low">低</span>
            <span className="number">#3</span>
          </div>
          <div style={{marginTop:"-2px"}}>
            <div className="idetails">
              <img src={issue} alt="" width="16px" className="mr5" />
              <p>如何参与到项目的开发，提升技术能力？</p>
              <Tooltip title="点击复制链接" placement="bottom"><span style={{color: "#c1a30d"}}><i className="iconfont icon-biaoji mr3 font-12"></i>feature</span></Tooltip>
            </div>
            <div className="infos">
              <img src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
              <span className="mr20">张嘉佳</span>
              <span className="mr25">2022/11/25 15:25 发布</span>
              <span className="mr50">2022/11/29 15:25更新</span>
              <span><i className="iconfont icon-lichengbeiicon1 font-12 mr2"></i>里程碑名称标题</span>
            </div>
          </div>
        </div>
        <div className="issuecondition">
          <div className="principal">
            <img style={{right:`${2*20}px`,zIndex:3}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${1*20}px`,zIndex:4}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
            <img style={{right:`${0*20}px`,zIndex:5}} src={"https://testforgeplus.trustie.net/images/avatars/User/36480?t=1672730523"} alt="" />
          </div>
          <div>反馈</div>
          <div className="commentnum"><i className="iconfont icon-a-xiaoxi1 mr5 font-15"></i>10</div>
        </div>
      </div>
    </div>
  )
}
export default Datas;