Gitlink
/
forgeplus-react
0
0
Fork 37
Code Issues Pull Requests 5 Releases 1 Wiki Activity

赛事中心暂存

This commit is contained in:
Eeeros 2026-03-18 17:28:50 +08:00
parent 251442e364
commit 868c866350
15 changed files with 291 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config/routes/competitions.ts
View File

@ -19,6 +19,10 @@ export const Competitions = {
path: '/competitions/2026/schedule',
component: '@/pages/2026/schedule',
},
{
path: '/competitions/2026/center',
component: '@/pages/2026/center',
},
{
path: '/competitions/2026',
component: '@/pages/2026/home',

46
src/pages/2026/center/index.jsx Normal file
View File

@ -0,0 +1,46 @@
import SpeTitle from '../components/Title'
import styles from './index.less'
import React, { useState, useRef } from 'react'
import icon1 from '../img/center/icon1.webp'
import directions from './info'
function Center(props) {
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="请输入赛题名称或关键词进行搜索" />
<div className={styles.search_icon}>
<img src={icon1} alt="" />
</div>
</div>
</div>
{
directions.map(e => {
return <div 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_tracks }>
{
e.tasks.map(track => {
return <div>
</div>
})
}
</div>
</div>
<div className={ styles.directions_right }></div>
</div>
})
}
</div>
}
export default Center

66
src/pages/2026/center/index.less Normal file
View File

@ -0,0 +1,66 @@
.center {
background: url('../img/center/page-bg.webp');
background-repeat: no-repeat;
background-size: 100% auto;
display: flex;
align-items: center;
flex-direction: column;
.title {
padding-top: 40px;
}
.search_wrap {
margin-top: 22px;
width: 680px;
height: 120px;
background: url('../img/center/search-bg.webp');
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;
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;
&:focus-visible {
border: none;
outline: none;
}
margin-right: 30px;
}
.search_icon {
margin-right: 9px;
width: 39px;
height: 39px !important;
background: #091221;
flex-shrink: 0;
color: #ffffff;
text-align: center;
line-height:39px;
margin-right: 8px;
cursor: pointer;
border-radius: 50%;
img {
width: 18px;
height: 18px;
}
}
}
}

109
src/pages/2026/center/info.js Normal file
View File

@ -0,0 +1,109 @@
export const directions = [{
id: 1,
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: '基于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: '聚焦人工智能前沿技术与应用，探索大模型、智能算法在开源场景下的创新实践',
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: '基于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: '小米'},
],
}
}]

BIN
src/pages/2026/img/center/icon1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 846 B

BIN
src/pages/2026/img/center/icon2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/pages/2026/img/center/icon3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/pages/2026/img/center/icon4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/pages/2026/img/center/page-bg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 323 KiB

BIN
src/pages/2026/img/center/search-bg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
src/pages/2026/img/schedule/item1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
src/pages/2026/img/schedule/item2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/pages/2026/img/schedule/item3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

10
src/pages/2026/schedule/index.jsx
View File

@ -24,8 +24,8 @@ 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: 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: '报名招募期' },
@ -125,8 +125,10 @@ function Schedule(props) {
className={styles.schedule_item}
>
<div className={styles.schedule_date}>{schedule.date}</div>
<div className={styles.schedule_content}>{schedule.content}</div>
<div className={styles.schedule_status}>{schedule.status}</div>
<div className={ styles.schedule_info }>
<div className={styles.schedule_content}>{schedule.content}</div>
<div className={styles.schedule_status}>{schedule.status}</div>
</div>
</div>
))}
</div>

77
src/pages/2026/schedule/index.less
View File

@ -13,6 +13,7 @@
width: 1600px;
margin: auto;
z-index: 1;
margin-top: 55px;
.rules_tab {
margin-top: 55px;
@ -202,7 +203,7 @@
&:after {
content: '';
position: absolute;
left: 9px;
left: 10px;
top: var(--active-top, 0px);
width:5px;
height:80px;
@ -290,42 +291,84 @@
}
.schedule_item {
background: #f5f5f5;
border-radius: 10px;
padding: 20px;
width: 1090px;
height: 100px;
border: 1px solid;
border-color: #ffffff;
border-radius: 16px;
padding: 40px;
margin-bottom: 20px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 20px;
.schedule_date {
font-size: 14px;
color: #666;
min-width: 80px;
&:nth-child(2n + 1) {
background: url('../img/schedule/item1.webp'), #ffffff;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.schedule_content {
&:nth-child(2n) {
background: url('../img/schedule/item2.webp'), #ffffff;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.schedule_info {
display: flex;
justify-content: space-between;
flex: 1;
font-size: 16px;
color: #333;
.schedule_content {
flex: 1;
font-size: 16px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 800px;
}
.schedule_status {
font-size: 14px;
color: #999;
}
}
.schedule_status {
font-size: 14px;
color: #999;
.schedule_date {
font-family: alibabaPuhuiM;
color: #091221;
font-size: 16px;
}
&:hover {
background: linear-gradient(270.49deg, #8959f5 2.12%, #2042c6 98.95%);
height: 160px;
color: white;
background: url('../img/schedule/item3.webp');
background-repeat: no-repeat;
background-size: 100% 100%;
align-items: flex-start;
.schedule_date,
.schedule_content,
.schedule_status {
color: white;
}
.schedule_date {
font-size: 20px;
line-height: 20px;
}
.schedule_content {
font-size: 28px;
line-height: 28px;
width: 930px;
}
.schedule_status {
font-size: 18px;
margin-top: 20px;
}
.schedule_info {
flex-direction: column;
}
}
}
}