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

跳转地址+动画

This commit is contained in:
caishi 2026-03-20 09:29:20 +08:00
parent cc1f290f94
commit 688e9bd16f
6 changed files with 52 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/2026/banner/index.less
View File

@ -67,7 +67,7 @@
animation: move 5s infinite;
}
.bottomShine{
bottom: 2px;
bottom: 1px;
animation-delay: 5s;
}
}

5
src/pages/2026/detail/index.less
View File

@ -1,4 +1,5 @@
.detail-page {
padding-top: 60px;
width: 1920px;
min-height: 1587px;
background: url('../img/detail/header-bg.png'), #f7fbff;
@ -33,7 +34,6 @@
.breadcrumb-current {
color: #091221;
font-weight: 500;
}
}
@ -153,7 +153,6 @@
.next-title {
font-size: 18px;
font-weight: 600;
color: #091221;
margin: 0 0 20px 0;
}
@ -188,7 +187,7 @@
@media (max-width: 1200px) {
.detail-page {
width: 100%;
padding: 0 20px;
padding: 60px 20px 0;
.content-wrapper {
grid-template-columns: 1fr;

19
src/pages/2026/home/index.jsx
View File

@ -176,9 +176,9 @@ function Home(){
<div className='trackContent'>
<span className='trackNum'>
<span>02</span><span>direction</span>
<div className="ringarrow">
<a href='/competitions/2026/center' className="ringarrow">
<img src={require("../img/upRight.png")} width={16}/>
</div>
</a>
</span>
<p className='tracktitle'><span>泛在操作系统方向</span></p>
<p className='trackdesc'>面向多场景设备协同，推进系统适配与交互创新，完善泛在计算开源体系。</p>
@ -207,8 +207,8 @@ function Home(){
<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>
<a className={`applicationBtn shine-button ${show ? "animationTime":""}`} id='joinRightnow' href='/competitions/2026/center'>
<div className='max'>立即参与<img src={Arrow} width={19}/></div>
<span className='min'><img src={Plane} width={22}/></span>
</a>
</div>
@ -250,11 +250,10 @@ function Home(){
<div className='dynamicsImg'>
<p className='dynamicsTitle'>第八届CCF开源创新大赛赛题赞助征集公告</p>
<p className='dynamicsSubTitle'>本系列课程从背景知识、使用方法、拓展领域、技术基础等方面介绍了软件工厂相关内容，方便广大用户更好地了解掌握和使用软件工厂！</p>
<div className='dynamicsBanner'>
<Carousel autoplay className='carouselBox' style={{width:"605px"}}>
<img className='largeImg' src={Dynamics} />
<img src={Dynamics} alt="" />
</Carousel>
<div className='dynamicsBanner' style={{width:"605px"}}>
<Carousel autoplay className='carouselBox' style={{width:"605px"}}>
<img src={Dynamics} alt="" />
</Carousel>
</div>
</div>
<ul className='dynamicsNews' id="dynamicsNews">
@ -294,7 +293,7 @@ function Home(){
<div className="type-content">
{
e.zonePartnersList.map((i, subK) => {
return <a key={ subK } href={ i.link } target="_blank">
return <a key={ subK } href={ i.link } style={{cursor:i.link?"pointer":"default"}} target="_blank">
<div className="partner-item">
<img src={ i.logo } alt=""/>
</div>

111
src/pages/2026/home/index.less
View File

@ -37,7 +37,6 @@
}
span{
margin:0px 16px;
font-weight:700;
color:#091221;
font-size:48px;
position: relative;
@ -61,7 +60,6 @@
font-family: alibabaPuhuiM;
color: rgba(9, 18, 33, 0.09);
text-transform: uppercase;
font-weight: 500;
margin-bottom: 0px;
padding-top: 90px;
img{
@ -93,7 +91,6 @@
margin-top: 37px;
text-align: left;
font-family:alibabaPuhuiM;
font-weight:500;
color:#1d1e1f;
font-size:17px;
}
@ -119,7 +116,6 @@
flex: 1;
span.number{
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 28px;
color: #040E29;
line-height: 40px;
@ -144,7 +140,6 @@
box-shadow: 0px 0px 10px 1px rgba(7,70,165,0.11);
border-radius: 9px 9px 9px 9px;
border: 2px solid #FFFFFF;
font-weight: bold;
font-size: 20px;
color: #040E29;
text-align: center;
@ -246,13 +241,11 @@
text-align: left;
span{
display: block;
font-weight: 500;
font-size: 22px;
line-height: 30px;
}
}
.t-desc{
font-weight: 400;
font-size: 15px;
line-height: 28px;
height: 56px;
@ -266,7 +259,6 @@
opacity: 0.9;
}
.t-time{
font-weight: 400;
font-size: 15px;
text-align: left;
}
@ -318,7 +310,6 @@
z-index: 2;
}
.l_time{
font-weight:500;
font-size:22px;
}
.l_desc{
@ -416,7 +407,6 @@
position:relative;
}
.trackNum{
font-weight:700;
color:#ffffff;
font-size:24px;
margin-bottom: 20px;
@ -500,7 +490,6 @@
border-radius:26px;
padding:0px 16px;
color: #fff;
font-weight: 400;
font-size: 20px;
display: inline-flex;
width: 54px;
@ -564,7 +553,6 @@
margin-bottom: 12px;
}
.tracktitle{
font-weight:700;
color:#091221;
font-size:18px;
margin-bottom: 19px;
@ -592,7 +580,6 @@
color: #fff;
text-align: left;
width:calc( 50% - 20px);
font-weight: 400;
font-size: 15px;
color: #FFFFFF;
line-height: 28px;
@ -620,7 +607,6 @@
height: 100%;
padding:28px 27px 28px 39px ;
.money{
font-weight: 400;
font-size: 34px;
color: #FFFFFF;
line-height: 40px;
@ -687,7 +673,6 @@
margin-top: 20px;
}
.newName{
font-weight:700;
color:#091221;
font-size:18px;
margin-top: 13px;
@ -714,7 +699,6 @@
padding-right: 40px;
text-align: left;
.dynamicsTitle{
font-weight:700;
color:#091221;
font-size:24px;
margin-bottom: 34px;
@ -742,7 +726,6 @@
}
}
.forsearch{
font-weight:500;
color:#091221;
font-size:18px;
text-align:right;
@ -774,7 +757,6 @@
margin-bottom: 30px;
text-align: left;
font-family:Alibaba PuHuiTi;
font-weight:700;
color:#091221;
font-size:26px;
}
@ -782,24 +764,43 @@
display: flex;
flex-wrap: wrap;
a{
flex:5 1;
max-width: 25%;
margin-right: 22px;
margin-bottom: 25px;
border-radius: 16px;
overflow: hidden;
position: relative;
z-index: 10;
padding:2px;
&:hover{
&::before{
animation: buttonBorderSpin 6s linear infinite forwards;
opacity: 1;
}
}
&::before{
z-index: -2;
position: absolute;
content: "";
width: 236%;
height: 300%;
left: -71%;
top: -108%;
opacity: 0;
background: conic-gradient(from 180deg at 50% 50%, rgba(224, 78, 43, 0.45) 0deg, rgba(97, 67, 219, 0.69) 45deg, transparent 90deg, transparent 180deg, rgba(224, 78, 43, 0.45) 180deg, rgba(97, 67, 219, 0.69) 225deg, transparent 270deg);
}
}
div {
margin-right: 22px;
padding: 10px;
box-sizing: border-box;
background-color:#ffffff;
border-radius:16px;
width: 290px;
height: 100px;
width: 286px;
height: 101px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
&:hover{
// border-color: #6233DE;
}
z-index: 0;
}
a{
&:nth-child(5n) div{
@ -841,62 +842,6 @@
transform: translateX(5px);
}
}
.partner-hover {
.partner-item {
transition: all 0.3s ease;
}
}
.highlight-01, .highlight-02, .highlight-03, .highlight-04 {
position: relative;
padding-left: 30px;
&::before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: bold;
font-size: 14px;
color: #fff;
}
}
.highlight-01::before {
content: '1';
background: linear-gradient(103deg, #5950F3 0%, #6B16CA 100%);
}
.highlight-02::before {
content: '2';
background: linear-gradient(103deg, #4779EC 0%, #11317A 100%);
}
.highlight-03::before {
content: '3';
background: linear-gradient(103deg, #088592 0%, #0D569C 100%);
}
.highlight-04::before {
content: '4';
background: linear-gradient(103deg, #736CF0 0%, #3C1E85 100%);
}
.partner-item {
transition: all 0.3s ease;
&:hover {
transform: scale(1.05);
box-shadow: 0px 0px 15px rgba(98, 51, 222, 0.2);
}
}
}
.carouselBox{
.slick-dots{
@ -971,6 +916,6 @@
width: 1400px;
}
.page.headpage .partner-content .partner-type .type-content a{
flex:4 1;
max-width: 20%;;
}
}

12
src/pages/2026/information/index.jsx
View File

@ -143,7 +143,7 @@ console.log(information,dirList);
informationList["guide"].map((e,k)=>{
return(
<div className='activeCard'>
<div className='name task-hide'>{e.name}</div>
<Link className='name task-hide' to={ `/competitions/2026/information/${ e.id }` }>{e.name}</Link>
<span className='time'>{e.publishTime}</span>
</div>
)
@ -186,7 +186,7 @@ console.log(information,dirList);
<div className="announcement-card">
<div className="annouceImg"><img src={require(`../img/announcement-banner${k+1}.png`)} alt="赛事公告 Banner" className="banner-image" /></div>
<div className="card-header">
<a className="card-title task-hide">{ e.name }</a>
<Link className="card-title task-hide" to={ `/competitions/2026/information/${ e.id }` }>{ e.name }</Link>
<div className='scrolling-text'>
<p className='text-line'>{e.publishTime}</p>
<p className="text-line card-date task-hide">{ e.summary }</p>
@ -236,9 +236,9 @@ console.log(information,dirList);
<div className='item-time'>
<i className='iconfont icon-a-31shijian mr10 font13'/>
<span className='font15'>{e.publishTime}</span>
<a href={ `/competitions/2026/information/${ e.id }` } className="read-more">
<Link to={ `/competitions/2026/information/${ e.id }` } className="read-more">
查看详情<i className="iconfont icon-arrowRight font14" />
</a>
</Link>
</div>
</div>
</div>
@ -282,13 +282,13 @@ console.log(information,dirList);
{/* 资源发布 */}
{
informationList["notice"] && informationList["notice"].length > 0 ?
informationList["resources"] && informationList["resources"].length > 0 ?
<div className={`resourceBox`} id="resources">
<p className="homeSubtitle"><img src={Left} width={16}/>Resources<img src={Right} width={36}/></p>
<p className='homeMaintitle title-animate'><span>资源发布下载</span></p>
{
information.category.map((e) => {
return e.anchor === "notice" && <div className="content part" key={ e.anchor }>
return e.anchor === "resources" && <div className="content part" key={ e.anchor }>
<div className="resourceimg">
<img src={Resource} alt="" width={"100%"}/>
</div>

14
src/pages/2026/information/index.less
View File

@ -28,12 +28,14 @@
margin-left: 80px;
.name{
font-size: 17px;
font-weight:500;
color:#091221;
flex: 1;
width: 0;
margin-right: 15px;
text-align: left;
&:hover{
color: #0d2097;
}
}
.time{
margin-left: auto;
@ -71,7 +73,6 @@
height: 45px;
line-height: 45px;
font-family:Douyin Sans;
font-weight:700;
color:#091221!important;
font-size:20px;
cursor: pointer;
@ -205,7 +206,6 @@
}
.announcement-title {
font-size: 48px;
font-weight: 700;
color: #091221;
margin: 0 0 40px 0;
}
@ -230,7 +230,6 @@
position: relative;
font-family: alibabaPuhuiM;
.card-title {
font-weight:500;
color:#091221;
font-size:20px;
text-align: left;
@ -319,6 +318,7 @@
.explainNews{
background-image: url(../img/explain.png);
background-size: 100% 100%;
padding-bottom: 60px;
.content{
background-color: #fff;
border-radius:30px;
@ -329,7 +329,7 @@
background-color: rgba(239, 243, 255, 0.7);
border-radius:24px;
border:none!important;
margin:0px auto 30px!important;
margin:0px 30px!important;
padding: 3px!important;
box-sizing: border-box;
width: 45.5%!important;
@ -452,7 +452,6 @@
}
.item-left {
font-family: PingFang SC;
font-weight: 700;
color: #6233DE;
font-size: 24px;
margin-right: 30px;
@ -469,7 +468,6 @@
margin-bottom: 10px;
}
.item-title {
font-weight: 700;
color: #252b3a;
font-size: 20px;
margin-top: 30px;
@ -604,6 +602,7 @@
flex-wrap: wrap;
width: 100%;
margin-top: 65px;
min-height: 421px;
.resourceCard{
flex: 0 0 calc(33.9% - 30px);
width: 0;
@ -612,7 +611,6 @@
background:#ffffff;
box-shadow:0px 0px 20px rgba(13, 32, 151, 0.04);
box-sizing: border-box;
font-weight:500;
color:#091221;
border-radius:20px;
font-size:20px;