'initial_commit'

package-lock.json

@@ -9391,6 +9391,12 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
+    "prettier": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^4.21.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-responsive": "^9.0.0-beta.10",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.6.2"
   }
 }

src/App.css

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
 
-.App-link {
-  color: #61dafb;
+.container{
+  height: 100vh;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.menu-container{
+  position: fixed;
+  background-color: 'blue';
+}
\ No newline at end of file

src/App.js

-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import { Carousel } from "antd";
+import React from "react";
+import HomePageOne from "./component/HomePageOne";
+import HomePageTwo from "./component/HomePageTwo";
+import HomePageThree from "./component/HomePageThree";
+import HomePageFour from "./component/HomePageFour";
+import HomePageFive from "./component/HomePageFive";
+import HomePageSix from "./component/HomePageSix";
+import Layout from "./Layout";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Layout>
+      <Carousel className="container" autoplay>
+        <HomePageOne />
+        <HomePageTwo />
+        <HomePageThree />
+        <HomePageFour />
+        <HomePageFive />
+        <HomePageSix />
+      </Carousel>
+    </Layout>
   );
 }
 

src/Layout.js

+import Menu from "./component/Menu";
+import "./App.css";
+
+const Layout = ({ children }) => {
+  return (
+    <>
+      <Menu />
+      {children}
+    </>
+  );
+};
+
+export default Layout;

src/component/HardwareSubMenu.js

+import "./style/pageStyle.css";
+import React from "react";
+import cameraOne from "../static/menu/hardware/camera_one@2x.png";
+import cameraTwo from "../static/menu/hardware/camera_two@2x.png";
+import cameraThree from "../static/menu/hardware/camera_three@2x.png";
+import keyCabinetOne from "../static/menu/hardware/key_cabinet_one@2x.png";
+import keyCabinetTwo from "../static/menu/hardware/key_cabinet_two@2x.png";
+import keyCabinetThree from "../static/menu/hardware/key_cabinet_three@2x.png";
+import electronicKanBan from "../static/menu/hardware/electronic_kanban@2x.png";
+import printer from "../static/menu/hardware/printer@2x.png";
+import { Image, Space } from "antd";
+
+const HARD_WARE_SUB_MENU = [
+  {
+    img: cameraOne,
+    text: "车辆设别摄像头4G版",
+    href: "",
+  },
+  {
+    img: cameraTwo,
+    text: "工位直播摄像头",
+    href: "",
+  },
+  {
+    img: printer,
+    text: "云打印机",
+    href: "",
+  },
+  {
+    img: cameraThree,
+    text: "门店实况摄像头P20A2",
+    href: "",
+  },
+  {
+    img: keyCabinetOne,
+    text: "智能养车钥匙柜G13",
+    href: "",
+  },
+  {
+    img: keyCabinetTwo,
+    text: "智能养车钥匙柜X18",
+    href: "",
+  },
+  {
+    img: keyCabinetThree,
+    text: "智能养车钥匙柜X32",
+    href: "",
+  },
+  {
+    img: electronicKanBan,
+    text: "商机/任务看板Y32",
+    href: "",
+  },
+];
+
+const HardwareSubMenu = (props) => {
+  const { hideHardWareSubMenu } = props;
+  return (
+    <div
+      className="hard_ware_sub_menu_container"
+      onMouseLeave={() => {
+        hideHardWareSubMenu();
+      }}
+    >
+      <Space size={48}>
+        {HARD_WARE_SUB_MENU.map((item) => {
+          return (
+            <Space
+              direction="vertical"
+              size={30}
+              align="center"
+              key={item.text}
+            >
+              <Image src={item.img} width={110} height={150} preview={false} />
+              <div className="hard_ware_sub_menu_text">{item.text}</div>
+            </Space>
+          );
+        })}
+      </Space>
+    </div>
+  );
+};
+
+export default HardwareSubMenu;

src/component/HomePageFive.js

+import "./style/pageStyle.css";
+import React from "react";
+
+const HomePageOne = () => {
+  return <div className="home-page-five"></div>;
+};
+
+export default HomePageOne;

src/component/HomePageFour.js

+import "./style/pageStyle.css";
+import React from "react";
+
+const HomePageOne = () => {
+  return <div className="home-page-four"></div>;
+};
+
+export default HomePageOne;

src/component/HomePageOne.js

