diff --git a/src/pages/2026/home/index.jsx b/src/pages/2026/home/index.jsx index 262e541f8..20ef92853 100644 --- a/src/pages/2026/home/index.jsx +++ b/src/pages/2026/home/index.jsx @@ -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(
@@ -78,25 +89,25 @@ function formatMoney (value){
面向产业互联网领域规格最高、规模最大、覆盖面最广的年度战略发布会，2019年至今已成功举办六届。大会致力于汇聚全球智慧洞察数字发展新机遇，描绘云、AI、大数据、安全等关键技术的发展蓝图，展示腾讯最新的研究成果、战略规划、技术产品、解决方案。大会还汇聚腾讯数字生态伙伴在助力推进产业数字化和数字产业化过程中沉淀的行业最佳实践，是政府、企业、合作伙伴、开发者以及社会大众了解腾讯全球数字生态的全景式界面。
2025年开源大会将于9月16日-17日举行，本届大会以“智·向远大”为主题，旨在探讨如何以自主创新技术，助力千行百业深挖智能化、国际化新机遇，让智能可用、创新可控，以高效数字化推动产业升级与可持续发展。通过1场主峰会、3场主题峰会以及50+主题专场，荟萃100+大咖嘉宾的智慧分享，解码全球科技、产业发展的新趋势，探索各行各业的最佳实践。通过50+产品功能发布、6000+平米展区，全面解码腾讯云最新能力、腾讯AI产品全新体验，带来前沿科技的真实体验。
-
-

four tracks

-

两大方向四个赛道

- +
+
+

four tracks

+

两大方向四个赛道

+
+
    +
  • +
    + 01direction +

    AI方向

    +

    聚焦人工智能前沿技术与应用，探索大模型、智能算法在开源场景下的创新实践

    +
    +
    • +
  • +
    + 02direction +

    泛在操作系统方向

    +

    面向万物互联时代，研究跨设备、跨场景的操作系统技术与生态构建

    +
    +
    • +
+
    +
  • + +

    开源项目贡献赛道

    +

    向真实开源项目提交贡献，用代码质量和社区反馈衡量实力。

    +
    • +
  • + +

    开源人物挑战赛道

    +

    聚焦开源领域杰出贡献者，分享技术布道与生态建设的实践经验。

    +
    • +
  • + +

    开源案例教学赛道

    +

    提炼优秀开源项目实践经验，甄选优质开源实战案例，打造可复用的技术教学案例库。

    +
    • +
  • + +

    开源代码评注赛道

    +

    精读优秀代码，撰写详尽评注与技术分析，助力开发者掌握编程范式与工程实践精髓。

    +
    • +
+ + 立即参与 + + +
+
- +

four tracks

赛事日程抢先知晓

-
-
  • -
    -
    -

    泛在操作系统方向

    -

    面向万物互联时代，研究跨设备、跨场景的操作系统技术与生态构建

    -
    -
    -
    • -
    -
    -
  • - -
    -
    -

    开源项目贡献赛道

    -

    向真实开源项目提交贡献，用代码质量和社区反馈衡量实力。

    -
    - 立即参与 -
    -
    • -
  • - -
    -
    -

    开源人物挑战赛道

    -

    聚焦开源领域杰出贡献者，分享技术布道与生态建设的实践经验。

    -
    - 立即参与 -
    -
    • -
  • - -
    -
    -

    开源案例教学赛道

    -

    提炼优秀开源项目实践经验，甄选优质开源实战案例，打造可复用的技术教学案例库。

    -
    - 立即参与 -
    -
    • -
  • - -
    -
    -

    开源代码评注赛道

    -

    精读优秀代码，撰写详尽评注与技术分析，助力开发者掌握编程范式与工程实践精髓。

    -
    - 立即参与 -
    -
    • +
    + { + timeline && timeline.map((i,k)=>{ + const isRunning = moment().isBetween(i.begain, i.end ,null,'[]'); + return( +
    +
      +
    • {moment(i.begain).format("MM月DD日")}{i.end && `-${moment(i.end).format("MM月DD日")}`}{isRunning ? :"" }
      • +
    • {i.desc}
      • + {i.btn} +
    +
    + ) + }) + }
    -
    -

    Event Updates

    -

    赛事动态不容错过

    - { - newsList && newsList.length > 0 && -
    -
      - { newsList.map((i, k) => { - return k < 3 ? -
    • -

      { i.name }

      -

      - {i.publishTime} - 探索更多动态 -

      -
      • - : '' - })} -
    -
    - +
    +
    +

    Event Updates

    +

    赛事动态不容错过

    + { + newsList && newsList.length > 0 && +
    +
    +

    第七届CCF开源创新大赛赛题赞助征集公告

    +

    本系列课程从背景知识、使用方法、拓展领域、技术基础等方面介绍了软件工厂相关内容，方便广大用户更好地了解掌握和使用软件工厂！

    +
    + +
    +
    +
      + { newsList.map((i, k) => { + return k < 3 ? +
    • +

      { i.name }

      +

      + {i.publishTime} + 探索更多动态 +

      +
      • + : '' + })} +
    -
    - } - 不容错过 + } + 不容错过 +

    partner

    diff --git a/src/pages/2026/home/index.less b/src/pages/2026/home/index.less index 6cd84c57a..0497cfccf 100644 --- a/src/pages/2026/home/index.less +++ b/src/pages/2026/home/index.less @@ -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; diff --git a/src/pages/2026/img/49@2x.webp b/src/pages/2026/img/49.png similarity index 100% rename from src/pages/2026/img/49@2x.webp rename to src/pages/2026/img/49.png diff --git a/src/pages/2026/img/52@2x.webp b/src/pages/2026/img/52@2x.webp deleted file mode 100644 index 7e2491750..000000000 Binary files a/src/pages/2026/img/52@2x.webp and /dev/null differ diff --git a/src/pages/2026/img/5@2x.webp b/src/pages/2026/img/5@2x.webp index 615b66476..a51e67cd1 100644 Binary files a/src/pages/2026/img/5@2x.webp and b/src/pages/2026/img/5@2x.webp differ diff --git a/src/pages/2026/img/22@2x.webp b/src/pages/2026/img/channel1.png similarity index 100% rename from src/pages/2026/img/22@2x.webp rename to src/pages/2026/img/channel1.png diff --git a/src/pages/2026/img/23@2x.webp b/src/pages/2026/img/channel2.png similarity index 100% rename from src/pages/2026/img/23@2x.webp rename to src/pages/2026/img/channel2.png diff --git a/src/pages/2026/img/24@2x.webp b/src/pages/2026/img/channel3.png similarity index 100% rename from src/pages/2026/img/24@2x.webp rename to src/pages/2026/img/channel3.png diff --git a/src/pages/2026/img/25@2x.webp b/src/pages/2026/img/channel4.png similarity index 100% rename from src/pages/2026/img/25@2x.webp rename to src/pages/2026/img/channel4.png diff --git a/src/pages/2026/img/17@2x.webp b/src/pages/2026/img/dir.png similarity index 100% rename from src/pages/2026/img/17@2x.webp rename to src/pages/2026/img/dir.png diff --git a/src/pages/2026/img/event.png b/src/pages/2026/img/event.png new file mode 100644 index 000000000..23600d243 Binary files /dev/null and b/src/pages/2026/img/event.png differ diff --git a/src/pages/2026/img/plane.png b/src/pages/2026/img/plane.png new file mode 100644 index 000000000..89a393e7a Binary files /dev/null and b/src/pages/2026/img/plane.png differ diff --git a/src/pages/2026/img/51@2x.webp b/src/pages/2026/img/running.png similarity index 100% rename from src/pages/2026/img/51@2x.webp rename to src/pages/2026/img/running.png diff --git a/src/pages/2026/img/50@2x.webp b/src/pages/2026/img/shine.png similarity index 100% rename from src/pages/2026/img/50@2x.webp rename to src/pages/2026/img/shine.png diff --git a/src/pages/2026/info.js b/src/pages/2026/info.js index c02efa425..fd686c54f 100644 --- a/src/pages/2026/info.js +++ b/src/pages/2026/info.js @@ -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 = ['与会嘉宾', '院士嘉宾'] \ No newline at end of file