cont.

src/pages/2026/center/index.jsx

@@ -1,41 +1,110 @@
 import SpeTitle from '../components/Title'
 import styles from './index.less'
-import React, { useState, useRef } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import icon1 from '../img/center/icon1.webp'
-import directions from './info'
+import icon2 from '../img/center/icon2.webp'
+import icon3 from '../img/center/icon3.webp'
+import icon4 from '../img/center/icon4.webp'
+import { directions } from './info'
 
 function Center(props) {
 
-  
+  const [activeTracks, setActiveTracks] = useState({});
+  const [searchKeyword, setSearchKeyword] = useState('');
+
+  // 默认选中第一个赛道
+  useEffect(() => {
+    if (directions && directions.length > 0) {
+      directions.forEach(direction => {
+        if (direction.tasks) {
+          const firstTrack = Object.keys(direction.tasks)[0];
+          if (firstTrack) {
+            setActiveTracks(prev => ({
+              ...prev,
+              [direction.id]: firstTrack
+            }));
+          }
+        }
+      });
+    }
+  }, []);
+
+  const handleTrackClick = (directionId, trackName) => {
+    setActiveTracks(prev => ({
+      ...prev,
+      [directionId]: trackName
+    }));
+  };
+
+  const getActiveTrack = (directionId) => {
+    return activeTracks[directionId] || null;
+  };
+
+  const isTrackActive = (directionId, trackName) => {
+    return getActiveTrack(directionId) === trackName;
+  };
+
+  const icons = [icon1, icon2, icon3, icon4];
 
   return <div className={styles.center}>
     <SpeTitle className={styles.title} first={'两个方向'} last={'四个赛道'} english={'four tracks'}></SpeTitle>
     <div className={ styles.search_wrap }>
       <div className={styles.search}>
-        <input type="text" placeholder="请输入赛题名称或关键词进行搜索" />
+        <input type="text" placeholder="请输入赛题名称或关键词进行搜索" value={searchKeyword} onChange={(e) => setSearchKeyword(e.target.value)} />
         <div className={styles.search_icon}>
           <img src={icon1} alt="" />
         </div>
       </div>
     </div>
     {
-      directions.map(e => {
-        return <div className={ styles.directions }>
+      (directions || []).map((e, index) => {
+        const activeTrack = getActiveTrack(e.id);
+        return <div key={e.id} className={ styles.directions }>
           <div className={ styles.directions_left }>
-            <div className={ styles.directions_left_sort }></div>
-            <h3 className={ styles.directions_left_name }></h3>
-            <p className={ styles.directions_left_desc }></p>
+            <div className={ styles.directions_left_sort }><span>0{index + 1}</span> <span>DIRECTION</span></div>
+            <h3 className={ styles.directions_left_name }>{e.name}</h3>
+            <p className={ styles.directions_left_desc }>{e.desc}</p>
             <div className={ styles.directions_left_tracks }>
               {
-                e.tasks.map(track => {
-                  return <div>
-                    
+                e.tasks && Object.entries(e.tasks).map(([trackName, trackItems], index) => {
+                  const isActive = isTrackActive(e.id, trackName);
+                  return <div 
+                    key={trackName} 
+                    className={`${styles.track_item} ${isActive ? styles.track_item_active : ''}`}
+                    onClick={() => handleTrackClick(e.id, trackName)}
+                  >
+                    <img className={ styles.track_icon } src={icons[index % 4]}></img>
+                    <div className={ styles.track_name }>{trackName}</div>
+                    <div className={ styles.track_arrow }>{isActive ? '▶' : ''}</div>
                   </div>
                 })
               }
             </div>
           </div>
-          <div className={ styles.directions_right }></div>
+          <div className={ styles.directions_right }>
+            {e.tasks && activeTrack && e.tasks[activeTrack] && (
+              <div className={ styles.track_tasks }>
+                <div className={ styles.tasks_grid }>
+                  {e.tasks[activeTrack]
+                    .filter(item => searchKeyword === '' || item.name.includes(searchKeyword))
+                    .map((item, index) => (
+                    <div key={index} className={ styles.task_card }>
+                      <div className={ styles.task_name }>{item.name}</div>
+                      <div className={ styles.task_info }>
+                        <span className={`${styles.task_level} ${styles[`level_${item.level}`]}`}>
+                          {item.level === 1 && '初级'}
+                          {item.level === 2 && '中级'}
+                          {item.level === 3 && '高级'}
+                        </span>
+                        <div></div>
+                        <span className={ styles.task_owner }>{item.owner}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       })
     }

src/pages/2026/center/index.less

@@ -5,9 +5,11 @@
     display: flex;
     align-items: center;
     flex-direction: column;
+
     .title {
         padding-top: 40px;
     }
+
     .search_wrap {
         margin-top: 22px;
         width: 680px;
@@ -16,35 +18,40 @@
         background-repeat: no-repeat;
         background-size: 100% 100%;
     }
+
     .search {
         margin-top: 20px;
         margin-left: auto;
         margin-right: auto;
-        width:660px;
-        height:55px;
-        background:#ffffff;
-        border:1px solid;
-        border-color:rgba(22, 76, 228, 0.05);
-        border-radius:28px;
+        width: 660px;
+        height: 55px;
+        background: #ffffff;
+        border: 1px solid;
+        border-color: rgba(22, 76, 228, 0.05);
+        border-radius: 28px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         z-index: 1;
+
         input {
             border: none;
             margin-left: 30px;
             width: 100%;
             height: 40px;
             line-height: 40px;
-            font-family:Alibaba PuHuiTi;
-            color:#2b3369;
-            font-size:15px;
+            font-family: Alibaba PuHuiTi;
+            color: #2b3369;
+            font-size: 15px;
+
             &:focus-visible {
                 border: none;
                 outline: none;
             }
+
             margin-right: 30px;
         }
+
         .search_icon {
             margin-right: 9px;
             width: 39px;
@@ -53,14 +60,235 @@
             flex-shrink: 0;
             color: #ffffff;
             text-align: center;
-            line-height:39px;
+            line-height: 39px;
             margin-right: 8px;
             cursor: pointer;
             border-radius: 50%;
+
             img {
                 width: 18px;
                 height: 18px;
             }
         }
     }
+
+    .directions {
+        margin-top: 40px;
+        width: 1600px;
+        border-radius: 16px;
+        padding: 34px;
+        margin-bottom: 40px;
+        display: flex;
+        justify-content: space-between;
+
+        &:nth-child(3) {
+            background: url('../img/center/direc-bg1.webp'), linear-gradient(104.76deg,#0d2097 4.33%,#354dc6 97.63%);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+        &:nth-child(4) {
+            background: url('../img/center/direc-bg2.webp'), linear-gradient(104.76deg,#0d2097 4.33%,#354dc6 97.63%);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            .directions_left_sort{
+                span:nth-child(1) {
+                    background: linear-gradient(118.78deg,#81adff 6.6%,#fbb2fc 97.46%);
+                }
+            }
+        }
+
+        .directions_left {
+            width: 300px;
+            margin-right: 40px;
+
+            .directions_left_sort {
+                line-height:29px;
+                font-family:Douyin Sans;
+                color:#ffffff;
+                font-size:24px;
+                span:nth-child(1) {
+                    background: linear-gradient(124.69deg,#81adff 7.84%,#fbb2fc 96.54%);
+                    -webkit-background-clip: text;
+                    background-clip: text;
+                    color: transparent;
+                    margin-right: 12px;
+                }
+                span:nth-child(2) {
+                    opacity:10%;
+                }
+            }
+
+            .directions_left_name {
+                margin-top: 19px;
+                line-height: 36px;
+                font-family: DingTalk JinBuTi;
+                color: #ffffff;
+                font-size: 30px;
+            }
+
+            .directions_left_desc {
+                opacity: 80%;
+                width: 324px;
+                line-height: 26px;
+                font-family: Alibaba PuHuiTi;
+                color: #ffffff;
+                font-size: 15px;
+            }
+
+            .directions_left_tracks {
+                .track_item {
+                    display: flex;
+                    align-items: center;
+                    padding: 12px 16px;
+                    margin-bottom: 12px;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+
+                    &:hover {
+                        background:linear-gradient(90.17deg,rgba(255, 255, 255, 0.15) 1.6%,rgba(255, 255, 255, 0) 99.97%);
+                    }
+
+                    .track_icon {
+                        width: 19px;
+                        height: 19px;
+                        margin-right: 14px;
+                    }
+
+                    .track_name {
+                        flex: 1;
+                        height: 25px;
+                        line-height: normal;
+                        font-family: Alibaba PuHuiTi;
+                        color: #ffffff;
+                        font-size: 18px;
+                    }
+
+                    .track_arrow {
+                        color: #ffffff;
+                        font-size: 12px;
+                        margin-left: 10px;
+                    }
+                }
+
+                .track_item_active {
+                    background:linear-gradient(90.17deg,rgba(255, 255, 255, 0.15) 1.6%,rgba(255, 255, 255, 0) 99.97%);
+
+                    .track_name {
+                        background: linear-gradient(268.74deg,#ffc3a8 1.29%,#dadfff 51.78%,#7cabff 101.78%);
+                        -webkit-background-clip: text;
+                        background-clip: text;
+                        color: transparent;
+                    }
+                }
+            }
+        }
+
+        .directions_right {
+            background: #ffffff;
+            border-radius: 16px;
+            padding: 35px 40px;
+            width: 1171px;
+
+            .track_tasks {
+                .tasks_grid {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+
+                    .task_card {
+                        width:530px;
+                        height:99px;
+                        background:#edf1fd;
+                        border:2px solid;
+                        border-color:#ffffff;
+                        border-radius:8px;
+                        padding: 20px;
+                        // transition: all 0.3s ease;
+                        margin-bottom: 20px;
+                        box-sizing: border-box;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        &:hover {
+                            background: url('../img/center/item-bg.webp');
+                            background-position: center;
+                            background-repeat: no-repeat;
+                            background-size: 100% 100%;
+                            color: #ffffff;
+                            transform: translateY(-2px);
+                            border: 2px solid transparent;
+
+                            .task_name, .task_owner, .task_level {
+                                color: #ffffff !important;
+                            }
+                            .task_info {
+                                div {
+                                    border-color: rgba(255, 255, 255, 0.18);
+                                }
+                            }
+                        }
+                            
+
+                        .task_name {
+                            width: 438px;
+                            height: 25px;
+                            line-height: normal;
+                            font-family: Alibaba PuHuiTi;
+                            font-weight: 500;
+                            color: #091221;
+                            font-size: 18px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        }
+
+                        .task_info {
+                            display: flex;
+                            align-items: center;
+
+                            .task_level {
+                                width: 44px;
+                                height: 22px;
+                                border: 1px solid;
+                                border-radius: 4px;
+                                font-family: Alibaba PuHuiTi;
+                                font-size: 14px;
+                                text-align: center;
+                                background: rgba(255, 255, 255, 0.67);
+                            }
+
+                            div {
+                                margin: 0 16px;
+                                width: 0px;
+                                height: 11px;
+                                border-color:rgba(13, 32, 151, 0.18);
+                                border: 1px solid;
+                            }
+
+                            .level_1 {
+                                color: #3e9816;
+                                border-color: #3e9816;
+                            }
+
+                            .level_2 {
+                                color: #e0a507;
+                                border-color: #e0a507;
+                            }
+
+                            .level_3 {
+                                color: #be1e18;
+                                border-color: #be1e18;
+                            }
+
+                            .task_owner {
+                                color: #666;
+                                font-size: 12px;
+                                font-weight: 400;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }

src/pages/2026/center/info.js

@@ -3,107 +3,93 @@ export const directions = [{
     name: 'AI方向',
     desc: '聚焦人工智能前沿技术与应用，探索大模型、智能算法在开源场景下的创新实践',
     tasks: {
-      '开源案例教学赛道': [{ name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
+      '开源案例教学赛道': [
+        { name: 'InVision虚拟化工平台上支持Asterinas（显锐）操作系统的容器运行时', level: 3, owner: '西北工业大学' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: 'OpenTiny NEXT前端智能应用贡戴赛', level: 2, owner: '西北工业大学' },
+        { name: 'ylong_http支持https代理', level: 2, owner: '小米' },
+        { name: 'ModelEngine开源项目贡戴赛', level: 1, owner: '华为' },
+        { name: 'openUBMC开源项目贡戴赛', level: 3, owner: '西北工业大学' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' }
       ],
-      '开源任务挑战赛道': [{ name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
+      '开源任务挑战赛道': [
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' }
       ],
-      '开源代码评注赛道': [{ name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-      ],
-      '开源代码评注赛道': [{ name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
+      '开源代码评注赛道': [
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' }
       ],
+      '开源代码评论赛道': [
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' }
+      ]
     }
-  },{
-    id: 1,
-    name: 'AI方向',
-    desc: '聚焦人工智能前沿技术与应用，探索大模型、智能算法在开源场景下的创新实践',
+  },
+  {
+    id: 2,
+    name: '泛在操作系统方向',
+    desc: '面向物联网时代，研究跨设备、跨场景的操作系统技术与生态构建',
     tasks: {
-      '开源案例教学赛道': [{ name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
+      '开源案例教学赛道': [
+        { name: '基于openvela的音视频识别系统', level: 1, owner: '华为' },
+        { name: '基于openvela的音视频识别系统', level: 1, owner: '华为' },
+        { name: 'OpenTiny NEXT前端智能应用贡戴赛', level: 2, owner: '西北工业大学' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: 'ModelEngine开源项目贡戴赛', level: 1, owner: '华为' },
+        { name: 'ModelEngine开源项目贡戴赛', level: 3, owner: '西北工业大学' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' }
       ],
-      '开源任务挑战赛道': [{ name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
+      '开源任务挑战赛道': [
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于openvela的音视频识别系统', level: 2, owner: '华为' },
+        { name: 'ModelEngine开源项目贡戴赛', level: 3, owner: '西北工业大学' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' }
       ],
-      '开源代码评注赛道': [{ name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-      ],
-      '开源代码评注赛道': [{ name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
-        { name: '基于AI/Agent的NPU算子自动生成',level: 2,owner: '小米'},
+      '开源代码评注赛道': [
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' }
       ],
+      '开源代码评论赛道': [
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' },
+        { name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米' }
+      ]
     }
-  }]
+  }
+]

src/pages/2026/schedule/index.jsx

@@ -25,14 +25,20 @@ function Schedule(props) {
   const scheduleList = [
     { id: 1, periodId: 1, date: '3月20日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
     { id: 2, periodId: 1, date: '3月28日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
-    { id: 2, periodId: 1, date: '3月28日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
-    { id: 2, periodId: 1, date: '3月28日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
-    { id: 2, periodId: 1, date: '3月28日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
-    { id: 3, periodId: 2, date: '5月20日', content: '我是此日期的具体赛事安排占一行我是此日期的', status: '报名招募期' },
-    { id: 3, periodId: 2, date: '5月20日', content: '我是此日期的具体赛事安排占一行我是此日期的', status: '报名招募期' },
-    { id: 3, periodId: 2, date: '5月20日', content: '我是此日期的具体赛事安排占一行我是此日期的', status: '报名招募期' },
-    { id: 4, periodId: 3, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' },
-    { id: 5, periodId: 4, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' }
+    { id: 3, periodId: 1, date: '3月28日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 4, periodId: 1, date: '3月28日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 5, periodId: 1, date: '3月28日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 6, periodId: 2, date: '5月20日', content: '我是此日期的具体赛事安排占一行我是此日期的', status: '报名招募期' },
+    { id: 7, periodId: 2, date: '5月20日', content: '我是此日期的具体赛事安排占一行我是此日期的', status: '报名招募期' },
+    { id: 8, periodId: 2, date: '5月20日', content: '我是此日期的具体赛事安排占一行我是此日期的', status: '报名招募期' },
+    { id: 9, periodId: 3, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 10, periodId: 4, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 11, periodId: 4, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 12, periodId: 4, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 13, periodId: 4, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 14, periodId: 4, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 15, periodId: 4, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' },
+    { id: 16, periodId: 4, date: '7月20日', content: '行是此日期的具体赛事安排占一行', status: '报名招募期' }
   ]
 
   const [selectedPeriod, setSelectedPeriod] = useState(1)
@@ -60,10 +66,11 @@ function Schedule(props) {
     const firstScheduleOfPeriod = scheduleList.find(schedule => schedule.periodId === periodId)
     if (firstScheduleOfPeriod && scheduleRefs.current[firstScheduleOfPeriod.id]) {
       const element = scheduleRefs.current[firstScheduleOfPeriod.id]
-      const offsetTop = element.offsetTop
       const container = element.parentElement
+      const offsetTop = element.getBoundingClientRect().top - container.getBoundingClientRect().top
+
       container.scrollTo({
-        top: offsetTop - 200,
+        top: offsetTop + container.scrollTop,
         behavior: 'smooth'
       })
     }

src/pages/2026/schedule/index.less

@@ -21,7 +21,8 @@
             display: flex;
             justify-content: space-between;
 
-            .rules_tab_item {      
+            .rules_tab_item {
+                cursor: pointer;
                 width: 775px;
                 height: 100px;
                 background: url('../img//schedule/rule-bg.webp'), #ffffff;
@@ -269,6 +270,7 @@
             .schedule_list {
             max-height: 700px;
             overflow-y: auto;
+            overflow-x: hidden;
             padding-right: 10px;
             margin-bottom: 100px;