项目详情：顶部信息排版调整，修改显示bug

src/forge/Main/Detail.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Spin, Tooltip } from 'antd';
 import { Link, Route, Switch } from 'react-router-dom';
-import { Content , FlexAJ , AlignCenter } from '../Component/layout';
+import { Content , FlexAJ , AlignTop } from '../Component/layout';
 import DetailBanner from './sub/DetailBanner';
 import Invite from './sub/Invite';
 import '../css/index.scss'
@@ -393,11 +393,11 @@ class Detail extends Component {
   textFunc = (forked_from_project_id,fork_info)=>{
     let type = fork_info && fork_info.fork_project_user_type;
     return forked_from_project_id && fork_info ?
-      <div className="color-grey-9">
+      <div className="color-grey-9 df">
-        <span>复刻自 </span>
+        <span>复刻自</span>
-        <Link to={`${type ==="Organization" ? "/organize":'/users'}/${fork_info.fork_project_user_login}`} className="show-user-link color-grey-6">{fork_info.fork_project_user_name}</Link>
+        <Link to={`${type ==="Organization" ? "/organize":'/users'}/${fork_info.fork_project_user_login}`} className="show-user-link color-grey-6 ml5">{fork_info.fork_project_user_name}</Link>
         <span> / </span>
-        <Link to={`/projects/${fork_info.fork_project_user_login}/${fork_info.fork_project_identifier}`} className="color-grey-6">{fork_info.fork_form_name}</Link>
+        <Link to={`/projects/${fork_info.fork_project_user_login}/${fork_info.fork_project_identifier}`} className="color-grey-6 task-hide flex1" style={{maxWidth:"400px"}} title={fork_info.fork_form_name}>{fork_info.fork_form_name}</Link>
       </div> : ""
   }
   
@@ -426,29 +426,32 @@ class Detail extends Component {
       <div>
         <div className="detailHeader-wrapper">
           <div className="normal">
-            <FlexAJ style={{paddingTop:"15px"}}>
+            <AlignTop style={{padding:"20px 0px 10px",justifyContent:"space-between"}}>
-              <AlignCenter>
+              <div>
+                <AlignTop>
                   <div className="projectallName">
                     {project && project.author &&
                       <Link to={`${project.author.type ==="Organization" ? "/organize":'/users'}/${project.author.login}`}>{project.author.name}</Link>
                     }
                     <span className="ml5 mr5">/</span>
-                  <Link to={`/projects/${owner}/${projectsId}`} className="projectN">{project && project.name}</Link>
+                    <Link to={`/projects/${owner}/${projectsId}`} className="projectN mt6">{project && project.name}</Link>
                   </div>
-                { projectDetail && projectDetail.private && <span className="privateTag">私有</span>}
+                  { projectDetail && projectDetail.private && <span className="privateTag mt6">私有</span>}
+                </AlignTop>
+                <div className="mt8">
                   {
-                  projectDetail && projectDetail.type && projectDetail.type !== 0 ? 
+                    projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
-                  projectDetail.type === 2 ?
+                    this.textFunc(projectDetail.forked_from_project_id,projectDetail.fork_info)
-                  <Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
-                    <i className="iconfont icon-banbenku font-18 mt6" style={{ color: "#8D90E3" }}/>
-                  </Tooltip>
-                  :
-                  <Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
-                    <i className="iconfont icon-jingxiang font-18 color-green mt6" />
-                  </Tooltip>
                     :""
                   }
-              </AlignCenter>
+                  {
+                    projectDetail && projectDetail.type && projectDetail.type !== 0 ? 
+                    <span className="color-grey-9">镜像自 <span className="color-grey-6">{projectDetail.mirror_url}</span></span>
+                    :""
+                  }
+                </div>
+              </div>
+              <div>
                 {
                   firstSync ? "":
                   <span className="df">
@@ -506,20 +509,12 @@ class Detail extends Component {
                     </span>
                   </span>
                 }
-            </FlexAJ>
-            <FlexAJ>
-              <div>
-                {
-                  projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
-                  this.textFunc(projectDetail.forked_from_project_id,projectDetail.fork_info)
-                  :""
-                }
-              </div>
                 {
                   projectDetail && projectDetail.invite_code &&
-                <Invite code={projectDetail.invite_code} />
+                  <Invite code={projectDetail.invite_code} className={"mt8 textRight"}/>
                 }
-            </FlexAJ>
+              </div>
+            </AlignTop>
             {
               firstSync ? "" :
               <DetailBanner 

src/forge/Main/sub/Invite.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tooltip , message } from 'antd';
 
-function Invite({code}) {
+function Invite({code,className}) {
 
   function jsCopy(id) {
     const copyEle = document.querySelector(id); // 获取要复制的节点
@@ -13,7 +13,7 @@ function Invite({code}) {
     message.success('复制成功');
   }
   return(
-    <div>
+    <div className={className}>
       <span>邀请码: <span id="devitecode">{code}</span></span>
       <Tooltip title={<p className="edu-txt-center">可以通过邀请码邀请成员加入项目<br/>点击复制邀请码。</p>}  placement={"bottom"}>
         <i className="iconfont icon-fuzhi2 font-16 color-blue ml8" onClick={()=>jsCopy("#devitecode")}></i>

src/forge/css/index.scss

@@ -8,18 +8,17 @@ ul,ol,dl{
   color: #333;
 }
 .projectallName{
-  display: flex;
-  align-items: center;
   font-size: 22px;
   font-weight: normal;
+  line-height: 30px;
+  max-width: 850px;
   .projectN{
-    overflow: hidden;
+    word-break: break-all;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    flex: 1;
-    max-width: 500px;
   }
 }
+.textRight{
+  text-align: right;
+}
 .main{
   width: 1200px;
   padding:20px;