Parcourir la source

上传文件至 'src/mobile/component'

deng il y a 1 an
Parent
commit
d8b71b88ca

+ 25 - 0
src/mobile/component/Footer.js

@@ -0,0 +1,25 @@
+import React from "react";
+import Path from "../../component/path/path";
+
+const Footer = (props) => {
+  const { style } = props;
+  return (
+    <div
+      style={{
+        ...style,
+        fontSize: 11,
+        color: "#343744",
+        textAlign: "center",
+        fontWeight: 400,
+        position: "absolute",
+        bottom: -40,
+        width: "100%",
+        padding: "20px 0"
+      }}
+    >
+      <Path />
+    </div>
+  );
+};
+
+export default Footer;

+ 64 - 0
src/mobile/component/Menu.js

@@ -0,0 +1,64 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React, { useState } from "react";
+import { Image } from "antd";
+import OPEN from "../../static/mobile/menu/open.png";
+import CLOSE from "../../static/mobile/menu/close.png";
+import LOGO from "../../static/mobile/menu/logo.png";
+import ASK from "../../static/mobile/menu/menu_check.png";
+import SlideMenu from "./SlideMenu";
+
+const Menu = (props) => {
+  const { children } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+      <div
+        className="slide_menu_filter"
+        style={{
+          width: "100vw",
+          height: "50px",
+          background: "rgba(17,17,19,0.15)",
+          position: "fixed",
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 5,
+          zIndex: 9999,
+          paddingBottom: 5,
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <Image
+          src={isOpen ? CLOSE : OPEN}
+          width={40}
+          preview={false}
+          height={40}
+          className={isOpen ? "rotate-in-2-cw" : ""}
+          onClick={() => setIsOpen(!isOpen)}
+        />
+        <Image
+          src={LOGO}
+          width={116}
+          height={17}
+          preview={false}
+          style={{ position: "relative", top: 10 }}
+        />
+         <Image src={ASK} width={40} height={40} preview={false} />
+      </div>
+      {isOpen ? (
+        <SlideMenu
+          close={() => {
+            setIsOpen(false);
+          }}
+        />
+      ) : (
+        ""
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Menu;

+ 110 - 0
src/mobile/component/SlideMenu.js

@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from "react";
+import Text from "./Text";
+import "../style/animate.css";
+import { Mask } from "antd-mobile";
+import { Link } from "react-router-dom";
+
+export const items = [
+  {
+    title: "首页",
+    href: "/home",
+  },
+  {
+    title: "集团简介",
+    href: "/desc",
+  },
+  {
+    title: "兴嘉要闻",
+    href: "/news",
+  },
+  {
+    title: "公示公告",
+    href: "/notices",
+  },
+  {
+    title: "项目展示",
+    href: "/project",
+  },
+  {
+    title: "会务动态",
+    href: "/hw",
+  },
+  {
+    title: "两学一做",
+    href: "/lxyz",
+  },
+  {
+    title: "党风廉洁",
+    href: "/dflj",
+  },
+];
+
+const SlideMenu = (props) => {
+  const { close } = props;
+
+  useEffect(() => {
+    setOnHover(localStorage.getItem("menu"));
+  }, []);
+
+  const [onHover, setOnHover] = useState();
+
+  return (
+    <Mask onMaskClick={() => close()} className="slide_menu_filter" opacity={0}>
+      <div
+        className="slide-in-top"
+        style={{
+          width: "100vw",
+          height: "85vh",
+          paddingLeft: 45,
+          paddingTop: 100,
+          paddingRight: 45,
+          top: 0,
+          position: "fixed",
+          background: "rgba(17,17,19,0.75)",
+          zIndex: 3,
+          borderRadius: "0px 0px 15px 15px",
+          overflow:"auto"
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          {items.map((item) => {
+            return (
+              <Link
+                to={item.href}
+                key={Math.random()}
+                style={{
+                  height: 60,
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+                onClick={(e) => {
+                  localStorage.setItem("menu", e.target.textContent);
+                }}
+              >
+                <Text
+                  fontSize={16}
+                  color="#FFFFFF"
+                  opacity={onHover === item.title ? "1" : "0.5"}
+                  fontFamil="pingFang"
+                  fontWeighr={400}
+                >
+                  {item.title}
+                </Text>
+                <div
+                  style={{
+                    opacity: onHover === item.title ? "1" : "0.2",
+                    height: 0.5,
+                    background: "#FFFFFF",
+                    marginTop: 15,
+                  }}
+                ></div>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </Mask>
+  );
+};
+
+export default SlideMenu;

+ 46 - 0
src/mobile/component/Text.js

@@ -0,0 +1,46 @@
+import React from "react";
+
+const fontF = {
+  bold: "Yuanti SC",
+  normal: "STYuanti-SC-Regular",
+  pingFang: "",
+};
+
+const Text = (props) => {
+  const {
+    id,
+    className,
+    fontSize,
+    color,
+    fontFamily,
+    opacity,
+    children,
+    top,
+    bottom,
+    fontWeight,
+    nowrap,
+    style,
+  } = props;
+
+  return (
+    <div
+      id={id}
+      className={className}
+      style={{
+        ...style,
+        opacity,
+        fontWeight,
+        fontSize,
+        color,
+        fontFamily: fontF[fontFamily],
+        marginTop: top,
+        marginBottom: bottom,
+        whiteSpace: nowrap ? "nowrap" : "",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Text;