DEL

src/home/index.jsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
+import { isMobile } from 'educoder';
+import './index.scss';
+
+import FirstSection from './FirstSection';
+import SecondSection from './SecondSection';
+import ThirdSection from './ThirdSection';
+import FourthSection from './FourthSection';
+import FifthSection from './FifthSection';
+import SixthSection from './SixthSection';
+import SeventhSection from './SeventhSection';
+import Footer from './Footer';
+
+
+let isHuawei = (/honor|huawei/i.test(navigator.userAgent.toLowerCase()));
+function HomePage({ history }) {
+
+  useEffect(() => {
+    window.addEventListener("scroll", scrollListener, false);
+    return () => {
+      window.removeEventListener("scroll", scrollListener, false);
+    }
+  }, []);
+
+  const [first, setFirst] = useState(true);
+  const [second, setSecond] = useState(isMobile);
+  const [third, setThird] = useState(false || isHuawei);
+  const [fourth, setFourth] = useState(false || isHuawei);
+  const [fifth, setFifth] = useState(false || isHuawei);
+  const [sixth, setSixth] = useState(false || isHuawei);
+
+
+  let settings = JSON.parse(localStorage.chromesetting);
+  let main_web_site_url = settings.main_web_site_url;
+
+
+  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;
+    // let fifthSection = document.querySelector(".home-fifth-section").offsetTop;
+    // let sixthSection = document.querySelector(".home-sixth-section").offsetTop;
+    // let seventhSection = document.querySelector(".home-seventh-section").offsetTop;
+    let secondSection = document.getElementById("home-second-section").offsetTop;
+    let thirdSection = document.getElementById("home-third-section").offsetTop;
+    let fourthSection = document.getElementById("home-fourth-section").offsetTop;
+    let fifthSection = document.getElementById("home-fifth-section").offsetTop;
+    let sixthSection = document.getElementById("home-sixth-section").offsetTop;
+    let seventhSection = document.getElementById("home-seventh-section").offsetTop;
+
+    let top = document.documentElement.scrollTop;
+
+
+    if (top >= clientHeight - 300) {
+      setFirst(false);
+    } else {
+      setFirst(true);
+    }
+
+    if (clientWidth > 1100) {
+      // 第二个动效
+      if (top >= secondSection - clientHeight * 0.8 && top < thirdSection) {
+        setSecond(true);
+      } else {
+        setSecond(false);
+      }
+    } else {
+      // 第二个动效
+      if (top >= secondSection - clientHeight && top < thirdSection) {
+        setSecond(true);
+      } else {
+        setSecond(false);
+      }
+    }
+
+    // 第三个动效
+    if (top >= thirdSection - clientHeight && top < fourthSection) {
+      setThird(true);
+    } else {
+      setThird(false);
+    }
+
+    // 第四个动效
+    if (top >= fourthSection - clientHeight && top < fifthSection) {
+      setFourth(true);
+    } else {
+      setFourth(false);
+    }
+
+    // 第五个动效
+    if (top >= fifthSection - clientHeight && top < sixthSection) {
+      setFifth(true);
+    } else {
+      setFifth(false);
+    }
+
+    // 第六个动效
+    if (top >= sixthSection - clientHeight && top < seventhSection - 100) {
+      setSixth(true);
+    } else {
+      setSixth(false);
+    }
+
+    if(isHuawei){
+      setFourth(true);
+      setSixth(true);
+    }
+  }
+
+
+  return (
+    <div className="homePage">
+
+      <div id="home-first-section" className="home-first-section">
+        <FirstSection first={first} />
+      </div>
+
+
+      <div id="home-second-section" className="home-second-section">
+        <SecondSection second={second} main_web_site_url={main_web_site_url} />
+      </div>
+
+
+      <div id="home-third-section" className="home-third-section">
+        <ThirdSection third={third} />
+      </div>
+
+      <div id="home-fourth-section" className="home-fourth-section">
+        <FourthSection fourth={fourth} history={history} />
+      </div>
+
+      <div id="home-fifth-section" className="home-fifth-section">
+        <FifthSection fifth={fifth} history={history} />
+      </div>
+
+      <div id="home-sixth-section" className="home-sixth-section">
+        <SixthSection sixth={sixth} main_web_site_url={main_web_site_url} />
+      </div>
+
+      <div id="home-seventh-section" className="home-seventh-section">
+        <SeventhSection main_web_site_url={main_web_site_url} />
+      </div>
+
+      <Footer />
+
+    </div>
+  )
+}
+
+export default TPMIndexHOC(HomePage, { noFooter: true });