2026开源大赛首页
This commit is contained in:
parent
44d979fe85
commit
6e2db986b2
|
|
@ -9,29 +9,54 @@ import { getCount } from '@/service/user';
|
|||
import Left from '../img/left.png';
|
||||
import Right from '../img/right.png';
|
||||
import Arrow from '../img/arrow.png';
|
||||
import ArrowPurple from '../img/arrowPurple.png';
|
||||
import Plane from '../img/plane.png';
|
||||
import Diamond from '../img/liu.png';
|
||||
import Number6 from '../img/6@2x.webp';
|
||||
import Number7 from '../img/7@2x.webp';
|
||||
import Number8 from '../img/8@2x.webp';
|
||||
import Team from '../img/team.png';
|
||||
import trackBack from '../img/track.png';
|
||||
import trackBack2 from '../img/track2.png';
|
||||
import Running from "../img/running.png";
|
||||
import Shine from "../img/shine.png";
|
||||
import trackBack1 from '../img/channel1.png';
|
||||
import trackBack2 from '../img/channel2.png';
|
||||
import trackBack3 from '../img/channel3.png';
|
||||
import trackBack4 from '../img/channel4.png';
|
||||
import Dynamics from '../img/dynamics.png';
|
||||
import Dynamicsicon from '../img/dynamicsicon.png';
|
||||
import { timeline } from '../info';
|
||||
import moment from 'moment';
|
||||
|
||||
function Home(){
|
||||
const [ partner, setPartner ] = useState([]);
|
||||
const [newsList, setNewsList] = useState([]);
|
||||
const [ visits , setVisits ] = useState(0);
|
||||
const [ counts , setCounts ] = useState({});
|
||||
const [ firstHover , setFirstHover ] = useState(0);
|
||||
const [ show, setShow ] = useState(false)
|
||||
const { mainInfo } = useModel('defaultConfig');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
setShow(true);
|
||||
} else {
|
||||
setShow(false);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 1 //露出 30% 时触发
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
getPartner();
|
||||
getNewsList();
|
||||
getCountForEdu();
|
||||
getVisit();
|
||||
|
||||
const element = document.getElementById("joinRightnow"); // 获取你的元素
|
||||
if (element) {
|
||||
observer.observe(element);
|
||||
}
|
||||
},[])
|
||||
const getVisit=()=>{
|
||||
getDocDetail(656).then(res=>{
|
||||
|
|
@ -45,7 +70,6 @@ function Home(){
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
const getPartner = () => {
|
||||
getPartnerList().then(res => {
|
||||
setPartner(res.rows);
|
||||
|
|
@ -57,19 +81,6 @@ function Home(){
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
function formatMoney (value){
|
||||
if (value === 0) {
|
||||
return value;
|
||||
};
|
||||
if (value == '' || !value) {
|
||||
return 0;
|
||||
}
|
||||
value = Number(value);
|
||||
if (isNaN(value)) return '';
|
||||
|
||||
return value.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
}
|
||||
return(
|
||||
<div className="page headpage">
|
||||
<div className='part'>
|
||||
|
|
@ -78,25 +89,25 @@ function formatMoney (value){
|
|||
<div className='homeDesc'>面向产业互联网领域规格最高、规模最大、覆盖面最广的年度战略发布会，2019年至今已成功举办六届。大会致力于汇聚全球智慧洞察数字发展新机遇，描绘云、AI、大数据、安全等关键技术的发展蓝图，展示腾讯最新的研究成果、战略规划、技术产品、解决方案。大会还汇聚腾讯数字生态伙伴在助力推进产业数字化和数字产业化过程中沉淀的行业最佳实践，是政府、企业、合作伙伴、开发者以及社会大众了解腾讯全球数字生态的全景式界面。
|
||||
<br/>2025年开源大会将于9月16日-17日举行，本届大会以“智·向远大”为主题，旨在探讨如何以自主创新技术，助力千行百业深挖智能化、国际化新机遇，让智能可用、创新可控，以高效数字化推动产业升级与可持续发展。通过1场主峰会、3场主题峰会以及50+主题专场，荟萃100+大咖嘉宾的智慧分享，解码全球科技、产业发展的新趋势，探索各行各业的最佳实践。通过50+产品功能发布、6000+平米展区，全面解码腾讯云最新能力、腾讯AI产品全新体验，带来前沿科技的真实体验。 </div>
|
||||
<ul className='team highlight-list'>
|
||||
<li className='highlight-card hovered'>
|
||||
<li className={`highlight-card ${firstHover===0 ? "hovered":""}`} onMouseOver={()=>setFirstHover(0)}>
|
||||
<span>01</span>
|
||||
<img src={Number7} height={32} width={32}/>
|
||||
<p className='t-title'><span>权威主办</span></p>
|
||||
<p className='t-desc'>我是大厂赛题的副文案内容占最多我是大厂赛题的副文案内容占最多2行</p>
|
||||
</li>
|
||||
<li className='highlight-card'>
|
||||
<li className={`highlight-card ${firstHover===1 ? "hovered":""}`} onMouseOver={()=>setFirstHover(1)}>
|
||||
<span>02</span>
|
||||
<img src={Number6} height={32} width={32}/>
|
||||
<p className='t-title'><span>大厂赛题</span></p>
|
||||
<p className='t-desc'>我是大厂赛题的副文案内容占最多我是大厂赛题的副文案内容占最多2行</p>
|
||||
</li>
|
||||
<li className='highlight-card'>
|
||||
<li className={`highlight-card ${firstHover===2 ? "hovered":""}`} onMouseOver={()=>setFirstHover(2)}>
|
||||
<span>03</span>
|
||||
<img src={Number8} height={32} width={32}/>
|
||||
<p className='t-title'><span>高额奖金</span></p>
|
||||
<p className='t-desc'>我是大厂赛题的副文案内容占最多我是大厂赛题的副文案内容占最多2行</p>
|
||||
</li>
|
||||
<li className='highlight-card'>
|
||||
<li className={`highlight-card ${firstHover===3 ? "hovered":""}`} onMouseOver={()=>setFirstHover(3)}>
|
||||
<span>04</span>
|
||||
<img src={Number6} height={32} width={32}/>
|
||||
<p className='t-title'><span>XXXXXX</span></p>
|
||||
|
|
@ -105,93 +116,108 @@ function formatMoney (value){
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='part'>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>four tracks<img src={Right} width={36}/></p>
|
||||
<p className='homeMaintitle title-animate'><span>两大方向</span><span>四个赛道</span></p>
|
||||
|
||||
<div className='directionPanel'>
|
||||
<div className='part'>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>four tracks<img src={Right} width={36}/></p>
|
||||
<p className='homeMaintitle title-animate'><span>两大方向</span><span>四个赛道</span></p>
|
||||
<div className='dirlistContent'>
|
||||
<ul className='directions'>
|
||||
<li className='direction-card'>
|
||||
<div className='trackContent'>
|
||||
<span className='trackNum'><span>01</span><span>direction</span></span>
|
||||
<p className='tracktitle'><span>AI方向</span></p>
|
||||
<p className='trackdesc'>聚焦人工智能前沿技术与应用，探索大模型、智能算法在开源场景下的创新实践</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='direction-card'>
|
||||
<div className='trackContent'>
|
||||
<span className='trackNum'><span>02</span><span>direction</span></span>
|
||||
<p className='tracktitle'><span>泛在操作系统方向</span></p>
|
||||
<p className='trackdesc'>面向万物互联时代，研究跨设备、跨场景的操作系统技术与生态构建</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className='games'>
|
||||
<li className='dir-smaill-card'>
|
||||
<img src={trackBack1} alt="" className='backimg'/>
|
||||
<p className='tracktitle'><span>开源项目贡献赛道</span></p>
|
||||
<p className='trackdesc'>向真实开源项目提交贡献，用代码质量和社区反馈衡量实力。</p>
|
||||
</li>
|
||||
<li className='dir-smaill-card'>
|
||||
<img src={trackBack2} alt="" className='backimg'/>
|
||||
<p className='tracktitle'><span>开源人物挑战赛道</span></p>
|
||||
<p className='trackdesc'>聚焦开源领域杰出贡献者，分享技术布道与生态建设的实践经验。</p>
|
||||
</li>
|
||||
<li className='dir-smaill-card'>
|
||||
<img src={trackBack3} alt="" className='backimg'/>
|
||||
<p className='tracktitle'><span>开源案例教学赛道</span></p>
|
||||
<p className='trackdesc'>提炼优秀开源项目实践经验，甄选优质开源实战案例，打造可复用的技术教学案例库。</p>
|
||||
</li>
|
||||
<li className='dir-smaill-card'>
|
||||
<img src={trackBack4} alt="" className='backimg'/>
|
||||
<p className='tracktitle'><span>开源代码评注赛道</span></p>
|
||||
<p className='trackdesc'>精读优秀代码，撰写详尽评注与技术分析，助力开发者掌握编程范式与工程实践精髓。</p>
|
||||
</li>
|
||||
</ul>
|
||||
<a className={`applicationBtn shine-button ${show ? "animationTime":""}`} id='joinRightnow' href='/competitions/2026/track/679'>
|
||||
<span className='max'>立即参与<img src={Arrow} width={19}/></span>
|
||||
<span className='min'><img src={Plane} width={22}/></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='part'>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>four tracks<img src={Right} width={36}/></p>
|
||||
<p className='homeMaintitle title-animate'><span>赛事日程</span><span>抢先知晓</span></p>
|
||||
<div className='track'>
|
||||
<li className='direction-card'>
|
||||
<div className='trackContent'>
|
||||
<div className='flex1'>
|
||||
<p className='tracktitle'><span>泛在操作系统方向</span></p>
|
||||
<p style={{opacity:"0.71"}}>面向万物互联时代，研究跨设备、跨场景的操作系统技术与生态构建</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div className='track'>
|
||||
<li>
|
||||
<img src={trackBack} alt="" className='backimg'/>
|
||||
<div className='trackContent'>
|
||||
<div className='flex1'>
|
||||
<p className='tracktitle'><span>开源项目贡献赛道</span></p>
|
||||
<p style={{opacity:"0.71"}}>向真实开源项目提交贡献，用代码质量和社区反馈衡量实力。</p>
|
||||
</div>
|
||||
<a className='applicationBtn shine-button' href='/competitions/2026/track/675'>立即参与<img src={ArrowPurple} width={19}/></a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src={trackBack2} alt="" className='backimg'/>
|
||||
<div className='trackContent'>
|
||||
<div className='flex1'>
|
||||
<p className='tracktitle'><span>开源人物挑战赛道</span></p>
|
||||
<p style={{opacity:"0.71"}}>聚焦开源领域杰出贡献者，分享技术布道与生态建设的实践经验。</p>
|
||||
</div>
|
||||
<a className='applicationBtn shine-button' href='/competitions/2026/track/677'>立即参与<img src={ArrowPurple} width={19}/></a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src={trackBack2} alt="" className='backimg'/>
|
||||
<div className='trackContent'>
|
||||
<div className='flex1'>
|
||||
<p className='tracktitle'><span>开源案例教学赛道</span></p>
|
||||
<p style={{opacity:"0.71"}}>提炼优秀开源项目实践经验，甄选优质开源实战案例，打造可复用的技术教学案例库。</p>
|
||||
</div>
|
||||
<a className='applicationBtn shine-button' href='/competitions/2026/track/679'>立即参与<img src={ArrowPurple} width={19}/></a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src={trackBack} alt="" className='backimg'/>
|
||||
<div className='trackContent'>
|
||||
<div className='flex1'>
|
||||
<p className='tracktitle'><span>开源代码评注赛道</span></p>
|
||||
<p style={{opacity:"0.71"}}>精读优秀代码，撰写详尽评注与技术分析，助力开发者掌握编程范式与工程实践精髓。</p>
|
||||
</div>
|
||||
<a className='applicationBtn shine-button' href='/competitions/2026/track/678'>立即参与<img src={ArrowPurple} width={19}/></a>
|
||||
</div>
|
||||
</li>
|
||||
<div className='timelineList'>
|
||||
{
|
||||
timeline && timeline.map((i,k)=>{
|
||||
const isRunning = moment().isBetween(i.begain, i.end ,null,'[]');
|
||||
return(
|
||||
<div className='timelineItem'>
|
||||
<ul>
|
||||
<li className='l_time'>{moment(i.begain).format("MM月DD日")}{i.end && `-${moment(i.end).format("MM月DD日")}`}{isRunning ? <img src={Running} height={22} className='ml5'/>:"" }</li>
|
||||
<li className='l_desc'>{i.desc}</li>
|
||||
<a className={`l_btn ${isRunning ? "runningBtn" :""}`}>{i.btn}</a>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='part'>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>Event Updates<img src={Right} width={36}/></p>
|
||||
<p className='homeMaintitle title-animate'><span>赛事动态</span><span>不容错过</span></p>
|
||||
{
|
||||
newsList && newsList.length > 0 &&
|
||||
<div className='dynamics'>
|
||||
<ul className='dynamicsNews'>
|
||||
{ newsList.map((i, k) => {
|
||||
return k < 3 ?
|
||||
<li className='news-card-hover'>
|
||||
<p className='uper'><img src={Dynamicsicon} width={26}/>{ i.name }</p>
|
||||
<p className='under'>
|
||||
<span>{i.publishTime}</span>
|
||||
<Link to={`/competitions/2026/information/${ i.id }`} className='applicationBtn arrow-hover'>探索更多动态<img src={Arrow} width={19}/></Link>
|
||||
</p>
|
||||
</li>
|
||||
: ''
|
||||
})}
|
||||
</ul>
|
||||
<div className='dynamicsImg'>
|
||||
<img src={Dynamics} alt="" />
|
||||
<div className='eventUpdating'>
|
||||
<div className='part'>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>Event Updates<img src={Right} width={36}/></p>
|
||||
<p className='homeMaintitle title-animate'><span>赛事动态</span><span>不容错过</span></p>
|
||||
{
|
||||
newsList && newsList.length > 0 &&
|
||||
<div className='dynamics'>
|
||||
<div className='dynamicsImg'>
|
||||
<p className='dynamicsTitle'>第七届CCF开源创新大赛赛题赞助征集公告</p>
|
||||
<p className='dynamicsSubTitle'>本系列课程从背景知识、使用方法、拓展领域、技术基础等方面介绍了软件工厂相关内容，方便广大用户更好地了解掌握和使用软件工厂！</p>
|
||||
<div className='dynamicsBanner'>
|
||||
<img src={Dynamics} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<ul className='dynamicsNews'>
|
||||
{ newsList.map((i, k) => {
|
||||
return k < 3 ?
|
||||
<li className='news-card-hover'>
|
||||
<p className='uper'><img src={Dynamicsicon} width={26}/>{ i.name }</p>
|
||||
<p className='under'>
|
||||
<span>{i.publishTime}</span>
|
||||
<Link to={`/competitions/2026/information/${ i.id }`} className='applicationBtn arrow-hover'>探索更多动态<img src={Arrow} width={19}/></Link>
|
||||
</p>
|
||||
</li>
|
||||
: ''
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<a className='applicationBtn hoverBtn shine-button' href="/competitions/2026/information" style={{marginTop:32}}>不容错过<img src={Arrow} width={19}/></a>
|
||||
}
|
||||
<a className='applicationBtn hoverBtn shine-button' href="/competitions/2026/information" style={{marginTop:32}}>不容错过<img src={Arrow} width={19}/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='part'>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>partner<img src={Right} width={36}/></p>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
.part{
|
||||
text-align: center;
|
||||
width: 1600px;
|
||||
margin:auto;
|
||||
}
|
||||
.page.headpage {
|
||||
display: flex;
|
||||
|
|
@ -83,21 +84,6 @@
|
|||
color:#1d1e1f;
|
||||
font-size:17px;
|
||||
}
|
||||
.applicationBtn{
|
||||
margin-top:20px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
background: linear-gradient( 103deg, #5950F3 0%, #6B16CA 100%);
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
padding:0px 24px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
img{
|
||||
margin:0px 0px 4px 15px;
|
||||
}
|
||||
}
|
||||
.numbersData{
|
||||
display: flex;
|
||||
padding:50px 0px;
|
||||
|
|
@ -182,71 +168,51 @@
|
|||
color: #fff;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
transition-duration: 1s;
|
||||
&>span{
|
||||
margin-bottom: auto;
|
||||
font-family:DingTalk JinBuTi;
|
||||
font-size:18px;
|
||||
}
|
||||
&:nth-child(n){
|
||||
background:linear-gradient(180deg,#6058f5 0%,#6058f5 100%);
|
||||
&::after{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image: url(../img/5@2x.webp);
|
||||
background-position: right bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
&:nth-child(2n){
|
||||
background:linear-gradient(180deg,#1466ea 0%,#1466ea 100%);
|
||||
&::after{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image: url(../img/5@2x.webp);
|
||||
background-position: right;
|
||||
background-image: url(../img/4@2x.webp);
|
||||
background-position: right bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
&:nth-child(3n){
|
||||
background:linear-gradient(180deg,#6a51dd 0%,#6a51dd 100%);
|
||||
&::after{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image: url(../img/2@2x.webp);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right bottom;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
&:nth-child(4n){
|
||||
background:linear-gradient(180deg,#1349cb 0%,#0a5ced 100%);
|
||||
&::after{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image: url(../img/3@2x.webp);
|
||||
&::after{
|
||||
position: absolute;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-position: right bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 20px;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
&:nth-child(1){
|
||||
background:linear-gradient(180deg,#6058f5 0%,#6058f5 100%);
|
||||
&::after{
|
||||
background-image: url(../img/5@2x.webp);
|
||||
width:70%;
|
||||
}
|
||||
}
|
||||
&:nth-child(2){
|
||||
background:linear-gradient(180deg,#1466ea 0%,#1466ea 100%);
|
||||
&::after{
|
||||
background-image: url(../img/4@2x.webp);
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
&:nth-child(3){
|
||||
background:linear-gradient(180deg,#6a51dd 0%,#6a51dd 100%);
|
||||
&::after{
|
||||
background-image: url(../img/2@2x.webp);
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
&:nth-child(4){
|
||||
background:linear-gradient(180deg,#1349cb 0%,#0a5ced 100%);
|
||||
&::after{
|
||||
background-image: url(../img/3@2x.webp);
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
|
|
@ -254,6 +220,12 @@
|
|||
}
|
||||
&.hovered{
|
||||
flex: 2 1;
|
||||
&:nth-child(1)::after{
|
||||
width: 50%;
|
||||
}
|
||||
&:not(:nth-child(1))::after{
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
.t-title{
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -287,6 +259,249 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.timelineList{
|
||||
height: 309px;
|
||||
background-color: #fbfdff;
|
||||
background-image: url(../img/49.png);
|
||||
background-size: 100% 100%;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
padding:59px 40px 59px 30px;
|
||||
.timelineItem{
|
||||
text-align: left;
|
||||
height: 100%;
|
||||
flex:1;
|
||||
font-size:16px;
|
||||
margin-right: 67px;
|
||||
color:#091221;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
ul{
|
||||
display: flex;
|
||||
padding-left: 45px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top:4px;
|
||||
bottom: 4px;
|
||||
border-left: 1px dashed rgba(9, 18, 33, 0.14);
|
||||
z-index: 1;
|
||||
}
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top:0px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-image: url(../img/shine.png);
|
||||
background-size: 100% 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
.l_time{
|
||||
font-weight:500;
|
||||
font-size:22px;
|
||||
}
|
||||
.l_desc{
|
||||
line-height:32px;
|
||||
}
|
||||
.l_btn{
|
||||
height:50px;
|
||||
line-height:48px;
|
||||
border:1px solid #091221;
|
||||
border-radius:26px;
|
||||
padding:0 27px;
|
||||
width: max-content;
|
||||
color: #091221 !important;
|
||||
cursor: default;
|
||||
&.runningBtn{
|
||||
color: #fff!important;
|
||||
background:#091221;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.eventUpdating{
|
||||
width: 100%;
|
||||
background-image: url(../img/event.png);
|
||||
background-size: 100% 100%;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.directionPanel{
|
||||
background-image: url(../img/dir.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding:42px 0;
|
||||
margin-top: 87px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.homeSubtitle{
|
||||
margin-top: 0px;
|
||||
}
|
||||
.dirlistContent{
|
||||
margin-top: 49px;
|
||||
background:linear-gradient(180deg,#e7edfd 0%,#eaf0fe 43.84%,#fafaff 100%);
|
||||
border:1px solid #ffffff;
|
||||
border-radius:30px;
|
||||
padding:60px 30px 60px;
|
||||
}
|
||||
.directions{
|
||||
display: flex;
|
||||
.direction-card{
|
||||
flex:2 1;
|
||||
padding:1px;
|
||||
height: 200px;
|
||||
border-radius:30px;
|
||||
background:linear-gradient(52.29deg,#ffffff 0%,#ffffff 68.54%,rgba(255, 255, 255, 0.45) 97.43%);
|
||||
.trackContent{
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
color:#ffffff;
|
||||
font-size:15px;
|
||||
height: 100%;
|
||||
border-radius:30px;
|
||||
padding:30px;
|
||||
}
|
||||
.trackNum{
|
||||
font-weight:700;
|
||||
color:#ffffff;
|
||||
font-size:24px;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
span:nth-child(1){
|
||||
background-image: linear-gradient(118.79deg,#81adff 6.6%,#fbb2fc 97.46%);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
margin-right: 10px;
|
||||
}
|
||||
span:nth-child(2){
|
||||
opacity: 0.1;
|
||||
font-family:Douyin Sans;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.tracktitle{
|
||||
font-family:DingTalk JinBuTi;
|
||||
font-size:30px;
|
||||
margin-bottom: 20px;
|
||||
line-height:40px;
|
||||
height:40px;
|
||||
margin-top:0px;
|
||||
}
|
||||
.trackdesc{
|
||||
opacity: 0.8;
|
||||
font-size: 15px;
|
||||
margin:0px;
|
||||
font-family:alibabaPuhuiM;
|
||||
line-height:20px;
|
||||
}
|
||||
&:first-child{
|
||||
margin-right: 30px;
|
||||
.trackContent{
|
||||
background:linear-gradient(100.02deg,#0d2097 3.99%,#354dc6 98.88%);
|
||||
}
|
||||
}
|
||||
&:nth-child(2){
|
||||
.trackContent{
|
||||
background-color: #040E29;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.applicationBtn{
|
||||
margin-top:30px;
|
||||
height: 52px;
|
||||
line-height: 50px;
|
||||
min-width: 52px;
|
||||
background: #091221;
|
||||
border-radius:26px;
|
||||
padding:0px 16px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
display: inline-flex;
|
||||
width: 54px;
|
||||
transition: 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
&.animationTime{
|
||||
width: 202px;
|
||||
.max{
|
||||
opacity: 1;
|
||||
}
|
||||
.min{
|
||||
opacity: 0;
|
||||
width: 0px;
|
||||
}
|
||||
}
|
||||
.max{
|
||||
transition: 0.5s;
|
||||
transition-delay: 0.8s;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
margin:0px auto;
|
||||
img{
|
||||
margin:0px 0px 4px 15px;
|
||||
}
|
||||
}
|
||||
.min{
|
||||
transition: 0.5s;
|
||||
width: 22px;
|
||||
opacity: 1;
|
||||
transition-delay: 0.2s;
|
||||
img{
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.games{
|
||||
display: flex;
|
||||
margin-top: 35px;
|
||||
.dir-smaill-card{
|
||||
flex:1 1;
|
||||
padding:0 24px 0px 24px ;
|
||||
margin-right: 22px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
&:not(:first-child)::before{
|
||||
top: 10px;
|
||||
bottom: 20px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 1px dashed rgba(13, 32, 151, 0.17);
|
||||
left: -11px;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0px;
|
||||
}
|
||||
.backimg{
|
||||
width: 36px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tracktitle{
|
||||
font-weight:700;
|
||||
color:#091221;
|
||||
font-size:18px;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.trackdesc{
|
||||
color:#091221;
|
||||
font-size:16px;
|
||||
line-height:28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.track{
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
|
|
@ -307,13 +522,8 @@
|
|||
color: #FFFFFF;
|
||||
line-height: 28px;
|
||||
position: relative;
|
||||
.backimg{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
width: 80%;
|
||||
}
|
||||
font-family:alibabaPuhuiM;
|
||||
|
||||
&:nth-child(2n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
|
@ -348,29 +558,6 @@
|
|||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
.tracktitle{
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #FFFFFF;
|
||||
line-height: 38px;
|
||||
height: 38px;
|
||||
margin-bottom: 22px;
|
||||
span{
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.applicationBtn{
|
||||
background: #fff;
|
||||
color: #6233DE;
|
||||
margin-left: 66px;
|
||||
// display: none;
|
||||
margin-top: 0px;
|
||||
}
|
||||
&:hover{
|
||||
.applicationBtn{display: block;}
|
||||
.money{display: none;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -379,72 +566,52 @@
|
|||
}
|
||||
.dynamics{
|
||||
display: flex;
|
||||
margin-top:60px;
|
||||
margin-top:82px;
|
||||
justify-content: space-between;
|
||||
.dynamicsNews{
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
padding-left: 40px;
|
||||
box-sizing: border-box;
|
||||
li{
|
||||
background: #F6F7FA;
|
||||
box-shadow: 0px 0px 10px 1px rgba(7,70,165,0.11);
|
||||
border-radius: 13px;
|
||||
border: 2px solid #FFFFFF;
|
||||
text-align: left;
|
||||
padding:22px 12px 18px 38px;
|
||||
.uper{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #040E29;
|
||||
line-height: 26px;
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
img{
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
margin-top:3px ;
|
||||
}
|
||||
}
|
||||
.under{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #040E29;
|
||||
height: 20px;
|
||||
margin-bottom: 0px;
|
||||
.applicationBtn{
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
padding:0px 11px;
|
||||
margin-left: auto;
|
||||
margin-top: 0px;
|
||||
opacity: 0;
|
||||
transition: 0.8s;
|
||||
img{
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .applicationBtn{
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
padding:30px 0px;
|
||||
border:2px solid rgba(9, 18, 33, 0.06);
|
||||
&:first-child{
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dynamicsImg{
|
||||
width: calc( 60% - 32px);
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
text-align: left;
|
||||
.dynamicsTitle{
|
||||
font-weight:700;
|
||||
color:#091221;
|
||||
font-size:24px;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
.dynamicsSubTitle{
|
||||
line-height:32px;
|
||||
color:#091221;
|
||||
font-size:16px;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
.dynamicsBanner{
|
||||
padding:30px;
|
||||
box-sizing: border-box;
|
||||
background:linear-gradient(180deg,#f4f8ff 0%,rgba(255, 255, 255, 0.31) 100%);
|
||||
border:1px solid #ffffff;
|
||||
border-radius:16px;
|
||||
margin:0px auto;
|
||||
display: inline-block;
|
||||
img{
|
||||
border-radius:16px;
|
||||
height: 369px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.partner-content {
|
||||
|
|
@ -560,13 +727,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.news-card-hover {
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0px 5px 20px 1px rgba(7,70,165,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.partner-hover {
|
||||
.partner-item {
|
||||
|
|
@ -575,14 +735,6 @@
|
|||
}
|
||||
|
||||
|
||||
.direction-card {
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0px 5px 20px 1px rgba(7,70,165,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-01, .highlight-02, .highlight-03, .highlight-04 {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 742 B |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 266 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 688 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 982 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -58,5 +58,27 @@ export const menu = [
|
|||
zoneKey:"KYDS7th",
|
||||
zoneId:11
|
||||
}
|
||||
export const timeline = [
|
||||
{
|
||||
begain:"2026-3-20",
|
||||
end:"2026-7-10",
|
||||
desc:"3月20日赛题发布、报名开启，7月10日作品提交截止。",
|
||||
btn:"报名招募期"
|
||||
},{
|
||||
begain:"2026-7-11",
|
||||
end:"2026-7-17",
|
||||
desc:"7月11日-15日初赛线上评审，7月17日发布决赛入围通知。",
|
||||
btn:"初赛评审期"
|
||||
},{
|
||||
begain:"2026-8-4",
|
||||
end:"2026-8-10",
|
||||
desc:"3月20日赛题发布、报名开启，7月10日作品提交截止。",
|
||||
btn:"决赛评审期"
|
||||
},{
|
||||
begain:"2026-8-16",
|
||||
desc:"3月20日赛题发布、报名开启，7月10日作品提交截止。",
|
||||
btn:"颁奖典礼期"
|
||||
},
|
||||
]
|
||||
|
||||
export const hidenMemberType = ['与会嘉宾', '院士嘉宾']
|
||||
Loading…
Reference in New Issue