Merge branch 'gitlink_competitions' of https://gitlink.org.cn/Gitlink/forgeplus-react into gitlink_competitions
This commit is contained in:
commit
ac05ed4b7a
|
|
@ -15,6 +15,14 @@ export const Competitions = {
|
|||
path: '/competitions/2026',
|
||||
component: '@/pages/2026/banner',
|
||||
routes: [
|
||||
{
|
||||
path: '/competitions/2026/schedule',
|
||||
component: '@/pages/2026/schedule',
|
||||
},
|
||||
{
|
||||
path: '/competitions/2026/center',
|
||||
component: '@/pages/2026/center',
|
||||
},
|
||||
{
|
||||
path: '/competitions/2026',
|
||||
component: '@/pages/2026/home',
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,119 @@
|
|||
import SpeTitle from '../components/Title'
|
||||
import styles from './index.less'
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import icon1 from '../img/center/icon1.webp'
|
||||
import icon2 from '../img/center/icon2.webp'
|
||||
import icon3 from '../img/center/icon3.webp'
|
||||
import icon4 from '../img/center/icon4.webp'
|
||||
import icon5 from '../img/center/icon5.webp'
|
||||
import icon6 from '../img/center/icon6.webp'
|
||||
import icon7 from '../img/center/icon7.webp'
|
||||
import icon8 from '../img/center/icon8.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, icon5, icon6, icon7, icon8];
|
||||
|
||||
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="请输入赛题名称或关键词进行搜索" value={searchKeyword} onChange={(e) => setSearchKeyword(e.target.value)} />
|
||||
<div className={styles.search_icon}>
|
||||
<img src={icon1} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
(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 }><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 && 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[isActive ? index % 4 : index % 4 + 4]}></img>
|
||||
<div className={ styles.track_name }>{trackName}</div>
|
||||
<div className={ styles.track_arrow }>{isActive ? '▶' : ''}</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</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 } onClick={() => { window.open(item.url)}}>
|
||||
<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>
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Center
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&: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%);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 3px;
|
||||
height: 54px;
|
||||
background: linear-gradient(180.3deg,rgba(255, 255, 255, 0.15) 0.87%,#ffffff 48.23%,rgba(255, 255, 255, 0) 99.99%);
|
||||
}
|
||||
|
||||
.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;
|
||||
cursor: pointer;
|
||||
&: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;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: url('../img/center/task-hover.png');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.task_name, .task_owner {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.task_level {
|
||||
background: #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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
export const directions = [{
|
||||
id: 1,
|
||||
name: 'AI方向',
|
||||
desc: '聚焦人工智能前沿技术与应用，探索大模型、智能算法在开源场景下的创新实践',
|
||||
tasks: {
|
||||
'开源案例教学赛道': [
|
||||
{ name: 'InVision虚拟化工平台上支持Asterinas（显锐）操作系统的容器运行时', level: 3, owner: '西北工业大学', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: 'OpenTiny NEXT前端智能应用贡戴赛', level: 2, owner: '西北工业大学', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: 'ylong_http支持https代理', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: 'ModelEngine开源项目贡戴赛', level: 1, owner: '华为', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: 'openUBMC开源项目贡戴赛', level: 3, owner: '西北工业大学', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'}
|
||||
],
|
||||
'开源任务挑战赛道': [
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'}
|
||||
],
|
||||
'开源代码评注赛道': [
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'}
|
||||
],
|
||||
'开源代码评论赛道': [
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '泛在操作系统方向',
|
||||
desc: '面向物联网时代，研究跨设备、跨场景的操作系统技术与生态构建',
|
||||
tasks: {
|
||||
'开源案例教学赛道': [
|
||||
{ name: '基于openvela的音视频识别系统', level: 1, owner: '华为' },
|
||||
{ name: '基于openvela的音视频识别系统', level: 1, owner: '华为' },
|
||||
{ name: 'OpenTiny NEXT前端智能应用贡戴赛', level: 2, owner: '西北工业大学' },
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: 'ModelEngine开源项目贡戴赛', level: 1, owner: '华为' },
|
||||
{ name: 'ModelEngine开源项目贡戴赛', level: 3, owner: '西北工业大学' },
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'}
|
||||
],
|
||||
'开源任务挑战赛道': [
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于openvela的音视频识别系统', level: 2, owner: '华为' },
|
||||
{ name: 'ModelEngine开源项目贡戴赛', level: 3, owner: '西北工业大学' },
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'}
|
||||
],
|
||||
'开源代码评注赛道': [
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'}
|
||||
],
|
||||
'开源代码评论赛道': [
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'},
|
||||
{ name: '基于AI/Agent的NPU算子自动生成', level: 2, owner: '小米', url: 'https://www.gitlink.org.cn/competitions'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react'
|
||||
import Left from '../../img/left.png';
|
||||
import Right from '../../img/right.png';
|
||||
import './index.less'
|
||||
|
||||
const SpeTitle = ({ first, last, english, className }) => {
|
||||
return <div className={`speTitle ${className || ''}`}>
|
||||
<p className="homeSubtitle"><img src={Left} width={16} />{ english }<img src={Right} width={36} /></p>
|
||||
<p className='homeMaintitle title-animate'><span>{ first }</span><span>{ last }</span></p>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default SpeTitle
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
.speTitle {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.homeSubtitle{
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: alibabaPuhuiM;
|
||||
color: rgba(9, 18, 33, 0.09);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
img{
|
||||
margin-top: -4px;
|
||||
&:first-child{
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeMaintitle{
|
||||
font-size: 48px;
|
||||
position: relative;
|
||||
margin: 0px auto;
|
||||
width: fit-content;
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
margin-top: -15px;
|
||||
font-family: DouyinSansBold;
|
||||
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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 846 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 688 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 323 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 916 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 286 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -10,11 +10,11 @@ export const menu = [
|
|||
},
|
||||
{
|
||||
name: '赛程赛制',
|
||||
link: '/competitions/2026/track/675',
|
||||
link: '/competitions/2026/schedule',
|
||||
},
|
||||
{
|
||||
name: '赛事中心',
|
||||
link: '/competitions/2026/track/675',
|
||||
link: '/competitions/2026/center',
|
||||
},
|
||||
{
|
||||
name: '赛事动态',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
import SpeTitle from '../components/Title'
|
||||
import styles from './index.less'
|
||||
import React, { useState, useRef } from 'react'
|
||||
import icon from '../img/schedule/icon.webp'
|
||||
import right from '../img/schedule/right.webp'
|
||||
|
||||
function Schedule(props) {
|
||||
|
||||
const ruleList = ['赛事规则', '评审规则']
|
||||
const [selectedRule, setSelectedRule] = useState('赛事规则')
|
||||
const [ ruleInfo, setRuleInfo ] = useState({
|
||||
headImg: icon,
|
||||
name: '2026年第八届CCF开源创新大赛赛事规则',
|
||||
summary: '原生编程挑战赛，是由阿里云主办，云原生应用平台承办的云原生知名品牌赛事。 自 2015 年开始，大赛已经成功举办了十届，共吸引了超过 91000 支队伍，覆盖 10 余个国家和地区。今年大赛主题全新升级为”全栈观测，智赢未来”，将深度探索全栈可观测技术在 AIOps 智能运…',
|
||||
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 scheduleList = [
|
||||
{ id: 1, periodId: 1, date: '3月20日', content: '我是此日期的具体赛事安排占一行我是此日期的具体赛事安排占一行', status: '报名招募期' },
|
||||
{ id: 2, periodId: 1, date: '3月28日', 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)
|
||||
const scheduleRefs = useRef({})
|
||||
const periodRefs = useRef({})
|
||||
const periodListRef = useRef(null)
|
||||
|
||||
const handlePeriodClick = (periodId) => {
|
||||
setSelectedPeriod(periodId)
|
||||
|
||||
// 更新激活条位置
|
||||
if (periodRefs.current[periodId] && periodListRef.current) {
|
||||
const element = periodRefs.current[periodId]
|
||||
const offsetTop = element.offsetTop
|
||||
periodListRef.current.style.setProperty('--active-top', `${offsetTop}px`)
|
||||
|
||||
// 滚动到对应时期项
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
})
|
||||
}
|
||||
|
||||
// 滚动到对应赛程项，添加200px余量
|
||||
const firstScheduleOfPeriod = scheduleList.find(schedule => schedule.periodId === periodId)
|
||||
if (firstScheduleOfPeriod && scheduleRefs.current[firstScheduleOfPeriod.id]) {
|
||||
const element = scheduleRefs.current[firstScheduleOfPeriod.id]
|
||||
const container = element.parentElement
|
||||
const offsetTop = element.getBoundingClientRect().top - container.getBoundingClientRect().top
|
||||
|
||||
container.scrollTo({
|
||||
top: offsetTop + container.scrollTop,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return <div className={styles.schedule}>
|
||||
<SpeTitle className={styles.title} first={'赛程赛制'} last={'XXXX'} english={'four tracks'}></SpeTitle>
|
||||
<div className={styles.rules}>
|
||||
<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>
|
||||
<span>2026第八届开源创新大赛</span>
|
||||
<span>Competition Rules</span>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<img src={ ruleInfo.headImg } alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SpeTitle className={styles.title2} first={'详细赛程'} last={'XXXX'} english={'four tracks'}></SpeTitle>
|
||||
<div className={styles.schedule_detail}>
|
||||
<div className={styles.schedule_left}>
|
||||
<p className={styles.period_date}>03.30 — 08.16</p>
|
||||
<div className={styles.period_list} ref={periodListRef}>
|
||||
{periodList.map(period => (
|
||||
<div
|
||||
key={period.id}
|
||||
ref={el => periodRefs.current[period.id] = el}
|
||||
className={`${styles.period_item} ${selectedPeriod === period.id ? styles.period_item_active : ''}`}
|
||||
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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.schedule_right}>
|
||||
<p className={styles.schedule_title}>具体赛程</p>
|
||||
<div className={styles.schedule_list}>
|
||||
{scheduleList.map(schedule => (
|
||||
<div
|
||||
key={schedule.id}
|
||||
ref={el => scheduleRefs.current[schedule.id] = el}
|
||||
className={styles.schedule_item}
|
||||
>
|
||||
<div className={styles.schedule_date}>{schedule.date}</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Schedule
|
||||
|
|
@ -0,0 +1,381 @@
|
|||
.schedule {
|
||||
background: url('../img//schedule/bg1.webp'), url('../img//schedule/bg2.webp');
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-position: top, bottom;
|
||||
background-size: 100% auto, 100% auto;
|
||||
.title {
|
||||
padding-top: 40px;
|
||||
}
|
||||
.title2 {
|
||||
padding-top: 100px;
|
||||
}
|
||||
.rules {
|
||||
width: 1600px;
|
||||
margin: auto;
|
||||
z-index: 1;
|
||||
margin-top: 55px;
|
||||
|
||||
.rules_tab {
|
||||
margin-top: 55px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.rules_tab_item {
|
||||
cursor: pointer;
|
||||
width: 775px;
|
||||
height: 100px;
|
||||
background: url('../img//schedule/rule-bg.webp'), #ffffff;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 40px;
|
||||
|
||||
&:hover {
|
||||
border: 2px solid;
|
||||
border-color: #091221;
|
||||
}
|
||||
|
||||
span:nth-child(1) {
|
||||
line-height: normal;
|
||||
font-family: alibabaPuhuiM;
|
||||
color: #091221;
|
||||
font-size: 22px;
|
||||
border-right: 1px dashed;
|
||||
border-color: rgba(255, 255, 255, 0.24);
|
||||
padding-right: 16px;
|
||||
height: 20.5px;
|
||||
line-height: 20.5px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
margin-left: 16.5px;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
font-family: DingTalk JinBuTi;
|
||||
color: #091221;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
opacity: 4%;
|
||||
line-height: normal;
|
||||
font-family: alibabaPuhuiM;
|
||||
color: #091221;
|
||||
font-size: 34px;
|
||||
position: absolute;
|
||||
left: 95px;
|
||||
}
|
||||
}
|
||||
|
||||
.rules_tab_selected {
|
||||
background: url('../img//schedule/rule-bg-selected.webp'), linear-gradient(270.49deg, #8959f5 2.12%, #2042c6 98.95%);
|
||||
border: none;
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #ffffff;
|
||||
border-color: rgba(13, 32, 151, 0.24);
|
||||
// color: linear-gradient(100.9deg,#eaf1ff 3.74%,#fcd1b2 99.59%);
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
span:nth-child(3) {
|
||||
color: #ffffff;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rule_detail {
|
||||
width: 1600px;
|
||||
height: 370px;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 44px 65px;
|
||||
margin-top: 69px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.detail_left {
|
||||
flex: 1;
|
||||
|
||||
img {
|
||||
width: 23.63px;
|
||||
height: 26.56px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p:nth-child(2) {
|
||||
font-size: 20px;
|
||||
font-family: alibabaPuhuiM;
|
||||
color: #091221;
|
||||
font-size: 26px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
p:nth-child(3) {
|
||||
width: 817px;
|
||||
line-height: 34px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
color: #636788;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 152px;
|
||||
height: 52px;
|
||||
background: #091221;
|
||||
border: 2px solid;
|
||||
border-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
line-height: 28px;
|
||||
font-family: alibabaPuhuiM;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
img {
|
||||
width: 15.49px;
|
||||
height: 10.72px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img:last-child {
|
||||
width: 274px;
|
||||
height: 274px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.schedule_detail {
|
||||
z-index: 1;
|
||||
width: 1600px;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
justify-content: space-between;
|
||||
.period_date, .schedule_title {
|
||||
font-family: alibabaPuhuiM;
|
||||
color:#091221;
|
||||
font-size:28px;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
|
||||
.period_list {
|
||||
width: 300px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width:5px;
|
||||
background:rgba(13, 32, 151, 0.04);
|
||||
border-radius:20px;
|
||||
}
|
||||
|
||||
--active-top: 0px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: var(--active-top, 0px);
|
||||
width:5px;
|
||||
height:80px;
|
||||
background:linear-gradient(180deg,#4b66f8 0%,#c167bc 100%);
|
||||
border-radius:20px;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.period_item {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
.period_content {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 5px;
|
||||
width:5px;
|
||||
height:5px;
|
||||
background:linear-gradient(180deg,#4b66f8 0%,#c167bc 100%);
|
||||
border-radius:20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.period_date {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.period_name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.schedule_right{
|
||||
flex: 1;
|
||||
max-width: 1105px;
|
||||
|
||||
.schedule_list {
|
||||
max-height: 700px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 10px;
|
||||
margin-bottom: 100px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #a1a1a1;
|
||||
}
|
||||
|
||||
.schedule_item {
|
||||
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;
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background: url('../img/schedule/item1.webp'), #ffffff;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&: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;
|
||||
.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_date {
|
||||
font-family: alibabaPuhuiM;
|
||||
color: #091221;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue