Yeuvoir
/
forgeplus-react
forked from Gitlink/forgeplus-react
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

赛程赛制cont.

This commit is contained in:
Eeeros 2026-03-19 16:15:51 +08:00
parent 6318ac7a34
commit 3426adfd45
4 changed files with 78 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/2026/detail/index.jsx
View File

@ -23,10 +23,10 @@ function DetailPage() {
}, [id]);
useEffect(() => {
getlList();
getList();
}, [dir]);
const getlList = () => {
const getList = () => {
if (dir.id) {
getDocList(dir.id).then(res => {
setList(res.rows.slice(0, 5) || []);

12
src/pages/2026/info.js
View File

@ -85,5 +85,15 @@ export const menu = [
btn:"颁奖典礼期"
},
]
export const timelineDir = 1254
export const ruleList = [{
id: 1250,
name: '赛事规则'
}, {
id: 1251,
name: '评审规则'
}]
export const hidenMemberType = ['与会嘉宾', '院士嘉宾']

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

@ -1,13 +1,16 @@
import SpeTitle from '../components/Title'
import styles from './index.less'
import React, { useState, useRef } from 'react'
import React, { useState, useRef, useEffect } from 'react'
import icon from '../img/schedule/icon.webp'
import right from '../img/schedule/right.webp'
import { timelineDir, ruleList } from '../info'
import { getDocDetail, getDocList } from '../api'
import { history } from 'umi'
function Schedule(props) {
const ruleList = ['赛事规则', '评审规则']
const [selectedRule, setSelectedRule] = useState('赛事规则')
const [selectedRule, setSelectedRule] = useState(ruleList[1].id)
const [ ruleInfo, setRuleInfo ] = useState({
headImg: icon,
name: '2026年第八届CCF开源创新大赛赛事规则',
@ -15,12 +18,9 @@ function Schedule(props) {
id: 1
})
const periodList = [
{ id: 1, name: '报名招募期', date: '3月20日-7月10日' },
{ id: 2, name: '初赛评审期', date: '7月10日-7月17日' },
{ id: 3, name: '决赛评审期', date: '8月4日-8月10日' },
{ id: 4, name: '颁奖礼期', date: '8月16日' }
]
const [ruleInfoList, setRuleInfoList] = useState({})
const [periodList, setPeriodList] = useState([])
const scheduleList = [
{ id: 1, periodId: 1, date: '3月20日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
@ -46,6 +46,36 @@ function Schedule(props) {
const periodRefs = useRef({})
const periodListRef = useRef(null)
useEffect(() => {
const ruleInfo = {}
ruleList.map(e => {
getDocDetail(e.id).then(res => {
if (res.data) {
ruleInfo[e.id] = res.data
if (Object.keys(ruleInfo).length === 2) {
setRuleInfoList(ruleInfo)
}
}
})
})
},[ruleList])
useEffect(() => {
getList()
},[])
const getList = () => {
if (timelineDir) {
getDocList(timelineDir).then(res => {
setPeriodList(res.rows);
}).catch(err => {
console.error('获取文档列表失败:', err);
});
}
}
// const getDocList =
const handlePeriodClick = (periodId) => {
setSelectedPeriod(periodId)
@ -82,8 +112,8 @@ function Schedule(props) {
<div className={styles.rules_tab}>
{
ruleList.map(e => {
return <div className={`${ styles.rules_tab_item } ${ e === selectedRule ? styles.rules_tab_selected : '' }`} onClick={() => { setSelectedRule(e) }}>
<span>{ e }</span>
return <div className={`${ styles.rules_tab_item } ${ e.id === selectedRule ? styles.rules_tab_selected : '' }`} onClick={() => { setSelectedRule(e.id) }}>
<span>{ e.name }</span>
<span>2026第八届开源创新大赛</span>
<span>Competition Rules</span>
</div>
@ -94,11 +124,11 @@ function Schedule(props) {
<div className={ styles.rule_detail }>
<div className={ styles.detail_left }>
<img src={ icon } alt="" />
<p>{ ruleInfo.name }</p>
<p>{ ruleInfo.summary }</p>
<button>查看更多<img src={ right } alt="" /></button>
<p>{ ruleInfoList[selectedRule] && ruleInfoList[selectedRule].name }</p>
<p>{ ruleInfoList[selectedRule] && ruleInfoList[selectedRule].summary }</p>
<button onClick={() => { history.push(`/competitions/2026/information/${ selectedRule }`) }}>查看更多<img src={ right } alt="" /></button>
</div>
<img src={ ruleInfo.headImg } alt="" />
<img src={ ruleInfoList[selectedRule] && ruleInfoList[selectedRule].headImg } alt="" />
</div>
</div>
@ -115,8 +145,8 @@ function Schedule(props) {
onClick={() => handlePeriodClick(period.id)}
>
<div className={styles.period_content}>
<div className={styles.period_date}>{period.date}</div>
<div className={styles.period_name}>{period.name}</div>
<div className={styles.period_date}>{period.name}</div>
<div className={styles.period_name}>{period.summary}</div>
</div>
</div>
))}

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

@ -155,6 +155,13 @@
width: 15.49px;
height: 10.72px;
margin-bottom: 0;
transition: all 0.3s ease;
}
&:hover {
img {
transform: translate(10px, 0);
}
}
}
}
@ -223,7 +230,10 @@
.period_content {
position: relative;
padding: 15px;
border-radius: 10px;
width:328px;
height:100px;
border-radius:12px;
padding: 21px 32px;
&:before {
content: '';
position: absolute;
@ -237,28 +247,23 @@
}
.period_date {
font-size: 14px;
color: #666;
font-family:Alibaba PuHuiTi;
color:#091221;
font-size:16px;
margin-bottom: 5px;
}
.period_name {
font-size: 16px;
font-weight: bold;
color: #333;
font-family:Alibaba PuHuiTi;
font-weight:700;
color:#091221;
font-size:20px;
}
}
&.period_item_active {
.period_content {
background: #ffffff;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
.period_name {
color: #2042c6;
}
}
}
}