fix some ui

2020-08-18 23:55:31 +08:00 · 2020-08-18 23:55:31 +08:00 · 9b260b366f
parent 3ced8604ae
commit 9b260b366f
10 changed files with 194 additions and 52 deletions
--- 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",
--- 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": {
--- a/src/Home/Content4.jsx
+++ 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 (
+    <div {...tagProps} {...dataSource.wrapper}>
+      <div {...dataSource.page}>
+        <div key="title" {...dataSource.titleWrapper}>
+          {dataSource.titleWrapper.children.map(getChildrenToRender)}
+        </div>
+        <OverPack {...dataSource.OverPack}>
+          <TweenOne
+            key="video"
+            animation={{ ...animation, delay: 300 }}
+            {...dataSource.video}
+          >
+            {isMobile ? (
+              <video width="100%" loop poster={dataSource.video.children.image}>
+                <source src={videoChildren} type={`video/${type}`} />
+                <track kind="captions" />
+              </video>
+            ) : (
+              <VideoPlay
+                loop
+                width="100%"
+                poster={dataSource.video.children.image}
+              >
+                <source src={videoChildren} type={`video/${type}`} />
+              </VideoPlay>
+            )}
+          </TweenOne>
+        </OverPack>
+      </div>
+    </div>
+  );
+}
+
+export default Content4;
--- a/src/Home/data.source.js
+++ b/src/Home/data.source.js
@ -129,7 +129,7 @@ export const Banner31DataSource = {
        href: "/#/ticket",
        children: (
          <>
-            <div>加入我们</div>
+            <b>加入我们</b>
          </>
        ),
      },
@ -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: (
+          <span>
+            <p>小E与你，就在浙里</p>
+          </span>
+        ),
+        className: "title-h1",
+      },
+      {
+        name: "content",
+        className: "title-content content4-title-content",
+        children: (
+          <span>
+            <span>
+              <span>
+                <p>
+                  <i>也许明年的你就会出现在这里哦</i>
+                </p>
+              </span>
+            </span>
+          </span>
+        ),
+      },
+    ],
+  },
+  video: {
+    className: "content4-video",
+    children: {
+      video: "https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4",
+      image: "https://zos.alipayobjects.com/rmsportal/HZgzhugQZkqUwBVeNyfz.jpg",
+    },
+  },
+};
--- 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;
--- a/src/Home/less/content4.less
+++ 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;
+      }
+    }
+  }
+}
--- 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;
--- 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;
    }
  }
 }
--- 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;

--- 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}
      />,
+      <Content4
+        id="Content4_0"
+        key="Content4_0"
+        dataSource={Content40DataSource}
+        isMobile={this.state.isMobile}
+      />,
      <Content3
        id="Feature3_0"
        key="Feature3_0"
@ -138,7 +145,6 @@ export default class Home extends React.Component {
          "Feature6_0",
          "Content5_0",
          "Content9_0",
-
          "Footer0_0",
        ]}
      />,