forked from Gitlink/forgeplus-react
Merge branch 'gitlink_competitions' into conpetitions-dev
This commit is contained in:
Eeeros
commit
4ec762c3f9
|
|
@ -26,7 +26,18 @@ export const Competitions = {
|
|||
{
|
||||
path: '/competitions/2026',
|
||||
component: '@/pages/2026/home',
|
||||
}
|
||||
},{
|
||||
path: '/competitions/2026/organization',
|
||||
component: '@/pages/2026/organization',
|
||||
},
|
||||
// {
|
||||
// path: '/competitions/2026/track/:id',
|
||||
// component: '@/pages/2026/track',
|
||||
// },
|
||||
{
|
||||
path: '/competitions/2026/information',
|
||||
component: '@/pages/2026/information',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import '../../styles/iconfont/iconfont.js';
|
||||
import { Icon } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const IconFont = Icon.createFromIconfontCN({
|
||||
scriptUrl: '',
|
||||
});
|
||||
|
||||
|
||||
/** 封装 iconfont 图标 */
|
||||
function KFIcon({ type, font = 15, color, className, style, ...rest }) {
|
||||
const iconStyle = {
|
||||
...style,
|
||||
fontSize: font,
|
||||
color,
|
||||
};
|
||||
return <IconFont {...rest} type={type} className={className} style={iconStyle} />;
|
||||
}
|
||||
|
||||
export default KFIcon;
|
||||
|
|
@ -8,6 +8,9 @@ import BannerImg from '../img/1@2x.webp';
|
|||
function Banner(props) {
|
||||
const location = useLocation();
|
||||
const { mainInfo } = useModel('defaultConfig');
|
||||
const isMain = ()=>{
|
||||
return location.pathname === "/competitions/2026"
|
||||
}
|
||||
|
||||
const matchItem = (item) => {
|
||||
if(location.pathname.indexOf("/track/")>-1){
|
||||
|
|
@ -21,21 +24,20 @@ function Banner(props) {
|
|||
setDocumentTitle(mainInfo?.name);
|
||||
})
|
||||
return(
|
||||
<div className='mainroot'>
|
||||
<div className='mainBanner'>
|
||||
<div className="header">
|
||||
<img src={BannerImg} />
|
||||
<div className='bannerContent'>
|
||||
<ul className='banners'>
|
||||
{
|
||||
menu && menu?.length > 0 && menu.map((i,k)=>{
|
||||
return(
|
||||
<Link to={i.link} key={k} className={`${matchItem(i.link) ? `active` : ``}`}>{i.name}</Link>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div className={isMain()?"header":"fixedHeader"}>
|
||||
{ isMain() && <img src={BannerImg} /> }
|
||||
<div className='bannerContent'>
|
||||
<ul className='banners'>
|
||||
{!isMain() && <span>第八届CCF开源创新大赛</span>}
|
||||
{
|
||||
menu && menu?.length > 0 && menu.map((i,k)=>{
|
||||
return(
|
||||
<Link to={i.link} key={k} className={`${matchItem(i.link) ? `active` : ``}`}>{i.name}</Link>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{props.children}
|
||||
|
|
|
|||
|
|
@ -18,16 +18,13 @@
|
|||
a{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
&.active{
|
||||
}
|
||||
img{
|
||||
margin-right: 18px;
|
||||
}
|
||||
&:not(:last-child):before{
|
||||
&::after,&:first-child::before{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
opacity:37%;
|
||||
|
|
@ -36,28 +33,57 @@
|
|||
top: 0px;
|
||||
content: "";
|
||||
}
|
||||
&:first-child::before{
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mainroot{
|
||||
background: url('../img/back.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.mainBanner{
|
||||
width: 100%;
|
||||
.header {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
&>img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
&>img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.fixedHeader{
|
||||
height:64px;
|
||||
background:#050F54;
|
||||
position:fixed;
|
||||
top:0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
.bannerContent{
|
||||
background-image:url(../img/smallbanner.jpg);
|
||||
height: 100%;
|
||||
.banners{
|
||||
span{
|
||||
font-family:Douyin Sans;
|
||||
font-weight:700;
|
||||
color:#ffffff;
|
||||
font-size:26px;
|
||||
}
|
||||
a{
|
||||
font-size:15px;
|
||||
&::after{
|
||||
height: 16px;
|
||||
top: 3px;
|
||||
}
|
||||
&::before,&:last-child:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:1400px) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
import {useState, useEffect} from 'react';
|
||||
import {useState, useEffect,useRef} from 'react';
|
||||
import {
|
||||
Link , useModel
|
||||
}from 'umi';
|
||||
|
|
@ -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 [ counts , setCounts]= useState(0);
|
||||
const { mainInfo } = useModel('defaultConfig');
|
||||
const countInterRef = useRef();
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
setShow(true);
|
||||
} else {
|
||||
setShow(false);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 1 //露出 100% 时触发
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
getPartner();
|
||||
getNewsList();
|
||||
getCountForEdu();
|
||||
getVisit();
|
||||
|
||||
const element = document.getElementById("joinRightnow"); // 获取你的元素
|
||||
if (element) {
|
||||
observer.observe(element);
|
||||
}
|
||||
},[])
|
||||
const getVisit=()=>{
|
||||
getDocDetail(656).then(res=>{
|
||||
|
|
@ -39,13 +64,11 @@ function Home(){
|
|||
}).catch(console.error())
|
||||
}
|
||||
|
||||
|
||||
const getCountForEdu=()=>{
|
||||
getCount().then(res=>{
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const getPartner = () => {
|
||||
getPartnerList().then(res => {
|
||||
setPartner(res.rows);
|
||||
|
|
@ -53,23 +76,61 @@ function Home(){
|
|||
}
|
||||
const getNewsList = () => {
|
||||
gethomePageDocList().then(res => {
|
||||
setNewsList(res.rows)
|
||||
setNewsList(res.rows);
|
||||
if(res && res.rows && res.rows.length>0){
|
||||
// 使用requestAnimationFrame实现更流畅的动画
|
||||
const dynamicsNews = document.querySelector('#dynamicsNews');
|
||||
const newsCards = document.querySelectorAll('#dynamicsNews li');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
let currentIndex = 0;
|
||||
let lastTime = 0;
|
||||
|
||||
// 先移除所有active类
|
||||
newsCards.forEach((card) => {
|
||||
card.classList.remove('active');
|
||||
});
|
||||
|
||||
// 从第一个li开始添加active类
|
||||
newsCards[currentIndex].classList.add('active');
|
||||
|
||||
// 动画函数
|
||||
const animate = (timestamp) => {
|
||||
if (!lastTime) lastTime = timestamp;
|
||||
const elapsed = timestamp - lastTime;
|
||||
|
||||
if (elapsed >= 2000) { // 每2秒切换一次
|
||||
// 移除上一个active类
|
||||
newsCards[currentIndex].classList.remove('active');
|
||||
|
||||
// 计算下一个索引
|
||||
currentIndex = (currentIndex + 1) % newsCards.length;
|
||||
|
||||
// 添加active类
|
||||
newsCards[currentIndex].classList.add('active');
|
||||
|
||||
lastTime = timestamp;
|
||||
}
|
||||
// 继续动画
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
// 开始动画
|
||||
requestAnimationFrame(animate);
|
||||
// 停止监听
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.3 // 露出30%时触发
|
||||
});
|
||||
if (dynamicsNews) {
|
||||
observer.observe(dynamicsNews);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
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 +139,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 +166,124 @@ 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>
|
||||
<div className="ringarrow">
|
||||
<img src={require("../img/upRight.png")} width={16}/>
|
||||
<img src={require("../img/downRight.png")} width={16}/>
|
||||
</div>
|
||||
</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>
|
||||
<div className="ringarrow">
|
||||
<img src={require("../img/upRight.png")} width={16}/>
|
||||
<img src={require("../img/downRight.png")} width={16}/>
|
||||
</div>
|
||||
</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'id={`card1`}>
|
||||
<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' id="dynamicsNews">
|
||||
{ newsList.map((i, k) => {
|
||||
return k < 3 ?
|
||||
<li className={`news-card-hover`} >
|
||||
<div className="newinfos">
|
||||
<img src={require(`../img/new${k+1}.png`)} alt="" width={30}/>
|
||||
<Link to={`/competitions/2026/information/${ i.id }`} className='newName'>
|
||||
<span>{ i.name }</span>
|
||||
<img src={require(`../img/bluearrow.png`)} width={13} className="ml5"/>
|
||||
</Link>
|
||||
<p className="task-hide newSummary">{i.summary}</p>
|
||||
</div>
|
||||
<img src={require(`../img/newbanner${k+1}.png`)} className="bannerNew" width={256}/>
|
||||
</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='forsearch' href="/competitions/2026/information">探索更多动态<i className="iconfont icon-jiantou_xiangyou font12 ml8" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='part'>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>partner<img src={Right} width={36}/></p>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,74 @@
|
|||
.part{
|
||||
text-align: center;
|
||||
width: 1600px;
|
||||
margin:auto;
|
||||
}
|
||||
.task-hide{
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.task-hide-2{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.homeMaintitle{
|
||||
font-size: 48px;
|
||||
position: relative;
|
||||
margin: 0px auto;
|
||||
width: fit-content;
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
margin-top: -15px;
|
||||
font-family: DouyinSansBold;
|
||||
img{
|
||||
width: 12px;
|
||||
position: absolute;
|
||||
&:first-child{
|
||||
left: -12px;
|
||||
}
|
||||
&:last-child{
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
span{
|
||||
margin:0px 16px;
|
||||
font-weight:700;
|
||||
color:#091221;
|
||||
font-size:48px;
|
||||
position: relative;
|
||||
&:nth-child(2)::after{
|
||||
content: "";
|
||||
left: -21px;
|
||||
top: 24px;
|
||||
position: absolute;
|
||||
width:10px;
|
||||
height:10px;
|
||||
background:#091221;
|
||||
border-radius:2px;
|
||||
}
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
.homeSubtitle{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
font-family: alibabaPuhuiM;
|
||||
color: rgba(9, 18, 33, 0.09);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 90px;
|
||||
img{
|
||||
margin-top: -4px;
|
||||
&:first-child{
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page.headpage {
|
||||
display: flex;
|
||||
|
|
@ -18,61 +86,6 @@
|
|||
// object-fit: cover;
|
||||
}
|
||||
}
|
||||
.homeMaintitle{
|
||||
font-size: 48px;
|
||||
position: relative;
|
||||
margin: 0px auto;
|
||||
width: fit-content;
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
margin-top: -15px;
|
||||
font-family: DouyinSansBold;
|
||||
img{
|
||||
width: 12px;
|
||||
position: absolute;
|
||||
&:first-child{
|
||||
left: -12px;
|
||||
}
|
||||
&:last-child{
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
.homeSubtitle{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
font-family: alibabaPuhuiM;
|
||||
color: rgba(9, 18, 33, 0.09);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 90px;
|
||||
img{
|
||||
margin-top: -4px;
|
||||
&:first-child{
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeDesc{
|
||||
line-height: 40px;
|
||||
letter-spacing: 1px;
|
||||
|
|
@ -83,21 +96,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 +180,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 +232,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 +271,297 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.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 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;
|
||||
height: 200px;
|
||||
border-radius:30px;
|
||||
// background:linear-gradient(52.29deg,#ffffff 0%,#ffffff 68.54%,rgba(255, 255, 255, 0.45) 97.43%);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
padding: 3px;
|
||||
&::before{
|
||||
z-index: -2;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: radial-gradient(circle at 20% 40%, #3b4379, transparent);
|
||||
animation: buttonBorderSpin 7s linear infinite forwards;
|
||||
}
|
||||
.trackContent{
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
color:#ffffff;
|
||||
font-size:15px;
|
||||
height: 100%;
|
||||
border-radius:30px;
|
||||
padding:30px;
|
||||
position:relative;
|
||||
}
|
||||
.trackNum{
|
||||
font-weight:700;
|
||||
color:#ffffff;
|
||||
font-size:24px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
.ringarrow{
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url(../img/ring.png);
|
||||
background-size: 100% 100%;
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
&:hover{
|
||||
img:first-child{
|
||||
opacity: 0;
|
||||
}
|
||||
img:last-child{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
img{
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
opacity: 1;
|
||||
transition: 0.5s;
|
||||
&:last-child{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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-color:#0d2097 ;
|
||||
background-image: url(../img/dir1.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
&:nth-child(2){
|
||||
.trackContent{
|
||||
background-color: #040E29;
|
||||
background-image: url(../img/dir2.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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 +582,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 +618,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,129 +626,174 @@
|
|||
}
|
||||
.dynamics{
|
||||
display: flex;
|
||||
margin-top:60px;
|
||||
margin-top:82px;
|
||||
margin-bottom: 45px;
|
||||
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 ;
|
||||
display: flex;
|
||||
padding:30px 0px;
|
||||
border-bottom:2px solid rgba(9, 18, 33, 0.06);
|
||||
position: relative;
|
||||
&.active{
|
||||
&::after{
|
||||
animation: lightWidth 1.2s linear;
|
||||
}
|
||||
.bannerNew{
|
||||
animation: shake 1s;
|
||||
}
|
||||
}
|
||||
.under{
|
||||
&::after{
|
||||
transition: 1s ease-in-out;
|
||||
transition-delay: 0.1s;
|
||||
height: 2px;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
bottom: -1px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
background:linear-gradient(89.7deg,#447af9 0%,#5f5bf6 103.09%);
|
||||
}
|
||||
.newinfos{
|
||||
flex: 1;
|
||||
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;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
width: 0;
|
||||
margin-right: 50px;
|
||||
}
|
||||
.newSummary{
|
||||
color:#091221;
|
||||
font-size:16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.newName{
|
||||
font-weight:700;
|
||||
color:#091221;
|
||||
font-size:18px;
|
||||
margin-top: 13px;
|
||||
cursor: pointer;
|
||||
text-align: justify;
|
||||
img{
|
||||
opacity: 0;
|
||||
transition: 0.8s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
&:hover{
|
||||
color: #0d2097;
|
||||
img{
|
||||
margin-bottom: 2px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .applicationBtn{
|
||||
opacity: 1;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.forsearch{
|
||||
font-weight:500;
|
||||
color:#091221;
|
||||
font-size:18px;
|
||||
text-align:right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
i{
|
||||
transition: 0.3s;
|
||||
}
|
||||
&:hover{
|
||||
color:#0d2097;
|
||||
i{
|
||||
transform: translateX(10px);
|
||||
}
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.partner-content {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 80px;
|
||||
.partner-type {
|
||||
width:fit-content;
|
||||
background:url(../img/parter1.png) no-repeat 100% 100%;
|
||||
border-radius:26px;
|
||||
margin-bottom: 38px;
|
||||
padding:54px 0px 54px 30px;
|
||||
&:nth-child(2){
|
||||
background:url(../img/parter2.png) no-repeat 100% 100%;
|
||||
}
|
||||
.type-title {
|
||||
line-height: 28px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #151313;
|
||||
letter-spacing: 5px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 30px;
|
||||
text-align: left;
|
||||
span{
|
||||
position: relative;
|
||||
&::before{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
height: 2px;
|
||||
width: 32px;
|
||||
content: "";
|
||||
bottom:-7px;
|
||||
background: linear-gradient( 90deg, #5374B4 0%, #853CB8 100%);
|
||||
}
|
||||
}
|
||||
font-family:Alibaba PuHuiTi;
|
||||
font-weight:700;
|
||||
color:#091221;
|
||||
font-size:26px;
|
||||
}
|
||||
.type-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
a{
|
||||
flex:5 1;
|
||||
max-width: 25%;
|
||||
}
|
||||
div {
|
||||
margin-right: 42px;
|
||||
padding: 6px;
|
||||
margin-right: 22px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color:#ffffff;
|
||||
border-radius:4px;
|
||||
box-shadow:0px 0px 6px rgba(28, 48, 175, 0.03);
|
||||
height: 83px;
|
||||
width: 163px;
|
||||
line-height: 1;
|
||||
border-radius:16px;
|
||||
width: 290px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 35px;
|
||||
border:1px solid #fff;
|
||||
margin-bottom: 25px;
|
||||
&:hover{
|
||||
border-color: #6233DE;
|
||||
// border-color: #6233DE;
|
||||
}
|
||||
}
|
||||
a{
|
||||
&:nth-child(6n) div{
|
||||
&:nth-child(5n) div{
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-height: 55px;
|
||||
max-width: 130px;
|
||||
max-height: 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -560,13 +852,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 +860,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;
|
||||
|
|
@ -631,8 +908,49 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
/* 动画效果 */
|
||||
@keyframes show {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes buttonBorderSpin {
|
||||
to{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10px); /* 回到原位 */
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0); /* 回到原位 */
|
||||
}
|
||||
}
|
||||
@keyframes lightWidth{
|
||||
0% {
|
||||
width: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
95% {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
100%{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:1600px) {
|
||||
.part{
|
||||
width: 1400px;
|
||||
}
|
||||
.page.headpage .partner-content .partner-type .type-content a{
|
||||
flex:4 1;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 304 KiB After Width: | Height: | Size: 167 KiB |
|
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 |
Binary file not shown.
|
After Width: | Height: | Size: 619 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 634 KiB |
|
Before Width: | Height: | Size: 328 B After Width: | Height: | Size: 328 B |
|
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: 151 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 633 B |
Binary file not shown.
|
After Width: | Height: | Size: 688 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 472 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 936 B |
|
Before Width: | Height: | Size: 928 B After Width: | Height: | Size: 928 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 710 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 982 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 B |
|
|
@ -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 = ['与会嘉宾', '院士嘉宾']
|
||||
|
|
@ -3,12 +3,14 @@ import { Spin, Divider , Input } from 'antd';
|
|||
import { useState , useEffect } from 'react';
|
||||
import { information } from '../info';
|
||||
import { getDocList } from '../api'
|
||||
import empty from '../img/empty.png';
|
||||
// import empty from '../img/empty.png';
|
||||
import "../home/index.less";
|
||||
import { useModel , Link } from 'umi';
|
||||
import Left from '../img/left.png';
|
||||
import Right from '../img/right.png';
|
||||
import SubBanner from '../img/subBanner.png';
|
||||
import Search from '../img/search.png';
|
||||
import Infoleftbanner from '../img/infoleftbanner.png';
|
||||
// import SubBanner from '../img/subBanner.png';
|
||||
import Search from '../img/infosearch.png';
|
||||
import { throttle } from '@/utils/mettingUtil';
|
||||
|
||||
function Information() {
|
||||
|
|
@ -20,9 +22,27 @@ function Information() {
|
|||
const [ showAnchor , setShowAnchor ] = useState(false);
|
||||
const[ title ,setTitle] = useState(undefined);
|
||||
const[ searchTitle ,setSearchTitle] = useState(undefined);
|
||||
|
||||
const [ showNews , setShowNews] = useState(false);
|
||||
|
||||
useEffect(()=>{
|
||||
if (location.pathname === '/competitions/2024/information') {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
setShowNews(true);
|
||||
} else {
|
||||
setShowNews(false);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.3 //露出 30% 时触发
|
||||
});
|
||||
const element = document.getElementById("comparenews"); // 获取你的元素
|
||||
if (element) {
|
||||
observer.observe(element);
|
||||
}
|
||||
},[])
|
||||
useEffect(()=>{
|
||||
if (location.pathname === '/competitions/2026/information') {
|
||||
window.addEventListener('scroll', throttleHandleScroll);
|
||||
return ComponentWillUnmount;
|
||||
} else {
|
||||
|
|
@ -108,40 +128,111 @@ function Information() {
|
|||
}
|
||||
|
||||
return <div className="information">
|
||||
{/* {
|
||||
information.category &&
|
||||
<div className="tab">
|
||||
<div className='tabPanel'>
|
||||
{
|
||||
information.category.map((e, k) => {
|
||||
return <div key={ k } onClick={() => { scrollToAnchor(e.anchor);setTabKey(k) }} className={`tab-item ${k===tabKey?"active":""}`}>{ e.title }</div>
|
||||
})
|
||||
}
|
||||
<Input
|
||||
className="searchInput"
|
||||
value={ title }
|
||||
// onBlur={ (e) => { setTitle(e.target.value) } }
|
||||
onChange={ (e) => { setTitle(e.target.value) } }
|
||||
onPressEnter={()=>{setSearchTitle(title)}}
|
||||
placeholder="请搜索文章标题关键词"
|
||||
suffix={<img src={Search} width={16}/>}
|
||||
style={{width:"213px"}}
|
||||
/>
|
||||
</div>
|
||||
<div className="informationBanner">
|
||||
<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="tabPanel">
|
||||
<Input
|
||||
className="searchInput"
|
||||
value={ title }
|
||||
// onBlur={ (e) => { setTitle(e.target.value) } }
|
||||
onChange={ (e) => { setTitle(e.target.value) } }
|
||||
onPressEnter={()=>{setSearchTitle(title)}}
|
||||
placeholder="请搜索文章标题关键词"
|
||||
suffix={<img src={Search} width={16}/>}
|
||||
/>
|
||||
</div>
|
||||
<div className="part">
|
||||
<img src={Infoleftbanner} width={800} style={{marginRight:"90px"}}/>
|
||||
</div>
|
||||
} */}
|
||||
<div className="tabPanel">
|
||||
<Input
|
||||
className="searchInput"
|
||||
value={ title }
|
||||
// onBlur={ (e) => { setTitle(e.target.value) } }
|
||||
onChange={ (e) => { setTitle(e.target.value) } }
|
||||
onPressEnter={()=>{setSearchTitle(title)}}
|
||||
placeholder="请搜索文章标题关键词"
|
||||
suffix={<img src={Search} width={16}/>}
|
||||
style={{width:"213px"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 赛事公告模块 */}
|
||||
<div className="announcement-section">
|
||||
<div className="part announcement-container">
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>four tracks<img src={Right} width={36}/></p>
|
||||
<p className='homeMaintitle title-animate'><span>赛事公告</span></p>
|
||||
{
|
||||
information.category.map((e) => {
|
||||
return e.anchor === "forum" && <div className="content part" key={ e.anchor }>
|
||||
<div className="notice" id={ e.anchor }></div>
|
||||
<div className="content-wrapper">
|
||||
{
|
||||
informationList[e.anchor] && informationList[e.anchor].length > 0 ? informationList[e.anchor].map(( e, k ) => {
|
||||
return k<3?
|
||||
<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>
|
||||
<p className="card-date task-hide">{ e.summary }</p>
|
||||
</div>
|
||||
</div>
|
||||
:<div className="content-item" key={ k }>
|
||||
<div className="item-right">
|
||||
<Link to={ `/competitions/2024/information/${ e.id }` } className="item-title task-hide">{ e.name }</Link>
|
||||
<p className="item-desc task-hide">{ e.summary }</p>
|
||||
</div>
|
||||
</div>
|
||||
}):
|
||||
""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{/* 赛事解读 */}
|
||||
<div className={`explainNews`}>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>Interpretation<img src={Right} width={36}/></p>
|
||||
<p className='homeMaintitle title-animate'><span>赛事解读</span></p>
|
||||
{
|
||||
information.category.map((e) => {
|
||||
return e.anchor === "guide" && <div className="content part" key={ e.anchor }>
|
||||
<div className="anchor" id={ e.anchor }></div>
|
||||
<div className="content-wrapper">
|
||||
{
|
||||
informationList[e.anchor] && informationList[e.anchor].length > 0 ? informationList[e.anchor].map(( e, k ) => {
|
||||
return <div className="content-item" key={ k }>
|
||||
<div className="item-right">
|
||||
<Link to={ `/competitions/2024/information/${ e.id }` } className="item-title task-hide">{ e.name }</Link>
|
||||
<p className="item-desc task-hide">{ e.summary }</p>
|
||||
</div>
|
||||
</div>
|
||||
}):
|
||||
""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
{/* 赛事新闻 */}
|
||||
<div className={`part comparenews ${showNews?"active":""}`} id="comparenews">
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>Interpretation<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 }>
|
||||
<div className="anchor" id={ e.anchor }></div>
|
||||
<div className="content-wrapper">
|
||||
{
|
||||
informationList[e.anchor] && informationList[e.anchor].length > 0 ? informationList[e.anchor].map(( e, k ) => {
|
||||
return <div className="content-item" key={ k }>
|
||||
<div className="item-right">
|
||||
<Link to={ `/competitions/2024/information/${ e.id }` } className="item-title task-hide">{ e.name }</Link>
|
||||
<p className="item-desc task-hide">{ e.summary }</p>
|
||||
</div>
|
||||
</div>
|
||||
}):
|
||||
""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
information.category && showAnchor &&
|
||||
<div className='anchorPart' style={{top:362,left:(document.documentElement.clientWidth-1200)/2-125}}>
|
||||
|
|
@ -152,40 +243,31 @@ function Information() {
|
|||
}
|
||||
</div>
|
||||
}
|
||||
<Spin spinning={isSpin}>
|
||||
{/* <Spin spinning={isSpin}>
|
||||
{
|
||||
information.category.map((e) => {
|
||||
return <div className="content" key={ e.anchor }>
|
||||
return <div className="content part" key={ e.anchor }>
|
||||
<div className="anchor" id={ e.anchor }></div>
|
||||
{/* <div className="content-title">
|
||||
<p>{ e.title }</p>
|
||||
<p>{ e.eng }</p>
|
||||
</div> */}
|
||||
<div style={{textAlign:"center",paddingTop:18,paddingBottom:50}}>
|
||||
<p className='homeMaintitle'><img src={Left} /><span>{ e.title }</span><img src={Right} /></p>
|
||||
<p className="homeSubtitle"><span>{ e.eng.toUpperCase() }</span></p>
|
||||
</div>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>{e.eng.toUpperCase()}<img src={Right} width={36}/></p>
|
||||
<p className='homeMaintitle title-animate'><span>{ e.title }</span></p>
|
||||
<div className="content-wrapper">
|
||||
{
|
||||
informationList[e.anchor] && informationList[e.anchor].length > 0 ? informationList[e.anchor].map(( e, k ) => {
|
||||
return <div className="content-item" key={ k }>
|
||||
<div className="item-left">{ e.date2 }</div>
|
||||
<div className="item-right">
|
||||
<p className="time">{ e.date1 }</p>
|
||||
<Divider style={{ color: 'rgba(9, 37, 77, 0.1)', margin: '0px' }}/>
|
||||
<Link to={ `/competitions/2024/information/${ e.id }` } className="item-title task-hide">{ e.name }</Link>
|
||||
<p className="item-desc task-hide-2">{ e.summary }</p>
|
||||
<p className="item-desc task-hide">{ e.summary }</p>
|
||||
<a href={ `/competitions/2024/information/${ e.id }` } className="read-more">阅读全文 <span>→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
}):
|
||||
<img className="empty" src={ empty } alt="" />
|
||||
""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</Spin>
|
||||
</Spin> */}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
.information {
|
||||
.informationBanner{
|
||||
background-image: url(../img/infoBanner.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.anchorPart{
|
||||
width: 115px;
|
||||
background-color: #fff;
|
||||
|
|
@ -32,27 +36,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.homeMaintitle{
|
||||
font-size: 48px;
|
||||
position: relative;
|
||||
margin: 0px auto;
|
||||
width: 224px;
|
||||
img{
|
||||
width: 12px;
|
||||
position: absolute;
|
||||
&:first-child{
|
||||
left: -12px;
|
||||
}
|
||||
&:last-child{
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
span{
|
||||
margin:0px 22px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
.ant-spin-container {
|
||||
background: url('../img/back.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -86,54 +69,200 @@
|
|||
background-color:#ffffff;
|
||||
}
|
||||
.tabPanel{
|
||||
width: 1200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin:35px auto 0px;
|
||||
margin:10px auto 0px;
|
||||
padding:18px 0px 46px;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
.tab-item {
|
||||
margin: 0 69px;
|
||||
cursor: pointer;
|
||||
height:62px;
|
||||
line-height:62px;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
&.active::after{
|
||||
position: absolute;
|
||||
width: 67px;
|
||||
height: 2px;
|
||||
background: linear-gradient( 103deg, #5950F3 0%, #6B16CA 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
content: "";
|
||||
left: 50%;
|
||||
margin-left: -33px;
|
||||
bottom: 0px;
|
||||
}
|
||||
&.active,&:hover{
|
||||
color: #6233DE;
|
||||
width: 660px;
|
||||
background-image: url(../img/searchBack.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.searchInput{
|
||||
margin:0px auto;
|
||||
width:660px;
|
||||
height:55px;
|
||||
background:#fff;
|
||||
border:1px solid transparent;
|
||||
border-radius:28px;
|
||||
.ant-input{
|
||||
background-color: transparent;
|
||||
color:#2b3369;
|
||||
font-size:15px;
|
||||
margin:0px 29px;
|
||||
}
|
||||
}
|
||||
.searchInput{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
background-color: #fff;
|
||||
&:hover,&.ant-input-affix-wrapper:focus{
|
||||
border-color: #6233DE!important;
|
||||
box-shadow: 0 0 0 2px rgba(98, 51, 222, 0.1)!important;
|
||||
}
|
||||
.ant-input-suffix{
|
||||
width:39px;
|
||||
height:39px;
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background:#091221;
|
||||
border-radius:50%;
|
||||
}
|
||||
}
|
||||
.anchor {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
}
|
||||
|
||||
// 赛事公告模块样式
|
||||
.announcement-section {
|
||||
width: 100%;
|
||||
padding: 60px 0px 40px;
|
||||
background-image: url(../img/gameStatus.png);
|
||||
background-size: 100% 100%;
|
||||
font-family: 'Douyin Sans';
|
||||
.announcement-container {
|
||||
.announcements{
|
||||
display: flex;
|
||||
margin-top: 53px;
|
||||
}
|
||||
.announcement-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #091221;
|
||||
margin: 0 0 40px 0;
|
||||
}
|
||||
|
||||
.announcement-card {
|
||||
width: 31%;
|
||||
margin-right: 30px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
&:nth-child(3){
|
||||
margin-right: 0px;
|
||||
}
|
||||
.annouceImg{
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
padding:30px 10px;
|
||||
position: relative;
|
||||
font-family: alibabaPuhuiM;
|
||||
.card-title {
|
||||
font-weight:500;
|
||||
color:#091221;
|
||||
font-size:20px;
|
||||
text-align: left;
|
||||
display: block;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.card-date {
|
||||
font-size: 16px;
|
||||
color: #091221;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-arrow {
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 24px;
|
||||
color: #0D2097;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.card-banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 270px;
|
||||
overflow: hidden;
|
||||
|
||||
.banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px 35px;
|
||||
background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
|
||||
|
||||
.banner-text {
|
||||
font-family: alibabaPuhuiM;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.card-title{
|
||||
color: #0d2097;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 赛事解读
|
||||
.explainNews{
|
||||
background-image: url(../img/explain.png);
|
||||
background-size: 100% 100%;
|
||||
.content{
|
||||
background-color: #fff;
|
||||
border-radius:30px;
|
||||
padding:70px 0px;
|
||||
margin-top: 45px;
|
||||
}
|
||||
.content-item{
|
||||
background-color: rgba(239, 243, 255, 0.7);
|
||||
border-radius:24px;
|
||||
border:none!important;
|
||||
margin:0px auto 30px!important;
|
||||
padding: 0px 35px;
|
||||
box-sizing: border-box;
|
||||
width: 45.5%!important;
|
||||
&:nth-child(2n){
|
||||
margin-left: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 赛事新闻
|
||||
.comparenews{
|
||||
background-image: url(../img/news.png);
|
||||
background-size: 100% 100%;
|
||||
background-position-y: 60px;
|
||||
transition: 1s;
|
||||
&.active{
|
||||
width: 100%;
|
||||
background-position-y: 0px;
|
||||
}
|
||||
.content{
|
||||
background-color: #fff;
|
||||
border-radius:30px;
|
||||
padding:30px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 1200px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
padding:50px 0px;
|
||||
text-align: left;
|
||||
.content-title {
|
||||
width: 531px;
|
||||
height: 157px;
|
||||
|
|
@ -157,9 +286,18 @@
|
|||
}
|
||||
}
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.content-item {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
width: 50%;
|
||||
padding-right: 40px;
|
||||
border-bottom: 1px dashed rgba(9, 18, 33, 0.15);
|
||||
&:nth-child(2n){
|
||||
padding-left: 40px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.item-left {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 700;
|
||||
|
|
@ -170,6 +308,7 @@
|
|||
}
|
||||
.item-right {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
.time {
|
||||
color: #5F6577;
|
||||
font-size: 14px;
|
||||
|
|
@ -190,7 +329,6 @@
|
|||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-top: 20px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.read-more {
|
||||
float: right;
|
||||
|
|
@ -258,23 +396,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.homeSubtitle{
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
span{
|
||||
font-size: 16px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
background: -webkit-linear-gradient(76deg, rgba(24,163,168,0.77) 0%, #2E89FF 51%, rgba(158,3,127,0.77) 100%);
|
||||
background: linear-gradient(76deg, rgba(24,163,168,0.77) 0%, #2E89FF 51%, rgba(158,3,127,0.77) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 针对WebKit浏览器 */
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
letter-spacing: 2px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +1,50 @@
|
|||
import './index.less'
|
||||
import { Spin } from 'antd';
|
||||
import { Spin , Collapse } from 'antd';
|
||||
import React,{ useState , useEffect } from 'react';
|
||||
import MemberItem from '../memberitem'
|
||||
import Left from '../img/left.png';
|
||||
import Right from '../img/right.png';
|
||||
import "../home/index.less";
|
||||
import { getOrganization , getPartnerList , getDocList , getDocDetail } from '../api.js';
|
||||
import { hidenMemberType } from '../info';
|
||||
import { Base64 } from 'js-base64';
|
||||
import RenderHtml from '@/components/RenderHtml'
|
||||
import orz2 from '../img/orz2.png';
|
||||
import Logo from '../img/logo.png';
|
||||
import Team from '../img/team.png';
|
||||
import Left from '../img/left.png';
|
||||
import Right from '../img/right.png';
|
||||
const { Panel } = Collapse;
|
||||
|
||||
function Organization() {
|
||||
const [ isSpin , setIsSpin ] = useState(false);
|
||||
const [ organization, setOrganization ] = useState([])
|
||||
const [ partner, setPartner ] = useState([]);
|
||||
// const [ organization, setOrganization ] = useState([])
|
||||
// const [ partner, setPartner ] = useState([]);
|
||||
const [ orz , setOrz ] = useState([]);
|
||||
const [activeKey, setActiveKey] = useState(["1"]);
|
||||
|
||||
useEffect(()=>{
|
||||
getList();
|
||||
getPartner();
|
||||
// getList();
|
||||
// getPartner();
|
||||
Init();
|
||||
},[])
|
||||
|
||||
const getPartner = () => {
|
||||
getPartnerList().then(res => {
|
||||
let rows = res?.rows.length > 0 ? res?.rows.filter(i=>i.typeName.includes("高校")):[];
|
||||
setPartner(rows);
|
||||
}).catch(console.error())
|
||||
}
|
||||
// const getPartner = () => {
|
||||
// getPartnerList().then(res => {
|
||||
// let rows = res?.rows.length > 0 ? res?.rows.filter(i=>i.typeName.includes("高校")):[];
|
||||
// setPartner(rows);
|
||||
// }).catch(console.error())
|
||||
// }
|
||||
|
||||
const getList = () => {
|
||||
setIsSpin(true);
|
||||
getOrganization().then(res => {
|
||||
let rows = res?.rows;
|
||||
rows = rows.map(i=>{
|
||||
let members= i.zoneMemberList && i.zoneMemberList.length>0 ? i.zoneMemberList.filter(e=>e.memberLevel !== "主席"):i.zoneMemberList;
|
||||
return {...i,unPresident:members.length>0?members.map(e=>{return e.name}):[]}
|
||||
})
|
||||
setOrganization(rows);
|
||||
setIsSpin(false);
|
||||
})
|
||||
}
|
||||
// const getList = () => {
|
||||
// setIsSpin(true);
|
||||
// getOrganization().then(res => {
|
||||
// let rows = res?.rows;
|
||||
// rows = rows.map(i=>{
|
||||
// let members= i.zoneMemberList && i.zoneMemberList.length>0 ? i.zoneMemberList.filter(e=>e.memberLevel !== "主席"):i.zoneMemberList;
|
||||
// return {...i,unPresident:members.length>0?members.map(e=>{return e.name}):[]}
|
||||
// })
|
||||
// setOrganization(rows);
|
||||
// setIsSpin(false);
|
||||
// })
|
||||
// }
|
||||
|
||||
const Init=()=>{
|
||||
getDocList(658).then(res => {
|
||||
|
|
@ -67,50 +69,16 @@ function Organization() {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
return <div className="organization">
|
||||
<div className='orzLogo'>
|
||||
<img src={Logo} alt="" height={84}/>
|
||||
<div className='orzDesc'>
|
||||
<img src={orz2} alt="" width={138}/>
|
||||
<div className='descCon'>
|
||||
<img src={Team} width={33}/>CCF开源发展委员会是一个致力于推动开源文化、技术、教育和产业发展的专业组织。重点聚焦共同打造开源、开放、中立的产学研协同开源创新服务平台，探索建立CCF开源项目孵化机制，培育原始开源创新项目，依托CCF联接科教资源、产业资源和社会资源等，形成产、教、研联动的开源创新模式，推动CCF开源品牌建设和开源社区运营，为CCF会员乃至全球开源创新实践者提供高水平的开源创新服务，助力我国开源生态建设的发展。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className='homeMaintitle' style={{margin:"50px auto 0px"}}><img src={Left} /><span>组织架构</span><img src={Right} /></p>
|
||||
<p className="homeSubtitle"><span>ORGANIZARIONAL STRUCTURE</span></p>
|
||||
<p className="homeSubtitle"><img src={Left} width={16}/>ORGANIZARIONAL STRUCTURE<img src={Right} width={36}/></p>
|
||||
<p className='homeMaintitle title-animate'><span>组织架构</span><span>四个文字</span></p>
|
||||
<Spin spinning={isSpin}>
|
||||
{/* {
|
||||
organization && organization.length > 0 && organization.map((i, k) => {
|
||||
if (!hidenMemberType.includes(i.typeName)) {
|
||||
return <div className="module" key={ k }>
|
||||
<p className='homeMaintitle'><img src={Left} /><span>{ i.typeName }</span><img src={Right} /></p>
|
||||
<p className="homeSubtitle"><span>{subtitle[k]}</span></p>
|
||||
<p className="module-desc">{ i.typeIntroduction }</p>
|
||||
{
|
||||
i.zoneMemberList && i.zoneMemberList.length > 0 && <div className="module-content">
|
||||
{
|
||||
i.zoneMemberList.map(( e, subK ) => {
|
||||
return e.memberLevel === "主席" && <MemberItem key={ subK } className={`module-item`} data={ e } ></MemberItem>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{
|
||||
i.unPresident && i.unPresident.length>0 && <p className='membersSub'><img src={Team} width={33} />{i.typeName}委员：{ i.unPresident.join("、")}</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
})
|
||||
} */}
|
||||
{
|
||||
orz && orz.length > 0 && orz.map((i,k)=>{
|
||||
let detail = i.detail;
|
||||
return(
|
||||
<>
|
||||
<p className='orzTitle'><img src={Team} width={33} style={{marginRight:13}}/>{detail.name}</p>
|
||||
<div className="module" key={ k }>
|
||||
<p className='orzTitle'>{detail.name}</p>
|
||||
{
|
||||
detail.content ?
|
||||
<RenderHtml className="informations_detail imageLayerParent" value={ Base64.decode(detail.content) } url={ location } />
|
||||
|
|
@ -118,12 +86,30 @@ function Organization() {
|
|||
""
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
})
|
||||
}
|
||||
} */}
|
||||
<Collapse className="orzCollapse" bordered={false} activeKey={activeKey} style={{backgroundColor:"transparent",border:"none"}}>
|
||||
{
|
||||
orz && orz.length>0 && orz.map((i,k)=>{
|
||||
let detail = i.detail;
|
||||
return(
|
||||
<Panel showArrow={false} key={k+1}
|
||||
header={<div onMouseEnter={() => setActiveKey([k+1])}>{detail.name}</div>}
|
||||
>
|
||||
{
|
||||
detail.content ?
|
||||
<RenderHtml className="informations_detail imageLayerParent" value={ Base64.decode(detail.content) } url={ location } />
|
||||
:
|
||||
""
|
||||
}
|
||||
</Panel>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Collapse>
|
||||
</Spin>
|
||||
{
|
||||
{/* {
|
||||
partner?.length > 0 ?
|
||||
<div style={{textAlign:"center",paddingTop:68,paddingBottom:50}}>
|
||||
<p className='homeMaintitle' style={{width:224,margin:"0px auto"}}><img src={Left} /><span>合作高校</span><img src={Right} /></p>
|
||||
|
|
@ -142,7 +128,7 @@ function Organization() {
|
|||
</div>
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
} */}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,45 +7,50 @@
|
|||
min-height: 100vh;
|
||||
position: relative;
|
||||
padding-bottom: 60px;
|
||||
background-image: url(../img/orzback.png);
|
||||
background-size: 100% 100%;
|
||||
.orzCollapse{
|
||||
margin-top: 60px;
|
||||
.ant-collapse-item{
|
||||
margin-bottom: 30px;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
&.ant-collapse-item-active{
|
||||
background-image: url(../img/orzitem.png);
|
||||
background-size: 100% 100%;
|
||||
.markdown-body,.ant-collapse-header{
|
||||
color: #fff;
|
||||
}
|
||||
.ant-collapse-content-box{
|
||||
padding:26px 40px;
|
||||
position: relative;
|
||||
&::before{
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
right: 40px;
|
||||
height: 1px;
|
||||
background-color: #fff;
|
||||
content: "";
|
||||
top: 0px;
|
||||
opacity: 0.49;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-collapse-header{
|
||||
font-family:Douyin Sans;
|
||||
font-weight:700;
|
||||
color:#091221;
|
||||
font-size:20px;
|
||||
padding:0px 40px!important;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
}
|
||||
.ant-spin-nested-loading {
|
||||
width: 1200px;
|
||||
}
|
||||
.homeMaintitle{
|
||||
font-size: 48px;
|
||||
position: relative;
|
||||
margin-bottom: 0px;
|
||||
img{
|
||||
width: 12px;
|
||||
position: absolute;
|
||||
&:first-child{
|
||||
left: -12px;
|
||||
}
|
||||
&:last-child{
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
span{
|
||||
margin:0px 22px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
.homeSubtitle{
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
span{
|
||||
font-size: 16px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
background: -webkit-linear-gradient(76deg, rgba(24,163,168,0.77) 0%, #2E89FF 51%, rgba(158,3,127,0.77) 100%);
|
||||
background: linear-gradient(76deg, rgba(24,163,168,0.77) 0%, #2E89FF 51%, rgba(158,3,127,0.77) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 针对WebKit浏览器 */
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
letter-spacing: 2px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.back-img {
|
||||
width: 100%;
|
||||
img{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,539 @@
|
|||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue