forked from Gitlink/forgeplus-react
修改首页
This commit is contained in:
parent
97f62a5684
commit
14e4dc7d9e
|
|
@ -261,16 +261,15 @@
|
|||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
||||
<<<<<<< HEAD
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/runtime-corejs3": {
|
||||
"version": "7.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.15.3.tgz",
|
||||
"integrity": "sha512-30A3lP+sRL6ml8uhoJSs+8jwpKzbw8CqBvDc1laeptxPm5FahumJxirigcbD2qTs71Sonvj1cyZB0OKGAmxQ+A==",
|
||||
"version": "7.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.16.0.tgz",
|
||||
"integrity": "sha512-Oi2qwQ21X7/d9gn3WiwkDTJmq3TQtYNz89lRnoFy8VeZpWlsyXvzSwiRrRZ8cXluvSwqKxqHJ6dBd9Rv+p0ZGQ==",
|
||||
"requires": {
|
||||
"core-js-pure": "^3.16.0",
|
||||
"core-js-pure": "^3.19.0",
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -278,8 +277,6 @@
|
|||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
||||
=======
|
||||
>>>>>>> 01f71bca87fac88ba9ad56c16260521c47f4ca6c
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -1083,6 +1080,18 @@
|
|||
"react-lifecycles-compat": "^3.0.4",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"react-slick": {
|
||||
"version": "0.25.2",
|
||||
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.25.2.tgz",
|
||||
"integrity": "sha512-8MNH/NFX/R7zF6W/w+FS5VXNyDusF+XDW1OU0SzODEU7wqYB+ZTGAiNJ++zVNAVqCAHdyCybScaUB+FCZOmBBw==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.5",
|
||||
"enquire.js": "^2.1.6",
|
||||
"json2mq": "^0.2.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"resize-observer-polyfill": "^1.5.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -3939,14 +3948,11 @@
|
|||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
|
||||
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
|
||||
<<<<<<< HEAD
|
||||
},
|
||||
"core-js-pure": {
|
||||
"version": "3.16.4",
|
||||
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.16.4.tgz",
|
||||
"integrity": "sha512-bY1K3/1Jy9D8Jd12eoeVahNXHLfHFb4TXWI8SQ4y8bImR9qDPmGITBAfmcffTkgUvbJn87r8dILOTWW5kZzkgA=="
|
||||
=======
|
||||
>>>>>>> 01f71bca87fac88ba9ad56c16260521c47f4ca6c
|
||||
"version": "3.19.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.19.1.tgz",
|
||||
"integrity": "sha512-Q0Knr8Es84vtv62ei6/6jXH/7izKmOrtrxH9WJTHLCMAVeU+8TF8z8Nr08CsH4Ot0oJKzBzJJL9SJBYIv7WlfQ=="
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -4029,61 +4035,6 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
<<<<<<< HEAD
|
||||
"cross-env": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
|
||||
"integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cross-spawn": "^7.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"path-key": "^3.1.0",
|
||||
"shebang-command": "^2.0.0",
|
||||
"which": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"path-key": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
||||
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
|
||||
"dev": true
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"shebang-regex": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"shebang-regex": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
|
||||
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
|
||||
"dev": true
|
||||
},
|
||||
"which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"isexe": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
=======
|
||||
>>>>>>> 01f71bca87fac88ba9ad56c16260521c47f4ca6c
|
||||
"cross-spawn": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
|
||||
|
|
@ -15147,9 +15098,9 @@
|
|||
}
|
||||
},
|
||||
"react-slick": {
|
||||
"version": "0.25.2",
|
||||
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.25.2.tgz",
|
||||
"integrity": "sha512-8MNH/NFX/R7zF6W/w+FS5VXNyDusF+XDW1OU0SzODEU7wqYB+ZTGAiNJ++zVNAVqCAHdyCybScaUB+FCZOmBBw==",
|
||||
"version": "0.28.1",
|
||||
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.28.1.tgz",
|
||||
"integrity": "sha512-JwRQXoWGJRbUTE7eZI1rGIHaXX/4YuwX6gn7ulfvUZ4vFDVQAA25HcsHSYaUiRCduTr6rskyIuyPMpuG6bbluw==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.5",
|
||||
"enquire.js": "^2.1.6",
|
||||
|
|
@ -16311,7 +16262,6 @@
|
|||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
|
||||
"integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
|
||||
<<<<<<< HEAD
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"emoji-regex": "^7.0.1",
|
||||
|
|
@ -16340,36 +16290,6 @@
|
|||
"integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
=======
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"emoji-regex": "^7.0.1",
|
||||
"is-fullwidth-code-point": "^2.0.0",
|
||||
"strip-ansi": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
|
||||
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"which-module": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
|
||||
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
|
||||
"dev": true
|
||||
},
|
||||
"wrap-ansi": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
|
||||
"integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
>>>>>>> 01f71bca87fac88ba9ad56c16260521c47f4ca6c
|
||||
"ansi-styles": "^3.2.0",
|
||||
"string-width": "^3.0.0",
|
||||
"strip-ansi": "^5.0.0"
|
||||
|
|
@ -17108,6 +17028,11 @@
|
|||
"is-fullwidth-code-point": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"slick-carousel": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
|
||||
"integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
|
||||
},
|
||||
"snapdragon": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
|
||||
|
|
@ -19245,22 +19170,15 @@
|
|||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
|
||||
<<<<<<< HEAD
|
||||
"dev": true,
|
||||
"optional": true
|
||||
=======
|
||||
"dev": true
|
||||
>>>>>>> 01f71bca87fac88ba9ad56c16260521c47f4ca6c
|
||||
},
|
||||
"is-glob": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
|
||||
"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
|
||||
"dev": true,
|
||||
<<<<<<< HEAD
|
||||
"optional": true,
|
||||
=======
|
||||
>>>>>>> 01f71bca87fac88ba9ad56c16260521c47f4ca6c
|
||||
"requires": {
|
||||
"is-extglob": "^2.1.1"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,6 +92,7 @@
|
|||
"react-resizable": "^1.10.1",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-slick": "^0.28.1",
|
||||
"react-split-pane": "^0.1.91",
|
||||
"react-url-query": "^1.5.0",
|
||||
"react-zmage": "^0.8.5-beta.31",
|
||||
|
|
@ -102,6 +103,7 @@
|
|||
"scroll-into-view": "^1.14.2",
|
||||
"showdown": "^1.9.1",
|
||||
"showdown-katex": "^0.8.0",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"store": "^2.0.12",
|
||||
"style-loader": "0.19.0",
|
||||
"styled-components": "^4.4.1",
|
||||
|
|
|
|||
|
|
@ -85,6 +85,11 @@ const EducoderLogin = Loadable({
|
|||
loading: Loading,
|
||||
})
|
||||
|
||||
const HomePage = Loadable({
|
||||
loader: () => import('./home'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -285,7 +290,8 @@ class App extends Component {
|
|||
<Route exact path="/"
|
||||
render={
|
||||
(props) => (
|
||||
<Projects {...this.props} {...props} {...this.state}></Projects>
|
||||
<HomePage />
|
||||
// <Projects {...this.props} {...props} {...this.state}></Projects>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
let setting = {
|
||||
infinite: true,
|
||||
speed: 2000,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 3000,
|
||||
centerMode: true,
|
||||
centerPadding: "10px",
|
||||
// pauseOnFocus: true,
|
||||
autoplay: true,
|
||||
arrows: false,
|
||||
vertical: true,
|
||||
}
|
||||
function NewSlide() {
|
||||
return (
|
||||
<div className="news-slide">
|
||||
<Slider {...setting}>
|
||||
<div className="testimonial-item" key={1}>
|
||||
<h6>Nicki Royer</h6>
|
||||
<span>Project Manager</span>
|
||||
<p>Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
</div>
|
||||
|
||||
<div className="testimonial-item" key={2}>
|
||||
<h6>Jenifar</h6>
|
||||
<span>Engineer</span>
|
||||
<p>Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
</div>
|
||||
|
||||
<div className="testimonial-item" key={3}>
|
||||
<h6>Jensdsdsdsifar</h6>
|
||||
<span>Engisdssneer</span>
|
||||
<p>Exceptssdeur sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
</div>
|
||||
|
||||
<div className="testimonial-item" key={4}>
|
||||
<h6>dsds</h6>
|
||||
<span>ssss</span>
|
||||
<p> sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.</p>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
export default NewSlide;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import NewSlide from "./NewSlide";
|
||||
import './index.scss';
|
||||
|
||||
function HomePage() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="waves-header">
|
||||
<svg className="waves"
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g className="parallax">
|
||||
<use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
|
||||
<use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<NewSlide></NewSlide>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default HomePage;
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
.hero-waves {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.news-slide {
|
||||
margin: 20px auto;
|
||||
width: 600px;
|
||||
background: #ffffff;
|
||||
.slick-track > div {
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
transition: all .7s;
|
||||
border: 1px solid #fff;
|
||||
.testimonial-item{
|
||||
background: #ffffff;
|
||||
margin-bottom: 20px;
|
||||
padding: 30px 50px 40px 50px;
|
||||
box-shadow: inset -0.71px 0.71px 32px #c0c0c033;
|
||||
}
|
||||
}
|
||||
// .slick-slide[aria-hidden="true"]{
|
||||
// opacity: 0;
|
||||
// }
|
||||
// .slick-slide[aria-hidden="false"]{
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
// .slick-slide {
|
||||
// max-width: 500px;
|
||||
// position: relative;
|
||||
// background: #ffffff;
|
||||
// margin-bottom: 22px;
|
||||
// transition: all 2s;
|
||||
// padding: 30px 50px 40px 50px;
|
||||
// box-shadow: inset -0.71px 0.71px 32px #c0c0c033;
|
||||
// }
|
||||
.slick-center {
|
||||
margin-left: 100px;
|
||||
}
|
||||
// .slick-slide.slick-current {
|
||||
// margin-left: 100px;
|
||||
// }
|
||||
}
|
||||
|
||||
.waves-header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
60deg,
|
||||
rgba(84, 58, 183, 1) 0%,
|
||||
rgba(0, 172, 193, 1) 100%
|
||||
);
|
||||
color: white;
|
||||
}
|
||||
.waves {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
margin-bottom: -10px; /*Fix for safari gap*/
|
||||
min-height: 100px;
|
||||
max-height: 150px;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
height: 20vh;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
} /* Animation */
|
||||
.parallax > use {
|
||||
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
|
||||
}
|
||||
.parallax > use:nth-child(1) {
|
||||
animation-delay: -2s;
|
||||
animation-duration: 7s;
|
||||
}
|
||||
.parallax > use:nth-child(2) {
|
||||
animation-delay: -3s;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.parallax > use:nth-child(3) {
|
||||
animation-delay: -4s;
|
||||
animation-duration: 13s;
|
||||
}
|
||||
.parallax > use:nth-child(4) {
|
||||
animation-delay: -5s;
|
||||
animation-duration: 20s;
|
||||
}
|
||||
@keyframes move-forever {
|
||||
0% {
|
||||
transform: translate3d(-90px, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(85px, 0, 0);
|
||||
}
|
||||
} /*Shrinking for mobile*/
|
||||
@media (max-width: 768px) {
|
||||
.waves {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.content {
|
||||
height: 30vh;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue