forked from Gitlink/forgeplus-react
增加2个动画
This commit is contained in:
parent
4097ebb69b
commit
54bffb41da
|
|
@ -3973,6 +3973,11 @@
|
|||
"require-from-string": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"countup.js": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.0.8.tgz",
|
||||
"integrity": "sha512-pW3xwwD+hB+xmtI16xFcuLS0D5hSQqPQWkZOdgpKQyzxCquDNo2VCFPkRw12vmvdpnicXVTcjmYiakG6biwINg=="
|
||||
},
|
||||
"create-ecdh": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
|
||||
|
|
@ -4035,6 +4040,58 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"cross-env": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
|
||||
"integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cross-spawn": "^7.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"path-key": "^3.1.0",
|
||||
"shebang-command": "^2.0.0",
|
||||
"which": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"path-key": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
||||
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
|
||||
"dev": true
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"shebang-regex": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"shebang-regex": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
|
||||
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
|
||||
"dev": true
|
||||
},
|
||||
"which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"isexe": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
|
||||
|
|
@ -14614,6 +14671,14 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"react-countup": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-countup/-/react-countup-6.1.0.tgz",
|
||||
"integrity": "sha512-0tN65l4ksaNa4rm8ZKshpGxbIHQ4RAh8TGaKYp06EZ7nZw+haXpW3dQTVDhTey9+10jDkJgdzyXKDmC96c1M8g==",
|
||||
"requires": {
|
||||
"countup.js": "^2.0.8"
|
||||
}
|
||||
},
|
||||
"react-datepicker": {
|
||||
"version": "2.16.0",
|
||||
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.16.0.tgz",
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
"react-color": "^2.18.0",
|
||||
"react-content-loader": "^3.1.1",
|
||||
"react-cookies": "^0.1.1",
|
||||
"react-countup": "^6.1.0",
|
||||
"react-datepicker": "^2.14.1",
|
||||
"react-dev-utils": "^9.2.0-next.80",
|
||||
"react-dom": "^16.13.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react';
|
||||
import './index.scss';
|
||||
|
||||
|
||||
function FifthSection({ fifth }) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
||||
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default FifthSection;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
.home-fifth-section {
|
||||
text-align: center;
|
||||
min-height: 50vh;
|
||||
margin-top: -10px;
|
||||
|
||||
.fifth-tit{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import './index.scss';
|
||||
|
||||
import circle from '../img/circle.png';
|
||||
import code from '../img/code.png';
|
||||
import glass from '../img/glass.png';
|
||||
import logo from '../img/logo.png';
|
||||
import pillar from '../img/pillar.png';
|
||||
import text1 from '../img/text1.png';
|
||||
import text2 from '../img/text2.png';
|
||||
import text3 from '../img/text3.png';
|
||||
import text4 from '../img/text4.png';
|
||||
|
||||
|
||||
function FirstSection() {
|
||||
return (
|
||||
<div className="grid-picture">
|
||||
<div className="homepage-content">
|
||||
|
||||
<div className="website website-active">
|
||||
<h3 className="website-title">红山开源</h3>
|
||||
<div className="website-vision">
|
||||
<span>群智共享</span>
|
||||
<span>开源开放</span>
|
||||
<span>协同创新</span>
|
||||
<span>择优孵化</span>
|
||||
</div>
|
||||
<div className="website-des">红山开源是一个依托互联网群体智慧实现世界范围内资源深度融合、开放共享和协同创新的开源社区，是集开源项目演化发展、科研任务众包、竞赛组织选拔和社区开放交流为一体的创新科研服务平台。红山开源致力于打造一个“开放、汇聚、协同、众创”的生态空间。
|
||||
</div>
|
||||
<Button className="website-more" type="primary">了解详情</Button>
|
||||
</div>
|
||||
|
||||
<div className="play-img">
|
||||
<img className="play-glass" src={glass}></img>
|
||||
<img className="play-circle" src={circle}></img>
|
||||
<img className="play-code" src={code}></img>
|
||||
<img className="play-pillar" src={pillar}></img>
|
||||
<img className="play-logo" src={logo}></img>
|
||||
<img className="play-text1" src={text1}></img>
|
||||
<img className="play-text2" src={text2}></img>
|
||||
<img className="play-text3" src={text3}></img>
|
||||
<img className="play-text4" src={text4}></img>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg className="waves"
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g className="parallax">
|
||||
{/* <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.4)" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" /> */}
|
||||
|
||||
{/* <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.7" /> */}
|
||||
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.5)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.4)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FirstSection;
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
.homePage {
|
||||
.home-first-section {
|
||||
height: 90vh;
|
||||
min-height: 650px;
|
||||
background: linear-gradient(
|
||||
#1a2358 0%,
|
||||
#12277b 33%,
|
||||
#0c2d8f 67%,
|
||||
#002a89 100%
|
||||
);
|
||||
}
|
||||
|
||||
.grid-picture {
|
||||
height: 90vh;
|
||||
background: url(../img/grid.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.homepage-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1200px;
|
||||
height: 82vh;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.website {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
margin-right: 3.5%;
|
||||
color: #fff;
|
||||
.website-title {
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
}
|
||||
.website-vision {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 36px;
|
||||
color: #ff832b;
|
||||
font-size: 25px;
|
||||
}
|
||||
.website-des {
|
||||
font-size: 16px;
|
||||
line-height: 2.3;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.website-more {
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.website-active {
|
||||
position: relative;
|
||||
animation: website 0.75s 1 forwards;
|
||||
}
|
||||
|
||||
.play-img {
|
||||
display: flex;
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
align-self: flex-end;
|
||||
position: relative;
|
||||
width: 680px;
|
||||
height: 580px;
|
||||
margin-bottom: 10vh;
|
||||
img {
|
||||
opacity: 0;
|
||||
// animation: show 0.5s 1 forwards;
|
||||
}
|
||||
|
||||
.play-glass {
|
||||
position: relative;
|
||||
width: 351px;
|
||||
z-index: 1;
|
||||
animation: glass 0.75s 1 forwards;
|
||||
}
|
||||
.play-circle {
|
||||
position: absolute;
|
||||
width: 165px;
|
||||
// bottom: -5.5%;
|
||||
right: 18%;
|
||||
z-index: 2;
|
||||
animation: circle 0.75s 1 forwards;
|
||||
}
|
||||
.play-pillar {
|
||||
position: absolute;
|
||||
left: -11%;
|
||||
top: 37%;
|
||||
width: 230px;
|
||||
animation: pillar 0.75s 1 forwards;
|
||||
}
|
||||
.play-code {
|
||||
position: absolute;
|
||||
right: -4%;
|
||||
top: 18%;
|
||||
width: 211px;
|
||||
z-index: 1;
|
||||
animation: code 0.75s 1 forwards;
|
||||
}
|
||||
.play-logo {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
width: 87px;
|
||||
// transition: all 0.7s;
|
||||
animation: logo 1.5s 0.5s infinite;
|
||||
z-index: 10;
|
||||
}
|
||||
.play-text1 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
// right: 5%;
|
||||
// width: 262px;
|
||||
// bottom: 11%;
|
||||
animation: text1-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
.play-text2 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
// bottom: 10%;
|
||||
// left: 6%;
|
||||
// width: 262px;
|
||||
animation: text2-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
.play-text3 {
|
||||
position: absolute;
|
||||
// right: 6%;
|
||||
// top: -4%;
|
||||
// width: 227px;
|
||||
animation: text3-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
.play-text4 {
|
||||
position: absolute;
|
||||
// top: 7%;
|
||||
// left: 18%;
|
||||
// width: 206px;
|
||||
animation: text4-show 0.5s 1 0.5s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes website {
|
||||
0% {
|
||||
top: 60vh;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
transition: all 2s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes glass {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: rotate(-25deg);
|
||||
top: 5.5%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo {
|
||||
10% {
|
||||
opacity: 0;
|
||||
top: 33%;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
top: 12%;
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
90% {
|
||||
opacity: 0;
|
||||
top: 33%;
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes circle {
|
||||
0% {
|
||||
opacity: 0;
|
||||
bottom: -10%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
bottom: -5.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pillar {
|
||||
0% {
|
||||
opacity: 0;
|
||||
top: 47%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
top: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes code {
|
||||
0% {
|
||||
opacity: 0;
|
||||
top: 40%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
top: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text1-show {
|
||||
from {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
bottom: 36%;
|
||||
right: 60%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
width: 262px;
|
||||
bottom: 12%;
|
||||
left: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text2-show {
|
||||
from {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
bottom: 36%;
|
||||
right: 60%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
width: 262px;
|
||||
bottom: 10%;
|
||||
right: 56%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text3-show {
|
||||
from {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
right: 36%;
|
||||
top: 50%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
right: 8%;
|
||||
top: 6%;
|
||||
width: 227px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text4-show {
|
||||
from {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
right: 36%;
|
||||
top: 50%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
top: 14%;
|
||||
right: 55%;
|
||||
width: 206px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import './index.scss';
|
||||
|
||||
|
||||
function FourthSection({ fourth }) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2 className="homePage-blue-tit">开源项目</h2>
|
||||
<h4 className="homePage-subhead">开源项目版块集项目托管、版本管理等功能于一体，为开源协作和群智汇聚提供创作环境</h4>
|
||||
|
||||
|
||||
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default FourthSection;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
.home-fourth-section {
|
||||
text-align: center;
|
||||
min-height: 50vh;
|
||||
margin-top: -10px;
|
||||
// background: linear-gradient(#fff 0%, #cbdcff 100%);
|
||||
background: #fff;
|
||||
|
||||
.fourth-tit{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import React from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
let setting = {
|
||||
infinite: true,
|
||||
speed: 2000,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 3000,
|
||||
centerMode: true,
|
||||
centerPadding: "10px",
|
||||
// pauseOnFocus: true,
|
||||
autoplay: true,
|
||||
arrows: false,
|
||||
vertical: true,
|
||||
}
|
||||
function NewSlide() {
|
||||
return (
|
||||
<div className="news-slide">
|
||||
<Slider {...setting}>
|
||||
<div className="testimonial-item" key={1}>
|
||||
<h6>Nicki Royer</h6>
|
||||
<span>Project Manager</span>
|
||||
<p>Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
</div>
|
||||
|
||||
<div className="testimonial-item" key={2}>
|
||||
<h6>Jenifar</h6>
|
||||
<span>Engineer</span>
|
||||
<p>Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
</div>
|
||||
|
||||
<div className="testimonial-item" key={3}>
|
||||
<h6>Jensdsdsdsifar</h6>
|
||||
<span>Engisdssneer</span>
|
||||
<p>Exceptssdeur sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
</div>
|
||||
|
||||
<div className="testimonial-item" key={4}>
|
||||
<h6>dsds</h6>
|
||||
<span>ssss</span>
|
||||
<p> sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
export default NewSlide;
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import Slider from 'react-slick';
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
import './index.scss';
|
||||
|
||||
|
||||
let setting = {
|
||||
infinite: true,
|
||||
speed: 750,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 2000,
|
||||
centerMode: true,
|
||||
centerPadding: "10px",
|
||||
// pauseOnFocus: true,
|
||||
autoplay: true,
|
||||
arrows: false,
|
||||
vertical: true,
|
||||
}
|
||||
|
||||
function SecondSection({ community }) {
|
||||
return (
|
||||
// <div className="home-second-section">
|
||||
<React.Fragment>
|
||||
|
||||
<h2 className="homePage-blue-tit">社区动态</h2>
|
||||
<h4 className="homePage-subhead">社区动态副标题社区动态副标题社区动态副标题</h4>
|
||||
|
||||
<div className="community-main">
|
||||
|
||||
<div className={`community-left ${community ? "community-active" : ''}`}>
|
||||
<div className="community-english">C O M M U N I T Y D Y N A M I C S</div>
|
||||
<h3 className="community-star">
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
<i className="iconfont icon-quxiaoguanzhu"></i>
|
||||
</h3>
|
||||
|
||||
<h4 className="community-left-tit">IDRLnet: 基于内嵌物理知识神经网络的开源求解框架</h4>
|
||||
|
||||
<div className="community-left-content">
|
||||
为解决飞行器设计优化过程中物理场快速仿真问题和运行监测阶段物理场精确反演问题，国防科技创新研究院无人系统技术研究中心智能设计与鲁棒学习团队推出微分方程智能求解框架IDRLnet。
|
||||
该框架是国内首款基于内嵌物理知识神经网络的开源框架。IDRLnet作为该团队自主研发IDaaS平台的一个重要解算单元，与平台其他工具协同提升智能设计水平。IDRLnet已在红山开源平台上发布，旨在助力相关学术成果涌现，推动相关技术迭代，促进相关应用落地。
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Button className="dynamic-more" type="primary">更多动态</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="home-second-section-slide">
|
||||
<Slider {...setting}>
|
||||
<div className="news-slide-item" key={1}>
|
||||
<div className="slide-title">
|
||||
<span className="order-num">1</span>
|
||||
<h3>加快推进</h3>
|
||||
<span className="slide-tag">热点资讯</span>
|
||||
</div>
|
||||
<p>习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
<span>2021-09-13</span>
|
||||
</div>
|
||||
|
||||
<div className="news-slide-item" key={2}>
|
||||
<div className="slide-title">
|
||||
<span className="order-num">2</span>
|
||||
<h3>加快推进</h3>
|
||||
<span className="slide-tag slide-tag-red">热点资讯</span>
|
||||
</div>
|
||||
<p>加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
|
||||
<span>2021-09-15</span>
|
||||
</div>
|
||||
|
||||
<div className="news-slide-item" key={3}>
|
||||
<div className="slide-title">
|
||||
<span className="order-num">3</span>
|
||||
<h3>加快推进国防科技创新</h3>
|
||||
<span className="slide-tag slide-tag-yellow">热点资讯</span>
|
||||
</div>
|
||||
<p>习主席指出，要紧跟科技强国建设进程，优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出</p>
|
||||
<span>2021-09-12</span>
|
||||
</div>
|
||||
|
||||
<div className="news-slide-item" key={4}>
|
||||
<div className="slide-title">
|
||||
<span className="order-num">4</span>
|
||||
<h3>加快推进国防科技创新</h3>
|
||||
<span className="slide-tag slide-tag-red">热点资讯</span>
|
||||
</div>
|
||||
<p>加快推进国防科技创新加优化国防创新布局和环境条件，用好用足各方面优势力量和资源，大幅加强科研投入，提高科研产出.</p>
|
||||
<span>2021-09-15</span>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg className="waves waves-low "
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g className="parallax">
|
||||
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(4,22,112,0.2)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(4,22,112,0.2)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="9" fill="#041670" />
|
||||
</g>
|
||||
</svg>
|
||||
{/* </div> */}
|
||||
</React.Fragment>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default SecondSection;
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
.home-second-section {
|
||||
background: linear-gradient(#fff 0%, #cbdcff 100%);
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
margin-bottom: -10px;
|
||||
|
||||
|
||||
.community-left-tit {
|
||||
font-size: 20px;
|
||||
color: #000870;
|
||||
}
|
||||
|
||||
.community-main {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
margin: 20px auto 50px;
|
||||
}
|
||||
|
||||
.community-english {
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
opacity: 0.88;
|
||||
color: #e67a21;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.community-star {
|
||||
color: #ff7a21;
|
||||
i {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.community-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 600px;
|
||||
padding-right: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
.community-left-content {
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #3c476e;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.dynamic-more {
|
||||
margin-top: 40px;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.community-active {
|
||||
position: relative;
|
||||
animation: community 0.75s 1 forwards;
|
||||
}
|
||||
|
||||
@keyframes community {
|
||||
0% {
|
||||
right: 50vw;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
transition: all 2s;
|
||||
}
|
||||
}
|
||||
|
||||
// .parallax > use:nth-child(1) {
|
||||
// animation-delay: -5s;
|
||||
// animation-duration: 20s;
|
||||
// }
|
||||
}
|
||||
|
||||
.home-second-section-slide {
|
||||
width: 600px;
|
||||
.slick-track > div {
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
transition: all 0.7s;
|
||||
}
|
||||
.news-slide-item {
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
background-image: linear-gradient(
|
||||
to bottom right,
|
||||
#e9f5ff 0%,
|
||||
#f1f2fd 25%,
|
||||
#e8f2ff 50%,
|
||||
#e1eaff 75%,
|
||||
#c6d3ff 100%
|
||||
);
|
||||
margin-bottom: 10px;
|
||||
padding: 20px 30px 26px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 6px;
|
||||
|
||||
.slide-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
h3 {
|
||||
color: #000870;
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 0 !important;
|
||||
flex: auto;
|
||||
}
|
||||
.order-num {
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
background: linear-gradient(
|
||||
272deg,
|
||||
#4154f1 0%,
|
||||
#4154f1 47%,
|
||||
#4154f1 100%
|
||||
);
|
||||
box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slide-tag {
|
||||
color: #fff;
|
||||
padding: 3px 13px;
|
||||
background: #586dff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.slide-tag-red{
|
||||
background: #E53939;
|
||||
}
|
||||
|
||||
.slide-tag-yellow{
|
||||
background: #FF7300;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #3c476e;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.slick-center {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import React from 'react';
|
||||
import CountUp from 'react-countup';
|
||||
import './index.scss';
|
||||
|
||||
const countUpProps={
|
||||
redraw:true,
|
||||
start:0,
|
||||
duration:2
|
||||
};
|
||||
|
||||
function ThirdSection({third}) {
|
||||
return (
|
||||
<div className="ball-background">
|
||||
<h2 className="third-tit">数据统计总览</h2>
|
||||
|
||||
<div className="third-main ">
|
||||
{/* <div className={`third-main ${third?'third-active':''}`}> */}
|
||||
<div className="circle-item">
|
||||
<div className="circle-item-box">
|
||||
<div className="circle-item-num">
|
||||
<CountUp
|
||||
{...countUpProps}
|
||||
end={23191}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h4>平台点击量</h4>
|
||||
</div>
|
||||
|
||||
<div className="circle-item">
|
||||
<div className="circle-item-box">
|
||||
<div className="circle-item-num">
|
||||
<CountUp {...countUpProps} end={4493}/>
|
||||
</div>
|
||||
</div>
|
||||
<h4 >平台用户数</h4>
|
||||
</div>
|
||||
|
||||
<div className="circle-item">
|
||||
<div className="circle-item-box">
|
||||
<div className="circle-item-num">
|
||||
<CountUp {...countUpProps} end={1526} />
|
||||
</div>
|
||||
</div>
|
||||
<h4 >开源项目托管数</h4>
|
||||
</div>
|
||||
|
||||
<div className="circle-item">
|
||||
<div className="circle-item-box">
|
||||
<div className="circle-item-num">
|
||||
<CountUp {...countUpProps} end={2391} />
|
||||
</div>
|
||||
</div>
|
||||
<h4 >创客任务发布数</h4>
|
||||
</div>
|
||||
|
||||
<div className="circle-item">
|
||||
<div className="circle-item-box">
|
||||
<div className="circle-item-num">
|
||||
<CountUp {...countUpProps} end={526}/>
|
||||
</div>
|
||||
</div>
|
||||
<h4 >论坛发帖数量</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<svg className="waves waves-low "
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g className="parallax">
|
||||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.7" />
|
||||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.4)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThirdSection;
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
.home-third-section {
|
||||
color: #fff;
|
||||
background: linear-gradient(
|
||||
#041670 0%,
|
||||
#2951DA 100%
|
||||
);
|
||||
text-align: center;
|
||||
|
||||
.ball-background{
|
||||
background: url(../img/ballBg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.third-tit {
|
||||
padding-top: 1.75em;
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.third-main {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
min-height: 35vh;
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
||||
.circle-item > h4 {
|
||||
margin-top: 20px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.circle-item-box {
|
||||
position: relative;
|
||||
width: 164px;
|
||||
height: 164px;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
background-image: linear-gradient(
|
||||
to bottom right,
|
||||
rgba(255, 255, 255, 0.63) 0%,
|
||||
rgba(55, 236, 255, 0.56) 33%,
|
||||
rgba(255, 255, 255, 0.42) 67%,
|
||||
rgba(255, 255, 255, 0.45) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.circle-item-num {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #12277b;
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
span {
|
||||
background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: -8px;
|
||||
content: "";
|
||||
background-image: url(../img/dashCircle.png);
|
||||
width: 110%;
|
||||
height: 110%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 9;
|
||||
opacity: 1;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover::before{
|
||||
visibility: visible;
|
||||
animation: dashCircle infinite 4s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-item:nth-child(2) {
|
||||
.circle-item-box {
|
||||
background-image: linear-gradient(
|
||||
to bottom left,
|
||||
rgba(255, 255, 255, 0.88) 0%,
|
||||
rgba(7, 188, 207, 0.56) 33%,
|
||||
rgba(255, 255, 255, 0.16) 67%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
}
|
||||
span {
|
||||
background-image: -webkit-linear-gradient(bottom, #f5f65b, #15ccf6);
|
||||
}
|
||||
}
|
||||
|
||||
.circle-item:nth-child(3) {
|
||||
.circle-item-box {
|
||||
background-image: linear-gradient(
|
||||
to bottom left,
|
||||
rgba(255, 255, 255, 1) 0%,
|
||||
rgba(255, 255, 255, 0.16) 0%,
|
||||
rgba(7, 188, 207, 0.56) 33%,
|
||||
rgba(255, 255, 255, 0.88) 100%
|
||||
);
|
||||
}
|
||||
span {
|
||||
background-image: -webkit-linear-gradient(bottom, #bad3ff, #00a0dd);
|
||||
}
|
||||
}
|
||||
|
||||
.circle-item:nth-child(4) {
|
||||
.circle-item-box {
|
||||
background-image: linear-gradient(
|
||||
to bottom left,
|
||||
rgba(255, 255, 255, 0.88) 0%,
|
||||
rgba(7, 188, 207, 0.56) 33%,
|
||||
rgba(255, 255, 255, 0.16) 67%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
}
|
||||
span {
|
||||
background-image: -webkit-linear-gradient(bottom, #f0a3ff, #b33dff);
|
||||
}
|
||||
}
|
||||
|
||||
.circle-item:nth-child(5) {
|
||||
.circle-item-box {
|
||||
background-image: linear-gradient(
|
||||
to bottom left,
|
||||
rgba(255, 255, 255, 0.45) 0%,
|
||||
rgba(7, 188, 207, 0.56) 33%,
|
||||
rgba(255, 255, 255, 0.16) 67%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
}
|
||||
span {
|
||||
background-image: -webkit-linear-gradient(bottom, #08ece1, #ff7e3d);
|
||||
}
|
||||
}
|
||||
|
||||
.circle-item .circle-item-box {
|
||||
&:hover{
|
||||
background:rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes dashCircle {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 225 KiB After Width: | Height: | Size: 957 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 210 KiB |
|
|
@ -1,81 +1,90 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import NewSlide from "./NewSlide";
|
||||
import FirstSection from './FirstSection';
|
||||
import SecondSection from './SecondSection';
|
||||
import ThirdSection from './ThirdSection';
|
||||
import FourthSection from './FourthSection';
|
||||
import FifthSection from './FifthSection';
|
||||
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
|
||||
|
||||
import circle from './img/circle.png';
|
||||
import code from './img/code.png';
|
||||
import glass from './img/glass.png';
|
||||
import logo from './img/logo.png';
|
||||
import pillar from './img/pillar.png';
|
||||
import text1 from './img/text1.png';
|
||||
import text2 from './img/text2.png';
|
||||
import text3 from './img/text3.png';
|
||||
import text4 from './img/text4.png';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
function HomePage(props) {
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", scrollListener);
|
||||
return () => {
|
||||
window.removeEventListener("scroll");
|
||||
};
|
||||
}, []);
|
||||
|
||||
const [firstSection, setFirstSection] = useState(true);
|
||||
const [community, setCommunity] = useState(false);
|
||||
const [third, setThird] = useState(false);
|
||||
|
||||
|
||||
function scrollListener() {
|
||||
let clientHeight=document.body.clientHeight;
|
||||
let communityEdition = document.querySelector(".home-second-section").offsetTop;
|
||||
let thirdSection = document.querySelector(".home-third-section").offsetTop;
|
||||
let fourthSection = document.querySelector(".home-fourth-section").offsetTop;
|
||||
|
||||
|
||||
let top = document.documentElement.scrollTop;
|
||||
console.log("communityEdition:" + communityEdition);
|
||||
console.log("thirdSection:" + thirdSection);
|
||||
console.log("top:" + top);
|
||||
|
||||
// 第一个动效
|
||||
if(top>=clientHeight-100){
|
||||
setFirstSection(false);
|
||||
}else{
|
||||
setFirstSection(true);
|
||||
}
|
||||
|
||||
// 第二个动效
|
||||
if ( top >= communityEdition - 600 && top < thirdSection) {
|
||||
setCommunity(true);
|
||||
}
|
||||
if (top < 100 || top > thirdSection - 100) {
|
||||
setCommunity(false);
|
||||
}
|
||||
|
||||
// 第三个动效
|
||||
if (top >= thirdSection - 600 && top < fourthSection) {
|
||||
setThird(true);
|
||||
}
|
||||
if (top < communityEdition || top > fourthSection - 100) {
|
||||
setThird(false);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="homePage">
|
||||
<div className="first-edition">
|
||||
<div className="grid-picture">
|
||||
<div className="homepage-content">
|
||||
|
||||
<div className="website">
|
||||
<h3 className="website-title">红山开源</h3>
|
||||
<div className="website-vision">
|
||||
<span>群智共享</span>
|
||||
<span>开源开放</span>
|
||||
<span>协同创新</span>
|
||||
<span>择优孵化</span>
|
||||
</div>
|
||||
<div className="website-des">红山开源是一个依托互联网群体智慧实现世界范围内资源深度融合、开放共享和协同创新的开源社区，是集开源项目演化发展、科研任务众包、竞赛组织选拔和社区开放交流为一体的创新科研服务平台。红山开源致力于打造一个“开放、汇聚、协同、众创”的生态空间。
|
||||
</div>
|
||||
<Button className="website-more" type="primary">了解详情</Button>
|
||||
</div>
|
||||
|
||||
<div className="play-img">
|
||||
<img className="play-glass" src={glass}></img>
|
||||
<img className="play-circle" src={circle}></img>
|
||||
<img className="play-code" src={code}></img>
|
||||
<img className="play-pillar" src={pillar}></img>
|
||||
<img className="play-logo" src={logo}></img>
|
||||
<img className="play-text1" src={text1}></img>
|
||||
<img className="play-text2" src={text2}></img>
|
||||
<img className="play-text3" src={text3}></img>
|
||||
<img className="play-text4" src={text4}></img>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div className="home-first-section">
|
||||
<FirstSection firstSection={firstSection}/>
|
||||
</div>
|
||||
|
||||
<div className="waves-header">
|
||||
<svg className="waves"
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g className="parallax">
|
||||
{/* <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.4)" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" /> */}
|
||||
|
||||
{/* <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.7" /> */}
|
||||
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.5)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.4)" />
|
||||
<use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
|
||||
</g>
|
||||
</svg>
|
||||
<div className="home-second-section">
|
||||
<SecondSection community={community} />
|
||||
</div>
|
||||
|
||||
<NewSlide></NewSlide>
|
||||
|
||||
<div className="home-third-section">
|
||||
<ThirdSection third={third}/>
|
||||
</div>
|
||||
|
||||
<div className="home-fourth-section">
|
||||
<FourthSection />
|
||||
</div>
|
||||
|
||||
<div className="home-fifth-section">
|
||||
<FifthSection />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,196 +1,79 @@
|
|||
.homePage {
|
||||
margin-top: -6px;
|
||||
background: #fff;
|
||||
|
||||
.first-edition {
|
||||
height: 80vh;
|
||||
background: linear-gradient(
|
||||
#1a2358 0%,
|
||||
#12277b 33%,
|
||||
#0c2d8f 67%,
|
||||
#002a89 100%
|
||||
);
|
||||
// 首页多个部分公共样式
|
||||
.ant-btn-primary {
|
||||
background-color: #4154f1;
|
||||
border-color: #4154f1;
|
||||
height: 56px;
|
||||
box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33) !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid-picture {
|
||||
height: 100%;
|
||||
background: url(./img/grid.png) no-repeat;
|
||||
.homePage-blue-tit {
|
||||
color: #000870;
|
||||
font-size: 34px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.homepage-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1200px;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
.homePage-subhead {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.website {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
// width: 48%;
|
||||
height: 100%;
|
||||
// 首页特定头部样式起
|
||||
&.newHeaders {
|
||||
background-color: #1a2358;
|
||||
}
|
||||
.head-nav ul#header-nav li a {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
.website-title {
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
}
|
||||
.website-vision {
|
||||
margin-bottom: 36px;
|
||||
color: #ff832b;
|
||||
font-size: 25px;
|
||||
span {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.website-des {
|
||||
font-size: 12px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.website-more {
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
.head-nav ul#header-nav li:hover a,
|
||||
.head-nav ul#header-nav li.active a {
|
||||
color: #ffa13a;
|
||||
}
|
||||
.head-nav ul#header-nav li.active a::after {
|
||||
background-color: #ffa13a;
|
||||
}
|
||||
|
||||
.play-img {
|
||||
display: flex;
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 580px;
|
||||
img {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.play-glass {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
.play-circle {
|
||||
position: absolute;
|
||||
// width: 25%;
|
||||
// bottom: 0;
|
||||
// right: 10%;
|
||||
|
||||
width: 25%;
|
||||
bottom: 3%;
|
||||
right: 18%;
|
||||
z-index: 2;
|
||||
}
|
||||
.play-pillar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 25%;
|
||||
}
|
||||
.play-code {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10%;
|
||||
}
|
||||
.play-logo {
|
||||
position: absolute;
|
||||
}
|
||||
.play-text1 {
|
||||
position: absolute;
|
||||
// right: 10%;
|
||||
// z-index: 2;
|
||||
|
||||
right: 10%;
|
||||
z-index: 2;
|
||||
}
|
||||
.play-text2 {
|
||||
position: absolute;
|
||||
// bottom: 30%;
|
||||
// left: 17.5%;
|
||||
// z-index: 2;
|
||||
|
||||
bottom: 28%;
|
||||
left: 13%;
|
||||
z-index: 2;
|
||||
width: 30%;
|
||||
}
|
||||
.play-text3 {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
top: -6%;
|
||||
}
|
||||
.play-text4 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20%;
|
||||
}
|
||||
.logoDiv img {
|
||||
min-width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.color-home {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.color-home:hover {
|
||||
color: #4154f1;
|
||||
}
|
||||
|
||||
.register-button {
|
||||
height: 43px ;
|
||||
margin-left: 20px;
|
||||
padding: 0 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
// 首页特定头部样式止
|
||||
|
||||
}
|
||||
|
||||
.news-slide {
|
||||
margin: 20px auto;
|
||||
width: 600px;
|
||||
background: #ffffff;
|
||||
.slick-track > div {
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
transition: all 0.7s;
|
||||
border: 1px solid #fff;
|
||||
.testimonial-item {
|
||||
background: #ffffff;
|
||||
margin-bottom: 20px;
|
||||
padding: 30px 50px 40px 50px;
|
||||
box-shadow: inset -0.71px 0.71px 32px #c0c0c033;
|
||||
}
|
||||
}
|
||||
// .slick-slide[aria-hidden="true"]{
|
||||
// opacity: 0;
|
||||
// }
|
||||
// .slick-slide[aria-hidden="false"]{
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
// .slick-slide {
|
||||
// max-width: 500px;
|
||||
// position: relative;
|
||||
// background: #ffffff;
|
||||
// margin-bottom: 22px;
|
||||
// transition: all 2s;
|
||||
// padding: 30px 50px 40px 50px;
|
||||
// box-shadow: inset -0.71px 0.71px 32px #c0c0c033;
|
||||
// }
|
||||
.slick-center {
|
||||
margin-left: 100px;
|
||||
}
|
||||
// .slick-slide.slick-current {
|
||||
// margin-left: 100px;
|
||||
// }
|
||||
}
|
||||
|
||||
.waves-header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background: #002a89;
|
||||
// background: linear-gradient(
|
||||
// 60deg,
|
||||
// rgba(84, 58, 183, 1) 0%,
|
||||
// rgba(0, 172, 193, 1) 100%
|
||||
// );
|
||||
color: white;
|
||||
}
|
||||
// 波浪样式起
|
||||
.waves {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
margin-bottom: -10px; /*Fix for safari gap*/
|
||||
min-height: 40px;
|
||||
max-height: 60px;
|
||||
height: 8vh;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
height: 20vh;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
} /* Animation */
|
||||
// .waves-low {
|
||||
// height: 6vh;
|
||||
// }
|
||||
.parallax > use {
|
||||
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
|
||||
}
|
||||
|
|
@ -220,13 +103,8 @@
|
|||
} /*Shrinking for mobile*/
|
||||
@media (max-width: 768px) {
|
||||
.waves {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.content {
|
||||
height: 30vh;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
height: 8vh;
|
||||
}
|
||||
}
|
||||
// 波浪样式止
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
.homePage .head-nav ul#header-nav li a{
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
.head-nav ul#header-nav li:hover a, .head-nav ul#header-nav li.active a{
|
||||
color: #1484EF;
|
||||
}
|
||||
|
|
@ -14,40 +10,3 @@
|
|||
bottom: 12px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.newHeaders.homePage{
|
||||
background-color: #1A2358;
|
||||
/* height: 64px; */
|
||||
}
|
||||
|
||||
/* .logoDiv{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
} */
|
||||
|
||||
.homePage .logoDiv img{
|
||||
min-width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.homePage .color-home{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.homePage .color-home:hover{
|
||||
color: #4154F1;
|
||||
}
|
||||
|
||||
.homePage .ant-btn-primary{
|
||||
background-color: #4154F1;
|
||||
border-color: #4154F1;
|
||||
}
|
||||
|
||||
.homePage .register-button{
|
||||
height: 43px;
|
||||
margin-left:20px;
|
||||
padding: 0 25px;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue