+
数据统计总览
+
+
+ {/*
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ThirdSection;
\ No newline at end of file
diff --git a/src/home/ThirdSection/index.scss b/src/home/ThirdSection/index.scss
new file mode 100644
index 000000000..a239e9a91
--- /dev/null
+++ b/src/home/ThirdSection/index.scss
@@ -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);
+ }
+ }
+}
diff --git a/src/home/img/ballBg.png b/src/home/img/ballBg.png
new file mode 100644
index 000000000..67acac25b
Binary files /dev/null and b/src/home/img/ballBg.png differ
diff --git a/src/home/img/dashCircle.png b/src/home/img/dashCircle.png
new file mode 100644
index 000000000..b3f8178fc
Binary files /dev/null and b/src/home/img/dashCircle.png differ
diff --git a/src/home/img/grid.png b/src/home/img/grid.png
old mode 100755
new mode 100644
index 905bd4b47..4675007c0
Binary files a/src/home/img/grid.png and b/src/home/img/grid.png differ
diff --git a/src/home/img/gridbak.png b/src/home/img/gridbak.png
new file mode 100755
index 000000000..905bd4b47
Binary files /dev/null and b/src/home/img/gridbak.png differ
diff --git a/src/home/img/text1.png b/src/home/img/text1.png
index ab3d3d241..e3d47407b 100644
Binary files a/src/home/img/text1.png and b/src/home/img/text1.png differ
diff --git a/src/home/img/text2.png b/src/home/img/text2.png
index 1d84b0422..76b85af90 100644
Binary files a/src/home/img/text2.png and b/src/home/img/text2.png differ
diff --git a/src/home/img/text3.png b/src/home/img/text3.png
index d2b525cbd..8c0812361 100644
Binary files a/src/home/img/text3.png and b/src/home/img/text3.png differ
diff --git a/src/home/img/text4.png b/src/home/img/text4.png
index dffdecf5f..1f6f49740 100644
Binary files a/src/home/img/text4.png and b/src/home/img/text4.png differ
diff --git a/src/home/img/整体@2x.png b/src/home/img/整体@2x.png
deleted file mode 100644
index 6f1564ab1..000000000
Binary files a/src/home/img/整体@2x.png and /dev/null differ
diff --git a/src/home/index.jsx b/src/home/index.jsx
index bf3bd3c6f..8f85726a2 100644
--- a/src/home/index.jsx
+++ b/src/home/index.jsx
@@ -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 (
-
-
-
-
-
红山开源
-
- 群智共享
- 开源开放
- 协同创新
- 择优孵化
-
-
红山开源是一个依托互联网群体智慧实现世界范围内资源深度融合、开放共享和协同创新的开源社区，是集开源项目演化发展、科研任务众包、竞赛组织选拔和社区开放交流为一体的创新科研服务平台。红山开源致力于打造一个“开放、汇聚、协同、众创”的生态空间。
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/home/index.scss b/src/home/index.scss
index 35968c3e8..1db1300e6 100644
--- a/src/home/index.scss
+++ b/src/home/index.scss
@@ -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;
}
}
+// 波浪样式止
+
diff --git a/src/modules/tpm/css/headerExcess.css b/src/modules/tpm/css/headerExcess.css
index b4cf8852f..4da9a0aa7 100644
--- a/src/modules/tpm/css/headerExcess.css
+++ b/src/modules/tpm/css/headerExcess.css
@@ -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;
-
-}
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+