From eeb5d1ecedcf880b10be9d534c8adb8808c2f9d5 Mon Sep 17 00:00:00 2001 From: caishi <1149225589@qq.com> Date: Fri, 20 Mar 2026 11:31:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/2026/banner/index.jsx | 17 ++++++-- src/pages/2026/banner/index.less | 32 +++++++++++--- src/pages/2026/home/index.jsx | 60 ++++++++++++++++---------- src/pages/2026/home/index.less | 54 ++++++++++++++++++----- src/pages/2026/organization/index.jsx | 4 +- src/pages/2026/organization/index.less | 7 +++ 6 files changed, 130 insertions(+), 44 deletions(-) diff --git a/src/pages/2026/banner/index.jsx b/src/pages/2026/banner/index.jsx index 45f5ffb5b..a9d52312b 100644 --- a/src/pages/2026/banner/index.jsx +++ b/src/pages/2026/banner/index.jsx @@ -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(
- { isMain() &&
} + { isMain() &&
}
    {!isMain() && 第八届CCF开源创新大赛} { menu && menu?.length > 0 && menu.map((i,k)=>{ return( - {i.name} + {i.name} ) }) }
- { isMain() &&
} + { isMain() &&
}
{props.children}
diff --git a/src/pages/2026/banner/index.less b/src/pages/2026/banner/index.less index 6a55ef20d..6be371e02 100644 --- a/src/pages/2026/banner/index.less +++ b/src/pages/2026/banner/index.less @@ -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; diff --git a/src/pages/2026/home/index.jsx b/src/pages/2026/home/index.jsx index 108301820..760df342b 100644 --- a/src/pages/2026/home/index.jsx +++ b/src/pages/2026/home/index.jsx @@ -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(){

introduce

赛事介绍亮点剧透

立足数字经济深度发展与国家开源战略布局，面向人工智能基础设施（AI Infra）、泛在操作系统领域的技术创新、成果转化与专业人才供给需求，第八届 CCF 开源创新大赛由中国计算机学会（CCF）主办，CCF开源发展技术委员会承办。 -大赛以赋能开源生态高质量发展为核心导向，通过体系化赛道设置、精准化资源对接、全流程专业化运营，打造集开源成果展示、技术交流碰撞、产学研用协同于一体的权威赛事平台。 +大赛以赋能开源生态高质量发展为核心导向，通过体系化赛道设置、精准化资源对接、全流程专业化运营、打造集开源成果展示、技术交流碰撞、产学研用协同于一体的权威赛事平台。
大赛致力于实现三大核心目标：夯实国产开源技术根基，推动开源生态体系化、可持续发展；选拔兼具扎实开源技术能力与前沿创新思维的复合型人才；打通高校、企业与开源社区的协同壁垒，促进产学研用深度融合，为我国关键核心技术自主创新与开源产业高质量发展提供坚实支撑。
-
    +
    +
    • setFirstHover(0)}> 01 @@ -262,10 +277,11 @@ function Home(){
    • - - { i.name } - - +

      + + { i.name } + +

      {i.summary}

      diff --git a/src/pages/2026/home/index.less b/src/pages/2026/home/index.less index 4b91671fd..24aae3779 100644 --- a/src/pages/2026/home/index.less +++ b/src/pages/2026/home/index.less @@ -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;; } diff --git a/src/pages/2026/organization/index.jsx b/src/pages/2026/organization/index.jsx index 48a25e958..5bdcaaca7 100644 --- a/src/pages/2026/organization/index.jsx +++ b/src/pages/2026/organization/index.jsx @@ -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

      ORGANIZARIONAL STRUCTURE

      -

      组织架构四个文字

      +

      组织架构合作伙伴

      {/* { orz && orz.length > 0 && orz.map((i,k)=>{ diff --git a/src/pages/2026/organization/index.less b/src/pages/2026/organization/index.less index be49e7775..6cbd73f33 100644 --- a/src/pages/2026/organization/index.less +++ b/src/pages/2026/organization/index.less @@ -206,4 +206,11 @@ } } } +} +.informations_detail{ + & > p{ + & > span{ + color: #fff!important; + } + } } \ No newline at end of file