+import "./style/pageStyle.css";
+import React from "react";
+
+const HomePageOne = () => {
+  return <div className="home-page-one"></div>;
+};
+
+export default HomePageOne;

src/component/HomePageSix.js

+import "./style/pageStyle.css";
+import React from "react";
+
+const HomePageOne = () => {
+  return <div className="home-page-six"></div>;
+};
+
+export default HomePageOne;

src/component/HomePageThree.js

+import "./style/pageStyle.css";
+import React from "react";
+
+const HomePageOne = () => {
+  return <div className="home-page-three"></div>;
+};
+
+export default HomePageOne;

src/component/HomePageTwo.js

+import "./style/pageStyle.css";
+import React from "react";
+
+const HomePageOne = () => {
+  return <div className="home-page-two"></div>;
+};
+
+export default HomePageOne;

src/component/Menu.js

+import "./style/pageStyle.css";
+import React, { useState } from "react";
+import { Image, Space } from "antd";
+import logoWhite from "../static/menu/logo-white@2x.png";
+import logoGreen from "../static/menu/logo-green@2x.png";
+import HardwareSubMenu from "./HardwareSubMenu";
+import SoftwareSubMenu from "./SoftwareSubMenu";
+const menuItems = ["硬件产品", "软件服务", "生态创新", "数据产品", "关于我们"];
+const hasSubMenuItems = ["硬件产品", "软件服务"];
+const normalMenuBackground = "rgba(17,17,19,0.15)";
+const hoverMenuBackground = "white";
+
+const Menu = () => {
+  const renderMenuItem = () => {
+    return menuItems.map((item) => {
+      return (
+        <div
+          className="menu-item"
+          key={item}
+          style={{
+            color:
+              onHoverMenu === item
+                ? " #12c194"
+                : menuBackground
+                ? "#4D4F55"
+                : "#FFFFFF",
+          }}
+          onMouseOver={(menu) => {
+            setOnHoverMenu(menu.target.textContent);
+            if (hasSubMenuItems.includes(item)) {
+              if (item === hasSubMenuItems[0]) {
+                setShowHardWareSubMenu(true);
+                setShowSoftWareSubMenu(false);
+              }
+              if (item === hasSubMenuItems[1]) {
+                setShowSoftWareSubMenu(true);
+                setShowHardWareSubMenu(false);
+                // TODO
+              }
+              setIslogoFocus(true);
+              setMenuBackground(true);
+              return;
+            }
+            setIslogoFocus(false);
+            setMenuBackground(false);
+          }}
+          onMouseLeave={() => {
+            // setIslogoFocus(false);
+            // setMenuBackground(false);
+          }}
+        >
+          {item}
+        </div>
+      );
+    });
+  };
+
+  const [isLogoFocus, setIslogoFocus] = useState(false);
+  const [menuBackground, setMenuBackground] = useState(false);
+  const [showHardWareSubMenu, setShowHardWareSubMenu] = useState(false);
+  const [showSoftWareSubMenu, setShowSoftWareSubMenu] = useState(false);
+
+  const [onHoverMenu, setOnHoverMenu] = useState("");
+
+  const hideHardWareSubMenu = () => {
+    setIslogoFocus(false);
+    setMenuBackground(false);
+    setShowHardWareSubMenu(false);
+    setOnHoverMenu("");
+  };
+
+  return (
+    <>
+      <div
+        className="menu-container"
+        style={{
+          background: menuBackground
+            ? hoverMenuBackground
+            : normalMenuBackground,
+        }}
+      >
+        <Space size={472}>
+          <a href="/">
+            <Image
+              src={isLogoFocus ? logoGreen : logoWhite}
+              width={175}
+              height={25}
+              preview={false}
+            />
+          </a>
+          <Space size={68}>{renderMenuItem()}</Space>
+        </Space>
+      </div>
+      <div className="split_line"></div>
+      {showHardWareSubMenu ? (
+        <HardwareSubMenu hideHardWareSubMenu={hideHardWareSubMenu} />
+      ) : null}
+      {showSoftWareSubMenu ? <SoftwareSubMenu /> : null}
+    </>
+  );
+};
+
+export default Menu;

src/component/SoftwareSubMenu.js

+import "./style/pageStyle.css";
+import React from "react";
+import carLai from "../static/menu/software/car_lai@2x.png";
+import carLaiLogo from "../static/menu/software/car_lai_logo@2x.png";
+import carJian from "../static/menu/software/car_jian@2x.png";
+import carJianLogo from "../static/menu/software/car_jian_logo@2x.png";
+import { Image, Space } from "antd";
+
+const SOFT_WARE_SUB_MENU = [
+  {
+    img: carLai,
+    logo: carLaiLogo,
+    text: "汽服门店数智操作系统，满足你关于门店数智化的所有想象。洗美店、快修快保店、装潢店、综合修理厂...",
+    subText: "",
+    hrefText: "了解详情 >",
+    href: "",
+  },
+  {
+    img: carJian,
+    logo: carJianLogo,
+    text: "数智汽配操作系统",
+    subText: "汽配品牌商、分销商、汽配门店",
+    hrefText: "",
+    href: "",
+  },
+];
+
+const SoftwareSubMenu = (props) => {
+  const { hideSoftWareSubMenu } = props;
+  return (
+    <div
+      className="soft_ware_sub_menu_container"
+      onMouseLeave={() => {
+        hideSoftWareSubMenu();
+      }}
+    >
+      <Space size={58}>
+        {SOFT_WARE_SUB_MENU.map((item) => {
+          return (
+            <Space direction="horizontal" size={5} key={item.text}>
+              <Image src={item.img} width={300} height={220} preview={false} />
+              <Space direction="vertical" size={25}>
+                <Image src={item.logo} width={138} height={43} />
+                <div>
+                  <div>{item.text}</div>
+                  <div>{item.subText}</div>
+                </div>
+              </Space>
+            </Space>
+          );
+        })}
+      </Space>
+    </div>
+  );
+};
+
+export default SoftwareSubMenu;

src/component/style/pageStyle.css

+.home-page-one {
+  background-image: url("../../static/slider/home_page_one@2x.png");
+  background-size: 100% 100%;
+  width: 100vw;
+  height: 100vh;
+}
+
+.home-page-two {
+  background-image: url("../../static/slider/home_page_two@2x.png");
+  background-size: 100% 100%;
+  width: 100vw;
+  height: 100vh;
+}
+
+.home-page-three {
+  background-image: url("../../static/slider/home_page_three@2x.png");
+  background-size: 100% 100%;
+  width: 100vw;
+  height: 100vh;
+}
+
+.home-page-four {
+  background-image: url("../../static/slider/home_page_four@2x.png");
+  background-size: 100% 100%;
+  width: 100vw;
+  height: 100vh;
+}
+
+.home-page-five {
+  background-image: url("../../static/slider/home_page_five@2x.png");
+  background-size: 100% 100%;
+  width: 100vw;
+  height: 100vh;
+}
+
+.home-page-six {
+  background-image: url("../../static/slider/home_page_six@2x.png");
+  background-size: 100% 100%;
+  width: 100vw;
+  height: 100vh;
+}
+
+.menu-container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100vw;
+  height: 60px;
+  z-index: 10;
+  padding-left: 180px;
+  padding-right: 180px;
+}
+
+.menu-item {
+  width: 70px;
+  height: 20px;
+  opacity: 0.5;
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  color: #ffffff;
+  letter-spacing: 0;
+  text-align: left;
+  font-weight: 400;
+}
+
+.split_line {
+  height:0.5px;
+  opacity: 0.15;
+  background: #1f2129;
+  position: fixed;
+  top: 59px;
+  width: 100vw;
+  z-index: 12;
+}
+
+.hard_ware_sub_menu_container {
+  width: 100vw;
+  height: 400px;
+  background-color: #ffffff;
+  padding-right: 180px;
+  padding-left: 180px;
+  padding-top: 80px;
+  text-align: center;
+  position: fixed;
+  top: 60px;
+  z-index: 11;
+}
+
+.hard_ware_sub_menu_text {
+  height: 40px;
+  opacity: 0.5;
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  color: #343744;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+.soft_ware_sub_menu_container {
+    width: 100vw;
+    height: 400px;
+    background-color: #ffffff;
+    padding-right: 180px;
+    padding-left: 180px;
+    padding-top: 80px;
+    position: fixed;
+    top: 60px;
+    z-index: 11;
+  }

src/index.js

-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App.js";
+import reportWebVitals from "./reportWebVitals";
+import "antd/dist/antd.min.css";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />