组织架构+banner

config/routes/competitions.ts

@@ -18,7 +18,17 @@ export const Competitions = {
         {
             path: '/competitions/2026',
             component: '@/pages/2026/home',
-        }
+        },{
+          path: '/competitions/2026/organization',
+          component: '@/pages/2026/organization',
+      },
+      // {
+      //     path: '/competitions/2026/track/:id',
+      //     component: '@/pages/2026/track',
+      // },{
+      //     path: '/competitions/2026/information',
+      //     component: '@/pages/2026/information',
+      // }
       ]
     },
     {

src/pages/2026/banner/index.jsx

@@ -8,6 +8,9 @@ import BannerImg from '../img/1@2x.webp';
 function Banner(props) {
     const location = useLocation();
     const { mainInfo } = useModel('defaultConfig');
+    const isMain = ()=>{
+        return location.pathname === "/competitions/2026"
+    }
 
     const matchItem = (item) => {
         if(location.pathname.indexOf("/track/")>-1){
@@ -21,21 +24,20 @@ function Banner(props) {
         setDocumentTitle(mainInfo?.name);
     })
     return(
-        <div className='mainroot'>
-            <div className='mainBanner'>
-                <div className="header">
-                    <img src={BannerImg} />
-                    <div className='bannerContent'>
-                        <ul className='banners'>
-                            {
-                                menu && menu?.length > 0 && menu.map((i,k)=>{
-                                    return(
-                                        <Link to={i.link} key={k} className={`${matchItem(i.link) ? `active` : ``}`}>{i.name}</Link>
-                                    )
-                                })
-                            }
-                        </ul>
-                    </div>
+        <div>
+            <div className={isMain()?"header":"fixedHeader"}>
+                { isMain() && <img src={BannerImg} /> }
+                <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>
+                                )
+                            })
+                        }
+                    </ul>
                 </div>
             </div>
             {props.children}

src/pages/2026/banner/index.less

@@ -18,16 +18,13 @@
         a{
             flex: 1;
             position: relative;
-            font-weight: bold;
             font-size: 20px;
             color: #fff;
             text-align: center;
-            &.active{
-            }
             img{
                 margin-right: 18px;
             }
-            &:not(:last-child):before{
+            &::after,&:first-child::before{
                 position: absolute;
                 right: 0px;
                 opacity:37%;
@@ -36,28 +33,57 @@
                 top: 0px;
                 content: "";
             }
+            &:first-child::before{
+                right: unset;
+                left: 0;
+            }
         }
     }
 }
-.mainroot{
-  background: url('../img/back.png') no-repeat;
-  background-size: 100% 100%;
-  .mainBanner{
-      width: 100%;
-      .header {
-          width: 100%;
-          text-align: center;
-          color: #ffffff;
-          position: relative;
-          font-size: 15px;
-          width: 100%;
-          height: calc(100vh - 60px);
-          &>img{
-            width: 100%;
-            height: 100%;
-          }
-      }
-  }
+
+.header {
+    width: 100%;
+    text-align: center;
+    color: #ffffff;
+    position: relative;
+    font-size: 15px;
+    width: 100%;
+    height: calc(100vh - 60px);
+    &>img{
+        width: 100%;
+        height: 100%;
+    }
+}
+.fixedHeader{
+    height:64px;
+    background:#050F54;
+    position:fixed;
+    top:0px;
+    left: 0px;
+    width: 100%;
+    z-index: 1000;
+    .bannerContent{
+        background-image:url(../img/smallbanner.jpg);
+        height: 100%;
+        .banners{
+            span{
+                font-family:Douyin Sans;
+                font-weight:700;
+                color:#ffffff;
+                font-size:26px;
+            }
+            a{
+                font-size:15px;
+                &::after{
+                    height: 16px;
+                    top: 3px;
+                }
+                &::before,&:last-child:after{
+                    display: none;
+                }
+            }
+        }
+    }
 }
 
 @media screen and (max-width:1400px) {

src/pages/2026/home/index.jsx

@@ -1,5 +1,5 @@
 
-import {useState, useEffect} from 'react';
+import {useState, useEffect,useRef} from 'react';
 import {
     Link , useModel 
 }from 'umi';
@@ -30,11 +30,11 @@ function Home(){
     const [ partner, setPartner ] = useState([]);
     const [newsList, setNewsList] = useState([]);
     const [ visits , setVisits ] = useState(0);
-    const [ counts , setCounts ] = useState({});
     const [ firstHover , setFirstHover ] = useState(0);
     const [ show, setShow ] = useState(false)
+    const [ counts , setCounts]= useState(0);
     const { mainInfo } = useModel('defaultConfig');
-
+    const countInterRef = useRef();
     const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
@@ -44,7 +44,7 @@ function Home(){
             }
         });
     }, {
-      threshold: 1 //露出 30% 时触发
+      threshold: 1 //露出 100% 时触发
     });
 
     useEffect(()=>{
@@ -64,7 +64,6 @@ function Home(){
         }).catch(console.error())
     }
 
