From 9b260b366fac5c80ecda41b5d007699baf755355 Mon Sep 17 00:00:00 2001 From: cxz66666 <1092889706@qq.com> Date: Tue, 18 Aug 2020 23:55:31 +0800 Subject: [PATCH] fix some ui --- package-lock.json | 42 +++++++++++++++++++++++++++++ package.json | 1 + src/Home/Content4.jsx | 54 +++++++++++++++++++++++++++++++++++++ src/Home/data.source.js | 43 ++++++++++++++++++++++++++++- src/Home/less/banner3.less | 13 +++------ src/Home/less/content4.less | 38 ++++++++++++++++++++++++++ src/Home/less/edit.less | 39 +++------------------------ src/Home/less/footer1.less | 4 +-- src/Home/less/nav3.less | 2 +- src/Home/main.jsx | 10 +++++-- 10 files changed, 194 insertions(+), 52 deletions(-) create mode 100644 src/Home/Content4.jsx create mode 100644 src/Home/less/content4.less diff --git a/package-lock.json b/package-lock.json index 68f4ab6..77a1e9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4534,6 +4534,14 @@ "resolved": "https://registry.npm.taobao.org/decode-uri-component/download/decode-uri-component-0.2.0.tgz", "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=" }, + "deep-eql": { + "version": "3.0.1", + "resolved": "https://registry.npm.taobao.org/deep-eql/download/deep-eql-3.0.1.tgz", + "integrity": "sha1-38lARACtHI/gI+faHfHBR8S0RN8=", + "requires": { + "type-detect": "^4.0.0" + } + }, "deep-equal": { "version": "1.1.1", "resolved": "https://registry.npm.taobao.org/deep-equal/download/deep-equal-1.1.1.tgz", @@ -12385,6 +12393,35 @@ "resize-observer-polyfill": "^1.5.0" } }, + "react-sublime-video": { + "version": "0.2.5", + "resolved": "https://registry.npm.taobao.org/react-sublime-video/download/react-sublime-video-0.2.5.tgz", + "integrity": "sha1-yWe46aN0s21qXRtjuT+m7ALlSEI=", + "requires": { + "prop-types": "^15.5.10", + "rc-tween-one": "^1.2.5" + }, + "dependencies": { + "rc-tween-one": { + "version": "1.8.1", + "resolved": "https://registry.npm.taobao.org/rc-tween-one/download/rc-tween-one-1.8.1.tgz?cache=0&sync_timestamp=1595227760743&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frc-tween-one%2Fdownload%2Frc-tween-one-1.8.1.tgz", + "integrity": "sha1-WztGS5vyw2nvwWyBbMz1e8Fq4lM=", + "requires": { + "babel-runtime": "6.x", + "deep-eql": "~3.0.1", + "prop-types": "^15.6.1", + "raf": "~3.4.0", + "style-utils": "~0.1.13", + "tween-functions": "~1.2.0" + } + }, + "style-utils": { + "version": "0.1.24", + "resolved": "https://registry.npm.taobao.org/style-utils/download/style-utils-0.1.24.tgz", + "integrity": "sha1-/AZ115oLIBv4b8XVod0gL4ON5UQ=" + } + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fread-pkg%2Fdownload%2Fread-pkg-3.0.0.tgz", @@ -14266,6 +14303,11 @@ "prelude-ls": "~1.1.2" } }, + "type-detect": { + "version": "4.0.8", + "resolved": "https://registry.npm.taobao.org/type-detect/download/type-detect-4.0.8.tgz", + "integrity": "sha1-dkb7XxiHHPu3dJ5pvTmmOI63RQw=" + }, "type-fest": { "version": "0.8.1", "resolved": "https://registry.npm.taobao.org/type-fest/download/type-fest-0.8.1.tgz", diff --git a/package.json b/package.json index c7da745..423c735 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-router": "^5.2.0", "react-router-dom": "^5.1.2", "react-scripts": "3.2.0", + "react-sublime-video": "^0.2.5", "webpack": "4.41.0" }, "scripts": { diff --git a/src/Home/Content4.jsx b/src/Home/Content4.jsx new file mode 100644 index 0000000..1321538 --- /dev/null +++ b/src/Home/Content4.jsx @@ -0,0 +1,54 @@ +import React from "react"; +import TweenOne from "rc-tween-one"; +import OverPack from "rc-scroll-anim/lib/ScrollOverPack"; +import VideoPlay from "react-sublime-video"; +import { getChildrenToRender } from "./utils"; + +function Content4(props) { + const { ...tagProps } = props; + const { dataSource, isMobile } = tagProps; + delete tagProps.dataSource; + delete tagProps.isMobile; + const animation = { + y: "+=30", + opacity: 0, + type: "from", + ease: "easeOutQuad", + }; + const videoChildren = dataSource.video.children.video; + const videoNameArray = videoChildren.split("."); + const type = videoNameArray[videoNameArray.length - 1]; + return ( +
+
+
+ {dataSource.titleWrapper.children.map(getChildrenToRender)} +
+ + + {isMobile ? ( + + ) : ( + + + + )} + + +
+
+ ); +} + +export default Content4; diff --git a/src/Home/data.source.js b/src/Home/data.source.js index 8318341..bca800f 100644 --- a/src/Home/data.source.js +++ b/src/Home/data.source.js @@ -129,7 +129,7 @@ export const Banner31DataSource = { href: "/#/ticket", children: ( <> -
加入我们
+ 加入我们 ), }, @@ -2116,3 +2116,44 @@ export const Feature12DataSource = { ), }, }; +export const Content40DataSource = { + wrapper: { className: "home-page-wrapper content4-wrapper" }, + page: { className: "home-page content4 ke03sm80c9e-editor_css" }, + OverPack: { playScale: 0.3, className: "" }, + titleWrapper: { + className: "title-wrapper", + children: [ + { + name: "title", + children: ( + +

小E与你，就在浙里

+ + ), + className: "title-h1", + }, + { + name: "content", + className: "title-content content4-title-content", + children: ( + + + +

+ 也许明年的你就会出现在这里哦 +

+ + + + ), + }, + ], + }, + video: { + className: "content4-video", + children: { + video: "https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4", + image: "https://zos.alipayobjects.com/rmsportal/HZgzhugQZkqUwBVeNyfz.jpg", + }, + }, +}; diff --git a/src/Home/less/banner3.less b/src/Home/less/banner3.less index c1f99e4..b939b84 100644 --- a/src/Home/less/banner3.less +++ b/src/Home/less/banner3.less @@ -9,6 +9,7 @@ background-image: url("https://gw.alipayobjects.com/zos/rmsportal/xTPkCNNLOnTEbGgVZOpE.jpg"); background-size: cover; background-attachment: fixed; + background-position: center; & &-text-wrapper { display: inline-block; @@ -53,16 +54,8 @@ display: block; margin: 72px auto 0; background: rgb(3, 67, 101); - background: -moz-linear-gradient( - left, - rgba(3, 67, 101, 1) 0%, - rgba(0, 27, 51, 1) 100% - ); - background: linear-gradient( - to right, - rgba(3, 67, 101, 1) 0%, - rgba(0, 27, 51, 1) 100% - ); + background: -moz-linear-gradient(135deg, #6e8efb, #a777e3); + background: linear-gradient(135deg, #6e8efb, #a777e3); box-shadow: 0 8px 16px #0a52ab; border: none; transition: background 0.45s @ease-out; diff --git a/src/Home/less/content4.less b/src/Home/less/content4.less new file mode 100644 index 0000000..af6708f --- /dev/null +++ b/src/Home/less/content4.less @@ -0,0 +1,38 @@ +@content4: content4; +.@{content4}-wrapper { + min-height: 720px; + background: #fafafa; + .@{content4} { + height: 100%; + overflow: hidden; + &-video { + border-radius: 4px; + overflow: hidden; + max-width: 800px; + margin: auto; + background: #fff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + video { + display: block; + margin: auto; + } + } + } +} + +@media screen and (max-width: 767px) { + .@{content4}-wrapper { + min-height: 350px; + .@{content4} { + overflow: hidden; + width: 90%; + margin: auto; + &-video { + top: 15%; + background: url("https://zos.alipayobjects.com/rmsportal/HZgzhugQZkqUwBVeNyfz.jpg") + no-repeat center; + background-size: cover; + } + } + } +} diff --git a/src/Home/less/edit.less b/src/Home/less/edit.less index 74cc031..99149d5 100644 --- a/src/Home/less/edit.less +++ b/src/Home/less/edit.less @@ -34,14 +34,6 @@ border-top-style: dashed; } #Banner3_1 .banner3-text-wrapper > .ant-btn { - background-color: #cf2892; - background-image: linear-gradient( - 0rad, - rgb(255, 0, 0) 10%, - rgb(255, 0, 0) 29.71153846153846%, - #da2626 45.4223076923077%, - white 100% - ); background-attachment: scroll; background-blend-mode: normal; background-position: 0% 0%; @@ -59,43 +51,18 @@ } #Banner3_1 .banner3-text-wrapper > .k6bx9qqmas-editor_css { text-align: center; - background: #fb5607; + background: #bdb2ff; -webkit-background-clip: text; color: transparent; } #Banner3_1 .banner3-text-wrapper > .k6bxcnb8hlg-editor_css { font-family: Tahoma; - font-size: 23px; + font-size: 20px; font-weight: bold; color: #e9e9e9; - background-color: rgb(251, 251, 251); - background-image: linear-gradient( - 225deg, - #f04134 12.5%, - #00a854 25%, - #108ee9 37.5%, - #f5317f 50%, - #f56a00 62.5%, - #7265e6 75%, - #ffbf00 87.5%, - #00a2ae 99.54%, - #00a2ae 100%, - rgb(0, 27, 51) 100%, - black 100%, - black 100%, - black 100%, - black 100%, - black 100%, - black 100%, - black 100%, - black 100%, - #f04134 100%, - #108ee9 100%, - black 100% - ); + background-blend-mode: normal; background-clip: padding-box; - box-shadow: 0px 8px 16px rgb(171, 21, 10); } #Content3_0 .ant-col > .content3-text > .k6bypeippkr-editor_css { margin: 0px; diff --git a/src/Home/less/footer1.less b/src/Home/less/footer1.less index a0d1551..f82cfed 100644 --- a/src/Home/less/footer1.less +++ b/src/Home/less/footer1.less @@ -40,9 +40,9 @@ overflow: hidden; } .copyright { - height: 100px; + height: 80px; text-align: center; - line-height: 100px; + line-height: 80px; } } } diff --git a/src/Home/less/nav3.less b/src/Home/less/nav3.less index 797a547..bf2126f 100644 --- a/src/Home/less/nav3.less +++ b/src/Home/less/nav3.less @@ -132,7 +132,7 @@ height: 14px; cursor: pointer; position: absolute; - top: 24px; + top: 18px; right: 24px; z-index: 100; diff --git a/src/Home/main.jsx b/src/Home/main.jsx index 84b19f2..b628a4b 100644 --- a/src/Home/main.jsx +++ b/src/Home/main.jsx @@ -14,7 +14,7 @@ import Content5 from "./Content5"; import Content9 from "./Content9"; import Footer1 from "./Footer1"; import Point from "./Point"; - +import Content4 from "./Content4"; import { Nav30DataSource, Banner31DataSource, @@ -23,6 +23,7 @@ import { Feature30DataSource, Feature80DataSource, Feature60DataSource, + Content40DataSource, Content50DataSource, Content90DataSource, Footer10DataSource, @@ -89,6 +90,12 @@ export default class Home extends React.Component { dataSource={Feature10DataSource} isMobile={this.state.isMobile} />, + , ,