forked from Gitlink/forgeplus-react
合并代码+报名页添加banner图
This commit is contained in:
谢思
commit
a6ed2ca451
|
|
@ -4,6 +4,7 @@ import {getUserApplyInfo, applyGlcc} from '../api';
|
|||
import axios from 'axios';
|
||||
import TextArea from 'antd/lib/input/TextArea';
|
||||
import { httpUrl } from '../fetch';
|
||||
import banner from "../img/banner.png";
|
||||
import './index.scss';
|
||||
const Option = Select.Option;
|
||||
function Apply(props) {
|
||||
|
|
@ -110,6 +111,7 @@ function Apply(props) {
|
|||
}
|
||||
return(
|
||||
<div className="glcc_apply">
|
||||
<img className="glcc-banner" src={banner}></img>
|
||||
<div className='apply'>
|
||||
<Breadcrumb className='pt20'>
|
||||
<Breadcrumb.Item><a href="/glcc">开源夏令营</a></Breadcrumb.Item>
|
||||
|
|
|
|||
|
|
@ -104,4 +104,7 @@
|
|||
&:hover{opacity: 0.8;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.glcc-banner {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ function Award() {
|
|||
<div className="glcc-content">
|
||||
<div className="award-item">
|
||||
<div className="award-tit">丰厚现金奖励</div>
|
||||
<div className="award-content">根据项目难度设置高、中、低三个阶梯课题，对应奖金为12000 元、9000 元和 6000 元</div>
|
||||
<div className="award-content">根据项目难度设置高、中、低三个阶梯课题，对应奖金为<span className="number">12000</span> 元、<span className="number">9000</span> 元和 <span className="number">6000</span> 元</div>
|
||||
<div className="award-line"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -59,4 +59,8 @@
|
|||
height: 3px;
|
||||
background-image: linear-gradient(90deg, #2135b9 0%, #e3a600 100%);
|
||||
}
|
||||
|
||||
.number{
|
||||
color: rgba(14, 85, 189, 1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,31 @@
|
|||
import React from "react";
|
||||
import Banner from "./banner";
|
||||
import { Link } from "react-router-dom";
|
||||
// import Banner from "./banner";
|
||||
import Lightspot from './lightspot';
|
||||
import TimerShaft from './timerShaft';
|
||||
import Award from "./award";
|
||||
import News from './news';
|
||||
import Partner from "./partner";
|
||||
import Contact from "./contact";
|
||||
|
||||
import banner from "../img/banner.png";
|
||||
import './index.scss';
|
||||
|
||||
export default () => {
|
||||
|
||||
return (
|
||||
<div className="glcc">
|
||||
<Banner />
|
||||
{/* <Banner /> */}
|
||||
<img className="glcc-banner" src={banner}></img>
|
||||
{/* <div > */}
|
||||
<Link className="apply-btn" to="/glcc/apply">
|
||||
<div className="apply-text">立即报名</div>
|
||||
<div className="apply-icon"><i className="font-14 iconfont icon-xiangyoujiantou "></i></div>
|
||||
</Link>
|
||||
{/* </div> */}
|
||||
<div className="introduce glcc-content">
|
||||
<div className="glcc-tit">活动简介</div>
|
||||
<div className="introduce-content">GitLink编程夏令营（GLCC），是在CCF中国计算机学会指导下，由CCF开源发展委员会（CCF ODC）举办的面向全国高校学生的暑期编程活动。活动将覆盖近千所高校，并联合各大开源基金会、开源企业、开源社区、开源专家，旨在鼓励青年学生通过参加真实的开源软件开发，提升自身技术能力，为开源社区输送优秀人才。为青年学生提供开放友好的交流平台，希望进一步推动国内开源社区的繁荣发展。</div>
|
||||
</div>
|
||||
<Lightspot />
|
||||
<TimerShaft />
|
||||
<Award />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,80 @@
|
|||
.glcc {
|
||||
position: relative;
|
||||
font-family: PingFang SC;
|
||||
background-image: linear-gradient(
|
||||
163.51deg,
|
||||
#eff3fe 0%,
|
||||
#ebeffb 9.63%,
|
||||
#f0f4ff 16.73%,
|
||||
#e8edfc 33.05%,
|
||||
#e5ecff 43.93%,
|
||||
#e3eaf6 72.41%,
|
||||
#cfe0ff 89.21%,
|
||||
#ffffff 94.79%,
|
||||
#ecf4ff 100%
|
||||
);
|
||||
|
||||
.ant-btn-primary{
|
||||
background-color: #466aff;
|
||||
border-color: #466aff;
|
||||
|
||||
&:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
position: absolute;
|
||||
top: 15vw;
|
||||
left: 18.8vw;
|
||||
width: 152px;
|
||||
height: 40px;
|
||||
background-color: #2e5bfe;
|
||||
border: 1px solid #466aff;
|
||||
color: #fff;
|
||||
padding-left: 18px;
|
||||
}
|
||||
.apply-text {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.apply-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 47px;
|
||||
height: 38px;
|
||||
background-color: #fff;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent #2e5bfe;
|
||||
border-width: 0 0 40px 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: #466aff;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.glcc-tit {
|
||||
text-align: center;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #1e1e1e;
|
||||
font-size: 38px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 50px !important;
|
||||
}
|
||||
|
||||
|
|
@ -18,19 +86,47 @@
|
|||
padding-top: 45px;
|
||||
}
|
||||
|
||||
// 1行省略号
|
||||
.ellipsis-1 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// 1行省略号
|
||||
.ellipsis-1 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// 2行省略号
|
||||
.ellipsis-2 {
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.glcc-banner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.introduce {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
background-image: linear-gradient(
|
||||
163.51deg,
|
||||
#e5ecff 0%,
|
||||
#e0e9ff 32.91%,
|
||||
#fbfcff 100%
|
||||
);
|
||||
background: url("../img/introduce-bg.png");
|
||||
box-shadow: 0 0 12px rgba(161, 186, 255, 0.6);
|
||||
background-size: 100% 100%;
|
||||
padding: 48px;
|
||||
.glcc-tit {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
.introduce-content {
|
||||
color: #202d40;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
import teacherImg from '../../img/teacher-img.png';
|
||||
// import lightspot1 from '../../img/lightspot1.png';
|
||||
// import lightspot2 from '../../img/lightspot2.png';
|
||||
import lightspot1 from '../../img/lightspot1.png';
|
||||
import lightspot2 from '../../img/lightspot2.png';
|
||||
import lightspot3 from '../../img/lightspot3.png';
|
||||
import lightspot4 from '../../img/lightspot4.png';
|
||||
|
||||
|
||||
import './index.scss';
|
||||
|
||||
|
|
@ -18,19 +21,40 @@ function Lightspot() {
|
|||
<div className="teacher-text">
|
||||
<h3 className="teacher-invite">有兴趣成为GLCC的导师吗？</h3>
|
||||
<div className="teacher-content">想要扩大项目知名度和影响力，为开源项目吸引新鲜血液，培养长期开发者。通过GitLink平台，与高校建立连接，指导开源新人传授他们的开源文化，享受开源的乐趣</div>
|
||||
<Button type="primary">立即报名</Button>
|
||||
<Button type="primary" href='/glcc/apply' className='applyBut'>立即报名</Button>
|
||||
</div>
|
||||
<img className="teacher-img" src={teacherImg}></img>
|
||||
</div>
|
||||
|
||||
<div className="info-student">
|
||||
<div className="info-item">
|
||||
<img className="info-item-img"></img>
|
||||
|
||||
<img className="info-item-img" src={lightspot1}></img>
|
||||
<h3 className="info-item-tit">汇聚行业顶尖开源项目</h3>
|
||||
<div className="info-item-content">平台汇聚华为、xiuos、鲲鹏、开源基金会、飞腾、浪潮等行业尖端开源项目，把握开源生态发展脉搏</div>
|
||||
</div>
|
||||
|
||||
<div className="info-item">
|
||||
<img className="info-item-img" src={lightspot2}></img>
|
||||
<h3 className="info-item-tit">汇聚行业顶尖开源项目</h3>
|
||||
<div className="info-item-content">平台汇聚华为、xiuos、鲲鹏、开源基金会、飞腾、浪潮等行业尖端开源项目，把握开源生态发展脉搏</div>
|
||||
</div>
|
||||
|
||||
<div className="info-item">
|
||||
<img className="info-item-img" src={lightspot3}></img>
|
||||
<h3 className="info-item-tit">汇聚行业顶尖开源项目</h3>
|
||||
<div className="info-item-content">平台汇聚华为、xiuos、鲲鹏、开源基金会、飞腾、浪潮等行业尖端开源项目，把握开源生态发展脉搏</div>
|
||||
</div>
|
||||
|
||||
<div className="info-item">
|
||||
<img className="info-item-img" src={lightspot4}></img>
|
||||
<h3 className="info-item-tit">汇聚行业顶尖开源项目</h3>
|
||||
<div className="info-item-content">平台汇聚华为、xiuos、鲲鹏、开源基金会、飞腾、浪潮等行业尖端开源项目，把握开源生态发展脉搏</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
.lightspot {
|
||||
background: url("../../img/lightspot-bg.png");
|
||||
background-size: 100% 100%;
|
||||
height: 55.26vw;
|
||||
min-height: 1061px;
|
||||
height: 44.6875vw;
|
||||
min-height: 858px;
|
||||
|
||||
.info-teacher {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.glcc-content{
|
||||
padding-top:55px;
|
||||
}
|
||||
.teacher-text{
|
||||
margin-right: 2.84%;
|
||||
.info-teacher {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.teacher-text {
|
||||
margin-right: 2.84%;
|
||||
.applyBut, .applyBut:hover{color: white !important;}
|
||||
}
|
||||
.teacher-invite {
|
||||
color: #202d40;
|
||||
|
|
@ -28,4 +32,32 @@
|
|||
.teacher-img {
|
||||
width: 52%;
|
||||
}
|
||||
|
||||
.info-student {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.info-item {
|
||||
width: 20%;
|
||||
min-width: 240px;
|
||||
text-align: center;
|
||||
.info-item-img {
|
||||
width: 83.33%;
|
||||
min-width: 200px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-item-tit {
|
||||
color: #202d40;
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 18px !important;
|
||||
}
|
||||
|
||||
.info-item-content {
|
||||
color: #8794bb;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,21 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Col, Row } from 'antd';
|
||||
import axios from 'axios';
|
||||
import './index.scss';
|
||||
|
||||
|
||||
function News() {
|
||||
|
||||
const [list, setList] = useState([]);
|
||||
useEffect(() => {
|
||||
const url = `/topics.json?topic_type=glcc_news`;
|
||||
axios.get(url).then(result => {
|
||||
if (result && result.data) {
|
||||
setList(result.data.topics);
|
||||
}
|
||||
}).catch(error => { })
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="news">
|
||||
<div className="glcc-content">
|
||||
|
|
@ -19,16 +30,27 @@ function News() {
|
|||
|
||||
</Row> */}
|
||||
<div className="news-content">
|
||||
<div className="main-news">
|
||||
<h3 className="news-tit ellipsis-2">此处为新闻中心的标题内容此处为新闻中心的标题内容此处为新闻中心</h3>
|
||||
<div className="main-news-content ellipsis-2">此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情此处为新闻中心的详情
|
||||
</div>
|
||||
<div className="news-date">2022-04-02</div>
|
||||
<Button type="link">查看详情</Button>
|
||||
</div>
|
||||
|
||||
{list.length && <div className="main-news">
|
||||
<h3 className="news-tit ellipsis-2">{list[0].title}</h3>
|
||||
<div className="news-date">{list[0].created_time && list[0].created_time.split(' ')[0]}</div>
|
||||
<Button type="link" ><a target="_black" href={list[0].url}>查看详情</a></Button>
|
||||
</div>}
|
||||
|
||||
<div className="news-box">
|
||||
<div className="news-item">
|
||||
{
|
||||
list.map((item, i) => {
|
||||
return i ? <div className="news-item" key={item.id}>
|
||||
<h3 className="news-tit ellipsis-2">{item.title}</h3>
|
||||
<div className="news-content">
|
||||
<div className="news-date">{item.created_time && item.created_time.split(' ')[0]}</div>
|
||||
<Button type="link"><a target="_black" href={item.url}>查看详情</a></Button>
|
||||
</div>
|
||||
</div> : ''
|
||||
|
||||
})
|
||||
}
|
||||
{/* <div className="news-item">
|
||||
<h3 className="news-tit ellipsis-2">此处为新闻中心的标题内容此处为新闻中心的标题内容此处为新闻中心</h3>
|
||||
<div className="news-content">
|
||||
<div className="news-date">2022-04-02</div>
|
||||
|
|
@ -58,7 +80,7 @@ function News() {
|
|||
<div className="news-date">2022-04-02</div>
|
||||
<Button type="link">查看详情</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,17 +17,18 @@
|
|||
height: 276px;
|
||||
color: #fff;
|
||||
line-height: 30px;
|
||||
padding: 30px 20px;
|
||||
padding: 40px 20px;
|
||||
.news-tit {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin-bottom: 13px !important;
|
||||
min-height: 56px;
|
||||
}
|
||||
.news-date {
|
||||
opacity: 85%;
|
||||
font-size: 14px;
|
||||
margin:15px 0;
|
||||
margin:15px 0 44px;
|
||||
}
|
||||
.main-news-content {
|
||||
opacity: 85%;
|
||||
|
|
@ -59,6 +60,7 @@
|
|||
color: #1e1e1e;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
|
|
@ -69,7 +71,6 @@
|
|||
&:hover {
|
||||
background: url("../../img/news-item.png");
|
||||
background-size: 100% 100%;
|
||||
border: 0;
|
||||
.news-tit,
|
||||
.news-date {
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -4,48 +4,48 @@ import './index.scss';
|
|||
|
||||
const stepArr = [{
|
||||
title: "Step1",
|
||||
date: "4月15日",
|
||||
date: "4.15",
|
||||
content: "GLCC发布"
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "4月15日-5月8日",
|
||||
date: "4.15-5.8",
|
||||
content: "社区启动报名"
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "5月20日",
|
||||
date: "5.20",
|
||||
content: "公示社区名单"
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "5月21日-6月19日",
|
||||
date: "5.21-6.19",
|
||||
content: "学生提交proposal"
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "7月1日",
|
||||
date: "7.1",
|
||||
content: "公示项目申请审核结果",
|
||||
noArrow: true,
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "7月4日-8月12日",
|
||||
date: "7.4-8.12",
|
||||
content: "项目开发第一阶段",
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "8月12日-9月30日",
|
||||
date: "8.12-9.30",
|
||||
content: "项目开发第二阶段",
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "10月1日-10月14日",
|
||||
date: "10.1-10.14",
|
||||
content: "结项审核",
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "11月11日",
|
||||
date: "11.11",
|
||||
content: "公布优秀项目&学员",
|
||||
noArrow: true,
|
||||
}
|
||||
|
|
@ -60,7 +60,7 @@ function TimerShaft() {
|
|||
<div className="time-content">
|
||||
{
|
||||
stepArr.map((item, i) => {
|
||||
return <Step {...item} title={`Step${i + 1}`} />
|
||||
return <Step {...item} title={`Step${i + 1}`} key={i}/>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.step-item {
|
||||
display: flex;
|
||||
|
|
@ -25,28 +24,31 @@
|
|||
width: 201.69px;
|
||||
height: 178.93px;
|
||||
text-align: center;
|
||||
padding: 25px 0 10px;
|
||||
padding: 34px 0 10px;
|
||||
line-height: 26px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sexange-tit {
|
||||
color: #124599;
|
||||
font-size: 26px;
|
||||
line-height: 37px;
|
||||
margin-bottom: 10px !important;
|
||||
font-weight: 700;
|
||||
color: #202d40;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 11px !important;
|
||||
}
|
||||
|
||||
.sexange-date {
|
||||
color: #202d40;
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 700;
|
||||
color: #124599;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.sexange-content {
|
||||
font-weight: 500;
|
||||
color: #6c7283;
|
||||
font-size: 15px;
|
||||
width: 60%;
|
||||
width: 55%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 549 KiB After Width: | Height: | Size: 728 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Loading…
Reference in New Issue