-
     const getCountForEdu=()=>{
         getCount().then(res=>{
         })
@@ -77,7 +76,58 @@ function Home(){
     }
     const getNewsList = () => {
       gethomePageDocList().then(res => {
-        setNewsList(res.rows)
+        setNewsList(res.rows);
+        if(res && res.rows && res.rows.length>0){
+            // 使用requestAnimationFrame实现更流畅的动画
+            const dynamicsNews = document.querySelector('#dynamicsNews');
+            const newsCards = document.querySelectorAll('#dynamicsNews li');
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                    let currentIndex = 0;
+                    let lastTime = 0;
+                    
+                    // 先移除所有active类
+                    newsCards.forEach((card) => {
+                        card.classList.remove('active');
+                    });
+                    
+                    // 从第一个li开始添加active类
+                    newsCards[currentIndex].classList.add('active');
+                    
+                    // 动画函数
+                    const animate = (timestamp) => {
+                        if (!lastTime) lastTime = timestamp;
+                        const elapsed = timestamp - lastTime;
+                        
+                        if (elapsed >= 2000) { // 每2秒切换一次
+                        // 移除上一个active类
+                        newsCards[currentIndex].classList.remove('active');
+                        
+                        // 计算下一个索引
+                        currentIndex = (currentIndex + 1) % newsCards.length;
+                        
+                        // 添加active类
+                        newsCards[currentIndex].classList.add('active');
+                        
+                        lastTime = timestamp;
+                        }
+                        // 继续动画
+                        requestAnimationFrame(animate);
+                    };
+                        // 开始动画
+                        requestAnimationFrame(animate);
+                        // 停止监听
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, {
+                threshold: 0.3 // 露出30%时触发
+            });
+            if (dynamicsNews) {
+                observer.observe(dynamicsNews);
+            }
+        }
       })
     }
 
@@ -124,14 +174,26 @@ function Home(){
                     <ul className='directions'>
                         <li className='direction-card'>
                             <div className='trackContent'>
-                                <span className='trackNum'><span>01</span><span>direction</span></span>
+                                <span className='trackNum'>
+                                    <span>01</span><span>direction</span>
+                                    <div className="ringarrow">
+                                        <img src={require("../img/upRight.png")} width={16}/>
+                                        <img src={require("../img/downRight.png")} width={16}/>
+                                    </div>
+                                </span>
                                 <p className='tracktitle'><span>AI方向</span></p>
                                 <p className='trackdesc'>聚焦人工智能前沿技术与应用，探索大模型、智能算法在开源场景下的创新实践</p>
                             </div>
                         </li>
                         <li className='direction-card'>
                             <div className='trackContent'>
-                                <span className='trackNum'><span>02</span><span>direction</span></span>
+                                <span className='trackNum'>
+                                    <span>02</span><span>direction</span>
+                                    <div className="ringarrow">
+                                        <img src={require("../img/upRight.png")} width={16}/>
+                                        <img src={require("../img/downRight.png")} width={16}/>
+                                    </div>
+                                </span>
                                 <p className='tracktitle'><span>泛在操作系统方向</span></p>
                                 <p className='trackdesc'>面向万物互联时代，研究跨设备、跨场景的操作系统技术与生态构建</p>
                             </div>
@@ -188,7 +250,7 @@ function Home(){
             </div>
         </div>
         <div className='eventUpdating'>
-            <div className='part'>
+            <div className='part'id={`card1`}>
                 <p className="homeSubtitle"><img src={Left} width={16}/>Event Updates<img src={Right} width={36}/></p>
                 <p className='homeMaintitle title-animate'><span>赛事动态</span><span>不容错过</span></p>
                 {
@@ -201,22 +263,26 @@ function Home(){
                                 <img src={Dynamics} alt="" />
                             </div>
                         </div>
-                        <ul className='dynamicsNews'>
+                        <ul className='dynamicsNews' id="dynamicsNews">
                             { newsList.map((i, k) => {
                                 return k < 3 ?  
-                                <li className='news-card-hover'>
-                                    <p className='uper'><img src={Dynamicsicon} width={26}/>{ i.name }</p>
-                                    <p className='under'>
-                                        <span>{i.publishTime}</span>
-                                        <Link to={`/competitions/2026/information/${ i.id }`} className='applicationBtn arrow-hover'>探索更多动态<img src={Arrow} width={19}/></Link>
-                                    </p>
+                                <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="task-hide newSummary">{i.summary}</p>
+                                    </div>
+                                    <img src={require(`../img/newbanner${k+1}.png`)} className="bannerNew" width={256}/>
                                 </li>
                                 : ''
                             })}
                         </ul>
                     </div>
                 }
-                <a className='applicationBtn hoverBtn shine-button' href="/competitions/2026/information" style={{marginTop:32}}>不容错过<img src={Arrow} width={19}/></a>
+                <a className='forsearch' href="/competitions/2026/information">探索更多动态<i className="iconfont icon-jiantou_xiangyou font12 ml8" /></a>
             </div>
         </div>
         <div className='part'>

src/pages/2026/home/index.less

@@ -4,6 +4,61 @@
     width: 1600px;
     margin:auto;
 }
+.homeMaintitle{
+    font-size: 48px;
+    position: relative;
+    margin: 0px auto;
+    width: fit-content;
+    height: 58px;
+    line-height: 58px;
+    margin-top: -15px;
+    font-family: DouyinSansBold;
+    img{
+        width: 12px;
+        position: absolute;
+        &:first-child{
+            left: -12px;
+        }
+        &:last-child{
+            bottom: 0px;
+        }
+    }
+    span{
+        margin:0px 16px;
+        font-weight:700;
+        color:#091221;
+        font-size:48px;
+        position: relative;
+        &:last-child::after{
+            content: "";
+            left: -21px;
+            top: 24px;
+            position: absolute;
+            width:10px;
+            height:10px;
+            background:#091221;
+            border-radius:2px;
+        }
+    }
+    text-align: center;
+}
+.homeSubtitle{
+    text-align: center;
+    position: relative;
+    font-size: 28px;
+    font-family: alibabaPuhuiM;
+    color: rgba(9, 18, 33, 0.09);
+    text-transform: uppercase;
+    font-weight: 500;
+    margin-bottom: 0px;
+    margin-top: 90px;
+    img{
+        margin-top: -4px;
+        &:first-child{
+            margin-right: 2px;
+        }
+    }
+}
 .page.headpage {
     display: flex;
     flex-direction: column;
@@ -19,61 +74,6 @@
             // object-fit: cover;
         }
     }
-    .homeMaintitle{
-        font-size: 48px;
-        position: relative;
-        margin: 0px auto;
-        width: fit-content;
-        height: 58px;
-        line-height: 58px;
-        margin-top: -15px;
-        font-family: DouyinSansBold;
-        img{
-            width: 12px;
-            position: absolute;
-            &:first-child{
-                left: -12px;
-            }
-            &:last-child{
-                bottom: 0px;
-            }
-        }
-        span{
-            margin:0px 16px;
-            font-weight:700;
-            color:#091221;
-            font-size:48px;
-            position: relative;
-            &:last-child::after{
-                content: "";
-                left: -21px;
-                top: 24px;
-                position: absolute;
-                width:10px;
-                height:10px;
-                background:#091221;
-                border-radius:2px;
-            }
-        }
-        text-align: center;
-    }
-    .homeSubtitle{
-        text-align: center;
-        position: relative;
-        font-size: 28px;
-        font-family: alibabaPuhuiM;
-        color: rgba(9, 18, 33, 0.09);
-        text-transform: uppercase;
-        font-weight: 500;
-        margin-bottom: 0px;
-        margin-top: 90px;
-        img{
-            margin-top: -4px;
-            &:first-child{
-                margin-right: 2px;
-            }
-        }
-    }
     .homeDesc{
         line-height: 40px;
         letter-spacing: 1px;
@@ -339,7 +339,7 @@
         background-image: url(../img/dir.png);
         background-repeat: no-repeat;
         background-size: 100% 100%;
-        padding:42px 0;
+        padding:42px 0 0;
         margin-top: 87px;
         width: 100%;
         text-align: center;
@@ -357,10 +357,24 @@
             display: flex;
             .direction-card{
                 flex:2 1;
-                padding:1px;
                 height: 200px;
                 border-radius:30px;
-                background:linear-gradient(52.29deg,#ffffff 0%,#ffffff 68.54%,rgba(255, 255, 255, 0.45) 97.43%);
+                // background:linear-gradient(52.29deg,#ffffff 0%,#ffffff 68.54%,rgba(255, 255, 255, 0.45) 97.43%);
+                position: relative;
+                z-index: 10;
+                overflow: hidden;
+                padding: 3px;
+                &::before{
+                   z-index: -2;
+                   position: absolute;
+                   width: 100%;
+                   height: 100%;
+                   content: "";
+                   left: 0;
+                   top: 0;
+                   background: radial-gradient(circle at 20% 40%, #3b4379, transparent);
+                   animation: buttonBorderSpin 7s linear infinite forwards;
+                }
                 .trackContent{
                     color: #fff;
                     text-align: left;
@@ -369,13 +383,15 @@
                     height: 100%;
                     border-radius:30px;
                     padding:30px;
+                    position:relative;
                 }
                 .trackNum{
                     font-weight:700;
                     color:#ffffff;
                     font-size:24px;
                     margin-bottom: 20px;
-                    display: block;
+                    display: flex;
+                    position: relative;
                     span:nth-child(1){
                         background-image: linear-gradient(118.79deg,#81adff 6.6%,#fbb2fc 97.46%);
                         -webkit-background-clip: text;
@@ -387,6 +403,34 @@
                         font-family:Douyin Sans;
                         text-transform: uppercase;
                     }
+                    .ringarrow{
+                        position: relative;
+                        width: 32px;
+                        height: 32px;
+                        background-image: url(../img/ring.png);
+                        background-size: 100% 100%;
+                        margin-left: auto;
+                        cursor: pointer;
+                        overflow: hidden;
+                        &:hover{
+                            img:first-child{
+                                opacity: 0;
+                            }
+                            img:last-child{
+                                opacity: 1;
+                            }
+                        }
+                        img{
+                            position: absolute;
+                            left: 8px;
+                            top: 8px;
+                            opacity: 1;
+                            transition: 0.5s;
+                            &:last-child{
+                                opacity: 0;
+                            }
+                        }
+                    }
                 }
                 .tracktitle{
                     font-family:DingTalk JinBuTi;
@@ -406,12 +450,16 @@
                 &:first-child{
                     margin-right: 30px;
                     .trackContent{
-                        background:linear-gradient(100.02deg,#0d2097 3.99%,#354dc6 98.88%);
+                        background-color:#0d2097 ;
+                        background-image: url(../img/dir1.png);
+                        background-size: 100% 100%;
                     }
                 }
                 &:nth-child(2){
                     .trackContent{
                         background-color: #040E29;
+                        background-image: url(../img/dir2.png);
+                        background-size: 100% 100%;
                     }
                 }
             }
@@ -567,16 +615,80 @@
     .dynamics{
         display: flex;
         margin-top:82px; 
+        margin-bottom: 45px;
         justify-content: space-between;
         .dynamicsNews{
             width: 50%;
             padding-left: 40px;
             box-sizing: border-box;
             li{
-                border-radius: 13px;
                 display: flex;
                 padding:30px 0px;
-                border:2px solid rgba(9, 18, 33, 0.06);
+                border-bottom:2px solid rgba(9, 18, 33, 0.06);
+                position: relative;
+                &.active{
+                    &::after{
+                        animation: lightWidth 1.2s linear;
+                    }
+                    .bannerNew{
+                        animation: shake 1s;
+                    }
+                }
+                &::after{
+                    transition: 1s ease-in-out;
+                    transition-delay: 0.1s;
+                    height: 2px;
+                    width: 0;
+                    opacity: 0;
+                    bottom: -1px;
+                    content: "";
+                    position: absolute;
+                    left: 0px;
+                    background:linear-gradient(89.7deg,#447af9 0%,#5f5bf6 103.09%);
+                }
+                .newinfos{
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    text-align: left;
+                    width: 0;
+                    margin-right: 50px;
+                }
+                .task-hide{
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+                .task-hide-2{
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                }
+                .newSummary{
+                    color:#091221;
+                    font-size:16px;
+                    margin-top: 20px;
+                }
+                .newName{
+                    font-weight:700;
+                    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;
+                        }
+                    }
+                }
                 &:first-child{
                     padding-top: 0px;
                 }
@@ -614,61 +726,74 @@
             }
         }
     }
+    .forsearch{
+        font-weight:500;
+        color:#091221;
+        font-size:18px;
+        text-align:right;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        i{
+            transition: 0.3s;
+        }
+        &:hover{
+            color:#0d2097;
+            i{
+                transform: translateX(10px);
+            }
+        }
+    }
     .partner-content {
-        margin-top: 10px;
-        margin-bottom: 50px;
+        margin-top: 80px;
         .partner-type {
-          width:fit-content;
+          background:url(../img/parter1.png) no-repeat 100% 100%;
+          border-radius:26px;
+          margin-bottom: 38px;
+          padding:54px 0px 54px 30px;
+          &:nth-child(2){
+            background:url(../img/parter2.png) no-repeat 100% 100%;
+          }
           .type-title {
-            line-height: 28px;
-            font-weight: bold;
-            font-size: 20px;
-            color: #151313;
-            letter-spacing: 5px;
+            line-height: 35px;
             margin-bottom: 30px;
             text-align: left;
-            span{
-                position: relative;
-                &::before{
-                    position: absolute;
-                    left: 0px;
-                    height: 2px;
-                    width: 32px;
-                    content: "";
-                    bottom:-7px;
-                    background: linear-gradient( 90deg, #5374B4 0%, #853CB8 100%);
-                }
-            }
+            font-family:Alibaba PuHuiTi;
+            font-weight:700;
+            color:#091221;
+            font-size:26px;
           }
           .type-content {
             display: flex;
             flex-wrap: wrap;
+            a{
+                flex:5 1;
+                max-width: 25%;
+            }
             div {
-              margin-right: 42px;
-              padding: 6px;
+              margin-right: 22px;
+              padding: 10px;
+              box-sizing: border-box;
               background-color:#ffffff;
-              border-radius:4px;
-              box-shadow:0px 0px 6px rgba(28, 48, 175, 0.03);
-              height: 83px;
-              width: 163px;
-              line-height: 1;
+              border-radius:16px;
+              width: 290px;
+              height: 100px;
               display: flex;
               align-items: center;
               justify-content: center;
-              margin-bottom: 35px;
-              border:1px solid #fff;
+              margin-bottom: 25px;
               &:hover{
-                border-color: #6233DE;
+                // border-color: #6233DE;
               }
             }
             a{
-              &:nth-child(6n) div{
+              &:nth-child(5n) div{
                 margin-right: 0px;
               }
             }
             img {
-              max-height: 55px;
-              max-width: 130px;
+              max-height: 90%;
+              max-width: 90%;
             }
           }
         }
@@ -783,8 +908,49 @@
         }
     }
 }
+/* 动画效果 */
+@keyframes show {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+}
+@keyframes buttonBorderSpin {
+    to{
+        transform: rotate(360deg);
+    }
+}
+@keyframes shake {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(10px); /* 回到原位 */
+    }
+    100% {
+      transform: translateY(0); /* 回到原位 */
+    }
+}
+@keyframes lightWidth{
+    0% {
+        width: 0px;
+        opacity: 1;
+    }
+    95% {
+        width: 100%;
+        opacity: 1;
+    }
+    100%{
+        opacity: 0;
+    }
+}
 @media screen and (max-width:1600px) {
     .part{
         width: 1400px;
     }
+    .page.headpage .partner-content .partner-type .type-content a{
+        flex:4 1;
+    }
 }

src/pages/2026/information/index.jsx

@@ -3,7 +3,7 @@ import { Spin, Divider , Input } from 'antd';
 import { useState , useEffect } from 'react';
 import { information } from '../info';
 import { getDocList } from '../api'
-import empty from '../img/empty.png';
+// import empty from '../img/empty.png';
 import { useModel , Link } from 'umi';
 import Left from '../img/left.png';
 import Right from '../img/right.png';
@@ -179,7 +179,7 @@ function Information() {
                     </div>
                   </div>
                 }):
-                <img className="empty" src={ empty } alt="" />
+                ""
               }
             </div>
           </div>

src/pages/2026/organization/index.jsx

@@ -1,48 +1,50 @@
 import './index.less'
-import { Spin } from 'antd';
+import { Spin , Collapse } from 'antd';
 import React,{ useState , useEffect } from 'react';
 import MemberItem from '../memberitem'
+import Left from '../img/left.png';
+import Right from '../img/right.png';
+import "../home/index.less";
 import { getOrganization , getPartnerList , getDocList , getDocDetail } from '../api.js';
 import { hidenMemberType } from '../info';
 import { Base64 } from 'js-base64';
 import RenderHtml from '@/components/RenderHtml'
 import orz2 from '../img/orz2.png';
 import Logo from '../img/logo.png';
-import Team from '../img/team.png';
-import Left from '../img/left.png';
-import Right from '../img/right.png';
+const { Panel } = Collapse;
 
 function Organization() {
   const [ isSpin , setIsSpin ] = useState(false);
-  const [ organization, setOrganization ] = useState([])
-  const [ partner, setPartner ] = useState([]);
+  // const [ organization, setOrganization ] = useState([])
+  // const [ partner, setPartner ] = useState([]);
   const [ orz , setOrz ] = useState([]);
+  const [activeKey, setActiveKey] = useState(["1"]);
 
   useEffect(()=>{
-    getList();
-    getPartner();
+    // getList();
+    // getPartner();
     Init();
   },[])
 
-  const getPartner = () => {
-    getPartnerList().then(res => {
-      let rows = res?.rows.length > 0 ? res?.rows.filter(i=>i.typeName.includes("高校")):[];
-      setPartner(rows);
-    }).catch(console.error())
-  }
+  // const getPartner = () => {
+  //   getPartnerList().then(res => {
+  //     let rows = res?.rows.length > 0 ? res?.rows.filter(i=>i.typeName.includes("高校")):[];
+  //     setPartner(rows);
+  //   }).catch(console.error())
+  // }
 
-  const getList = () => {
-    setIsSpin(true);
-    getOrganization().then(res => {
-      let rows = res?.rows;
-      rows = rows.map(i=>{
-        let members= i.zoneMemberList && i.zoneMemberList.length>0 ? i.zoneMemberList.filter(e=>e.memberLevel !== "主席"):i.zoneMemberList;
-        return {...i,unPresident:members.length>0?members.map(e=>{return e.name}):[]}
-      })
-      setOrganization(rows);
-      setIsSpin(false);
-    })
-  }
+  // const getList = () => {
+  //   setIsSpin(true);
+  //   getOrganization().then(res => {
+  //     let rows = res?.rows;
+  //     rows = rows.map(i=>{
+  //       let members= i.zoneMemberList && i.zoneMemberList.length>0 ? i.zoneMemberList.filter(e=>e.memberLevel !== "主席"):i.zoneMemberList;
+  //       return {...i,unPresident:members.length>0?members.map(e=>{return e.name}):[]}
+  //     })
+  //     setOrganization(rows);
+  //     setIsSpin(false);
+  //   })
+  // }
 
   const Init=()=>{
     getDocList(658).then(res => {
@@ -67,50 +69,16 @@ function Organization() {
     })
   }
 
-
   return <div className="organization">
-    <div className='orzLogo'>
-      <img src={Logo} alt="" height={84}/>
-      <div className='orzDesc'>
-        <img src={orz2} alt="" width={138}/>
-        <div className='descCon'>
-        <img src={Team} width={33}/>CCF开源发展委员会是一个致力于推动开源文化、技术、教育和产业发展的专业组织。重点聚焦共同打造开源、开放、中立的产学研协同开源创新服务平台，探索建立CCF开源项目孵化机制，培育原始开源创新项目，依托CCF联接科教资源、产业资源和社会资源等，形成产、教、研联动的开源创新模式，推动CCF开源品牌建设和开源社区运营，为CCF会员乃至全球开源创新实践者提供高水平的开源创新服务，助力我国开源生态建设的发展。
-        </div>
-      </div>
-    </div>
-    <p className='homeMaintitle' style={{margin:"50px auto 0px"}}><img src={Left} /><span>组织架构</span><img src={Right} /></p>
-    <p className="homeSubtitle"><span>ORGANIZARIONAL STRUCTURE</span></p>
+    <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>
     <Spin spinning={isSpin}>
       {/* {
-        organization && organization.length > 0 && organization.map((i, k) => {
-          if (!hidenMemberType.includes(i.typeName)) {
-            return <div className="module" key={ k }>
-              <p className='homeMaintitle'><img src={Left} /><span>{ i.typeName }</span><img src={Right} /></p>
-              <p className="homeSubtitle"><span>{subtitle[k]}</span></p>
-              <p className="module-desc">{ i.typeIntroduction }</p>
-              {
-                i.zoneMemberList && i.zoneMemberList.length > 0 && <div className="module-content">
-                  {
-                    i.zoneMemberList.map(( e, subK ) => {
-                      return e.memberLevel === "主席" && <MemberItem key={ subK } className={`module-item`} data={ e } ></MemberItem>
-                    })
-                  }
-                </div>
-              }
-              {
-                i.unPresident && i.unPresident.length>0 && <p className='membersSub'><img src={Team} width={33} />{i.typeName}委员：{ i.unPresident.join("、")}</p>
-              }
-            </div>
-          }
-        })
-      } */}
-      {
         orz && orz.length > 0 && orz.map((i,k)=>{
           let detail = i.detail;
           return(
-            <>
-              <p className='orzTitle'><img src={Team} width={33} style={{marginRight:13}}/>{detail.name}</p>
               <div className="module" key={ k }>
+                <p className='orzTitle'>{detail.name}</p>
                 {
                   detail.content ?
                   <RenderHtml className="informations_detail imageLayerParent" value={ Base64.decode(detail.content) } url={ location } />
@@ -118,12 +86,30 @@ function Organization() {
                   ""
                 }
               </div>
-            </>
           )
         })
-      }
+      } */}
+      <Collapse className="orzCollapse" bordered={false} activeKey={activeKey} style={{backgroundColor:"transparent",border:"none"}}>
+        {
+          orz && orz.length>0 && orz.map((i,k)=>{
+            let detail = i.detail;
+            return(
+                <Panel showArrow={false} key={k+1}
+                  header={<div onMouseEnter={() => setActiveKey([k+1])}>{detail.name}</div>}
+                >
+                  {
+                    detail.content ?
+                    <RenderHtml className="informations_detail imageLayerParent" value={ Base64.decode(detail.content) } url={ location } />
+                    :
+                    ""
+                  }
+                </Panel>
+            )
+          })
+        }
+      </Collapse>
     </Spin>
-    {
+    {/* {
       partner?.length > 0 ?
       <div style={{textAlign:"center",paddingTop:68,paddingBottom:50}}>
         <p className='homeMaintitle' style={{width:224,margin:"0px auto"}}><img src={Left} /><span>合作高校</span><img src={Right} /></p>
@@ -142,7 +128,7 @@ function Organization() {
         </div>
       </div>
       :""
-    }
+    } */}
   </div>
 }
 

src/pages/2026/organization/index.less

@@ -7,45 +7,50 @@
   min-height: 100vh;
   position: relative;
   padding-bottom: 60px;
+  background-image: url(../img/orzback.png);
+  background-size: 100% 100%;
+  .orzCollapse{
+    margin-top: 60px;
+    .ant-collapse-item{
+      margin-bottom: 30px;
+      background: rgb(255, 255, 255);
+      border-radius: 2px;
+      border: none;
+      &.ant-collapse-item-active{
+        background-image: url(../img/orzitem.png);
+        background-size: 100% 100%;
+        .markdown-body,.ant-collapse-header{
+          color: #fff;
+        }
+        .ant-collapse-content-box{
+          padding:26px 40px;
+          position: relative;
+          &::before{
+            position: absolute;
+            left: 40px;
+            right: 40px;
+            height: 1px;
+            background-color: #fff;
+            content: "";
+            top: 0px;
+            opacity: 0.49;
+          }
+        }
+      }
+    }
+    .ant-collapse-header{
+      font-family:Douyin Sans;
+      font-weight:700;
+      color:#091221;
+      font-size:20px;
+      padding:0px 40px!important;
+      height: 100px;
+      line-height: 100px;
+    }
+  }
   .ant-spin-nested-loading {
     width: 1200px;
   }
-  .homeMaintitle{
-    font-size: 48px;
-    position: relative;
-    margin-bottom: 0px;
-    img{
-        width: 12px;
-        position: absolute;
-        &:first-child{
-            left: -12px;
-        }
-        &:last-child{
-            bottom: 0px;
-        }
-    }
-    span{
-        margin:0px 22px;
-        font-family: YouSheBiaoTiHei;
-    }
-    text-align: center;
-  }
-  .homeSubtitle{
-      margin-top: 12px;
-      text-align: center;
-      span{
-        font-size: 16px;
-        font-family: YouSheBiaoTiHei;
-        background: -webkit-linear-gradient(76deg, rgba(24,163,168,0.77) 0%, #2E89FF 51%, rgba(158,3,127,0.77) 100%);
-        background: linear-gradient(76deg, rgba(24,163,168,0.77) 0%, #2E89FF 51%, rgba(158,3,127,0.77) 100%);
-        -webkit-background-clip: text;
-        background-clip: text;
-        -webkit-text-fill-color: transparent; /* 针对WebKit浏览器 */
-        color: transparent; /* 兼容其他浏览器 */
-        letter-spacing: 2px;
-        font-weight: 400;
-      }
-  }
   .back-img {
     width: 100%;
     img{

src/styles/iconfont/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}