diff --git a/public/css/gitlink.min.css b/public/css/gitlink.min.css index 3bb196d0c..847817c56 100644 --- a/public/css/gitlink.min.css +++ b/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 } diff --git a/src/components/button/index.jsx b/src/components/button/index.jsx new file mode 100644 index 000000000..530fbfb99 --- /dev/null +++ b/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 + {name} + + +} \ No newline at end of file diff --git a/src/components/button/index.scss b/src/components/button/index.scss new file mode 100644 index 000000000..aaf6e8889 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/forge/Main/projecthome/v2/animation.scss b/src/forge/Main/projecthome/v2/animation.scss index eb4b08d8c..dca0f5bdd 100644 --- a/src/forge/Main/projecthome/v2/animation.scss +++ b/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; } diff --git a/src/forge/Main/projecthome/v2/components/communityDynamic.jsx b/src/forge/Main/projecthome/v2/components/communityDynamic.jsx index 32f106830..18423ab0e 100644 --- a/src/forge/Main/projecthome/v2/components/communityDynamic.jsx +++ b/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 = () => {
{firstByList1.name} -

+

{firstByList1.summary}

- + 了解更多 了解更多 @@ -97,11 +97,11 @@ const CommunityDynamic = () => { ))}
- {setActiveId(current)}}> + {isVisible && list2_home && !!list2_home.length && {setActiveId(nextId)}}> {list2_home.map((item, index)=>{ return })} - + } @@ -124,7 +124,7 @@ const CommunityDynamic = () => {
- {moreContentButton({ href: '/news' })} + {slidingArrowButton({ href: '/news' })}
); diff --git a/src/forge/Main/projecthome/v2/components/forum.jsx b/src/forge/Main/projecthome/v2/components/forum.jsx index 61341d9ac..5bd67288d 100644 --- a/src/forge/Main/projecthome/v2/components/forum.jsx +++ b/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 = () => { ))}
- {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})}
diff --git a/src/forge/Main/projecthome/v2/components/moreContentButton.jsx b/src/forge/Main/projecthome/v2/components/moreContentButton.jsx deleted file mode 100644 index c540a57e7..000000000 --- a/src/forge/Main/projecthome/v2/components/moreContentButton.jsx +++ /dev/null @@ -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 {name} -} - -export default moreContentButton \ No newline at end of file diff --git a/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx b/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx index 5feb56dbc..16e87de90 100644 --- a/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx +++ b/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 = () => {
- {moreContentButton({href:"/governance", classname:"font-16 but-to-right font-bd"})} -
+ {slidingArrowButton({href:"/governance"})} + ); }; diff --git a/src/forge/Main/projecthome/v2/index.jsx b/src/forge/Main/projecthome/v2/index.jsx index 89d331ced..fec8612a7 100644 --- a/src/forge/Main/projecthome/v2/index.jsx +++ b/src/forge/Main/projecthome/v2/index.jsx @@ -54,7 +54,7 @@ function Index(props) { return (
- + diff --git a/src/images/icon_arrow.png b/src/images/icon_arrow.png new file mode 100644 index 000000000..5b8b2d2a9 Binary files /dev/null and b/src/images/icon_arrow.png differ diff --git a/src/images/icon_arrow_white.png b/src/images/icon_arrow_white.png new file mode 100644 index 000000000..c4fa9208f Binary files /dev/null and b/src/images/icon_arrow_white.png differ