修改样式，兼容大屏和手机端
This commit is contained in:
何童崇
parent
0dc7a1f582
commit
90f8e04e93
|
|
@ -3,6 +3,6 @@ export function isDev() {
|
|||
}
|
||||
|
||||
// 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()));
|
||||
|
|
|
|||
|
|
@ -208,9 +208,13 @@ function FifthSection({ fifth, history }) {
|
|||
</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" />
|
||||
{/* <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.3)" />
|
||||
<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>
|
||||
</svg>
|
||||
</React.Fragment>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
|
||||
.home-fifth-section {
|
||||
min-height: 50vh;
|
||||
background: linear-gradient(#fff 0%, #cbdcff 100%);
|
||||
|
||||
.fifth-main {
|
||||
display: flex;
|
||||
margin: 5vh auto 3vh;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.homepage-btn {
|
||||
|
|
@ -105,7 +107,7 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
|
||||
.circleBox {
|
||||
position: relative;
|
||||
right: .95em;
|
||||
right: 0.9375em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
margin: 12.5em auto 0;
|
||||
|
|
@ -132,13 +134,13 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
.circle-center {
|
||||
width: 6.25em;
|
||||
height: 6.25em;
|
||||
padding: 1em 1.25em;
|
||||
padding: 1em 2em;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom right, #2bebd7 0%, #692fd1 100%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 1.25em;
|
||||
line-height: 1.4;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.circle1 {
|
||||
|
|
@ -229,9 +231,10 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
.ant-collapse {
|
||||
border: 0;
|
||||
background: inherit;
|
||||
font-size: .875em;
|
||||
.ant-collapse-item {
|
||||
border: 0;
|
||||
margin-bottom: .95em;
|
||||
margin-bottom: 0.9375em;
|
||||
}
|
||||
.ant-collapse-item:last-child,
|
||||
.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 {
|
||||
height: 4.875em;
|
||||
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;
|
||||
font-size: 1.125em;
|
||||
color: #0a1255;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
padding: 27px 45px 27px 3.375em;
|
||||
|
||||
padding: 1.6875em 2.8125em 1.6875em 3.375em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
max-width: 35em;
|
||||
// max-width: 35em;
|
||||
|
||||
.ant-collapse-arrow {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
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 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
@ -271,12 +273,12 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
|
||||
.ant-collapse-item-active {
|
||||
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: 0;
|
||||
.ant-collapse-header {
|
||||
height: 48px;
|
||||
padding: .95em 3.375em;
|
||||
height: 3em;
|
||||
padding: 0.9375em 3.375em;
|
||||
background: #596cee;
|
||||
color: #fff;
|
||||
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 {
|
||||
padding: 1.375em 28px;
|
||||
padding: 1.375em 1.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-des {
|
||||
height: 5.375em;
|
||||
font-size: .95em;
|
||||
font-size: 0.9375em;
|
||||
color: #3a4772;
|
||||
letter-spacing: 0;
|
||||
line-height: 28px;
|
||||
line-height: 1.75em;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.5em !important;
|
||||
|
||||
|
||||
}
|
||||
.collapse-content {
|
||||
padding: 12px;
|
||||
padding: .75em;
|
||||
background: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
border-radius: .25em;
|
||||
|
||||
.collapse-content-item {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: 1.875em;
|
||||
line-height: 1.875em;
|
||||
font-weight: 400;
|
||||
}
|
||||
.iconfont {
|
||||
margin-right: 12px;
|
||||
margin-right: .75em;
|
||||
color: #ea0000;
|
||||
}
|
||||
.collapse-content-money {
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@
|
|||
#0c2d8f 100%,
|
||||
);
|
||||
|
||||
// #003FCC 100%
|
||||
|
||||
.grid-picture {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
@ -51,9 +49,9 @@
|
|||
.website-vision {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 36px;
|
||||
margin-bottom: 1.3em;
|
||||
color: #ff832b;
|
||||
font-size: 25px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.website-des {
|
||||
font-size: 1em;
|
||||
|
|
@ -83,27 +81,24 @@
|
|||
position: relative;
|
||||
width: 351px;
|
||||
z-index: 1;
|
||||
// animation: glass 0.75s 1 forwards;
|
||||
}
|
||||
.play-circle {
|
||||
position: absolute;
|
||||
width: 165px;
|
||||
height: 160px;
|
||||
right: 18%;
|
||||
bottom: -5.5%;
|
||||
right: 17%;
|
||||
bottom: -6.5%;
|
||||
z-index: 2;
|
||||
// animation: circle 0.75s 1 forwards;
|
||||
}
|
||||
|
||||
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5 {
|
||||
position: absolute;
|
||||
width: 85px;
|
||||
height: 53px;
|
||||
right: 24.1%;
|
||||
right: 23.2%;
|
||||
bottom: 9%;
|
||||
z-index: 2;
|
||||
border: 1px solid rgb(73, 169, 241);
|
||||
// border: 1px solid rgb(49, 82, 237);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -112,54 +107,41 @@
|
|||
left: -11%;
|
||||
top: 37%;
|
||||
width: 230px;
|
||||
// animation: pillar 0.75s 1 forwards;
|
||||
}
|
||||
.play-box1 {
|
||||
position: absolute;
|
||||
left: -7%;
|
||||
left: -6%;
|
||||
bottom: 30%;
|
||||
width: 57px;
|
||||
// animation: box1 0.75s 1 forwards;
|
||||
}
|
||||
.play-box2 {
|
||||
position: absolute;
|
||||
left: -1%;
|
||||
left: 0%;
|
||||
bottom: 34%;
|
||||
width: 57px;
|
||||
// animation: box2 0.75s 1 forwards;
|
||||
}
|
||||
.play-box3 {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
left: 6%;
|
||||
bottom: 38%;
|
||||
width: 57px;
|
||||
// animation: box3 0.75s 1 forwards;
|
||||
}
|
||||
.play-box4 {
|
||||
position: absolute;
|
||||
left: 11%;
|
||||
left: 12%;
|
||||
bottom: 42%;
|
||||
width: 57px;
|
||||
// animation: box4 0.75s 1 forwards;
|
||||
}
|
||||
|
||||
// .play-code {
|
||||
// position: absolute;
|
||||
// right: -4%;
|
||||
// top: 18%;
|
||||
// width: 211px;
|
||||
// z-index: 1;
|
||||
// }
|
||||
.play-code1 {
|
||||
position: absolute;
|
||||
right: 1%;
|
||||
right: 0%;
|
||||
top: 33%;
|
||||
width: 128px;
|
||||
z-index: 1;
|
||||
}
|
||||
.play-code-bed {
|
||||
position: absolute;
|
||||
right: -4%;
|
||||
right: -5%;
|
||||
top: 44%;
|
||||
width: 211px;
|
||||
z-index: 1;
|
||||
|
|
@ -176,28 +158,16 @@
|
|||
.play-text1 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
// right: 5%;
|
||||
// width: 262px;
|
||||
// bottom: 11%;
|
||||
}
|
||||
.play-text2 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
// bottom: 10%;
|
||||
// left: 6%;
|
||||
// width: 262px;
|
||||
}
|
||||
.play-text3 {
|
||||
position: absolute;
|
||||
// right: 6%;
|
||||
// top: -4%;
|
||||
// width: 227px;
|
||||
}
|
||||
.play-text4 {
|
||||
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{
|
||||
animation: circle-before 0.75s 1 forwards;
|
||||
}
|
||||
// .play-pillar {
|
||||
// animation: pillar 0.75s 1 forwards;
|
||||
// }
|
||||
.play-box1 {
|
||||
animation: box1 0.75s 1 forwards;
|
||||
}
|
||||
|
|
@ -322,20 +289,14 @@
|
|||
0% {
|
||||
opacity: 1;
|
||||
top: 23%;
|
||||
// transform: scale(.5);
|
||||
// transform: rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
top: 12%;
|
||||
// transform: scale(1.2);
|
||||
// transform: rotateY(360deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
top: 23%;
|
||||
// transform: scale(.5);
|
||||
// transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -421,7 +382,7 @@
|
|||
}
|
||||
100% {
|
||||
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 {
|
||||
0% {
|
||||
|
|
@ -716,41 +667,6 @@
|
|||
}
|
||||
|
||||
@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% {
|
||||
transform: scale(1);
|
||||
|
|
|
|||
|
|
@ -58,16 +58,4 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ let setting = {
|
|||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 400000,
|
||||
autoplaySpeed: 4000,
|
||||
centerMode: true,
|
||||
centerPadding: "10px",
|
||||
// pauseOnFocus: true,
|
||||
|
|
|
|||
|
|
@ -154,8 +154,10 @@
|
|||
}
|
||||
|
||||
p {
|
||||
margin:1em 0 .5em;
|
||||
color: #3c476e;
|
||||
font-size: .9em;
|
||||
|
||||
}
|
||||
}
|
||||
.slick-center {
|
||||
|
|
|
|||
|
|
@ -13,11 +13,13 @@ import './index.scss';
|
|||
|
||||
let setting = {
|
||||
infinite: true,
|
||||
dots:true,
|
||||
speed: 750,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 5000,
|
||||
// pauseOnFocus: true,
|
||||
centerMode: true,
|
||||
centerPadding: "0px",
|
||||
autoplay: true,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.home-seventh-section {
|
||||
background: linear-gradient(#fff 0%, #cbdcff 100%);
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 2.5em;
|
||||
padding-bottom: 0.625em;
|
||||
z-index: 100000;
|
||||
margin-bottom: -10px;
|
||||
margin-bottom: -0.625em;
|
||||
border-bottom: 1px solid #cbdcff;
|
||||
.seventh-main {
|
||||
position: relative;
|
||||
|
|
@ -12,14 +12,14 @@
|
|||
.clients {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
height: 31.25em;
|
||||
left: 0;
|
||||
bottom: 40px;
|
||||
bottom: 2.5em;
|
||||
// z-index: 10;
|
||||
.client {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 6.25em;
|
||||
height: 6.25em;
|
||||
border-radius: 50%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -30,35 +30,35 @@
|
|||
animation: zoomin 0.9s infinite alternate;
|
||||
}
|
||||
.client:nth-child(2) {
|
||||
top: 190px;
|
||||
left: -115px;
|
||||
top: 11.875em;
|
||||
left: -7.1875em;
|
||||
animation: zoomin 1.3s infinite alternate;
|
||||
}
|
||||
.client:nth-child(3) {
|
||||
left: 0;
|
||||
bottom: 70px;
|
||||
bottom: 4.375em;
|
||||
animation: zoomin 1.6s infinite alternate;
|
||||
}
|
||||
.client:nth-child(4) {
|
||||
top: 40px;
|
||||
top: 2.5em;
|
||||
right: 0;
|
||||
animation: zoomin 1.9s infinite alternate;
|
||||
}
|
||||
.client:nth-child(5) {
|
||||
right: -85px;
|
||||
bottom: 135px;
|
||||
right: -5.3125em;
|
||||
bottom: 8.4375em;
|
||||
animation: zoomin 2.1s infinite alternate;
|
||||
}
|
||||
.client:nth-child(6) {
|
||||
right: 150px;
|
||||
bottom: 10px;
|
||||
right: 9.375em;
|
||||
bottom: 0.625em;
|
||||
animation: zoomin 1.6s infinite alternate;
|
||||
}
|
||||
|
||||
.icon-a-shuangyinhao12x {
|
||||
position: absolute;
|
||||
color: #ef7a30;
|
||||
font-size: 36px !important ;
|
||||
font-size: 2.25em !important ;
|
||||
}
|
||||
.start-icon {
|
||||
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 {
|
||||
margin: 40px auto 20px;
|
||||
height: 480px;
|
||||
margin: 2.5em auto 1.25em;
|
||||
height: 30em;
|
||||
background: url(../img/7-bg.png) no-repeat;
|
||||
background-size: 804px 474px;
|
||||
background-size: 50.25em 29.625em;
|
||||
background-position: center;
|
||||
}
|
||||
.slick-list {
|
||||
width: 540px;
|
||||
width: 33.75em;
|
||||
margin: 0 auto;
|
||||
z-index: 10000;
|
||||
}
|
||||
.issue-item {
|
||||
text-align: center;
|
||||
|
||||
.author-head {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
width: 8.125em;
|
||||
height: 8.125em;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.issue-author {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
font-size: 1.125em;
|
||||
font-weight: 500;
|
||||
color: #ff7300;
|
||||
line-height: 28px;
|
||||
margin: 10px auto;
|
||||
line-height: 1.75em;
|
||||
margin: 0.625em auto;
|
||||
}
|
||||
.issue-title {
|
||||
font-size: 20px;
|
||||
font-size: 1.25em;
|
||||
font-weight: 500;
|
||||
color: #000870;
|
||||
line-height: 28px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.75em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
.issue-content {
|
||||
text-align: left;
|
||||
|
|
@ -139,16 +187,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px){
|
||||
.home-seventh-section .clients{
|
||||
width: 86%;
|
||||
left:8%;
|
||||
@media screen and (max-width: 1400px) {
|
||||
.home-seventh-section {
|
||||
.slick-dots,.clients {
|
||||
width: 86%;
|
||||
left: 8%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px){
|
||||
.home-seventh-section .clients{
|
||||
width: 80%;
|
||||
left:11%;
|
||||
@media screen and (max-width: 1200px) {
|
||||
.home-seventh-section {
|
||||
.slick-dots,.clients {
|
||||
width: 80%;
|
||||
left: 11%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ import './index.scss';
|
|||
let iconArr = [completeIcon1, completeIcon2, completeIcon3];
|
||||
|
||||
|
||||
|
||||
function SixthSection({ sixth, main_web_site_url }) {
|
||||
|
||||
const [list, setList] = useState();
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
.home-sixth-section {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
background: linear-gradient(#041670 0%, #2951da 100%);
|
||||
background: linear-gradient(#0037AF 0%, #2951da 100%);
|
||||
text-align: center;
|
||||
margin-bottom: -2px;
|
||||
z-index: 10;
|
||||
.grid-picture {
|
||||
background: url(../img/grid.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-bottom: 100px;
|
||||
background-size: auto 100%;
|
||||
padding-bottom: 6.25em;
|
||||
}
|
||||
|
||||
.sixth-main {
|
||||
|
|
@ -21,14 +21,14 @@
|
|||
position: relative;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
margin: 30px 0;
|
||||
padding: .9375em;
|
||||
margin: 1.875em 0;
|
||||
align-items: center;
|
||||
width: 480px;
|
||||
height: 170px;
|
||||
width: 30em;
|
||||
height: 10.625em;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
box-shadow: 0px 0px 10px 5px rgba(38, 118, 255, 0.04);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px .625em .3125em rgba(38, 118, 255, 0.04);
|
||||
border-radius: .625em;
|
||||
border: 1px transparent solid;
|
||||
border-image: linear-gradient(
|
||||
to right,
|
||||
|
|
@ -37,55 +37,49 @@
|
|||
rgba(255, 255, 255, 0.2)
|
||||
)
|
||||
1 10;
|
||||
// &:after{
|
||||
// content:'';
|
||||
// position: absolute;
|
||||
// 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;
|
||||
// }
|
||||
|
||||
p{
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.des-item:nth-child(2) {
|
||||
margin: 60px 0 0 20px;
|
||||
margin: 3.75em 0 0 1.25em;
|
||||
}
|
||||
|
||||
.des-item:nth-child(3) {
|
||||
margin: 60px 0 0 40px;
|
||||
margin: 3.75em 0 0 2.5em;
|
||||
}
|
||||
|
||||
.des-item-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 6.25em;
|
||||
height: 6.25em;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.des-item-content {
|
||||
width: 348px;
|
||||
width: 21.75em;
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
font-size: .9375em;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
line-height: 1.75em;
|
||||
opacity: .8;
|
||||
.des-item-title {
|
||||
font-size: 18px;
|
||||
font-size: 1.125em;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ff9931;
|
||||
line-height: 25px;
|
||||
line-height: 1.5625em;
|
||||
}
|
||||
}
|
||||
|
||||
.sixth-right {
|
||||
width: 680px;
|
||||
width: 42.5em;
|
||||
overflow: visible;
|
||||
}
|
||||
.sixth-right-title {
|
||||
margin-left: 80px;
|
||||
width: 450px;
|
||||
margin-left: 5em;
|
||||
width: 28.125em;
|
||||
text-align: left;
|
||||
|
||||
.home-line {
|
||||
|
|
@ -93,15 +87,15 @@
|
|||
}
|
||||
}
|
||||
.sixth-play-img {
|
||||
width: 781px;
|
||||
width: 48.1825em;
|
||||
position: relative;
|
||||
|
||||
.ball {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
left: 110px;
|
||||
top: 18.75em;
|
||||
left: 6.875em;
|
||||
z-index: 1;
|
||||
width: 33px;
|
||||
width: 2.0625em;
|
||||
animation: ball infinite 5s linear;
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +104,7 @@
|
|||
top: 15%;
|
||||
left: 45%;
|
||||
z-index: 1;
|
||||
width: 92px;
|
||||
width: 5.75em;
|
||||
animation: cup infinite 4s;
|
||||
}
|
||||
|
||||
|
|
@ -119,7 +113,7 @@
|
|||
top: 9%;
|
||||
left: 22%;
|
||||
z-index: 1;
|
||||
width: 60px;
|
||||
width: 3.75em;
|
||||
animation: net infinite 4s 1s;
|
||||
}
|
||||
|
||||
|
|
@ -128,7 +122,7 @@
|
|||
top: 6%;
|
||||
right: 17%;
|
||||
z-index: 1;
|
||||
width: 55px;
|
||||
width: 3.4375em;
|
||||
animation: yLetter infinite 4s 1.5s;
|
||||
}
|
||||
|
||||
|
|
@ -137,8 +131,8 @@
|
|||
bottom: 10%;
|
||||
left: 43%;
|
||||
z-index: 1;
|
||||
width: 36px;
|
||||
height: 42px;
|
||||
width: 2.25em;
|
||||
height: 2.625em;
|
||||
animation: pillar1 infinite 3s;
|
||||
}
|
||||
.pillar2 {
|
||||
|
|
@ -146,8 +140,8 @@
|
|||
bottom: 12%;
|
||||
left: 40%;
|
||||
z-index: 1;
|
||||
width: 28px;
|
||||
height: 50px;
|
||||
width: 1.75em;
|
||||
height: 3.125em;
|
||||
animation: pillar2 infinite 3s;
|
||||
}
|
||||
.pillar3 {
|
||||
|
|
@ -155,14 +149,14 @@
|
|||
bottom: 12%;
|
||||
left: 42%;
|
||||
z-index: 1;
|
||||
width: 28px;
|
||||
height: 59px;
|
||||
width: 1.75em;
|
||||
height: 3.6875em;
|
||||
animation: pillar3 infinite 3s;
|
||||
}
|
||||
}
|
||||
|
||||
.overall {
|
||||
width: 759px;
|
||||
width: 47.4375em;
|
||||
}
|
||||
|
||||
.homepage-btn{
|
||||
|
|
@ -254,46 +248,46 @@
|
|||
}
|
||||
@keyframes pillar1 {
|
||||
0% {
|
||||
height: 40px;
|
||||
height: 2.5em;
|
||||
}
|
||||
48% {
|
||||
height: 32px;
|
||||
height: 2em;
|
||||
}
|
||||
52% {
|
||||
height: 32px;
|
||||
height: 2em;
|
||||
}
|
||||
100% {
|
||||
height: 40px;
|
||||
height: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pillar2 {
|
||||
0% {
|
||||
height: 40px;
|
||||
height: 2.5em;
|
||||
}
|
||||
48% {
|
||||
height: 65px;
|
||||
height: 4.0625em;
|
||||
}
|
||||
52% {
|
||||
height: 65px;
|
||||
height: 4.0625em;
|
||||
}
|
||||
100% {
|
||||
height: 40px;
|
||||
height: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pillar3 {
|
||||
0% {
|
||||
height: 65px;
|
||||
height: 4.0625em;
|
||||
}
|
||||
48% {
|
||||
height: 40px;
|
||||
height: 2.5em;
|
||||
}
|
||||
52% {
|
||||
height: 40px;
|
||||
height: 2.5em;
|
||||
}
|
||||
100% {
|
||||
height: 65px;
|
||||
height: 4.0625em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import SeventhSection from './SeventhSection';
|
|||
import Footer from './Footer';
|
||||
|
||||
|
||||
|
||||
let isHuawei = (/honor|huawei/i.test(navigator.userAgent.toLowerCase()));
|
||||
function HomePage({ history }) {
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -25,182 +25,122 @@ function HomePage({ history }) {
|
|||
|
||||
const [first, setFirst] = useState(true);
|
||||
const [second, setSecond] = useState(isMobile);
|
||||
const [third, setThird] = useState(false);
|
||||
const [fourth, setFourth] = useState(false);
|
||||
const [fifth, setFifth] = useState(false);
|
||||
const [sixth, setSixth] = useState(false);
|
||||
const [third, setThird] = useState(false || isHuawei);
|
||||
const [fourth, setFourth] = useState(false || isHuawei);
|
||||
const [fifth, setFifth] = useState(false || isHuawei);
|
||||
const [sixth, setSixth] = useState(false || isHuawei);
|
||||
|
||||
|
||||
let settings = JSON.parse(localStorage.chromesetting);
|
||||
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() {
|
||||
let clientHeight = document.body.clientHeight;
|
||||
let clientWidth = document.body.clientWidth;
|
||||
let secondSection = document.querySelector(".home-second-section").offsetTop;
|
||||
let thirdSection = document.querySelector(".home-third-section").offsetTop;
|
||||
let fourthSection = document.querySelector(".home-fourth-section").offsetTop;
|
||||
let fifthSection = document.querySelector(".home-fifth-section").offsetTop;
|
||||
let sixthSection = document.querySelector(".home-sixth-section").offsetTop;
|
||||
let seventhSection = document.querySelector(".home-seventh-section").offsetTop;
|
||||
// let secondSection = document.querySelector(".home-second-section").offsetTop;
|
||||
// let thirdSection = document.querySelector(".home-third-section").offsetTop;
|
||||
// let fourthSection = document.querySelector(".home-fourth-section").offsetTop;
|
||||
// let fifthSection = document.querySelector(".home-fifth-section").offsetTop;
|
||||
// let sixthSection = document.querySelector(".home-sixth-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;
|
||||
|
||||
|
||||
if (top >= clientHeight - 300) {
|
||||
setFirst(false);
|
||||
} else {
|
||||
setFirst(true);
|
||||
}
|
||||
|
||||
// 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) {
|
||||
setFirst(false);
|
||||
} else {
|
||||
setFirst(true);
|
||||
}
|
||||
|
||||
if (clientWidth > 1100) {
|
||||
// 第二个动效
|
||||
if (top >= secondSection - 600 && top < thirdSection) {
|
||||
if (top >= secondSection - clientHeight * 0.8 && top < thirdSection) {
|
||||
setSecond(true);
|
||||
}
|
||||
if (top < 100 || top > thirdSection - 100) {
|
||||
} else {
|
||||
setSecond(false);
|
||||
}
|
||||
|
||||
// 第三个动效
|
||||
if (top >= thirdSection - 600 && top < fourthSection) {
|
||||
setThird(true);
|
||||
}
|
||||
if (top < secondSection || top > fourthSection - 100) {
|
||||
setThird(false);
|
||||
}
|
||||
|
||||
// 第四个动效
|
||||
if (top >= fourthSection - 600 && top < fifthSection) {
|
||||
setFourth(true);
|
||||
}
|
||||
if (top < thirdSection || top > fifthSection) {
|
||||
setFourth(false);
|
||||
}
|
||||
|
||||
// 第五个动效
|
||||
if (top >= fifthSection - 600 && top < sixthSection) {
|
||||
setFifth(true);
|
||||
}
|
||||
if (top < fourthSection || top > sixthSection) {
|
||||
setFifth(false);
|
||||
}
|
||||
|
||||
// 第六个动效
|
||||
if (top >= sixthSection - 600 && top < seventhSection - 100) {
|
||||
setSixth(true);
|
||||
}
|
||||
if (top < fifthSection || top > seventhSection - 100) {
|
||||
setSixth(false);
|
||||
}
|
||||
} else {
|
||||
// 手机
|
||||
// 第一个动效
|
||||
|
||||
if (top >= clientHeight - 100) {
|
||||
setFirst(false);
|
||||
} else {
|
||||
setFirst(true);
|
||||
}
|
||||
|
||||
// 第二个动效
|
||||
if (top < thirdSection) {
|
||||
if (top >= secondSection - clientHeight && top < thirdSection) {
|
||||
setSecond(true);
|
||||
}
|
||||
if (top > thirdSection) {
|
||||
} else {
|
||||
setSecond(false);
|
||||
}
|
||||
|
||||
// 第三个动效
|
||||
if (top >= 200 && top < fifthSection) {
|
||||
setThird(true);
|
||||
}
|
||||
if (top < 200 || top > sixthSection - 100) {
|
||||
setThird(false);
|
||||
}
|
||||
|
||||
// 第四个动效
|
||||
if (top >= 500) {
|
||||
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);
|
||||
}
|
||||
if (top < thirdSection) {
|
||||
setSixth(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 第三个动效
|
||||
if (top >= thirdSection - clientHeight && top < fourthSection) {
|
||||
setThird(true);
|
||||
} else {
|
||||
setThird(false);
|
||||
}
|
||||
|
||||
// 第四个动效
|
||||
if (top >= fourthSection - clientHeight && top < fifthSection) {
|
||||
setFourth(true);
|
||||
} else {
|
||||
setFourth(false);
|
||||
}
|
||||
|
||||
// 第五个动效
|
||||
if (top >= fifthSection - clientHeight && top < sixthSection) {
|
||||
setFifth(true);
|
||||
} else {
|
||||
setFifth(false);
|
||||
}
|
||||
|
||||
// 第六个动效
|
||||
if (top >= sixthSection - clientHeight && top < seventhSection - 100) {
|
||||
setSixth(true);
|
||||
} else {
|
||||
setSixth(false);
|
||||
}
|
||||
|
||||
if(isHuawei){
|
||||
setFourth(true);
|
||||
setSixth(true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="homePage">
|
||||
|
||||
<div className="home-first-section">
|
||||
<div id="home-first-section" className="home-first-section">
|
||||
<FirstSection first={first} />
|
||||
</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} />
|
||||
</div>
|
||||
|
||||
|
||||
<div className="home-third-section">
|
||||
<div id="home-third-section" className="home-third-section">
|
||||
<ThirdSection third={third} />
|
||||
</div>
|
||||
|
||||
<div className="home-fourth-section">
|
||||
<div id="home-fourth-section" className="home-fourth-section">
|
||||
<FourthSection fourth={fourth} history={history} />
|
||||
</div>
|
||||
|
||||
<div className="home-fifth-section">
|
||||
<div id="home-fifth-section" className="home-fifth-section">
|
||||
<FifthSection fifth={fifth} history={history} />
|
||||
</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} />
|
||||
</div>
|
||||
|
||||
<div className="home-seventh-section">
|
||||
<div id="home-seventh-section" className="home-seventh-section">
|
||||
<SeventhSection main_web_site_url={main_web_site_url} />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -53,22 +53,22 @@
|
|||
.ant-btn-primary {
|
||||
background-color: #2a3ee9;
|
||||
border-color: #2a3ee9;
|
||||
height: 56px;
|
||||
height: 3.5em;
|
||||
box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33) !important;
|
||||
border-radius: 6px;
|
||||
border-radius: 0.375em;
|
||||
}
|
||||
.homepage-btn {
|
||||
width: 140px;
|
||||
height: 56px;
|
||||
font-size: 16px;
|
||||
width: 8.75em;
|
||||
height: 3.5em;
|
||||
font-size: 1em;
|
||||
&:hover {
|
||||
background-color: #4154f1;
|
||||
border-color: #4154f1;
|
||||
}
|
||||
.icon-gengduoicon {
|
||||
margin-left: 5px;
|
||||
margin-left: 0.375em;
|
||||
color: #ffbf2d;
|
||||
font-size: 16px !important;
|
||||
font-size: 1em !important;
|
||||
}
|
||||
}
|
||||
.text-center {
|
||||
|
|
@ -77,33 +77,33 @@
|
|||
|
||||
.homepage-main {
|
||||
width: 1200px;
|
||||
max-width: 98%;
|
||||
max-width: 96%;
|
||||
margin: -1px auto 0;
|
||||
}
|
||||
|
||||
.homePage-blue-tit {
|
||||
color: #000870;
|
||||
font-size: 34px;
|
||||
font-size: 2.125em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.homePage-subhead {
|
||||
font-size: 16px;
|
||||
font-size: 1em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.homePage-white-tit {
|
||||
font-size: 36px;
|
||||
font-size: 2.25em;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 50px;
|
||||
line-height: 3.125em;
|
||||
}
|
||||
|
||||
.homePage-white-subhead {
|
||||
font-size: 16px;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
line-height: 27px;
|
||||
line-height: 1.6875em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
min-width: auto;
|
||||
}
|
||||
.head-nav ul#header-nav li a {
|
||||
font-size: 16px;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
.head-nav ul#header-nav li:hover a,
|
||||
|
|
@ -129,8 +129,8 @@
|
|||
}
|
||||
|
||||
.logoDiv img {
|
||||
min-width: 45px;
|
||||
height: 45px;
|
||||
min-width: 2.8125em;
|
||||
height: 2.8125em;
|
||||
}
|
||||
|
||||
.color-home {
|
||||
|
|
@ -142,10 +142,10 @@
|
|||
}
|
||||
|
||||
.register-button {
|
||||
height: 43px;
|
||||
margin-left: 20px;
|
||||
padding: 0 25px;
|
||||
font-size: 14px;
|
||||
height: 3em;
|
||||
margin-left: 1.25em;
|
||||
padding: 0 1.5625em;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
// 首页特定头部样式止
|
||||
}
|
||||
|
|
@ -187,58 +187,149 @@
|
|||
transform: translate3d(85px, 0, 0);
|
||||
}
|
||||
} /*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 {
|
||||
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) {
|
||||
.homePage {
|
||||
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 {
|
||||
width: 1600px;
|
||||
}
|
||||
.home-first-section{
|
||||
.website{
|
||||
margin-right:7%;
|
||||
.home-first-section {
|
||||
.website {
|
||||
margin-right: 7%;
|
||||
.website-vision {
|
||||
justify-content: flex-start;
|
||||
span {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.play-img {
|
||||
width: 50%;
|
||||
.play-circle{
|
||||
height: 600px;
|
||||
.play-circle {
|
||||
right: 21%;
|
||||
}
|
||||
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
|
||||
right:26.1%
|
||||
.play-circle-circle1,
|
||||
.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: 2000px) {
|
||||
@media screen and (min-width: 2800px) {
|
||||
.homePage {
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
.homepage-main {
|
||||
width: 1600px;
|
||||
width: 2000px;
|
||||
}
|
||||
.home-first-section{
|
||||
.website{
|
||||
margin-right:7%;
|
||||
.home-first-section {
|
||||
.website {
|
||||
margin-right: 14%;
|
||||
}
|
||||
.play-img {
|
||||
width: 50%;
|
||||
.play-circle{
|
||||
width: 40%;
|
||||
.play-circle {
|
||||
right: 21%;
|
||||
}
|
||||
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
|
||||
right:26.1%
|
||||
.play-circle-circle1,
|
||||
.play-circle-circle2,
|
||||
.play-circle-circle3,
|
||||
.play-circle-circle4,
|
||||
.play-circle-circle5 {
|
||||
right: 26.1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -784,7 +784,7 @@ class NewHeader extends Component {
|
|||
<div className="ml30 edu-menu-panel">
|
||||
{user && user.login &&
|
||||
<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>
|
||||
</a>
|
||||
|
|
@ -819,7 +819,7 @@ class NewHeader extends Component {
|
|||
</Modal>
|
||||
</div>
|
||||
{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>
|
||||
{
|
||||
mygetHelmetapi2 && mygetHelmetapi2.new_course && mygetHelmetapi2.new_course.register_url && (
|
||||
|
|
|
|||
|
|
@ -10,3 +10,6 @@
|
|||
bottom: 12px;
|
||||
position: absolute;
|
||||
}
|
||||
.login-box{
|
||||
font-size: 15px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue