Yeuvoir
/
forgeplus-react
forked from Gitlink/forgeplus-react
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

动画

This commit is contained in:
caishi 2026-03-20 11:31:28 +08:00
parent fdcf735804
commit eeb5d1eced
6 changed files with 130 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/2026/banner/index.jsx
View File

@ -1,6 +1,6 @@
import './index.less';
import { useModel , useLocation , Link } from 'umi';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { setDocumentTitle } from '@/utils/util';
import { menu } from '../info';
import BannerImg from '../img/mainbanner.png';
@ -8,6 +8,15 @@ import BannerImg from '../img/mainbanner.png';
function Banner(props) {
const location = useLocation();
const { mainInfo } = useModel('2026Config');
const [ randomNumber , setRandomNumber] = useState(1);
useEffect(()=>{
const intervalId = setInterval(()=>{
const number = Math.floor(Math.random()*7) + 1;
setRandomNumber(number);
},3000)
return ()=>clearInterval(intervalId);
},[])
const isMain = ()=>{
return location.pathname === "/competitions/2026"
}
@ -26,20 +35,20 @@ function Banner(props) {
return(
<div>
<div className={isMain()?"gameheader":"fixedHeader"}>
{ isMain() && <div className="topShine" /> }
{ isMain() && <div className={`topShine ${randomNumber===1?"activeRun":""}`} /> }
<div className='bannerContent'>
<ul className='banners'>
{!isMain() && <span>第八届CCF开源创新大赛</span>}
{
menu && menu?.length > 0 && menu.map((i,k)=>{
return(
<Link to={i.link} key={k} className={`${matchItem(i.link) ? `active` : ``}`}>{i.name}</Link>
<Link to={i.link} key={k} className={`${matchItem(i.link) ? `active` : ``} ${randomNumber===k+2?"activeRun":""}`}>{i.name}</Link>
)
})
}
</ul>
</div>
{ isMain() && <div className="bottomShine" /> }
{ isMain() && <div className={`bottomShine ${randomNumber===1?"activeRun":""}`} /> }
</div>
{props.children}
</div>

32
src/pages/2026/banner/index.less
View File

@ -19,7 +19,9 @@
position: relative;
font-size: 20px;
color: #fff;
text-align: center;
text-align: center;
height: 100%;
line-height: 98px;
img{
margin-right: 18px;
}
@ -29,7 +31,7 @@
opacity:37%;
height:28px;
border-left:1px solid rgba(255, 255, 255,0.37);
top: 0px;
top: 35px;
content: "";
}
&:first-child::before{
@ -53,6 +55,13 @@
background-size: cover;
background-position: center;
background-repeat: no-repeat;
.banners{
a{
&.activeRun,&:hover{
animation: moveBack 4s infinite;
}
}
}
&>img{
width: 100%;
height: 100%;
@ -64,18 +73,29 @@
background: linear-gradient(to right ,rgba(255,255,255,0.1) 10% ,rgba(255,255,255,1) 50% ,rgba(255,255,255,0.8) 8% ,transparent 100% );
bottom: 98px;
width: 400px;
animation: move 5s infinite;
&.activeRun{
animation: move 4s infinite;
}
}
.bottomShine{
bottom: 1px;
animation-delay: 5s;
}
}
@keyframes moveBack {
0%{
background:linear-gradient(264.22deg,transparent 0%,transparent 97.62%);
}
100%{
background:linear-gradient(264.22deg,rgba(213, 218, 248, 0.25) 0%,rgba(255, 255, 255, 0) 97.62%);
}
}
@keyframes move {
0% {
left: -100%;
}
50%{
width: 100%;
}
100% {
left: 100%;
}
@ -92,6 +112,8 @@
background-image:url(../img/smallbanner.jpg);
height: 100%;
.banners{
padding:0px;
justify-content: flex-start;
span{
font-family:Douyin Sans;
font-weight:700;

60
src/pages/2026/home/index.jsx
View File

@ -28,33 +28,47 @@ function Home(){
const [newsList, setNewsList] = useState([]);
const [ firstHover , setFirstHover ] = useState(0);
const [ show, setShow ] = useState(false)
const [ teamShow, setTeamShow ] = useState(false)
const { mainInfo } = useModel('2026Config');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setShow(true);
} else {
setShow(false);
}
});
}, {
threshold: 1 //露出 100% 时触发
});
useEffect(()=>{
getPartner();
getNewsList();
getCountForEdu();
const element = document.getElementById("joinRightnow"); // 获取你的元素
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setShow(true);
} else {
setShow(false);
}
});
}, {
threshold: 1 //露出 100% 时触发
});
if (element) {
observer.observe(element);
}
},[])
useEffect(()=>{
const element = document.getElementById("teamMove"); // 获取你的元素
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setTeamShow(true);
} else {
setTeamShow(false);
}
});
}, {
threshold: 1 //露出 100% 时触发
});
if (element) {
observer.observe(element);
}
},[])
const getCountForEdu=()=>{
getCount().then(res=>{
})
}
const getPartner = () => {
getPartnerList().then(res => {
@ -124,9 +138,10 @@ function Home(){
<p className="homeSubtitle"><img src={Left} width={16}/>introduce<img src={Right} width={36}/></p>
<p className='homeMaintitle title-animate'><span>赛事介绍</span><span>亮点剧透</span></p>
<div className='homeDesc'>立足数字经济深度发展与国家开源战略布局，面向人工智能基础设施（AI Infra）、泛在操作系统领域的技术创新、成果转化与专业人才供给需求，第八届 CCF 开源创新大赛由中国计算机学会（CCF）主办，CCF开源发展技术委员会承办。
大赛以赋能开源生态高质量发展为核心导向，通过体系化赛道设置、精准化资源对接、全流程专业化运营，打造集开源成果展示、技术交流碰撞、产学研用协同于一体的权威赛事平台。
大赛以赋能开源生态高质量发展为核心导向，通过体系化赛道设置、精准化资源对接、全流程专业化运营、打造集开源成果展示、技术交流碰撞、产学研用协同于一体的权威赛事平台。
<br/>大赛致力于实现三大核心目标：夯实国产开源技术根基，推动开源生态体系化、可持续发展；选拔兼具扎实开源技术能力与前沿创新思维的复合型人才；打通高校、企业与开源社区的协同壁垒，促进产学研用深度融合，为我国关键核心技术自主创新与开源产业高质量发展提供坚实支撑。</div>
<ul className='team highlight-list'>
<div id='teamMove'></div>
<ul className={`team highlight-list ${teamShow?"teamShow":""}`}>
<li className={`highlight-card ${firstHover===0 ? "hovered":""}`} onMouseOver={()=>setFirstHover(0)}>
<span>01</span>
<img src={Number7} height={32} width={32}/>
@ -262,10 +277,11 @@ function Home(){
<li className={`news-card-hover`} >
<div className="newinfos">
<img src={require(`../img/new${k+1}.png`)} alt="" width={30}/>
<Link to={`/competitions/2026/information/${ i.id }`} className='newName'>
<span>{ i.name }</span>
<img src={require(`../img/bluearrow.png`)} width={13} className="ml5"/>
</Link>
<p className='newsNameGra'>
<Link to={`/competitions/2026/information/${ i.id }`} className='newName task-hide'>
<span>{ i.name }</span>
</Link>
</p>
<p className="task-hide newSummary">{i.summary}</p>
</div>
<img src={require(`../img/newbanner${k+1}.png`)} className="bannerNew" width={256}/>

54
src/pages/2026/home/index.less
View File

@ -162,6 +162,13 @@
margin-top: 40px;
width: 100%;
padding-left: 0px;
transform: translateX(100%);
transition:transform 1s;
opacity: 0;
&.teamShow{
opacity: 1;
transform: translateX(0px);
}
li{
height: 343px;
padding:30px 30px 34px 30px;
@ -455,7 +462,7 @@
margin-top:0px;
}
.trackdesc{
opacity: 0.8;
opacity: 0.9;
font-size: 15px;
margin:0px;
font-family:alibabaPuhuiM;
@ -672,22 +679,38 @@
font-size:16px;
margin-top: 20px;
}
.newsNameGra{
position: relative;
margin-top: 13px;
margin-bottom: 0px!important;
&::after{
position: absolute;
right: -16px;
top: 21px;
content: "";
background-image: url(../img/bluearrow.png);
width:12px;
height: 12px;
background-size: 100% 100%;
opacity: 0;
transition: 0.4s;
}
&:hover{
.newName{
color: #0d2097;
}
&::after{
opacity: 1;
}
}
}
.newName{
color:#091221;
font-size:18px;
margin-top: 13px;
cursor: pointer;
text-align: justify;
img{
opacity: 0;
transition: 0.4s;
}
&:hover{
color: #0d2097;
img{
opacity: 1;
}
}
display: block;
}
&:first-child{
padding-top: 0px;
@ -844,6 +867,15 @@
}
}
.carouselBox{
.slick-list{
border-radius: 16px;
}
img{
transition: 0.5s;
}
img:hover{
transform: scale(1.1);
}
.slick-dots{
bottom: -15px!important;;
}

4
src/pages/2026/organization/index.jsx
View File

@ -47,7 +47,7 @@ function Organization() {
// }
const Init=()=>{
getDocList(658).then(res => {
getDocList(1260).then(res => {
if( res?.rows?.length > 0){
let arr = [];
for(let i=0;i<res?.rows.length;i++){
@ -71,7 +71,7 @@ function Organization() {
return <div className="organization">
<p className="homeSubtitle"><img src={Left} width={16}/>ORGANIZARIONAL STRUCTURE<img src={Right} width={36}/></p>
<p className='homeMaintitle title-animate'><span>组织架构</span><span>四个文字</span></p>
<p className='homeMaintitle title-animate'><span>组织架构</span><span>合作伙伴</span></p>
<Spin spinning={isSpin}>
{/* {
orz && orz.length > 0 && orz.map((i,k)=>{

7
src/pages/2026/organization/index.less
View File

@ -206,4 +206,11 @@
}
}
}
}
.informations_detail{
& > p{
& > span{
color: #fff!important;
}
}
}