From 14e4dc7d9ecc11ba37bba5f4353207de186c3501 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BD=95=E7=AB=A5=E5=B4=87?= <792998983@qq.com> Date: Tue, 9 Nov 2021 16:53:59 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 136 +++++++++--------------------------------- package.json | 2 + src/App.js | 8 ++- src/home/NewSlide.jsx | 52 ++++++++++++++++ src/home/index.jsx | 31 ++++++++++ src/home/index.scss | 111 ++++++++++++++++++++++++++++++++++ 6 files changed, 230 insertions(+), 110 deletions(-) create mode 100644 src/home/NewSlide.jsx create mode 100644 src/home/index.jsx create mode 100644 src/home/index.scss diff --git a/package-lock.json b/package-lock.json index 9722a84e..211859ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" } diff --git a/package.json b/package.json index 3e9ecfea..e9c42f0e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.js b/src/App.js index 263be1f7..67ec0ab4 100644 --- a/src/App.js +++ b/src/App.js @@ -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 { ( - + + // ) } /> diff --git a/src/home/NewSlide.jsx b/src/home/NewSlide.jsx new file mode 100644 index 00000000..2509dd43 --- /dev/null +++ b/src/home/NewSlide.jsx @@ -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 ( +
+ +
+
Nicki Royer
+ Project Manager +

Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.

+
+ +
+
Jenifar
+ Engineer +

Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.

+
+ +
+
Jensdsdsdsifar
+ Engisdssneer +

Exceptssdeur sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.

+
+ +
+
dsds
+ ssss +

sint occaecat non proident, sunt in culpa qui officia deserunt mollit id est laborum.

+
+ +
+ + ) +} +export default NewSlide; \ No newline at end of file diff --git a/src/home/index.jsx b/src/home/index.jsx new file mode 100644 index 00000000..e3481436 --- /dev/null +++ b/src/home/index.jsx @@ -0,0 +1,31 @@ +import React, { useEffect, useState } from 'react'; +import NewSlide from "./NewSlide"; +import './index.scss'; + +function HomePage() { + + return ( +
+
+ + + + + + + + + + + +
+ + + +
+ ) +} + + +export default HomePage; \ No newline at end of file diff --git a/src/home/index.scss b/src/home/index.scss new file mode 100644 index 00000000..9dc06654 --- /dev/null +++ b/src/home/index.scss @@ -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; + } +}