首页样式

public/css/gitlink.min.css

@@ -2209,6 +2209,10 @@ a.decoration {
   box-sizing: border-box
 }
 
+.line-normal{
+  line-height: normal;
+}
+
 .lineh-12 {
   line-height: 12px !important
 }

src/components/button/index.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import arrowIcon from '../../images/icon_arrow.png'
+import './index.scss';
+
+export const slidingArrowButton = ({href="/", name="探索更多内容", classname="font-16 font-bd", imageSrc}) =>{
+  return <Link to={href} className={`slidingArrowButton ${classname}`}>
+    {name}
+    <span className="arrowIconBox"><img src={imageSrc || arrowIcon} className="arrowIcon"/></span>
+  </Link>
+}

src/components/button/index.scss

@@ -0,0 +1,27 @@
+.slidingArrowButton{
+  position: relative;
+  .arrowIconBox{
+    display: inline-block;
+    overflow: hidden;
+    width: 25px;
+    height: 24px;
+    position: relative;
+    top: 5px;
+  }
+  .arrowIcon{
+    width: 36px;
+    position: absolute;
+    left: -12px;
+    top: 7px;
+    transition: top 0.2s ease-out, left 0.2s ease-out;
+  }
+  &.color-white:hover{
+    color: black !important;
+  }
+  &:hover{
+    .arrowIcon{
+      left: 7px;
+      top: -14px;
+    }
+  }
+}

src/forge/Main/projecthome/v2/animation.scss

@@ -20,10 +20,14 @@
   .title_v2{
     animation: fadeInUp 0.8s ease-out forwards;
   }
-  .news_v2, .activities-container, .open-source-collaboration-container-content, .software-factory-content, .ecosystem-alliance-content, .forum-exchange-content, .governance-grid, .repository-v2-content{
+  .news_v2, .open-source-collaboration-container-content, .software-factory-content, .ecosystem-alliance-content, .forum-exchange-content, .governance-grid, .repository-v2-content{
     animation: fadeInUp 0.8s ease-out forwards;
     animation-delay: 0.3s;
   }
+  .activities-container{
+    animation: fadeInUp 0.8s ease-out forwards;
+    animation-delay: 0.6s;
+  }
   &.forum-exchange{
     animation: resourceShow 0.8s ease-in-out forwards;
   }

src/forge/Main/projecthome/v2/components/communityDynamic.jsx

@@ -3,9 +3,9 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { getSubDocList, getNewsDetail } from '../../../../Information/api';
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import moment from 'moment';
-import moreContentButton from './moreContentButton';
+import { slidingArrowButton } from '../../../../../components/button';
 
-const CommunityDynamic = () => {
+const CommunityDynamic = ({isVisible}) => {
   const [list1, setList1] = useState([]);
   const [list2, setList2] = useState([]);
   const [firstActivity, setFirstActivity] = useState(undefined);
@@ -54,10 +54,10 @@ const CommunityDynamic = () => {
         <div className="highlight-news">
           <img src={require('../image/icon1.png')} alt='' width={30} className='mb10 mr10' />
           <span className='font-24 font-bd'>{firstByList1.name}</span>
-          <p className="opacity8 font-16 task-hide-2">
+          <p className="opacity8 font-16 task-hide-2 line-normal mt5">
             {firstByList1.summary}
           </p>
-          <Link className="blackBut mt12" to={`/news/${firstByList1.id}`}>
+          <Link className="blackBut mt20" to={`/news/${firstByList1.id}`}>
             <span>了解更多</span>
             <span>了解更多</span>
           </Link>
@@ -97,11 +97,11 @@ const CommunityDynamic = () => {
                 ))}
               </ul>
             </div>
-            <Carousel infinite={0} autoplay className='activity-section-Carousel' afterChange={(current)=>{setActiveId(current)}}>
+            {isVisible && list2_home && !!list2_home.length && <Carousel autoplay className='activity-section-Carousel' beforeChange={(_, nextId)=>{setActiveId(nextId)}}>
               {list2_home.map((item, index)=>{
                 return <img src={item.headImg} alt=''key={index}/>
               })}
-            </Carousel>
+            </Carousel>}
           </div>
         </div>
 
@@ -124,7 +124,7 @@ const CommunityDynamic = () => {
       </div>
 
       <div className='center pt30'>
-        {moreContentButton({ href: '/news' })}
+        {slidingArrowButton({ href: '/news' })}
       </div>
     </div>
   );

src/forge/Main/projecthome/v2/components/forum.jsx

@@ -1,6 +1,7 @@
 import { Divider, Icon } from 'antd';
 import React, { Fragment } from 'react';
-import moreContentButton from './moreContentButton';
+import { slidingArrowButton } from '../../../../../components/button';
+import icon_arrow1 from '../../../../../images/icon_arrow_white.png';
 
 const ForumExchange = () => {
   const forums = [
@@ -85,7 +86,7 @@ const ForumExchange = () => {
           ))}
         </div>
         <div className='center mt40 mt-8'>
-          {moreContentButton({href:"/forums", classname:"font-16 but-to-right font-bd color-white"})}
+          {slidingArrowButton({href:"/forums", classname:"font-16 font-bd color-white", imageSrc: icon_arrow1})}
         </div>
       </div>
     </div>

src/forge/Main/projecthome/v2/components/moreContentButton.jsx

@@ -1,9 +0,0 @@
-import { Icon } from "antd";
-import React from "react";
-import { Link } from "react-router-dom";
-
-function moreContentButton({href="/", name="探索更多内容", classname="font-16 but-to-right font-bd"}){
-  return <Link to={href} className={classname}>{name}<Icon type="right" className="font-15 icon-to-right"/></Link>
-}
-
-export default moreContentButton

src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import icon1 from '../image/icon25.png';
 import icon2 from '../image/icon22.png';
 import icon3 from '../image/icon26.png';
-import moreContentButton from './moreContentButton';
+import { slidingArrowButton } from '../../../../../components/button';
 
 const SupplyChainGovernance = () => {
   const governanceItems = [
@@ -81,8 +81,8 @@ const SupplyChainGovernance = () => {
       </div>
 
       <div className='center mt40 mt-8'>
-          {moreContentButton({href:"/governance", classname:"font-16 but-to-right font-bd"})}
-        </div>
+        {slidingArrowButton({href:"/governance"})}
+      </div>
     </div>
   );
 };

src/forge/Main/projecthome/v2/index.jsx

@@ -54,7 +54,7 @@ function Index(props) {
   return (
     <div className="home_v2">
       <Banner isVisible={visibleItems[`home_v2_child1`]} />
-      <CommunityDynamic />
+      <CommunityDynamic isVisible={visibleItems[`home_v2_child2`]}/>
       <OpenSourceCollaboration isVisible={visibleItems[`home_v2_child3`]}/>
       <SoftwareFactory />
       <Project />