样式优化

src/forge/Component/User.jsx

@@ -22,15 +22,15 @@ export default ({ url , name , column  , id , login })=>{
   return(
     id?
     <Link to={`/${login}`}>
-      <Img>
+      <span className="User">
         { url && <img src={url} alt=""/> }
         <span>{name}</span>
-      </Img>
+      </span>
     </Link>
     :
-    <Img>
+    <span className="User">
       { url && <img src={url} alt=""/> }
       <span>{name}</span>
-    </Img>
+    </span>
   )
 }

src/forge/Main/CoderDepot.jsx

@@ -410,7 +410,7 @@ function CoderDepot(props){
   const baseOperate = projectDetail && projectDetail.permission && projectDetail.permission !=="Reporter" && projectDetail.type !==2 && pullsFlag && props.platform;
   const fileOperate = type === "dir" && projectDetail && projectDetail.type !==2 && ((projectDetail.permission && projectDetail.permission !=="Reporter") || (current_user && current_user.admin));
   return(
-    <WhiteBack>
+    <div className='WhiteBack'>
       {mirror_status ===0 && <UpdateDescModal desc={desc} website={website} lesson_url={lesson_url} topicsInfo={topics} visible={openModal} onCancel={()=>setOpenModal(false)} onOk={okUpdate}/> }
       <Spin spinning={isSpin}>
         {
@@ -435,11 +435,11 @@ function CoderDepot(props){
         <div style={{minHeight:"500px"}}>
           { 
             projectDetail &&
-            <Box className="Panels">
-              <LongWidth>
+            <div className="Panels Box">
+              <div className="LongWidth">
                 <div className="panelmenu">
-                  <FlexAJ>
-                    <AlignCenter>
+                  <div className="FlexAJ">
+                    <div className="AlignCenter">
                       <div className="mr30">
                         {
                           props && (props.platform && mirror_status ===0) ?
@@ -467,7 +467,7 @@ function CoderDepot(props){
                         />
                         :
                         <React.Fragment>
-                          <AlignCenter className="mr20">
+                          <div className="mr20 AlignCenter">
                             {
                               props.platform ?
                               <Link to={`/${owner}/${projectsId}/branches`} className="iconBtn">
@@ -482,8 +482,8 @@ function CoderDepot(props){
                                 <span className="ml3">{projectDetail && projectDetail.branches_count}</span>
                               </span>
                             }
-                          </AlignCenter>
-                          <AlignCenter className="mr20">
+                          </div>
+                          <div className="mr20 AlignCenter">
                             {
                               props.platform ?
                               <Link to={`/${owner}/${projectsId}/tags`} className="iconBtn">
@@ -497,11 +497,11 @@ function CoderDepot(props){
                                 <span className="ml3">{projectDetail && projectDetail.tags_count}</span>
                               </span>
                             }
-                          </AlignCenter>
+                          </div>
                         </React.Fragment>
                       }
-                    </AlignCenter>
-                    <AlignCenter className="depotBtn">
+                    </div>
+                    <div className="depotBtn AlignCenter">
                       <div className="addOptionBtn">
                           {
                             baseOperate &&
@@ -533,8 +533,8 @@ function CoderDepot(props){
                       <Dropdown overlay={downloadMenu} placement="bottomRight" trigger={['click']}>
                         <Button type={'primary'}>下载 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-white mr-3"></i></Button>
                       </Dropdown>
-                    </AlignCenter>
-                  </FlexAJ>
+                    </div>
+                  </div>
                   {
                     (dirInfo && dirInfo.length>0) || fileInfo ?
                     <div className="listtable">
@@ -602,18 +602,18 @@ function CoderDepot(props){
                   {/* readme文件显示(显示文件详情时不显示readme文件) */}
                   { (readme && readme.replace_content) ? <ReadMe ChangeFile={ChangeFile} readme={readme} operate={props && (props.isManager || props.isDeveloper) && projectDetail.type !==2 } history={props.history} /> :"" }
                 </div>
-              </LongWidth>
+              </div>
               {
                 (!(treeValuePath && treeValuePath.length > 0) && !fileInfo ) &&
-                <ShortWidth>
-                  <Gap style={{paddingLeft:"30px"}}>
+                <div className="ShortWidth">
+                  <div className="Gap"  style={{paddingLeft:"30px"}}>
                     <div className="panelmenu">
-                      <FlexAJ className="font-18 color-ooo mb20" style={{lineHeight:"28px"}}>关于
+                      <div className="font-18 color-ooo mb20 FlexAJ" style={{lineHeight:"28px"}}>关于
                         {
                         projectDetail.permission && (projectDetail.permission==="Admin" || projectDetail.permission==="Owner" || projectDetail.permission==="Manager") && 
                           <i onClick={()=>setOpenModal(true)} className="iconfont icon-a-shezhi color-grey-9 font-15 pointer"></i>
                         }
-                      </FlexAJ>
+                      </div>
                       {desc && <p className="font-14 color-grey-3 mb15 task-hide-2" style={{lineHeight:"24px",WebkitLineClamp:"4",textAlign:"justify",wordBreak:"break-all"}} title={desc}>{desc}</p>}
                       {/* 项目标签 */}
                       {topics && <div className='projectHomeTopics'>
@@ -675,14 +675,14 @@ function CoderDepot(props){
                     {mirror_status ===0 && <Contributors owner={owner} projectsId={projectsId} /> }
                     {/* 语言 */}
                     { mirror_status ===0 && <LanguagePower owner={owner} projectsId={projectsId}/> }
-                  </Gap>
-                </ShortWidth>
+                  </div>
+                </div>
               }
-            </Box>
+            </div>
           }
         </div>
       </Spin>
-    </WhiteBack>
+    </div>
   )
 }
 

src/forge/Main/Detail.js

@@ -619,9 +619,9 @@ class Detail extends Component {
       <div>
         <div className="detailHeader-wrapper">
           <div className="normal">
-            <AlignTop style={{ padding: "18px 0px 10px", justifyContent: "space-between" }}>
+            <div className="AlignTop" style={{ padding: "18px 0px 10px", justifyContent: "space-between" }}>
               <div>
-                <AlignTop>
+                <div className="AlignTop">
                   <div className="projectallName">
                     {project && project.author &&
                       <Link to={`/${project.author.login}`}>{project.author.name}</Link>
@@ -631,7 +631,7 @@ class Detail extends Component {
                   </div>
                   {projectDetail && projectDetail.private && <span className="privateTag mt6">私有</span>}
                   {!platform && <span className="privateTag red mt6">只读</span>}
-                </AlignTop>
+                </div>
                 <div className="mt8">
                   {
                     projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
@@ -699,7 +699,7 @@ class Detail extends Component {
                     </span>
                 }
               </div>
-            </AlignTop>
+            </div>
             {/* <div className="mt6" style={{minHeight:"20px"}}>
               {
                 projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?

src/index.css

@@ -186,4 +186,57 @@ i.color-orange05:hover {
 
 .color-light-green {
   color: #29bd8b !important;
+}
+
+.AlignTop {
+  display:flex;
+  align-items: flex-start
+}
+.WhiteBack {
+  background-color:#fff;
+  border-radius:5px
+}
+.Box {
+  display:flex;
+  align-items:flex-start
+}
+.LongWidth {
+  flex:1;
+  width:0;
+  border-radius:5px;
+  margin-bottom:30px
+}
+.ShortWidth {
+  width:300px;
+  border-radius:5px;
+  margin-bottom:30px
+}
+.Gap {
+  padding-left:20px;
+  box-sizing:border-box;
+}
+.AlignCenter {
+  display:flex;
+  align-items: center
+}
+.FlexAJ {
+  display:flex;
+  align-items: center;
+  justify-content: space-between
+}
+.mt25 {
+  margin-top:25px
+}
+.User {
+  display:flex;
+  font-weight: bold;
+  align-items: center
+}
+.User img {
+  width:30px;
+  height:30px;
+  border-radius:50%
+}
+.User span {
+  margin-left:8px
 }