Gitlink
/
forgeplus-react
39
0
Fork 30
Code Issues Pull Requests Releases 1 Wiki Activity

修改样式，兼容大屏和手机端

This commit is contained in:
何童崇 2021-12-16 09:27:14 +08:00
parent 0dc7a1f582
commit 90f8e04e93
15 changed files with 396 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/Env.js
View File

@ -3,6 +3,6 @@ export function isDev() {
} }
// const isMobile // const isMobile
export const isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())); export const isMobile = (/android|webos|iphone|ipad|ipod|blackberry|honor|huawei|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
// const isWeiXin = (/MicroMessenger/i.test(navigator.userAgent.toLowerCase())); // const isWeiXin = (/MicroMessenger/i.test(navigator.userAgent.toLowerCase()));

10
src/home/FifthSection/index.jsx
View File

@ -208,9 +208,13 @@ function FifthSection({ fifth, history }) {
</defs> </defs>
<g className="parallax"> <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="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="0" fill="rgba(4,22,112,0.3)" />
<use xlinkHref="#wave-path" x="50" y="9" fill="#041670" /> <use xlinkHref="#wave-path" x="50" y="9" fill="#0037AF" /> */}
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" />
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" />
<use xlinkHref="#wave-path" x="50" y="9" fill="#0037AF" />
</g> </g>
</svg> </svg>
</React.Fragment> </React.Fragment>

47
src/home/FifthSection/index.scss
View File

@ -5,10 +5,12 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
.home-fifth-section { .home-fifth-section {
min-height: 50vh; min-height: 50vh;
background: linear-gradient(#fff 0%, #cbdcff 100%);
.fifth-main { .fifth-main {
display: flex; display: flex;
margin: 5vh auto 3vh; margin: 5vh auto 3vh;
justify-content: space-between;
} }
.homepage-btn { .homepage-btn {
@ -105,7 +107,7 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
.circleBox { .circleBox {
position: relative; position: relative;
right: .95em; right: 0.9375em;
width: 10em; width: 10em;
height: 10em; height: 10em;
margin: 12.5em auto 0; margin: 12.5em auto 0;
@ -132,13 +134,13 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
.circle-center { .circle-center {
width: 6.25em; width: 6.25em;
height: 6.25em; height: 6.25em;
padding: 1em 1.25em; padding: 1em 2em;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(to bottom right, #2bebd7 0%, #692fd1 100%); background: linear-gradient(to bottom right, #2bebd7 0%, #692fd1 100%);
color: #fff; color: #fff;
text-align: center; text-align: center;
font-size: 1.25em; font-size: 1.25em;
line-height: 1.4; line-height: 2em;
} }
.circle1 { .circle1 {
@ -229,9 +231,10 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
.ant-collapse { .ant-collapse {
border: 0; border: 0;
background: inherit; background: inherit;
font-size: .875em;
.ant-collapse-item { .ant-collapse-item {
border: 0; border: 0;
margin-bottom: .95em; margin-bottom: 0.9375em;
} }
.ant-collapse-item:last-child, .ant-collapse-item:last-child,
.ant-collapse-item:last-child > .ant-collapse-header { .ant-collapse-item:last-child > .ant-collapse-header {
@ -241,28 +244,27 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
.ant-collapse-header { .ant-collapse-header {
height: 4.875em; height: 4.875em;
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px .625em 5px rgba(38, 118, 255, 0.04); box-shadow: 0px 0px .625em .3125em rgba(38, 118, 255, 0.04);
border-radius: .375em; border-radius: .375em;
font-size: 1.125em; font-size: 1.125em;
color: #0a1255; color: #0a1255;
letter-spacing: 0; letter-spacing: 0;
font-weight: 500; font-weight: 500;
padding: 27px 45px 27px 3.375em; padding: 1.6875em 2.8125em 1.6875em 3.375em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 35em; // max-width: 35em;
.ant-collapse-arrow { .ant-collapse-arrow {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 28px; width: 1.75em;
height: 28px; height: 1.75em;
border-radius: 50%; border-radius: 50%;
box-shadow: 0px 0px 5px 1px rgba(38, 118, 255, 0.1); box-shadow: 0px 0px 3.125em 1px rgba(38, 118, 255, 0.1);
svg { svg {
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -271,12 +273,12 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
.ant-collapse-item-active { .ant-collapse-item-active {
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px .625em 5px rgba(38, 118, 255, 0.04); box-shadow: 0px 0px .625em .3125em rgba(38, 118, 255, 0.04);
border-radius: .375em; border-radius: .375em;
border: 0; border: 0;
.ant-collapse-header { .ant-collapse-header {
height: 48px; height: 3em;
padding: .95em 3.375em; padding: 0.9375em 3.375em;
background: #596cee; background: #596cee;
color: #fff; color: #fff;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
@ -289,34 +291,33 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
} }
.ant-collapse-content > .ant-collapse-content-box { .ant-collapse-content > .ant-collapse-content-box {
padding: 1.375em 28px; padding: 1.375em 1.75em;
} }
} }
.collapse-des { .collapse-des {
height: 5.375em; font-size: 0.9375em;
font-size: .95em;
color: #3a4772; color: #3a4772;
letter-spacing: 0; letter-spacing: 0;
line-height: 28px; line-height: 1.75em;
font-weight: 400; font-weight: 400;
margin-bottom: 0.5em !important; margin-bottom: 0.5em !important;
} }
.collapse-content { .collapse-content {
padding: 12px; padding: .75em;
background: #f5f7fa; background: #f5f7fa;
border-radius: 4px; border-radius: .25em;
.collapse-content-item { .collapse-content-item {
position: relative; position: relative;
height: 30px; height: 1.875em;
line-height: 30px; line-height: 1.875em;
font-weight: 400; font-weight: 400;
} }
.iconfont { .iconfont {
margin-right: 12px; margin-right: .75em;
color: #ea0000; color: #ea0000;
} }
.collapse-content-money { .collapse-content-money {

108
src/home/FirstSection/index.scss
View File

@ -12,8 +12,6 @@
#0c2d8f 100%, #0c2d8f 100%,
); );
// #003FCC 100%
.grid-picture { .grid-picture {
position: relative; position: relative;
height: 100%; height: 100%;
@ -51,9 +49,9 @@
.website-vision { .website-vision {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 36px; margin-bottom: 1.3em;
color: #ff832b; color: #ff832b;
font-size: 25px; font-size: 1.5em;
} }
.website-des { .website-des {
font-size: 1em; font-size: 1em;
@ -83,27 +81,24 @@
position: relative; position: relative;
width: 351px; width: 351px;
z-index: 1; z-index: 1;
// animation: glass 0.75s 1 forwards;
} }
.play-circle { .play-circle {
position: absolute; position: absolute;
width: 165px; width: 165px;
height: 160px; height: 160px;
right: 18%; right: 17%;
bottom: -5.5%; bottom: -6.5%;
z-index: 2; z-index: 2;
// animation: circle 0.75s 1 forwards;
} }
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5 { .play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5 {
position: absolute; position: absolute;
width: 85px; width: 85px;
height: 53px; height: 53px;
right: 24.1%; right: 23.2%;
bottom: 9%; bottom: 9%;
z-index: 2; z-index: 2;
border: 1px solid rgb(73, 169, 241); border: 1px solid rgb(73, 169, 241);
// border: 1px solid rgb(49, 82, 237);
border-radius: 50%; border-radius: 50%;
} }
@ -112,54 +107,41 @@
left: -11%; left: -11%;
top: 37%; top: 37%;
width: 230px; width: 230px;
// animation: pillar 0.75s 1 forwards;
} }
.play-box1 { .play-box1 {
position: absolute; position: absolute;
left: -7%; left: -6%;
bottom: 30%; bottom: 30%;
width: 57px; width: 57px;
// animation: box1 0.75s 1 forwards;
} }
.play-box2 { .play-box2 {
position: absolute; position: absolute;
left: -1%; left: 0%;
bottom: 34%; bottom: 34%;
width: 57px; width: 57px;
// animation: box2 0.75s 1 forwards;
} }
.play-box3 { .play-box3 {
position: absolute; position: absolute;
left: 5%; left: 6%;
bottom: 38%; bottom: 38%;
width: 57px; width: 57px;
// animation: box3 0.75s 1 forwards;
} }
.play-box4 { .play-box4 {
position: absolute; position: absolute;
left: 11%; left: 12%;
bottom: 42%; bottom: 42%;
width: 57px; width: 57px;
// animation: box4 0.75s 1 forwards;
} }
// .play-code {
// position: absolute;
// right: -4%;
// top: 18%;
// width: 211px;
// z-index: 1;
// }
.play-code1 { .play-code1 {
position: absolute; position: absolute;
right: 1%; right: 0%;
top: 33%; top: 33%;
width: 128px; width: 128px;
z-index: 1; z-index: 1;
} }
.play-code-bed { .play-code-bed {
position: absolute; position: absolute;
right: -4%; right: -5%;
top: 44%; top: 44%;
width: 211px; width: 211px;
z-index: 1; z-index: 1;
@ -176,28 +158,16 @@
.play-text1 { .play-text1 {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
// right: 5%;
// width: 262px;
// bottom: 11%;
} }
.play-text2 { .play-text2 {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
// bottom: 10%;
// left: 6%;
// width: 262px;
} }
.play-text3 { .play-text3 {
position: absolute; position: absolute;
// right: 6%;
// top: -4%;
// width: 227px;
} }
.play-text4 { .play-text4 {
position: absolute; position: absolute;
// top: 7%;
// left: 18%;
// width: 206px;
} }
} }
@ -214,9 +184,6 @@
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{ .play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
animation: circle-before 0.75s 1 forwards; animation: circle-before 0.75s 1 forwards;
} }
// .play-pillar {
// animation: pillar 0.75s 1 forwards;
// }
.play-box1 { .play-box1 {
animation: box1 0.75s 1 forwards; animation: box1 0.75s 1 forwards;
} }
@ -322,20 +289,14 @@
0% { 0% {
opacity: 1; opacity: 1;
top: 23%; top: 23%;
// transform: scale(.5);
// transform: rotateY(0deg);
} }
50% { 50% {
opacity: 1; opacity: 1;
top: 12%; top: 12%;
// transform: scale(1.2);
// transform: rotateY(360deg);
} }
100% { 100% {
opacity: 1; opacity: 1;
top: 23%; top: 23%;
// transform: scale(.5);
// transform: rotateY(360deg);
} }
} }
@ -421,7 +382,7 @@
} }
100% { 100% {
opacity: 1; opacity: 1;
bottom: -5.5%; bottom: -6.5%;
} }
} }
@ -436,16 +397,6 @@
} }
} }
// @keyframes pillar {
// 0% {
// opacity: 0;
// top: 47%;
// }
// 100% {
// opacity: 1;
// top: 38%;
// }
// }
@keyframes box1 { @keyframes box1 {
0% { 0% {
@ -716,41 +667,6 @@
} }
@keyframes circle-circle { @keyframes circle-circle {
// 0% {
// transform: scale(1);
// opacity: 1;
// bottom: 9%;
// }
// 20% {
// transform: scale(1.1);
// opacity: 0.75;
// bottom: 9.25%;
// }
// 40% {
// transform: scale(1.25);
// opacity: 0.5;
// bottom: 9.6%;
// }
// 60% {
// transform: scale(1.45);
// opacity: 0.35;
// bottom: 10.1%;
// }
// 80% {
// transform: scale(1.7);
// opacity: 0.2;
// bottom: 10.6%;
// }
// 100% {
// transform: scale(2);
// opacity: 0;
// bottom: 11.5%;
// }
0% { 0% {
transform: scale(1); transform: scale(1);

14
src/home/Footer/index.scss
View File

@ -58,16 +58,4 @@
background-color: #162046 !important; background-color: #162046 !important;
} }
} }
@media screen and (max-width: 1200px) {
.home-footer {
height: 400px;
.arc {
margin: -100px -100px 0;
height: 200px;
border-radius: 50%;
}
.footer-main{
height: 200px;
}
}
}

2
src/home/SecondSection/index.jsx
View File

@ -15,7 +15,7 @@ let setting = {
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 1, slidesToScroll: 1,
pauseOnDotsHover: true, pauseOnDotsHover: true,
autoplaySpeed: 400000, autoplaySpeed: 4000,
centerMode: true, centerMode: true,
centerPadding: "10px", centerPadding: "10px",
// pauseOnFocus: true, // pauseOnFocus: true,

2
src/home/SecondSection/index.scss
View File

@ -154,8 +154,10 @@
} }
p { p {
margin:1em 0 .5em;
color: #3c476e; color: #3c476e;
font-size: .9em; font-size: .9em;
} }
} }
.slick-center { .slick-center {

2
src/home/SeventhSection/index.jsx
View File

@ -13,11 +13,13 @@ import './index.scss';
let setting = { let setting = {
infinite: true, infinite: true,
dots:true,
speed: 750, speed: 750,
slidesToShow: 1, slidesToShow: 1,
slidesToScroll: 1, slidesToScroll: 1,
pauseOnDotsHover: true, pauseOnDotsHover: true,
autoplaySpeed: 5000, autoplaySpeed: 5000,
// pauseOnFocus: true,
centerMode: true, centerMode: true,
centerPadding: "0px", centerPadding: "0px",
autoplay: true, autoplay: true,

121
src/home/SeventhSection/index.scss
View File

@ -1,10 +1,10 @@
.home-seventh-section { .home-seventh-section {
background: linear-gradient(#fff 0%, #cbdcff 100%); background: linear-gradient(#fff 0%, #cbdcff 100%);
text-align: center; text-align: center;
padding-top: 40px; padding-top: 2.5em;
padding-bottom: 10px; padding-bottom: 0.625em;
z-index: 100000; z-index: 100000;
margin-bottom: -10px; margin-bottom: -0.625em;
border-bottom: 1px solid #cbdcff; border-bottom: 1px solid #cbdcff;
.seventh-main { .seventh-main {
position: relative; position: relative;
@ -12,14 +12,14 @@
.clients { .clients {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 500px; height: 31.25em;
left: 0; left: 0;
bottom: 40px; bottom: 2.5em;
// z-index: 10; // z-index: 10;
.client { .client {
position: absolute; position: absolute;
width: 100px; width: 6.25em;
height: 100px; height: 6.25em;
border-radius: 50%; border-radius: 50%;
z-index: 100; z-index: 100;
} }
@ -30,35 +30,35 @@
animation: zoomin 0.9s infinite alternate; animation: zoomin 0.9s infinite alternate;
} }
.client:nth-child(2) { .client:nth-child(2) {
top: 190px; top: 11.875em;
left: -115px; left: -7.1875em;
animation: zoomin 1.3s infinite alternate; animation: zoomin 1.3s infinite alternate;
} }
.client:nth-child(3) { .client:nth-child(3) {
left: 0; left: 0;
bottom: 70px; bottom: 4.375em;
animation: zoomin 1.6s infinite alternate; animation: zoomin 1.6s infinite alternate;
} }
.client:nth-child(4) { .client:nth-child(4) {
top: 40px; top: 2.5em;
right: 0; right: 0;
animation: zoomin 1.9s infinite alternate; animation: zoomin 1.9s infinite alternate;
} }
.client:nth-child(5) { .client:nth-child(5) {
right: -85px; right: -5.3125em;
bottom: 135px; bottom: 8.4375em;
animation: zoomin 2.1s infinite alternate; animation: zoomin 2.1s infinite alternate;
} }
.client:nth-child(6) { .client:nth-child(6) {
right: 150px; right: 9.375em;
bottom: 10px; bottom: 0.625em;
animation: zoomin 1.6s infinite alternate; animation: zoomin 1.6s infinite alternate;
} }
.icon-a-shuangyinhao12x { .icon-a-shuangyinhao12x {
position: absolute; position: absolute;
color: #ef7a30; color: #ef7a30;
font-size: 36px !important ; font-size: 2.25em !important ;
} }
.start-icon { .start-icon {
top: 50px; top: 50px;
@ -73,40 +73,88 @@
} }
} }
.slick-dots {
height: 31.25em;
left: 0;
bottom: -4.5em;
z-index: 101;
li {
position: absolute;
width: 7em;
height: 7em;
border-radius: 50%;
button{
width: inherit;
height: inherit;
&:before {
width: inherit;
height: inherit;
color: #fff;
opacity: 0;
}
}
}
li:nth-child(1) {
top: -.5em;
left: -.5em;
}
li:nth-child(2) {
top: 11.875em;
left: -7.6875em;
}
li:nth-child(3) {
left: -.5em;
bottom: 3.875em;
}
li:nth-child(4) {
top: 2.5em;
right: -.5em;
}
li:nth-child(5) {
right: -5.8125em;
bottom: 8em;
}
li:nth-child(6) {
right: 8.875em;
bottom: 0.125em;
}
}
.slick-slider { .slick-slider {
margin: 40px auto 20px; margin: 2.5em auto 1.25em;
height: 480px; height: 30em;
background: url(../img/7-bg.png) no-repeat; background: url(../img/7-bg.png) no-repeat;
background-size: 804px 474px; background-size: 50.25em 29.625em;
background-position: center; background-position: center;
} }
.slick-list { .slick-list {
width: 540px; width: 33.75em;
margin: 0 auto; margin: 0 auto;
z-index: 10000;
} }
.issue-item { .issue-item {
text-align: center; text-align: center;
.author-head { .author-head {
width: 130px; width: 8.125em;
height: 130px; height: 8.125em;
border-radius: 50%; border-radius: 50%;
margin: 0 auto; margin: 0 auto;
} }
.issue-author { .issue-author {
display: inline-block; display: inline-block;
font-size: 18px; font-size: 1.125em;
font-weight: 500; font-weight: 500;
color: #ff7300; color: #ff7300;
line-height: 28px; line-height: 1.75em;
margin: 10px auto; margin: 0.625em auto;
} }
.issue-title { .issue-title {
font-size: 20px; font-size: 1.25em;
font-weight: 500; font-weight: 500;
color: #000870; color: #000870;
line-height: 28px; line-height: 1.75em;
margin-bottom: 20px; margin-bottom: 1.25em;
} }
.issue-content { .issue-content {
text-align: left; text-align: left;
@ -139,16 +187,21 @@
} }
} }
@media screen and (max-width: 1400px){ @media screen and (max-width: 1400px) {
.home-seventh-section .clients{ .home-seventh-section {
.slick-dots,.clients {
width: 86%; width: 86%;
left:8%; left: 8%;
}
} }
} }
@media screen and (max-width: 1200px){ @media screen and (max-width: 1200px) {
.home-seventh-section .clients{ .home-seventh-section {
.slick-dots,.clients {
width: 80%; width: 80%;
left:11%; left: 11%;
}
} }
} }

1
src/home/SixthSection/index.jsx
View File

@ -17,7 +17,6 @@ import './index.scss';
let iconArr = [completeIcon1, completeIcon2, completeIcon3]; let iconArr = [completeIcon1, completeIcon2, completeIcon3];
function SixthSection({ sixth, main_web_site_url }) { function SixthSection({ sixth, main_web_site_url }) {
const [list, setList] = useState(); const [list, setList] = useState();

108
src/home/SixthSection/index.scss
View File

@ -1,14 +1,14 @@
.home-sixth-section { .home-sixth-section {
position: relative; position: relative;
color: #fff; color: #fff;
background: linear-gradient(#041670 0%, #2951da 100%); background: linear-gradient(#0037AF 0%, #2951da 100%);
text-align: center; text-align: center;
margin-bottom: -2px; margin-bottom: -2px;
z-index: 10; z-index: 10;
.grid-picture { .grid-picture {
background: url(../img/grid.png) no-repeat; background: url(../img/grid.png) no-repeat;
background-size: 100% 100%; background-size: auto 100%;
padding-bottom: 100px; padding-bottom: 6.25em;
} }
.sixth-main { .sixth-main {
@ -21,14 +21,14 @@
position: relative; position: relative;
opacity: 0; opacity: 0;
display: flex; display: flex;
padding: 15px; padding: .9375em;
margin: 30px 0; margin: 1.875em 0;
align-items: center; align-items: center;
width: 480px; width: 30em;
height: 170px; height: 10.625em;
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
box-shadow: 0px 0px 10px 5px rgba(38, 118, 255, 0.04); box-shadow: 0px 0px .625em .3125em rgba(38, 118, 255, 0.04);
border-radius: 10px; border-radius: .625em;
border: 1px transparent solid; border: 1px transparent solid;
border-image: linear-gradient( border-image: linear-gradient(
to right, to right,
@ -37,55 +37,49 @@
rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2)
) )
1 10; 1 10;
// &:after{
// content:''; p{
// position: absolute; margin-bottom: .5em;
// top: -3px; bottom: -3px; }
// left: -3px; right: -3px;
// background: linear-gradient(to right,rgba(255,255,255,.5),rgba(255,255,255,1),rgba(255,255,255,.5));
// border-radius: 10px;
// content: '';
// z-index: -1;
// }
} }
.des-item:nth-child(2) { .des-item:nth-child(2) {
margin: 60px 0 0 20px; margin: 3.75em 0 0 1.25em;
} }
.des-item:nth-child(3) { .des-item:nth-child(3) {
margin: 60px 0 0 40px; margin: 3.75em 0 0 2.5em;
} }
.des-item-img { .des-item-img {
width: 100px; width: 6.25em;
height: 100px; height: 6.25em;
flex: none; flex: none;
} }
.des-item-content { .des-item-content {
width: 348px; width: 21.75em;
text-align: left; text-align: left;
font-size: 15px; font-size: .9375em;
font-weight: 400; font-weight: 400;
line-height: 28px; line-height: 1.75em;
opacity: .8; opacity: .8;
.des-item-title { .des-item-title {
font-size: 18px; font-size: 1.125em;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #ff9931; color: #ff9931;
line-height: 25px; line-height: 1.5625em;
} }
} }
.sixth-right { .sixth-right {
width: 680px; width: 42.5em;
overflow: visible; overflow: visible;
} }
.sixth-right-title { .sixth-right-title {
margin-left: 80px; margin-left: 5em;
width: 450px; width: 28.125em;
text-align: left; text-align: left;
.home-line { .home-line {
@ -93,15 +87,15 @@
} }
} }
.sixth-play-img { .sixth-play-img {
width: 781px; width: 48.1825em;
position: relative; position: relative;
.ball { .ball {
position: absolute; position: absolute;
top: 300px; top: 18.75em;
left: 110px; left: 6.875em;
z-index: 1; z-index: 1;
width: 33px; width: 2.0625em;
animation: ball infinite 5s linear; animation: ball infinite 5s linear;
} }
@ -110,7 +104,7 @@
top: 15%; top: 15%;
left: 45%; left: 45%;
z-index: 1; z-index: 1;
width: 92px; width: 5.75em;
animation: cup infinite 4s; animation: cup infinite 4s;
} }
@ -119,7 +113,7 @@
top: 9%; top: 9%;
left: 22%; left: 22%;
z-index: 1; z-index: 1;
width: 60px; width: 3.75em;
animation: net infinite 4s 1s; animation: net infinite 4s 1s;
} }
@ -128,7 +122,7 @@
top: 6%; top: 6%;
right: 17%; right: 17%;
z-index: 1; z-index: 1;
width: 55px; width: 3.4375em;
animation: yLetter infinite 4s 1.5s; animation: yLetter infinite 4s 1.5s;
} }
@ -137,8 +131,8 @@
bottom: 10%; bottom: 10%;
left: 43%; left: 43%;
z-index: 1; z-index: 1;
width: 36px; width: 2.25em;
height: 42px; height: 2.625em;
animation: pillar1 infinite 3s; animation: pillar1 infinite 3s;
} }
.pillar2 { .pillar2 {
@ -146,8 +140,8 @@
bottom: 12%; bottom: 12%;
left: 40%; left: 40%;
z-index: 1; z-index: 1;
width: 28px; width: 1.75em;
height: 50px; height: 3.125em;
animation: pillar2 infinite 3s; animation: pillar2 infinite 3s;
} }
.pillar3 { .pillar3 {
@ -155,14 +149,14 @@
bottom: 12%; bottom: 12%;
left: 42%; left: 42%;
z-index: 1; z-index: 1;
width: 28px; width: 1.75em;
height: 59px; height: 3.6875em;
animation: pillar3 infinite 3s; animation: pillar3 infinite 3s;
} }
} }
.overall { .overall {
width: 759px; width: 47.4375em;
} }
.homepage-btn{ .homepage-btn{
@ -254,46 +248,46 @@
} }
@keyframes pillar1 { @keyframes pillar1 {
0% { 0% {
height: 40px; height: 2.5em;
} }
48% { 48% {
height: 32px; height: 2em;
} }
52% { 52% {
height: 32px; height: 2em;
} }
100% { 100% {
height: 40px; height: 2.5em;
} }
} }
@keyframes pillar2 { @keyframes pillar2 {
0% { 0% {
height: 40px; height: 2.5em;
} }
48% { 48% {
height: 65px; height: 4.0625em;
} }
52% { 52% {
height: 65px; height: 4.0625em;
} }
100% { 100% {
height: 40px; height: 2.5em;
} }
} }
@keyframes pillar3 { @keyframes pillar3 {
0% { 0% {
height: 65px; height: 4.0625em;
} }
48% { 48% {
height: 40px; height: 2.5em;
} }
52% { 52% {
height: 40px; height: 2.5em;
} }
100% { 100% {
height: 65px; height: 4.0625em;
} }
} }
} }

148
src/home/index.jsx
View File

@ -13,7 +13,7 @@ import SeventhSection from './SeventhSection';
import Footer from './Footer'; import Footer from './Footer';
let isHuawei = (/honor|huawei/i.test(navigator.userAgent.toLowerCase()));
function HomePage({ history }) { function HomePage({ history }) {
useEffect(() => { useEffect(() => {
@ -25,182 +25,122 @@ function HomePage({ history }) {
const [first, setFirst] = useState(true); const [first, setFirst] = useState(true);
const [second, setSecond] = useState(isMobile); const [second, setSecond] = useState(isMobile);
const [third, setThird] = useState(false); const [third, setThird] = useState(false || isHuawei);
const [fourth, setFourth] = useState(false); const [fourth, setFourth] = useState(false || isHuawei);
const [fifth, setFifth] = useState(false); const [fifth, setFifth] = useState(false || isHuawei);
const [sixth, setSixth] = useState(false); const [sixth, setSixth] = useState(false || isHuawei);
let settings = JSON.parse(localStorage.chromesetting); let settings = JSON.parse(localStorage.chromesetting);
let main_web_site_url = settings.main_web_site_url; let main_web_site_url = settings.main_web_site_url;
useEffect(() => {
let userAgentInfo = navigator.userAgent;
let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
let flag = false;
for (let v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > -1) {
flag = true;
break;
}
}
console.log('flag:' + flag)
}, [])
function scrollListener() { function scrollListener() {
let clientHeight = document.body.clientHeight; let clientHeight = document.body.clientHeight;
let clientWidth = document.body.clientWidth; let clientWidth = document.body.clientWidth;
let secondSection = document.querySelector(".home-second-section").offsetTop; // let secondSection = document.querySelector(".home-second-section").offsetTop;
let thirdSection = document.querySelector(".home-third-section").offsetTop; // let thirdSection = document.querySelector(".home-third-section").offsetTop;
let fourthSection = document.querySelector(".home-fourth-section").offsetTop; // let fourthSection = document.querySelector(".home-fourth-section").offsetTop;
let fifthSection = document.querySelector(".home-fifth-section").offsetTop; // let fifthSection = document.querySelector(".home-fifth-section").offsetTop;
let sixthSection = document.querySelector(".home-sixth-section").offsetTop; // let sixthSection = document.querySelector(".home-sixth-section").offsetTop;
let seventhSection = document.querySelector(".home-seventh-section").offsetTop; // let seventhSection = document.querySelector(".home-seventh-section").offsetTop;
let secondSection = document.getElementById("home-second-section").offsetTop;
let thirdSection = document.getElementById("home-third-section").offsetTop;
let fourthSection = document.getElementById("home-fourth-section").offsetTop;
let fifthSection = document.getElementById("home-fifth-section").offsetTop;
let sixthSection = document.getElementById("home-sixth-section").offsetTop;
let seventhSection = document.getElementById("home-seventh-section").offsetTop;
let top = document.documentElement.scrollTop; let top = document.documentElement.scrollTop;
// console.log("thirdSection:" + thirdSection);
// console.log("thirdSection:" + thirdSection);
// console.log("fourthSection:" + fourthSection);
// console.log("fifthSection:" + fifthSection);
// console.log("sixthSection:" + sixthSection);
// console.log("seventhSection:" + seventhSection);
// 平板电脑及电脑
if (!isMobile) {
// 第一个动效
if (top >= clientHeight - 300) { if (top >= clientHeight - 300) {
setFirst(false); setFirst(false);
} else { } else {
setFirst(true); setFirst(true);
} }
if (clientWidth > 1100) {
// 第二个动效 // 第二个动效
if (top >= secondSection - 600 && top < thirdSection) { if (top >= secondSection - clientHeight * 0.8 && top < thirdSection) {
setSecond(true); setSecond(true);
} } else {
if (top < 100 || top > thirdSection - 100) {
setSecond(false); setSecond(false);
} }
} else {
// 第二个动效
if (top >= secondSection - clientHeight && top < thirdSection) {
setSecond(true);
} else {
setSecond(false);
}
}
// 第三个动效 // 第三个动效
if (top >= thirdSection - 600 && top < fourthSection) { if (top >= thirdSection - clientHeight && top < fourthSection) {
setThird(true); setThird(true);
} } else {
if (top < secondSection || top > fourthSection - 100) {
setThird(false); setThird(false);
} }
// 第四个动效 // 第四个动效
if (top >= fourthSection - 600 && top < fifthSection) { if (top >= fourthSection - clientHeight && top < fifthSection) {
setFourth(true); setFourth(true);
} } else {
if (top < thirdSection || top > fifthSection) {
setFourth(false); setFourth(false);
} }
// 第五个动效 // 第五个动效
if (top >= fifthSection - 600 && top < sixthSection) { if (top >= fifthSection - clientHeight && top < sixthSection) {
setFifth(true); setFifth(true);
} } else {
if (top < fourthSection || top > sixthSection) {
setFifth(false); setFifth(false);
} }
// 第六个动效 // 第六个动效
if (top >= sixthSection - 600 && top < seventhSection - 100) { if (top >= sixthSection - clientHeight && top < seventhSection - 100) {
setSixth(true); setSixth(true);
} } else {
if (top < fifthSection || top > seventhSection - 100) {
setSixth(false); setSixth(false);
} }
} else {
// 手机
// 第一个动效
if (top >= clientHeight - 100) { if(isHuawei){
setFirst(false);
} else {
setFirst(true);
}
// 第二个动效
if (top < thirdSection) {
setSecond(true);
}
if (top > thirdSection) {
setSecond(false);
}
// 第三个动效
if (top >= 200 && top < fifthSection) {
setThird(true);
}
if (top < 200 || top > sixthSection - 100) {
setThird(false);
}
// 第四个动效
if (top >= 500) {
setFourth(true); setFourth(true);
}
if (top < 500 || top > fifthSection) {
setFourth(false);
}
// 第五个动效
if (top >= thirdSection - 600 && top < sixthSection) {
setFifth(true);
}
if (top < secondSection || top > sixthSection) {
setFifth(false);
}
// 第六个动效
if (top >= fourthSection - 600) {
setSixth(true); setSixth(true);
} }
if (top < thirdSection) {
setSixth(false);
}
}
} }
return ( return (
<div className="homePage"> <div className="homePage">
<div className="home-first-section"> <div id="home-first-section" className="home-first-section">
<FirstSection first={first} /> <FirstSection first={first} />
</div> </div>
<div className="home-second-section"> <div id="home-second-section" className="home-second-section">
<SecondSection second={second} main_web_site_url={main_web_site_url} /> <SecondSection second={second} main_web_site_url={main_web_site_url} />
</div> </div>
<div className="home-third-section"> <div id="home-third-section" className="home-third-section">
<ThirdSection third={third} /> <ThirdSection third={third} />
</div> </div>
<div className="home-fourth-section"> <div id="home-fourth-section" className="home-fourth-section">
<FourthSection fourth={fourth} history={history} /> <FourthSection fourth={fourth} history={history} />
</div> </div>
<div className="home-fifth-section"> <div id="home-fifth-section" className="home-fifth-section">
<FifthSection fifth={fifth} history={history} /> <FifthSection fifth={fifth} history={history} />
</div> </div>
<div className="home-sixth-section"> <div id="home-sixth-section" className="home-sixth-section">
<SixthSection sixth={sixth} main_web_site_url={main_web_site_url} /> <SixthSection sixth={sixth} main_web_site_url={main_web_site_url} />
</div> </div>
<div className="home-seventh-section"> <div id="home-seventh-section" className="home-seventh-section">
<SeventhSection main_web_site_url={main_web_site_url} /> <SeventhSection main_web_site_url={main_web_site_url} />
</div> </div>

175
src/home/index.scss
View File

@ -53,22 +53,22 @@
.ant-btn-primary { .ant-btn-primary {
background-color: #2a3ee9; background-color: #2a3ee9;
border-color: #2a3ee9; border-color: #2a3ee9;
height: 56px; height: 3.5em;
box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33) !important; box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33) !important;
border-radius: 6px; border-radius: 0.375em;
} }
.homepage-btn { .homepage-btn {
width: 140px; width: 8.75em;
height: 56px; height: 3.5em;
font-size: 16px; font-size: 1em;
&:hover { &:hover {
background-color: #4154f1; background-color: #4154f1;
border-color: #4154f1; border-color: #4154f1;
} }
.icon-gengduoicon { .icon-gengduoicon {
margin-left: 5px; margin-left: 0.375em;
color: #ffbf2d; color: #ffbf2d;
font-size: 16px !important; font-size: 1em !important;
} }
} }
.text-center { .text-center {
@ -77,33 +77,33 @@
.homepage-main { .homepage-main {
width: 1200px; width: 1200px;
max-width: 98%; max-width: 96%;
margin: -1px auto 0; margin: -1px auto 0;
} }
.homePage-blue-tit { .homePage-blue-tit {
color: #000870; color: #000870;
font-size: 34px; font-size: 2.125em;
margin-bottom: 0; margin-bottom: 0;
} }
.homePage-subhead { .homePage-subhead {
font-size: 16px; font-size: 1em;
color: #666; color: #666;
} }
.homePage-white-tit { .homePage-white-tit {
font-size: 36px; font-size: 2.25em;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
line-height: 50px; line-height: 3.125em;
} }
.homePage-white-subhead { .homePage-white-subhead {
font-size: 16px; font-size: 1em;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
line-height: 27px; line-height: 1.6875em;
opacity: 0.8; opacity: 0.8;
} }
@ -117,7 +117,7 @@
min-width: auto; min-width: auto;
} }
.head-nav ul#header-nav li a { .head-nav ul#header-nav li a {
font-size: 16px; font-size: 1em;
color: #fff; color: #fff;
} }
.head-nav ul#header-nav li:hover a, .head-nav ul#header-nav li:hover a,
@ -129,8 +129,8 @@
} }
.logoDiv img { .logoDiv img {
min-width: 45px; min-width: 2.8125em;
height: 45px; height: 2.8125em;
} }
.color-home { .color-home {
@ -142,10 +142,10 @@
} }
.register-button { .register-button {
height: 43px; height: 3em;
margin-left: 20px; margin-left: 1.25em;
padding: 0 25px; padding: 0 1.5625em;
font-size: 14px; font-size: 0.875em;
} }
// 首页特定头部样式止 // 首页特定头部样式止
} }
@ -187,58 +187,149 @@
transform: translate3d(85px, 0, 0); transform: translate3d(85px, 0, 0);
} }
} /*Shrinking for mobile*/ } /*Shrinking for mobile*/
@media (max-width: 1200px) {
@media screen and (max-width: 1000px) {
.newContainer .home-first-section {
height: auto;
margin-top: -5vh;
.website-content {
height: 60vh;
}
.grid-picture {
background-size: auto 100%;
}
}
}
@media screen and (max-width: 1200px) {
.waves { .waves {
height: 6vh; height: 6vh;
} }
} .newContainer .home-first-section {
// 波浪样式止 .grid-picture {
background-size: auto 100%;
}
}
.home-fifth-section .circle-wave {
left: 1.5vw;
}
.home-seventh-section {
.seventh-main .clients {
.start-icon {
top: 100px;
left: 150px;
}
.end-icon {
bottom: 100px;
right: 280px;
}
}
}
.home-footer {
height: 400px;
.arc {
margin: -100px -100px 0;
height: 200px;
border-radius: 50%;
}
.footer-main {
height: 200px;
}
}
}
@media screen and (min-width: 2000px) { @media screen and (min-width: 2000px) {
.homePage { .homePage {
font-size: 20px; font-size: 20px;
&.newHeaders {
height: 4.375em;
.head-nav {
height: inherit;
ul#header-nav {
height: inherit;
li {
height: inherit;
font-size: 1em;
line-height: 4.375em;
a {
font-size: 1.1em;
}
}
}
}
.login-box {
font-size: 0.9375em;
}
}
.homepage-main { .homepage-main {
width: 1600px; width: 1600px;
} }
.home-first-section{ .home-first-section {
.website{ .website {
margin-right:7%; margin-right: 7%;
.website-vision {
justify-content: flex-start;
span {
margin-right: 1.5em;
}
}
} }
.play-img { .play-img {
width: 50%; width: 50%;
.play-circle{ height: 600px;
.play-circle {
right: 21%; right: 21%;
} }
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{ .play-circle-circle1,
right:26.1% .play-circle-circle2,
.play-circle-circle3,
.play-circle-circle4,
.play-circle-circle5 {
right: 26.1%;
} }
} }
} }
.home-seventh-section {
.clients {
.start-icon {
top: 100px;
left: 380px;
}
.end-icon {
bottom: 130px;
right: 480px;
}
}
}
.footerbottom {
font-size: 16px !important;
}
} }
} }
@media screen and (min-width: 2800px) {
@media screen and (min-width: 2000px) {
.homePage { .homePage {
font-size: 20px; font-size: 24px;
.homepage-main { .homepage-main {
width: 1600px; width: 2000px;
} }
.home-first-section{ .home-first-section {
.website{ .website {
margin-right:7%; margin-right: 14%;
} }
.play-img { .play-img {
width: 50%; width: 40%;
.play-circle{ .play-circle {
right: 21%; right: 21%;
} }
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{ .play-circle-circle1,
right:26.1% .play-circle-circle2,
.play-circle-circle3,
.play-circle-circle4,
.play-circle-circle5 {
right: 26.1%;
} }
} }
} }
} }
} }

4
src/modules/tpm/NewHeader.js
View File

@ -784,7 +784,7 @@ class NewHeader extends Component {
<div className="ml30 edu-menu-panel"> <div className="ml30 edu-menu-panel">
{user && user.login && {user && user.login &&
<a href={`${mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.tiding_url}`} style={{ position: 'relative' }} target="_blank"> <a href={`${mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.tiding_url}`} style={{ position: 'relative' }} target="_blank">
<i className="iconfont icon-xiaoxilingdang color-grey-6"></i> <i className={`iconfont icon-xiaoxilingdang ${activeIndex?'color-home':'color-grey-6'}`}></i>
<span className="newslight" style={{ display: this.props.Headertop === undefined ? "none" : this.props.Headertop.new_message === true ? "block" : "none" }}> <span className="newslight" style={{ display: this.props.Headertop === undefined ? "none" : this.props.Headertop.new_message === true ? "block" : "none" }}>
</span> </span>
</a> </a>
@ -819,7 +819,7 @@ class NewHeader extends Component {
</Modal> </Modal>
</div> </div>
{user === undefined || user.login === "" ? {user === undefined || user.login === "" ?
<span className="font-15"> <span className="login-box">
<a onClick={() => this.educoderlogin()} className={`mr5 ${activeIndex ? 'color-home' : 'color-grey-6'}`}>登录</a> <a onClick={() => this.educoderlogin()} className={`mr5 ${activeIndex ? 'color-home' : 'color-grey-6'}`}>登录</a>
{ {
mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url && ( mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url && (

3
src/modules/tpm/css/headerExcess.css
View File

@ -10,3 +10,6 @@
bottom: 12px; bottom: 12px;
position: absolute; position: absolute;
} }
.login-box{
font-size: 15px;
}