diff --git a/src/pages/2026/center/index.jsx b/src/pages/2026/center/index.jsx index ee680bbe2..65ac9081c 100644 --- a/src/pages/2026/center/index.jsx +++ b/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
- + setSearchKeyword(e.target.value)} />
{ - directions.map(e => { - return
+ (directions || []).map((e, index) => { + const activeTrack = getActiveTrack(e.id); + return
-
-

-

+
0{index + 1} DIRECTION
+

{e.name}

+

{e.desc}

{ - e.tasks.map(track => { - return
- + e.tasks && Object.entries(e.tasks).map(([trackName, trackItems], index) => { + const isActive = isTrackActive(e.id, trackName); + return
handleTrackClick(e.id, trackName)} + > + +
{trackName}
+
{isActive ? '▶' : ''}
}) }
-
+
+ {e.tasks && activeTrack && e.tasks[activeTrack] && ( +
+
+ {e.tasks[activeTrack] + .filter(item => searchKeyword === '' || item.name.includes(searchKeyword)) + .map((item, index) => ( +
+
{item.name}
+
+ + {item.level === 1 && '初级'} + {item.level === 2 && '中级'} + {item.level === 3 && '高级'} + +
+ {item.owner} +
+
+ ))} +
+
+ )} +
}) } diff --git a/src/pages/2026/center/index.less b/src/pages/2026/center/index.less index 1b2f6550a..2aa30e31d 100644 --- a/src/pages/2026/center/index.less +++ b/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; + } + } + } + } + } + } + } } \ No newline at end of file diff --git a/src/pages/2026/center/info.js b/src/pages/2026/center/info.js index 381a737c1..0c5f62987 100644 --- a/src/pages/2026/center/info.js +++ b/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: '小米' } + ] } - }] \ No newline at end of file + } +] \ No newline at end of file diff --git a/src/pages/2026/img/center/direc-bg1.webp b/src/pages/2026/img/center/direc-bg1.webp new file mode 100644 index 000000000..4e0f0a737 Binary files /dev/null and b/src/pages/2026/img/center/direc-bg1.webp differ diff --git a/src/pages/2026/img/center/direc-bg2.webp b/src/pages/2026/img/center/direc-bg2.webp new file mode 100644 index 000000000..5c28e1676 Binary files /dev/null and b/src/pages/2026/img/center/direc-bg2.webp differ diff --git a/src/pages/2026/img/center/item-bg.webp b/src/pages/2026/img/center/item-bg.webp new file mode 100644 index 000000000..48071293e Binary files /dev/null and b/src/pages/2026/img/center/item-bg.webp differ diff --git a/src/pages/2026/schedule/index.jsx b/src/pages/2026/schedule/index.jsx index 72cda2d2d..efb395798 100644 --- a/src/pages/2026/schedule/index.jsx +++ b/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' }) } diff --git a/src/pages/2026/schedule/index.less b/src/pages/2026/schedule/index.less index c2885d821..fe8345dbf 100644 --- a/src/pages/2026/schedule/index.less +++ b/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;