forked from Gitlink/forgeplus-react
兼容大屏
This commit is contained in:
何童崇
parent
b6f2eb107c
commit
0dc7a1f582
|
|
@ -118,7 +118,7 @@ function FifthSection({ fifth, history }) {
|
|||
});
|
||||
}, []);
|
||||
|
||||
function goTask(item){
|
||||
function goTask(item) {
|
||||
history.push(`/task?type=${item.id}`)
|
||||
// console.log(item);
|
||||
}
|
||||
|
|
@ -131,7 +131,7 @@ function FifthSection({ fifth, history }) {
|
|||
<ul className="icon-circle">
|
||||
{
|
||||
taskCategoryArr.map((item, i) => {
|
||||
return (<li key={item.id} onClick={()=>{goTask(item)}}>
|
||||
return (<li key={item.id} onClick={() => { goTask(item) }}>
|
||||
<i className={`iconfont icon-${item.icon}`}></i>
|
||||
<span>{item.name}</span>
|
||||
</li>)
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
|
||||
.circle-wave {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 700px;
|
||||
width: 37.5em;
|
||||
height: 43.75em;
|
||||
flex: none;
|
||||
|
||||
&:hover .icon-circle {
|
||||
|
|
@ -31,26 +31,26 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
}
|
||||
.icon-circle {
|
||||
position: absolute;
|
||||
width: 560px;
|
||||
height: 560px;
|
||||
width: 35em;
|
||||
height: 35em;
|
||||
border-radius: 50%;
|
||||
animation: iconCircle infinite 20s linear;
|
||||
|
||||
li {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
width: 4.375em;
|
||||
height: 4.375em;
|
||||
position: absolute;
|
||||
background-color: #254dea;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
line-height: 70px;
|
||||
line-height: 4.375em;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
margin-top: -20px;
|
||||
margin-left: -1.25em;
|
||||
margin-top: -1.25em;
|
||||
cursor: pointer;
|
||||
.iconfont {
|
||||
font-size: 24px !important;
|
||||
font-size: 1.5em !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
li:nth-child(#{$i}) {
|
||||
background: nth($bgcolorlist, $i);
|
||||
transform: rotate(($i - 1) * $deg);
|
||||
transform-origin: 20px 300px;
|
||||
transform-origin: 1.25em 18.75em;
|
||||
span {
|
||||
transform: rotate(($i - 1) * $deg2);
|
||||
animation: iconItem#{$i} infinite 20s linear;
|
||||
|
|
@ -105,10 +105,10 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
|
||||
.circleBox {
|
||||
position: relative;
|
||||
right: 15px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin: 200px auto 0;
|
||||
right: .95em;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
margin: 12.5em auto 0;
|
||||
}
|
||||
|
||||
.circle1,
|
||||
|
|
@ -116,8 +116,8 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
.circle3,
|
||||
.circle4,
|
||||
.circle5 {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -130,14 +130,14 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
}
|
||||
|
||||
.circle-center {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 6.25em;
|
||||
height: 6.25em;
|
||||
padding: 1em 1.25em;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom right, #2bebd7 0%, #692fd1 100%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-size: 1.25em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
|
@ -219,10 +219,10 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
}
|
||||
|
||||
.task-main {
|
||||
margin:-40px 0 0 40px;
|
||||
margin:-2.5em 0 0 2.5em;
|
||||
.home-line {
|
||||
text-align: left;
|
||||
margin-bottom: 25px !important;
|
||||
margin-bottom: 1.56em !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -231,29 +231,29 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
background: inherit;
|
||||
.ant-collapse-item {
|
||||
border: 0;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: .95em;
|
||||
}
|
||||
.ant-collapse-item:last-child,
|
||||
.ant-collapse-item:last-child > .ant-collapse-header {
|
||||
border-radius: 6px 6px 0 0;
|
||||
border-radius: .375em .375em 0 0;
|
||||
}
|
||||
|
||||
.ant-collapse-header {
|
||||
height: 78px;
|
||||
height: 4.875em;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 10px 5px rgba(38, 118, 255, 0.04);
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
box-shadow: 0px 0px .625em 5px 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 36px;
|
||||
padding: 27px 45px 27px 3.375em;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
max-width: 560px;
|
||||
max-width: 35em;
|
||||
|
||||
.ant-collapse-arrow {
|
||||
display: inline-flex;
|
||||
|
|
@ -271,12 +271,12 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
|
||||
.ant-collapse-item-active {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 10px 5px rgba(38, 118, 255, 0.04);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px .625em 5px rgba(38, 118, 255, 0.04);
|
||||
border-radius: .375em;
|
||||
border: 0;
|
||||
.ant-collapse-header {
|
||||
height: 48px;
|
||||
padding: 15px 36px;
|
||||
padding: .95em 3.375em;
|
||||
background: #596cee;
|
||||
color: #fff;
|
||||
border-bottom-left-radius: 0px;
|
||||
|
|
@ -289,13 +289,13 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
}
|
||||
|
||||
.ant-collapse-content > .ant-collapse-content-box {
|
||||
padding: 16px 28px;
|
||||
padding: 1.375em 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-des {
|
||||
height: 56px;
|
||||
font-size: 15px;
|
||||
height: 5.375em;
|
||||
font-size: .95em;
|
||||
color: #3a4772;
|
||||
letter-spacing: 0;
|
||||
line-height: 28px;
|
||||
|
|
@ -320,11 +320,11 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
color: #ea0000;
|
||||
}
|
||||
.collapse-content-money {
|
||||
margin-left: 16px;
|
||||
margin-left: 1.375em;
|
||||
color: #ea0000;
|
||||
}
|
||||
.collapse-content-time {
|
||||
margin-left: 16px;
|
||||
margin-left: 1.375em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -332,7 +332,7 @@ $bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #57
|
|||
color: #4154f1;
|
||||
border-color: #4154f1;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
right: 1.25em;
|
||||
}
|
||||
.waves {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
.home-first-section {
|
||||
height: 90vh;
|
||||
min-height: 650px;
|
||||
// background: linear-gradient(
|
||||
// #1a2358 0%,
|
||||
// #12277b 33%,
|
||||
// #0c2d8f 67%,
|
||||
// #002a89 100%
|
||||
// );
|
||||
background: linear-gradient(
|
||||
#1a2358 0%,
|
||||
#12277b 33%,
|
||||
#0c2d8f 67%,
|
||||
#002a89 100%
|
||||
#0037AF 0%,
|
||||
#0c2d8f 100%,
|
||||
);
|
||||
|
||||
// #003FCC 100%
|
||||
|
||||
.grid-picture {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
@ -40,7 +46,7 @@
|
|||
color: #fff;
|
||||
.website-title {
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
font-size: 2.4em;
|
||||
}
|
||||
.website-vision {
|
||||
display: flex;
|
||||
|
|
@ -50,9 +56,9 @@
|
|||
font-size: 25px;
|
||||
}
|
||||
.website-des {
|
||||
font-size: 16px;
|
||||
font-size: 1em;
|
||||
line-height: 2.3;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 1.5em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
.home-footer {
|
||||
height: 40vh;
|
||||
width: 100vw;
|
||||
background: #162046;
|
||||
min-width: 100vw;
|
||||
// background: #162046;
|
||||
background: linear-gradient(#cbdcff 0%, #162046 5%, #162046 100%);
|
||||
|
||||
overflow: hidden;
|
||||
.arc {
|
||||
position: relative;
|
||||
margin: -15vh -5vw 0 -5vw;
|
||||
height: 30vh;
|
||||
width: 110vw;
|
||||
// width: 110vw;
|
||||
// background: linear-gradient(#cbdcff 0%, #bbccef 100%);
|
||||
background: #cbdcff;
|
||||
border-radius: 50%;
|
||||
|
|
@ -41,18 +43,31 @@
|
|||
border-radius: 10px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.police-number{
|
||||
.police-number {
|
||||
color: #bdc2d1;
|
||||
}
|
||||
|
||||
.footer-email{
|
||||
.footer-email {
|
||||
display: inline-flex;
|
||||
.iconfont{
|
||||
.iconfont {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerbottom{
|
||||
background-color:#162046 !important;
|
||||
.footerbottom {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,38 @@
|
|||
.home-fourth-section {
|
||||
text-align: center;
|
||||
min-height: 45vh;
|
||||
padding: 30px 0 20px 0;
|
||||
padding: 1.95em 0 1.25em 0;
|
||||
background: url(../img/4-map.png) no-repeat;
|
||||
|
||||
.homepage-btn{
|
||||
margin-top:1.25em;
|
||||
}
|
||||
.fourth-main {
|
||||
margin: 20px auto;
|
||||
margin: 1.25em auto;
|
||||
}
|
||||
.fourth-title {
|
||||
display: flex;
|
||||
}
|
||||
.fourth-main-title {
|
||||
width: 400px;
|
||||
margin-right: 50px;
|
||||
width: 33%;
|
||||
margin-right: 4.5%;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
position: relative;
|
||||
width: 750px;
|
||||
width: 62.5%;
|
||||
img {
|
||||
float: left;
|
||||
width: 240px;
|
||||
width: 32%;
|
||||
}
|
||||
&>img{
|
||||
max-width: 20vw;
|
||||
}
|
||||
}
|
||||
.code-box-action {
|
||||
width: 500px;
|
||||
height: 332px;
|
||||
border-radius: 20px;
|
||||
width: 67%;
|
||||
height: 20.75em;
|
||||
border-radius: 1.25em;
|
||||
}
|
||||
.code-box-picture {
|
||||
position: relative;
|
||||
|
|
@ -40,26 +46,26 @@
|
|||
|
||||
.code-box-code {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 160px;
|
||||
top: 6.25em;
|
||||
left: 10em;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0px 0px .25em .25em rgba(0, 0, 0, 0.06);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hadoopCode {
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
border-radius: .3em;
|
||||
margin: .625em;
|
||||
background: #1c1c25;
|
||||
padding: 18px 20px;
|
||||
padding: 1.125em 1.25em;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
li {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
font-size: .75em;
|
||||
font-weight: 500;
|
||||
line-height: 25px;
|
||||
line-height: 2.1em;
|
||||
color: #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
|
@ -72,9 +78,9 @@
|
|||
margin-bottom: 0;
|
||||
.codenum {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
width: .95em;
|
||||
text-align: left;
|
||||
margin-right: 15px;
|
||||
margin-right: .95em;
|
||||
}
|
||||
.code-green {
|
||||
color: #00fa30;
|
||||
|
|
@ -114,7 +120,7 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
padding: 1.25em 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
@ -123,21 +129,21 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 254px;
|
||||
height: 193px;
|
||||
border: 1px dashed #517df1;
|
||||
border-radius: 6px;
|
||||
width: 15.875em;
|
||||
height: 12em;
|
||||
border: .1em dashed #517df1;
|
||||
border-radius: 0.375em;
|
||||
|
||||
.fourth-item-img {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
width: 4.5em;
|
||||
height: 4.5em;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 8px 7px rgba(38, 118, 255, 0.04);
|
||||
box-shadow: 0px 0px .5em .5em rgba(38, 118, 255, 0.04);
|
||||
}
|
||||
|
||||
.fourth-item-circle {
|
||||
|
|
@ -150,39 +156,39 @@
|
|||
.fourth-item-circle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(-45deg, #0949ff 0, #03bdff 100%);
|
||||
}
|
||||
.fourth-item-circle::before {
|
||||
top: -4px;
|
||||
left: 32px;
|
||||
top: -.25em;
|
||||
left: 2em;
|
||||
}
|
||||
.fourth-item-circle::after {
|
||||
left: 32px;
|
||||
bottom: -4px;
|
||||
left: 2em;
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
.fourth-item-title {
|
||||
margin: 0.5em auto 0;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 20px;
|
||||
font-size: 1.25em;
|
||||
color: #0a1255;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fourth-item-des {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 16px;
|
||||
font-size: 1em;
|
||||
color: #777988;
|
||||
line-height: 32px;
|
||||
line-height: 2em;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.project-item:nth-child(2) {
|
||||
margin-top: 80px;
|
||||
margin-top: 5em;
|
||||
border-color: #df0757;
|
||||
.fourth-item-circle {
|
||||
animation: turnCircle2 infinite 10s linear;
|
||||
|
|
@ -194,7 +200,7 @@
|
|||
}
|
||||
|
||||
.project-item:nth-child(3) {
|
||||
margin-top: 160px;
|
||||
margin-top: 10em;
|
||||
border-color: #00ffa4;
|
||||
.fourth-item-circle::before,
|
||||
.fourth-item-circle::after {
|
||||
|
|
@ -203,7 +209,7 @@
|
|||
}
|
||||
|
||||
.project-item:nth-child(4) {
|
||||
margin-top: 140px;
|
||||
margin-top: 8.75em;
|
||||
border-color: #8b5ff0;
|
||||
.fourth-item-circle {
|
||||
animation: turnCircle2 infinite 10s linear;
|
||||
|
|
@ -339,3 +345,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ let setting = {
|
|||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 4000,
|
||||
autoplaySpeed: 400000,
|
||||
centerMode: true,
|
||||
centerPadding: "10px",
|
||||
// pauseOnFocus: true,
|
||||
|
|
@ -56,7 +56,7 @@ function SecondSection({ second ,main_web_site_url}) {
|
|||
return (
|
||||
<React.Fragment>
|
||||
<h2 className="homePage-blue-tit">社区动态</h2>
|
||||
<h4 className="homePage-subhead">社区动态副标题社区动态副标题社区动态副标题</h4>
|
||||
<h4 className="homePage-subhead">为社区用户提供自主交流空间，实现思维碰撞和智慧融合</h4>
|
||||
<Line />
|
||||
<div className="homepage-main community-main">
|
||||
|
||||
|
|
@ -108,9 +108,12 @@ function SecondSection({ second ,main_web_site_url}) {
|
|||
<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="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="9" fill="#041670" /> */}
|
||||
<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,26 +5,26 @@
|
|||
margin-bottom: -10px;
|
||||
|
||||
.community-left-tit {
|
||||
font-size: 20px;
|
||||
font-size: 1.15em;
|
||||
color: #000870;
|
||||
}
|
||||
|
||||
.community-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px auto 50px;
|
||||
margin: 1.25em auto 3.15em;
|
||||
text-align: left;
|
||||
|
||||
.homepage-btn {
|
||||
margin-top: 40px;
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.community-english {
|
||||
font-size: 20px;
|
||||
font-size: 1.25em;
|
||||
opacity: 0.88;
|
||||
color: #e67a21;
|
||||
margin-right: 20px;
|
||||
margin-right: 1.25em;
|
||||
}
|
||||
|
||||
.community-star {
|
||||
|
|
@ -38,17 +38,17 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 600px;
|
||||
width: 50%;
|
||||
padding-right: 20px;
|
||||
opacity: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.community-left-content {
|
||||
font-size: 15px;
|
||||
font-size: .95em;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #3c476e;
|
||||
line-height: 36px;
|
||||
line-height: 2.25em;
|
||||
}
|
||||
|
||||
.community-active {
|
||||
|
|
@ -75,14 +75,14 @@
|
|||
}
|
||||
|
||||
.home-second-section-slide {
|
||||
width: 600px;
|
||||
width: 50%;
|
||||
.slick-track > div {
|
||||
max-width: 500px;
|
||||
max-width: 83.3%;
|
||||
position: relative;
|
||||
transition: all 0.7s;
|
||||
}
|
||||
.news-slide-item {
|
||||
height: 180px;
|
||||
height: 11.25em;
|
||||
overflow: hidden;
|
||||
background-image: linear-gradient(
|
||||
to bottom right,
|
||||
|
|
@ -93,22 +93,17 @@
|
|||
#c6d3ff 100%
|
||||
);
|
||||
margin-bottom: 10px;
|
||||
padding: 20px 30px 26px;
|
||||
padding: 1.25em 1.8em 1.6em;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 6px;
|
||||
border-radius: .3em;
|
||||
|
||||
// & > .iconfont {
|
||||
// float: right;
|
||||
// font-size: 25px !important;
|
||||
// color: rgb(239, 122, 48);
|
||||
// }
|
||||
.slide-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slide-title-content {
|
||||
color: #000870;
|
||||
font-size: 18px;
|
||||
font-size: 1em;
|
||||
margin-bottom: 0 !important;
|
||||
flex: auto;
|
||||
}
|
||||
|
|
@ -118,9 +113,9 @@
|
|||
margin-right: 1em;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
line-height: 1.75em;
|
||||
background: linear-gradient(
|
||||
272deg,
|
||||
#4154f1 0%,
|
||||
|
|
@ -134,9 +129,9 @@
|
|||
.slide-tag {
|
||||
flex: none;
|
||||
color: #fff;
|
||||
padding: 3px 13px;
|
||||
padding: .2em .75em;
|
||||
background: #586dff;
|
||||
border-radius: 3px;
|
||||
border-radius: .2em;
|
||||
}
|
||||
|
||||
.slide-tag-1{
|
||||
|
|
@ -153,13 +148,14 @@
|
|||
|
||||
|
||||
.news-time {
|
||||
font-size: 15px;
|
||||
font-size: .95em;
|
||||
font-weight: 400;
|
||||
color: #3c476e;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #3c476e;
|
||||
font-size: .9em;
|
||||
}
|
||||
}
|
||||
.slick-center {
|
||||
|
|
|
|||
|
|
@ -138,3 +138,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px){
|
||||
.home-seventh-section .clients{
|
||||
width: 86%;
|
||||
left:8%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px){
|
||||
.home-seventh-section .clients{
|
||||
width: 80%;
|
||||
left:11%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
.home-third-section {
|
||||
color: #fff;
|
||||
background: linear-gradient(
|
||||
#041670 0%,
|
||||
#2951DA 100%
|
||||
#0037AF 0%,
|
||||
#2951DA 100%,
|
||||
);
|
||||
text-align: center;
|
||||
// #041670 0%,
|
||||
|
||||
.ball-background{
|
||||
background: url(../img/3-ballBg.png) no-repeat;
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
.third-tit {
|
||||
padding-top: 1.75em;
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.third-main {
|
||||
|
|
@ -24,18 +25,18 @@
|
|||
}
|
||||
|
||||
.circle-item > h4 {
|
||||
margin-top: 20px;
|
||||
margin-top: 1.25em;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.circle-item-box {
|
||||
position: relative;
|
||||
width: 164px;
|
||||
height: 164px;
|
||||
width: 10.25em;
|
||||
height: 10.25em;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
padding: .25em;
|
||||
border-radius: 50%;
|
||||
background-image: linear-gradient(
|
||||
to bottom right,
|
||||
|
|
@ -55,7 +56,7 @@
|
|||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #12277b;
|
||||
font-size: 48px;
|
||||
font-size: 3em;
|
||||
font-weight: 600;
|
||||
span {
|
||||
background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
|
||||
|
|
@ -65,8 +66,8 @@
|
|||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: -8px;
|
||||
left: -5%;
|
||||
top: -5%;
|
||||
content: "";
|
||||
background-image: url(../img/3-dashCircle.png);
|
||||
width: 110%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
|
||||
import { isMobile } from 'educoder';
|
||||
import './index.scss';
|
||||
|
||||
import FirstSection from './FirstSection';
|
||||
|
|
@ -23,18 +24,32 @@ function HomePage({ history }) {
|
|||
}, []);
|
||||
|
||||
const [first, setFirst] = useState(true);
|
||||
const [second, setSecond] = useState(false);
|
||||
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);
|
||||
|
||||
|
||||
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;
|
||||
|
|
@ -44,60 +59,114 @@ function HomePage({ history }) {
|
|||
|
||||
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);
|
||||
// console.log("top:" + top);
|
||||
|
||||
// 第一个动效
|
||||
if (top >= clientHeight - 300) {
|
||||
setFirst(false);
|
||||
// 平板电脑及电脑
|
||||
if (!isMobile) {
|
||||
// 第一个动效
|
||||
if (top >= clientHeight - 300) {
|
||||
setFirst(false);
|
||||
} else {
|
||||
setFirst(true);
|
||||
}
|
||||
|
||||
// 第二个动效
|
||||
if (top >= secondSection - 600 && top < thirdSection) {
|
||||
setSecond(true);
|
||||
}
|
||||
if (top < 100 || top > thirdSection - 100) {
|
||||
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 {
|
||||
setFirst(true);
|
||||
// 手机
|
||||
// 第一个动效
|
||||
|
||||
if (top >= clientHeight - 100) {
|
||||
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);
|
||||
}
|
||||
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 >= secondSection - 600 && top < thirdSection) {
|
||||
setSecond(true);
|
||||
}
|
||||
if (top < 100 || top > thirdSection - 100) {
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.homePage {
|
||||
background: #fff;
|
||||
min-width: 800px;
|
||||
font-size: 16px;
|
||||
// min-width: 800px;
|
||||
// 首页多个部分公共样式
|
||||
|
||||
// 1行省略号
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
line-clamp:5;
|
||||
line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
|
|
@ -38,17 +39,20 @@
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 8;
|
||||
line-clamp:8;
|
||||
line-clamp: 8;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.link{
|
||||
.link {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background-color: #4154f1;
|
||||
border-color: #4154f1;
|
||||
background-color: #2a3ee9;
|
||||
border-color: #2a3ee9;
|
||||
height: 56px;
|
||||
box-shadow: 0px 0px 9px 2px rgba(65, 84, 241, 0.33) !important;
|
||||
border-radius: 6px;
|
||||
|
|
@ -57,9 +61,13 @@
|
|||
width: 140px;
|
||||
height: 56px;
|
||||
font-size: 16px;
|
||||
.icon-gengduoicon{
|
||||
margin-left:5px;
|
||||
color: #FFBF2D;
|
||||
&:hover {
|
||||
background-color: #4154f1;
|
||||
border-color: #4154f1;
|
||||
}
|
||||
.icon-gengduoicon {
|
||||
margin-left: 5px;
|
||||
color: #ffbf2d;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -70,7 +78,7 @@
|
|||
.homepage-main {
|
||||
width: 1200px;
|
||||
max-width: 98%;
|
||||
margin: 0 auto;
|
||||
margin: -1px auto 0;
|
||||
}
|
||||
|
||||
.homePage-blue-tit {
|
||||
|
|
@ -102,7 +110,8 @@
|
|||
// 首页特定头部样式起
|
||||
|
||||
&.newHeaders {
|
||||
background-color: #1a2358;
|
||||
// background-color: #1a2358;
|
||||
background-color: #0037af;
|
||||
}
|
||||
.head-nav {
|
||||
min-width: auto;
|
||||
|
|
@ -146,7 +155,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 8vh;
|
||||
bottom: -.5vh;
|
||||
bottom: -0.5vh;
|
||||
}
|
||||
// .waves-low {
|
||||
// height: 6vh;
|
||||
|
|
@ -178,9 +187,58 @@
|
|||
transform: translate3d(85px, 0, 0);
|
||||
}
|
||||
} /*Shrinking for mobile*/
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 1200px) {
|
||||
.waves {
|
||||
height: 8vh;
|
||||
height: 6vh;
|
||||
}
|
||||
}
|
||||
// 波浪样式止
|
||||
|
||||
@media screen and (min-width: 2000px) {
|
||||
.homePage {
|
||||
font-size: 20px;
|
||||
.homepage-main {
|
||||
width: 1600px;
|
||||
}
|
||||
.home-first-section{
|
||||
.website{
|
||||
margin-right:7%;
|
||||
}
|
||||
.play-img {
|
||||
width: 50%;
|
||||
.play-circle{
|
||||
right: 21%;
|
||||
}
|
||||
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
|
||||
right:26.1%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 2000px) {
|
||||
.homePage {
|
||||
font-size: 20px;
|
||||
.homepage-main {
|
||||
width: 1600px;
|
||||
}
|
||||
.home-first-section{
|
||||
.website{
|
||||
margin-right:7%;
|
||||
}
|
||||
.play-img {
|
||||
width: 50%;
|
||||
.play-circle{
|
||||
right: 21%;
|
||||
}
|
||||
.play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
|
||||
right:26.1%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -721,7 +721,7 @@ class NewHeader extends Component {
|
|||
<a href={mygetHelmetapi2 && mygetHelmetapi2.new_course.default_url} className={"fl mr30"} style={{minWidth:"45px"}}>
|
||||
{
|
||||
mygetHelmetapi2 && mygetHelmetapi2.nav_logo_url ?
|
||||
<img alt="可控开源社区" className="logoimg" style={{ heigth: "40px" }} src={activeIndex?logo:getLogoImageUrl(mygetHelmetapi2.nav_logo_url)}></img>
|
||||
<img alt="红山开源社区" className="logoimg" style={{ heigth: "40px" }} src={activeIndex?logo:getLogoImageUrl(mygetHelmetapi2.nav_logo_url)}></img>
|
||||
:
|
||||
""
|
||||
}
|
||||
|
|
|
|||
|
|
@ -772,14 +772,14 @@ class NewHeader extends Component {
|
|||
mygetHelmetapi2.nav_logo_url &&
|
||||
mygetHelmetapi2.nav_logo_url ? (
|
||||
<img
|
||||
alt="可控开源社区"
|
||||
alt="红山开源社区"
|
||||
className="logoimg"
|
||||
style={{ heigth: "40px" }}
|
||||
src={getImageUrl(mygetHelmetapi2.nav_logo_url)}
|
||||
></img>
|
||||
) : (
|
||||
<img
|
||||
alt="可控开源社区"
|
||||
alt="红山开源社区"
|
||||
className="logoimg"
|
||||
style={{ heigth: "40px" }}
|
||||
src={getImageUrl("images/educoder/headNavLogo.png?1526520218")}
|
||||
|
|
|
|||
Loading…
Reference in New Issue