forked from Gitlink/forgeplus-react
首页静态页面完成75%
This commit is contained in:
何童崇
parent
d91446dc12
commit
5156441c2a
|
|
@ -1,13 +1,37 @@
|
|||
import React from 'react';
|
||||
import React from 'react';
|
||||
import './index.scss';
|
||||
|
||||
|
||||
function Award() {
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className="award">
|
||||
<h3 className="glcc-tit">奖金与奖励</h3>
|
||||
<div className=""></div>
|
||||
<div className="glcc-content">
|
||||
<div className="award-item">
|
||||
<div className="award-tit">丰厚现金奖励</div>
|
||||
<div className="award-content">根据项目难度设置高、中、低三个阶梯课题，对应奖金为12000 元、9000 元和 6000 元</div>
|
||||
<div className="award-line"></div>
|
||||
</div>
|
||||
|
||||
<div className="award-item">
|
||||
<div className="award-tit">企业实习机会</div>
|
||||
<div className="award-content">优秀学生有机会进入企业实习和邀约就业机会</div>
|
||||
<div className="award-line"></div>
|
||||
</div>
|
||||
|
||||
<div className="award-item">
|
||||
<div className="award-tit">毕业证书或奖杯</div>
|
||||
<div className="award-content">通过结项考核的学生获得毕业证书，优秀同学还可获得单项奖奖杯</div>
|
||||
<div className="award-line"></div>
|
||||
</div>
|
||||
|
||||
<div className="award-item">
|
||||
<div className="award-tit">夏令营大礼包</div>
|
||||
<div className="award-content">夏令营纪念文化衫、帆布包、鼠标垫，开源系列图书，社区周边等。此外，还会评选出若干优秀社区、明星导师、最佳课题、开源之星等单项奖。</div>
|
||||
<div className="award-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,62 @@
|
|||
.award{
|
||||
|
||||
}
|
||||
.award {
|
||||
background: url("../../img/award-bg.png");
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 28.98vw;
|
||||
min-height: 557px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
|
||||
.glcc-tit{
|
||||
color: #fff;
|
||||
margin-top:-1.5vw;
|
||||
}
|
||||
|
||||
.glcc-content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 1vw;
|
||||
}
|
||||
.award-item {
|
||||
position: relative;
|
||||
width: 270px;
|
||||
max-width: 24%;
|
||||
height: 300px;
|
||||
background-color: #ecf3ff;
|
||||
border: 2px solid;
|
||||
border-color: #ffffff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.award-tit {
|
||||
background: url("../../img/award-tit.png");
|
||||
background-size: 100% 100%;
|
||||
width: 226px;
|
||||
height: 61.41px;
|
||||
margin: 17px 0 0 -9px;
|
||||
padding-left: 19px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 700;
|
||||
color: #0e55bd;
|
||||
font-size: 18px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.award-content {
|
||||
width: 236px;
|
||||
max-width: 96%;
|
||||
height: 89px;
|
||||
font-family: PingFang SC;
|
||||
color: #6c7283;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
margin: 20.5px auto;
|
||||
}
|
||||
.award-line {
|
||||
position: absolute;
|
||||
bottom: 28px;
|
||||
left: 6.4%;
|
||||
width: 88.88%;
|
||||
height: 3px;
|
||||
background-image: linear-gradient(90deg, #2135b9 0%, #e3a600 100%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function Banner({register,current_user}) {
|
|||
bannerList && bannerList.length > 0 ?
|
||||
bannerList.map((i,k)=>{
|
||||
return(
|
||||
<div className={`regform`}>
|
||||
<div className={`regform`} key={k}>
|
||||
{/* style={{backgroundImage:`url(${getImageUrl(i.image)})`}} */}
|
||||
<div>
|
||||
<img src={getImageUrl(i.image)} alt="" height="100%"/>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,25 @@
|
|||
import React from 'react';
|
||||
import React from 'react';
|
||||
import './index.scss';
|
||||
|
||||
|
||||
function Contact() {
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className="contact">
|
||||
<h3 className="glcc-tit">新闻中心</h3>
|
||||
<div className=""></div>
|
||||
<div className="glcc-content">
|
||||
<h3 className="glcc-tit">联系我们</h3>
|
||||
<div className="contact-content">
|
||||
<div className="contact-info">
|
||||
<h4 className="contact-invite">期待你的加入，和我们一起推动开源繁荣发展！</h4>
|
||||
<div className="contact-way">
|
||||
<p>问题资讯：12345689@qq.com</p>
|
||||
<p>合作推广：56898989416@hotmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="contact-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,42 @@
|
|||
.contact{
|
||||
|
||||
}
|
||||
.contact {
|
||||
width: 100%;
|
||||
// height: 5002px;
|
||||
background-image: linear-gradient(
|
||||
163.51deg,
|
||||
#eff3fe 0%,
|
||||
#ebeffb 9.63%,
|
||||
#f0f4ff 16.73%,
|
||||
#e8edfc 33.05%,
|
||||
#e5ecff 43.93%,
|
||||
#e3eaf6 72.41%,
|
||||
#dce8ff 84.35%,
|
||||
#ffffff 94.79%,
|
||||
#ecf4ff 100%
|
||||
);
|
||||
|
||||
.glcc-content {
|
||||
padding-bottom: 3.828vw;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
}
|
||||
|
||||
.contact-invite {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 42px !important;
|
||||
}
|
||||
|
||||
.contact-way {
|
||||
color: #6c7283;
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.contact-line {
|
||||
opacity: 20%;
|
||||
height: 1px;
|
||||
background-color: #378eff;
|
||||
margin-top: 3.125vw;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,19 +5,21 @@ import TimerShaft from './timerShaft';
|
|||
import Award from "./award";
|
||||
import News from './news';
|
||||
import Partner from "./partner";
|
||||
import Contact from "./contact";
|
||||
|
||||
import './index.scss';
|
||||
|
||||
export default ()=>{
|
||||
|
||||
export default () => {
|
||||
|
||||
return (
|
||||
<div className="glcc">
|
||||
<Banner />
|
||||
<Lightspot />
|
||||
<TimerShaft />
|
||||
<Award />
|
||||
<News />
|
||||
<Partner />
|
||||
</div>
|
||||
<div className="glcc">
|
||||
<Banner />
|
||||
<Lightspot />
|
||||
<TimerShaft />
|
||||
<Award />
|
||||
<News />
|
||||
<Partner />
|
||||
<Contact />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,5 +1,36 @@
|
|||
.glcc{
|
||||
.glcc-tit{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.glcc {
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
.glcc-tit {
|
||||
text-align: center;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #1e1e1e;
|
||||
font-size: 38px;
|
||||
margin-bottom: 50px !important;
|
||||
}
|
||||
|
||||
.glcc-content {
|
||||
width: 1200px;
|
||||
min-width: 62.5vw;
|
||||
max-width: 98vw;
|
||||
margin: 0 auto;
|
||||
padding-top: 45px;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,38 @@
|
|||
import React from 'react';
|
||||
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 './index.scss';
|
||||
|
||||
|
||||
function Lightspot() {
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className="lightspot">
|
||||
<h3 className="glcc-tit">活动亮点</h3>
|
||||
<div className=""></div>
|
||||
<div className="glcc-content">
|
||||
<h3 className="glcc-tit">活动亮点</h3>
|
||||
<div className="lightspot-content">
|
||||
<div className="info-teacher">
|
||||
<div className="teacher-text">
|
||||
<h3 className="teacher-invite">有兴趣成为GLCC的导师吗？</h3>
|
||||
<div className="teacher-content">想要扩大项目知名度和影响力，为开源项目吸引新鲜血液，培养长期开发者。通过GitLink平台，与高校建立连接，指导开源新人传授他们的开源文化，享受开源的乐趣</div>
|
||||
<Button type="primary">立即报名</Button>
|
||||
</div>
|
||||
<img className="teacher-img" src={teacherImg}></img>
|
||||
</div>
|
||||
|
||||
<div className="info-student">
|
||||
<div className="info-item">
|
||||
<img className="info-item-img"></img>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,31 @@
|
|||
.lightspot{
|
||||
|
||||
}
|
||||
.lightspot {
|
||||
background: url("../../img/lightspot-bg.png");
|
||||
background-size: 100% 100%;
|
||||
height: 55.26vw;
|
||||
min-height: 1061px;
|
||||
|
||||
.info-teacher {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.teacher-text{
|
||||
margin-right: 2.84%;
|
||||
}
|
||||
.teacher-invite {
|
||||
color: #202d40;
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
margin: 35px auto 25px !important;
|
||||
}
|
||||
|
||||
.teacher-content {
|
||||
color: #6c7283;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.teacher-img {
|
||||
width: 52%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,68 @@
|
|||
import React from 'react';
|
||||
import React from 'react';
|
||||
import { Button, Col, Row } from 'antd';
|
||||
import './index.scss';
|
||||
|
||||
|
||||
function News() {
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className="news">
|
||||
<h3 className="glcc-tit">新闻中心</h3>
|
||||
<div className=""></div>
|
||||
<div className="glcc-content">
|
||||
<h3 className="glcc-tit">新闻中心</h3>
|
||||
{/* <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 20]}>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<div className="gutter-box">col-6</div>
|
||||
</Col>
|
||||
|
||||
</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>
|
||||
|
||||
<div className="news-box">
|
||||
<div className="news-item">
|
||||
<h3 className="news-tit ellipsis-2">此处为新闻中心的标题内容此处为新闻中心的标题内容此处为新闻中心</h3>
|
||||
<div className="news-content">
|
||||
<div className="news-date">2022-04-02</div>
|
||||
<Button type="link">查看详情</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>
|
||||
<Button type="link">查看详情</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>
|
||||
<Button type="link">查看详情</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>
|
||||
<Button type="link">查看详情</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,79 @@
|
|||
.news{
|
||||
|
||||
}
|
||||
.news {
|
||||
min-height: 529px;
|
||||
background-image: linear-gradient(180deg, #d6e6ff 0%, #f9fbff 100%);
|
||||
|
||||
.ant-btn-link {
|
||||
background: #fff;
|
||||
}
|
||||
.news-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.main-news {
|
||||
background: url("../../img/news-main.png");
|
||||
background-size: 100% 100%;
|
||||
width: 17.66%;
|
||||
min-width: 339px;
|
||||
height: 276px;
|
||||
color: #fff;
|
||||
line-height: 30px;
|
||||
padding: 30px 20px;
|
||||
.news-tit {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin-bottom: 13px !important;
|
||||
}
|
||||
.news-date {
|
||||
opacity: 85%;
|
||||
font-size: 14px;
|
||||
margin:15px 0;
|
||||
}
|
||||
.main-news-content {
|
||||
opacity: 85%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.news-box {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.news-item {
|
||||
width: 48%;
|
||||
margin-left: 2%;
|
||||
// min-width: 410px;
|
||||
height: 128px;
|
||||
padding: 20px 26px 13px 20px;
|
||||
background-color: #f6f9fe;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
&:first-child,
|
||||
&:nth-child(2) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.news-tit {
|
||||
color: #1e1e1e;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
color: #6c7283;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: url("../../img/news-item.png");
|
||||
background-size: 100% 100%;
|
||||
border: 0;
|
||||
.news-tit,
|
||||
.news-date {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import React from 'react';
|
||||
import React from 'react';
|
||||
import './index.scss';
|
||||
|
||||
|
||||
function Partner() {
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className="partner">
|
||||
<h3 className="glcc-tit">组织方及合作伙伴</h3>
|
||||
<div className=""></div>
|
||||
<div className="glcc-content">
|
||||
<h3 className="glcc-tit">组织方及合作伙伴</h3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
.partner{
|
||||
|
||||
height: 19.21875vw;
|
||||
min-height: 369px;
|
||||
background-image: linear-gradient(359.95deg,#373f5e 0%,#344281 100%);
|
||||
.glcc-tit{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,70 @@
|
|||
import React from 'react';
|
||||
import React from 'react';
|
||||
import Step from './step';
|
||||
import './index.scss';
|
||||
|
||||
const stepArr = [{
|
||||
title: "Step1",
|
||||
date: "4月15日",
|
||||
content: "GLCC发布"
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "4月15日-5月8日",
|
||||
content: "社区启动报名"
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "5月20日",
|
||||
content: "公示社区名单"
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "5月21日-6月19日",
|
||||
content: "学生提交proposal"
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "7月1日",
|
||||
content: "公示项目申请审核结果",
|
||||
noArrow: true,
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "7月4日-8月12日",
|
||||
content: "项目开发第一阶段",
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "8月12日-9月30日",
|
||||
content: "项目开发第二阶段",
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "10月1日-10月14日",
|
||||
content: "结项审核",
|
||||
},
|
||||
{
|
||||
title: "Step2",
|
||||
date: "11月11日",
|
||||
content: "公布优秀项目&学员",
|
||||
noArrow: true,
|
||||
}
|
||||
]
|
||||
|
||||
function TimerShaft() {
|
||||
|
||||
return(
|
||||
return (
|
||||
<div className="timerShaft">
|
||||
<h3 className="glcc-tit">时间规划</h3>
|
||||
<div className=""></div>
|
||||
<div className="glcc-content">
|
||||
<h3 className="glcc-tit">时间规划</h3>
|
||||
<div className="time-content">
|
||||
{
|
||||
stepArr.map((item, i) => {
|
||||
return <Step {...item} title={`Step${i + 1}`} />
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,58 @@
|
|||
.timerShaft{
|
||||
|
||||
}
|
||||
.timerShaft {
|
||||
background: url("../../img/time-bg.png");
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 32.34375vw;
|
||||
min-height: 621px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
|
||||
.time-content {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 68px;
|
||||
max-width: 20%;
|
||||
.sexange {
|
||||
background: url("../../img/sexange.png");
|
||||
background-size: 100% 100%;
|
||||
width: 201.69px;
|
||||
height: 178.93px;
|
||||
text-align: center;
|
||||
padding: 25px 0 10px;
|
||||
line-height: 26px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sexange-tit {
|
||||
color: #124599;
|
||||
font-size: 26px;
|
||||
line-height: 37px;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.sexange-date {
|
||||
color: #202d40;
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sexange-content {
|
||||
font-weight: 500;
|
||||
color: #6c7283;
|
||||
font-size: 15px;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.time-arrow {
|
||||
width: 49.5px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
import './index.scss';
|
||||
import TimeArrow from '../../img/time-arrow.png';
|
||||
|
||||
function Step({ title, date, content, noArrow }) {
|
||||
|
||||
return (
|
||||
<div className="step-item">
|
||||
<div className="sexange">
|
||||
<h4 className="sexange-tit">{title}</h4>
|
||||
<div className="sexange-date">{date}</div>
|
||||
<div className="sexange-content">{content}</div>
|
||||
</div>
|
||||
{!noArrow && <img className="time-arrow" src={TimeArrow}></img>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Step;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 549 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 323 B |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Loading…
Reference in New Issue