Merge branch 'master' of http://787255.xyz:4003/ydm/zl365

src/component/card/index.css

@@ -0,0 +1,3 @@
+.card-height > div {
+  flex-direction: row !important;
+}

src/component/card/index.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import "./index.css";
+import {
+  makeStyles,
+  Button,
+  Caption1,
+  Body1,
+  Subtitle1,
+} from "@fluentui/react-components";
+import {
+  MoreHorizontal20Regular,
+  Open16Regular,
+  Share16Regular,
+} from "@fluentui/react-icons";
+import {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardPreview,
+  CardProps,
+} from "@fluentui/react-components";
+
+const resolveAsset = (asset: string) => {
+  const ASSET_URL =
+    "https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/";
+
+  return `${ASSET_URL}${asset}`;
+};
+
+const useStyles = makeStyles({
+  main: {
+    display: "flex",
+    flexWrap: "wrap",
+    flexDirection: "column",
+    columnGap: "16px",
+    rowGap: "36px",
+  },
+
+  title: { margin: "0 0 12px" },
+
+  description: { margin: "0 0 12px" },
+
+  card: {
+    width: "400px",
+    maxWidth: "100%",
+    height: "fit-content",
+  },
+
+  text: { margin: "0" },
+});
+
+
+const CardExample = (props: CardProps) => {
+  const styles = useStyles();
+
+  return (
+    <Card className={styles.card} {...props}>
+      <CardPreview>
+        <img
+          src={resolveAsset("sales_template.png")}
+          alt="Sales Presentation Preview"
+        />
+      </CardPreview>
+
+      <CardHeader
+        image={
+          <img
+            src={resolveAsset("pptx.png")}
+            width="32px"
+            height="32px"
+            alt="Microsoft PowerPoint logo"
+          />
+        }
+        header={
+          <Body1>
+            <b>App Name</b>
+          </Body1>
+        }
+        description={<Caption1>Developer</Caption1>}
+        action={
+          <Button
+            appearance="transparent"
+            icon={<MoreHorizontal20Regular />}
+            aria-label="More options"
+          />
+        }
+      />
+
+      <p className={styles.text}>
+        Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw.
+        Marshmallow pastry jujubes toffee sugar plum.
+      </p>
+    </Card>
+  );
+};
+
+export const FocusMode = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.main}>
+      <section>
+        <CardExample />
+      </section>
+
+      <section>
+        <CardExample focusMode="no-tab" />
+      </section>
+
+      <section>
+        <CardExample focusMode="tab-exit" />
+      </section>
+    </div>
+  );
+};

src/component/hedaer/index.css

@@ -12,6 +12,24 @@
     max-width: 100%;
 }
 
+.zl-365-logo-search {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.header-logo-svg {
+    position: absolute;
+    left: 9px;
+    top: 9px;
+    color: #0078d4;
+}
+
+.header-logo-input {
+    height: 32px;
+    padding-left: 26px;
+    width: 480px;
+}
+
 .zl-365-header-function {
     width: 48px;
     height: 48px;
@@ -41,7 +59,7 @@
     text-align: center;
 }
 
-.zl-365-header-tools > div {
+.zl-365-header-tools>div {
     padding: 12px 16px;
 }
 
@@ -63,7 +81,148 @@ span.header-search-svg {
     cursor: pointer;
 }
 
-.zl-365-header-tools > div:hover {
+.zl-365-header-tools>div:hover {
     background-color: #065693;
     cursor: pointer;
 }
+
+.zl-365-article {
+    height: 88px;
+    width: 96px;
+    display: block;
+    unicode-bidi: isolate;
+}
+
+.zl-365-article:hover {
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1);
+}
+
+.zl-365-article>button {
+    position: relative;
+    display: flex;
+    border-radius: 6px;
+    box-sizing: border-box;
+    border: 1px solid transparent !important;
+    text-decoration: none !important;
+    background-color: transparent;
+    -webkit-touch-callout: none;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    max-height: 100%;
+    max-width: 100%;
+    height: 100%;
+    width: 100%;
+    padding: 8px 4px 4px;
+    gap: 4px;
+    flex-direction: column;
+    outline-offset: -2px;
+}
+
+.zl-365-article span {
+    font: 12px SegoeUI-Regular-final, Segoe UI, "Segoe UI Web (West European)", Segoe, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Tahoma, Helvetica, Arial, sans-serif;
+}
+
+.custom-div {
+    width: 100%;
+    height: 9px;
+    padding: 12px 0;
+    box-sizing: content-box;
+}
+
+.custom-hr {
+    height: 1px;
+    border: none;
+    width: 100%;
+    background-color: #E1DFDD;
+}
+
+.intentTileWrapper {
+    display: block;
+    unicode-bidi: isolate;
+}
+
+.intentTile-button {
+    display: flex;
+    flex-direction: column;
+    width: 96px;
+    height: 112px;
+    border-radius: 6px;
+    padding: 4px;
+    column-gap: 2px;
+    border: none;
+    cursor: pointer;
+    background-color: #ffffff;
+}
+
+.intentTile-button:hover {
+    background-color: #f0f0f0;
+}
+
+.intentTile-icon-content {
+    display: flex;
+    box-sizing: border-box;
+    width: 88px;
+    height: 76px;
+    padding-bottom: 4px;
+    justify-content: center;
+    position: relative;
+    align-items: center;
+}
+
+.intentTile-icon1 {
+    display: flex;
+    width: 32px;
+    height: 44px;
+    justify-content: center;
+    background-color: transparent !important;
+}
+
+.intentTile-icon2 {
+    position: absolute;
+    box-sizing: border-box;
+    width: 24px;
+    height: 24px;
+    top: 40px;
+    left: 12px;
+    padding: 2px;
+    border-radius: 2px;
+    align-items: center;
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .14);
+}
+
+.intentTile-text {
+    display: flex;
+    justify-content: center;
+    width: 88px;
+    height: 28px;
+}
+input:focus {
+    outline: none;
+}
+
+input.header-logo-input:hover:after {
+    border-bottom: 2px solid #0f6cbd;
+    position: absolute;
+    content: '';
+    width: 100%;
+    bottom: 0;
+}
+
+span.header-loge-input:hover:after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 2px;
+    border-bottom: 2px solid #0f6cbd;
+}
+
+span.header-loge-input {
+    position: relative;
+}

src/component/hedaer/index.jsx

@@ -1,56 +1,634 @@
 import React, { Component } from "react";
-import './index.css';
-import { LocalLanguage20Regular } from '@fluentui/react-icons'
+import "./index.css";
 import {
-    Button,
-    Menu,
-    MenuTrigger,
-    MenuList,
-    MenuItem,
-    MenuPopover,
+  makeStyles,
+  mergeClasses,
+  Button,
+  Popover,
+  PopoverSurface,
+  PopoverTrigger,
 } from "@fluentui/react-components";
-import { useTranslation } from 'react-i18next'
+import m365 from "../../img/m365.svg";
+import outlook from "../../img/outlook.svg";
+import oneDrice from "../../img/oneDrice.svg";
+import word from "../../img/word.svg";
+import excel from "../../img/excel.svg";
+import ppt from "../../img/ppt.svg";
+import oneNote from "../../img/OneNote.svg";
+import sps from "../../img/SPS.svg";
+import teams from "../../img/Teams.svg";
+import vi from "../../img/Vi.svg";
+import engaga from "../../img/Engaga.svg";
+import pa from "../../img/PA.svg";
+import gd from "../../img/更多.svg";
+import wd1 from "../../img/文档1.svg";
+import wd2 from "../../img/文档2.svg";
+import gzp1 from "../../img/工作普1.svg";
+import gzp2 from "../../img/工作普2.svg";
+import yswd1 from "../../img/演示文档1.svg";
+import yswd2 from "../../img/演示文档2.svg";
+import dc1 from "../../img/调查1.svg";
+import dc2 from "../../img/调查2.svg";
+import cjgd from "../../img/创建更多.svg";
 
 
-const Header = () => {
-    const { t, i18n } = useTranslation();
-    return (
-        <div class="zl-365-header">
-            <div class="zl-365-header-function">
-                <div class="function-dropdown">
-                    <svg t="1730778589476" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11096" width="16" height="16"><path d="M113.787259 227.553185a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853zM511.978668 227.553185A113.787259 113.787259 0 1 0 511.978668 0.021332a113.787259 113.787259 0 0 0 0 227.531853zM910.170076 227.553185a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853zM113.787259 625.787259a113.787259 113.787259 0 1 0 0-227.574518 113.787259 113.787259 0 0 0 0 227.574518z" fill="currentColor" p-id="11097"></path><path d="M511.978668 625.787259a113.787259 113.787259 0 1 0 0-227.574518 113.787259 113.787259 0 0 0 0 227.574518z" fill="currentColor" p-id="11098"></path><path d="M910.170076 625.787259a113.787259 113.787259 0 1 0 0-227.574518 113.787259 113.787259 0 0 0 0 227.574518zM113.787259 1023.978668a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853zM511.978668 1023.978668a113.787259 113.787259 0 1 0 0-227.531853A113.787259 113.787259 0 0 0 511.978668 1023.978668zM910.170076 1023.978668a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853z" fill="currentColor" p-id="11099"></path></svg>
-                </div>
-            </div>
-            <div class="zl-365-header-name">ZlSoftSharePoint</div>
-            <div class="zl-365-header-search">
-                <span class="header-search-svg"><svg t="1730778975282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22289" width="16" height="16"><path d="M314.445 652.986l-190.73 190.73c-15.62 15.62-15.62 40.947 0 56.568 15.622 15.621 40.948 15.621 56.57 0l190.729-190.73C433.062 759.268 511.809 789 597.5 789 797.703 789 960 626.703 960 426.5S797.703 64 597.5 64 235 226.297 235 426.5c0 85.691 29.733 164.438 79.445 226.486zM597.5 709C441.48 709 315 582.52 315 426.5 315 270.48 441.48 144 597.5 144 753.52 144 880 270.48 880 426.5 880 582.52 753.52 709 597.5 709z" fill="currentColor" p-id="22290"></path></svg></span>
-                <input type="text" class="header-search-input" placeholder="在此网站中搜索" />
-            </div>
-            <div class="zl-365-header-tools">
-                <Menu>
-                    <MenuTrigger disableButtonEnhancement>
-                        <LocalLanguage20Regular style={{ cursor: "pointer" }} />
-                    </MenuTrigger>
-                    <MenuPopover>
-                        <MenuList>
-                            <MenuItem onClick={() => {
-                                i18n.changeLanguage("zh-CN")
-                            }}
-                            >简体中文</MenuItem>
-                            <MenuItem onClick={() => {
-                                i18n.changeLanguage("en-US")
-                            }}>English</MenuItem>
-                        </MenuList>
-                    </MenuPopover>
-                </Menu>
-                <div class="header-tools-set">
-                    <svg t="1730786970755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27709" width="16" height="16"><path d="M833.75 911.25l136.25-170L900 630l11.25-51.25 110-67.5-48.75-213.75-128.75-15-32.5-41.25L825 111.25 627.5 15l-91.25 91.25-52.5 0-91.25-92.5L195 107.5l15 128.75-32.5 41.25L48.75 291.25 1.25 505l110 70L122.5 625l-68.75 108.75 136.25 172.5 122.5-42.5 47.5 23.75 42.5 122.5L622.5 1012.5l42.5-122.5 47.5-22.5L833.75 911.25zM566.25 933.75l-107.5-1.25-35-101.25-106.25-51.25-100 35L150 730l56.25-90L180 525l-90-57.5L112.5 363.75l106.25-11.25 72.5-91.25-12.5-106.25 96.25-46.25 75 76.25 117.5 1.25 75-75 96.25 47.5-11.25 106.25 73.75 92.5 106.25 12.5 23.75 105-90 56.25-26.25 115 57.5 90-66.25 83.75-100-36.25-106.25 50L566.25 933.75zM662.5 391.25c-67.5-85-191.25-100-275-32.5-83.75 67.5-97.5 190-30 275s191.25 100 275 32.5C717.5 600 730 476.25 662.5 391.25zM415 588.75c-42.5-53.75-33.75-131.25 18.75-172.5 52.5-41.25 130-32.5 172.5 20 42.5 53.75 33.75 131.25-18.75 172.5C533.75 651.25 456.25 642.5 415 588.75z" fill="currentColor" p-id="27710"></path></svg>
-
-                </div>
-                <div class="header-tools-user"><svg t="1730787072114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29667" width="16" height="16"><path d="M508.672 128.64c123.904 0 224.768 100.864 224.768 224.768s-100.864 224.768-224.768 224.768-224.768-100.864-224.768-224.768c0-124.032 100.864-224.768 224.768-224.768m0-79.36c-167.936 0-304.128 136.192-304.128 304.128s136.192 304.128 304.128 304.128S812.8 521.344 812.8 353.408 676.608 49.28 508.672 49.28" fill="currentColor" p-id="29668"></path><path d="M92.288 974.72c-2.304 0-4.608-0.256-6.912-0.64-21.504-3.84-35.968-24.32-32.128-45.952 40.064-227.328 264.576-350.08 455.552-350.08 21.888 0 39.68 17.792 39.68 39.68s-17.792 39.68-39.68 39.68c-126.464 0-340.864 77.184-377.344 284.544-3.584 19.2-20.224 32.768-39.168 32.768" fill="currentColor" p-id="29669"></path><path d="M931.712 974.72c-18.944 0-35.584-13.568-39.04-32.768-36.608-207.232-250.88-284.544-377.344-284.544-21.888 0-39.68-17.792-39.68-39.68s17.792-39.68 39.68-39.68c190.848 0 415.36 122.752 455.552 350.08 3.84 21.632-10.624 42.112-32.128 45.952-2.432 0.384-4.736 0.64-7.04 0.64" fill="currentColor" p-id="29670"></path></svg></div>
+const useExampleStyles = makeStyles({
+  popoverSurface: {
+    width: "512px",
+    height: "489px",
+    display: "flex",
+    flexDirection: "column",
+  },
+
+  target: {
+    height: "48px",
+    width: "48px",
+    display: "flex",
+    justifyContent: "",
+  },
+});
+
+const useGridExampleStyles = makeStyles({
+  belowStart: {
+    flexDirection: "row-reverse",
+    gridRowStart: "5",
+    gridColumnStart: "2",
+    "& div:nth-child(2)": {
+      transform: "rotate(180deg)",
+    },
+  }
+});
+
+
+const PositionedComponent = (props) => {
+  const { positioning, targetContent = "Click me", targetClassName } = props;
+  const styles = useExampleStyles();
+  return (
+    <Popover positioning={positioning}>
+      <PopoverTrigger disableButtonEnhancement>
+        <Button
+          appearance="primary"
+          className={mergeClasses(styles.target, targetClassName)}
+          style={{ minWidth: "48px", height: "48px" }}
+        >
+          <div class="function-dropdown" title="应用启动器">
+            <svg
+              t="1730778589476"
+              class="icon"
+              viewBox="0 0 1026 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="11096"
+              width="16"
+              height="16"
+            >
+              <path
+                d="M113.787259 227.553185a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853zM511.978668 227.553185A113.787259 113.787259 0 1 0 511.978668 0.021332a113.787259 113.787259 0 0 0 0 227.531853zM910.170076 227.553185a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853zM113.787259 625.787259a113.787259 113.787259 0 1 0 0-227.574518 113.787259 113.787259 0 0 0 0 227.574518z"
+                fill="currentColor"
+                p-id="11097"
+              ></path>
+              <path
+                d="M511.978668 625.787259a113.787259 113.787259 0 1 0 0-227.574518 113.787259 113.787259 0 0 0 0 227.574518z"
+                fill="currentColor"
+                p-id="11098"
+              ></path>
+              <path
+                d="M910.170076 625.787259a113.787259 113.787259 0 1 0 0-227.574518 113.787259 113.787259 0 0 0 0 227.574518zM113.787259 1023.978668a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853zM511.978668 1023.978668a113.787259 113.787259 0 1 0 0-227.531853A113.787259 113.787259 0 0 0 511.978668 1023.978668zM910.170076 1023.978668a113.787259 113.787259 0 1 0 0-227.531853 113.787259 113.787259 0 0 0 0 227.531853z"
+                fill="currentColor"
+                p-id="11099"
+              ></path>
+            </svg>
+          </div>
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverSurface className={styles.popoverSurface}>
+        <div
+          style={{ width: "480px", height: "32px" }}
+          class="zl-365-header-tools2"
+        >
+          <div class="zl-365-logo-search">
+          <span class="header-loge-input">
+            <span class="header-logo-svg"><svg t="1730778975282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22289" width="16" height="16"><path d="M314.445 652.986l-190.73 190.73c-15.62 15.62-15.62 40.947 0 56.568 15.622 15.621 40.948 15.621 56.57 0l190.729-190.73C433.062 759.268 511.809 789 597.5 789 797.703 789 960 626.703 960 426.5S797.703 64 597.5 64 235 226.297 235 426.5c0 85.691 29.733 164.438 79.445 226.486zM597.5 709C441.48 709 315 582.52 315 426.5 315 270.48 441.48 144 597.5 144 753.52 144 880 270.48 880 426.5 880 582.52 753.52 709 597.5 709z" fill="currentColor" p-id="22290"></path></svg></span>
+            <input type="text" class="header-logo-input" placeholder="查找Microsoft 365应用" />
+            </span>
+          </div>
+        </div>
+        <div style={{ width: "480px", height: "409px" }}>
+          <div
+            style={{
+              flex: "0 0 100%",
+              height: "264px",
+              display: "flex",
+              flexWrap: "wrap",
+              marginTop: "8px",
+            }}
+          >
+            <div className="zl-365-article">
+              <button
+                title="Microsoft 365"
+                aria-label="Microsoft 365 将在新选项卡中打开"
+              >
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={m365}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="Microsoft 365"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>Microsoft 365</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button title="OutLook" aria-label="OutLook 将在新选项卡中打开">
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={outlook}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="Outlook"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>Outlook</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button title="OneDrice" aria-label="OneDrice 将在新选项卡中打开">
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={oneDrice}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="OneDrice"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>OneDrice</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button title="Word" aria-label="Word 将在新选项卡中打开">
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={word}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="Word"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>Word</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button title="Excel" aria-label="Excel 将在新选项卡中打开">
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={excel}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="Excel"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>Excel</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button
+                title="PowerPoint"
+                aria-label="PowerPoint 将在新选项卡中打开"
+              >
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={ppt}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="PowerPoint"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>PowerPoint</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button title="OneNote" aria-label="OneNote 将在新选项卡中打开">
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={oneNote}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="OneNote"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>OneNote</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button
+                title="SharePoint"
+                aria-label="SharePoint 将在新选项卡中打开"
+              >
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={sps}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="SharePoint"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>SharePoint</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button title="SharePoint" aria-label="Teams 将在新选项卡中打开">
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={teams}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="Teams"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>Teams</span>
+                </div>
+              </button>
             </div>
+            <div className="zl-365-article">
+              <button title="Viva" aria-label="Viva 将在新选项卡中打开">
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={vi}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="Viva"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>Viva</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button title="Engaga" aria-label="Engaga 将在新选项卡中打开">
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={engaga}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="Engaga"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>Viva</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button
+                title="PowerAutomate"
+                aria-label="PowerAutomate 将在新选项卡中打开"
+              >
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={pa}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="PowerAutomate"
+                  />
+                </div>
+                <div style={{ width: "100%", display: "grid" }}>
+                  <span>Power</span>
+                  <span>Automate</span>
+                </div>
+              </button>
+            </div>
+            <div className="zl-365-article">
+              <button title="更多应用" aria-label="更多应用 将在新选项卡中打开">
+                <div style={{ width: "100%" }}>
+                  <img
+                    src={gd}
+                    style={{
+                      width: "32px",
+                      height: "40px",
+                      display: "inline-block",
+                    }}
+                    alt="更多应用"
+                  />
+                </div>
+                <div style={{ width: "100%" }}>
+                  <span>更多应用</span>
+                </div>
+              </button>
+            </div>
+          </div>
+          <div className="custom-div">
+            <hr className="custom-hr" />
+          </div>
+          <div style={{ width: "480px", height: "145px",
+              flex: "0 0 100%",
+              display: "flex",
+              flexWrap: "wrap"}}>
+            <div className="intentTileWrapper">
+              <button
+                className="intentTile-button"
+                aria-label="文档 将在新选项卡中打开"
+              >
+                <div className="intentTile-icon-content">
+                  <div className="intentTile-icon1">
+                    <img
+                      src={wd1}
+                      style={{
+                        width: "32px",
+                        height: "44px",
+                        display: "inline-block",
+                      }}
+                      alt="文档"
+                    />
+                  </div>
+                  <div className="intentTile-icon2">
+                    <img
+                      src={wd2}
+                      style={{
+                        display: "inline-block",
+                      }}
+                      alt="文档"
+                    />
+                  </div>
+                </div>
+                <div className="intentTile-text">
+                  <span>文档</span>
+                </div>
+              </button>
+            </div>
+            <div className="intentTileWrapper">
+              <button
+                className="intentTile-button"
+                aria-label="工作簿 将在新选项卡中打开"
+              >
+                <div className="intentTile-icon-content">
+                  <div className="intentTile-icon1">
+                    <img
+                      src={gzp1}
+                      style={{
+                        width: "55.8px",
+                        height: "44px",
+                        display: "inline-block",
+                      }}
+                      alt="工作簿"
+                    />
+                  </div>
+                  <div className="intentTile-icon2">
+                    <img
+                      src={gzp2}
+                      style={{
+                        display: "inline-block",
+                      }}
+                      alt="工作簿"
+                    />
+                  </div>
+                </div>
+                <div className="intentTile-text">
+                  <span>工作簿</span>
+                </div>
+              </button>
+            </div>
+            <div className="intentTileWrapper">
+              <button
+                className="intentTile-button"
+                aria-label="演示文稿 将在新选项卡中打开"
+              >
+                <div className="intentTile-icon-content">
+                  <div className="intentTile-icon1">
+                    <img
+                      src={yswd1}
+                      style={{
+                        width: "66.6px",
+                        height: "44px",
+                        display: "inline-block",
+                      }}
+                      alt="演示文稿"
+                    />
+                  </div>
+                  <div className="intentTile-icon2">
+                    <img
+                      src={yswd2}
+                      style={{
+                        display: "inline-block",
+                      }}
+                      alt="演示文稿"
+                    />
+                  </div>
+                </div>
+                <div className="intentTile-text">
+                  <span>演示文稿</span>
+                </div>
+              </button>
+            </div>
+            <div className="intentTileWrapper">
+              <button
+                className="intentTile-button"
+                aria-label="调查 将在新选项卡中打开"
+              >
+                <div className="intentTile-icon-content">
+                  <div className="intentTile-icon1">
+                    <img
+                      src={dc1}
+                      style={{
+                        width: "39px",
+                        height: "44px",
+                        display: "inline-block",
+                      }}
+                      alt="调查"
+                    />
+                  </div>
+                  <div className="intentTile-icon2">
+                    <img
+                      src={dc2}
+                      style={{
+                        display: "inline-block",
+                      }}
+                      alt="调查"
+                    />
+                  </div>
+                </div>
+                <div className="intentTile-text">
+                  <span>调查</span>
+                </div>
+              </button>
+            </div>
+            <div className="intentTileWrapper">
+              <button
+                className="intentTile-button"
+                aria-label="创建更多 将在新选项卡中打开"
+              >
+                <div className="intentTile-icon-content">
+                  <div className="intentTile-icon1" style={{width:"88px",height:"76px",display:"contents"}}>
+                    <img
+                      src={cjgd}
+                      style={{
+                        width: "32px",
+                        height: "32px",
+                        display: "inline-block",
+                      }}
+                      alt="创建更多"
+                    />
+                  </div>
+                </div>
+                <div className="intentTile-text">
+                  <span>创建更多</span>
+                </div>
+              </button>
+            </div>
+          </div>
         </div>
-    )
+      </PopoverSurface>
+    </Popover>
+  );
+};
+const IconHtml = ()=>{
+    const styles = useGridExampleStyles();
+    return (
+      <PositionedComponent
+        positioning=""
+        targetClassName={styles.belowStart}
+        targetContent=""
+      />
+    );
 }
 
-export default Header
+export default class Header extends Component {
+  render() {
+    return (
+      <div class="zl-365-header">
+        <div class="zl-365-header-function">
+          <IconHtml></IconHtml>
+        </div>
+        <div class="zl-365-header-name">ZlSoftSharePoint</div>
+        <div class="zl-365-header-search">
+          <span class="header-search-svg">
+            <svg
+              t="1730778975282"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="22289"
+              width="16"
+              height="16"
+            >
+              <path
+                d="M314.445 652.986l-190.73 190.73c-15.62 15.62-15.62 40.947 0 56.568 15.622 15.621 40.948 15.621 56.57 0l190.729-190.73C433.062 759.268 511.809 789 597.5 789 797.703 789 960 626.703 960 426.5S797.703 64 597.5 64 235 226.297 235 426.5c0 85.691 29.733 164.438 79.445 226.486zM597.5 709C441.48 709 315 582.52 315 426.5 315 270.48 441.48 144 597.5 144 753.52 144 880 270.48 880 426.5 880 582.52 753.52 709 597.5 709z"
+                fill="currentColor"
+                p-id="22290"
+              ></path>
+            </svg>
+          </span>
+          <input
+            type="text"
+            class="header-search-input"
+            placeholder="在SharePoint中搜索"
+          />
+        </div>
+        <div class="zl-365-header-tools">
+          <div class="header-tools-set">
+            <svg
+              t="1730786970755"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="27709"
+              width="16"
+              height="16"
+            >
+              <path
+                d="M833.75 911.25l136.25-170L900 630l11.25-51.25 110-67.5-48.75-213.75-128.75-15-32.5-41.25L825 111.25 627.5 15l-91.25 91.25-52.5 0-91.25-92.5L195 107.5l15 128.75-32.5 41.25L48.75 291.25 1.25 505l110 70L122.5 625l-68.75 108.75 136.25 172.5 122.5-42.5 47.5 23.75 42.5 122.5L622.5 1012.5l42.5-122.5 47.5-22.5L833.75 911.25zM566.25 933.75l-107.5-1.25-35-101.25-106.25-51.25-100 35L150 730l56.25-90L180 525l-90-57.5L112.5 363.75l106.25-11.25 72.5-91.25-12.5-106.25 96.25-46.25 75 76.25 117.5 1.25 75-75 96.25 47.5-11.25 106.25 73.75 92.5 106.25 12.5 23.75 105-90 56.25-26.25 115 57.5 90-66.25 83.75-100-36.25-106.25 50L566.25 933.75zM662.5 391.25c-67.5-85-191.25-100-275-32.5-83.75 67.5-97.5 190-30 275s191.25 100 275 32.5C717.5 600 730 476.25 662.5 391.25zM415 588.75c-42.5-53.75-33.75-131.25 18.75-172.5 52.5-41.25 130-32.5 172.5 20 42.5 53.75 33.75 131.25-18.75 172.5C533.75 651.25 456.25 642.5 415 588.75z"
+                fill="currentColor"
+                p-id="27710"
+              ></path>
+            </svg>
+          </div>
+          <div class="header-tools-user">
+            <svg
+              t="1730787072114"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="29667"
+              width="16"
+              height="16"
+            >
+              <path
+                d="M508.672 128.64c123.904 0 224.768 100.864 224.768 224.768s-100.864 224.768-224.768 224.768-224.768-100.864-224.768-224.768c0-124.032 100.864-224.768 224.768-224.768m0-79.36c-167.936 0-304.128 136.192-304.128 304.128s136.192 304.128 304.128 304.128S812.8 521.344 812.8 353.408 676.608 49.28 508.672 49.28"
+                fill="currentColor"
+                p-id="29668"
+              ></path>
+              <path
+                d="M92.288 974.72c-2.304 0-4.608-0.256-6.912-0.64-21.504-3.84-35.968-24.32-32.128-45.952 40.064-227.328 264.576-350.08 455.552-350.08 21.888 0 39.68 17.792 39.68 39.68s-17.792 39.68-39.68 39.68c-126.464 0-340.864 77.184-377.344 284.544-3.584 19.2-20.224 32.768-39.168 32.768"
+                fill="currentColor"
+                p-id="29669"
+              ></path>
+              <path
+                d="M931.712 974.72c-18.944 0-35.584-13.568-39.04-32.768-36.608-207.232-250.88-284.544-377.344-284.544-21.888 0-39.68-17.792-39.68-39.68s17.792-39.68 39.68-39.68c190.848 0 415.36 122.752 455.552 350.08 3.84 21.632-10.624 42.112-32.128 45.952-2.432 0.384-4.736 0.64-7.04 0.64"
+                fill="currentColor"
+                p-id="29670"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/img/Engaga.svg

@@ -0,0 +1,30 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<path d="M8 0C12.4183 0 16 3.58172 16 8L16 18H0V8C0 3.58172 3.58172 0 8 0Z" fill="url(#paint0_linear_134_148781)"/>
+<path d="M24 0C19.5817 0 16 3.58172 16 8L16 18H32V8C32 3.58172 28.4183 0 24 0Z" fill="url(#paint1_linear_134_148781)"/>
+<path d="M24 13C24 8.58172 20.4183 5 16 5C11.5817 5 8 8.58172 8 13C8 17.4183 11.5817 21 16 21C20.4183 21 24 17.4183 24 13Z" fill="url(#paint2_linear_134_148781)"/>
+<path d="M31.9983 7.83203H31.9937C31.8009 12.9115 26.9689 17 22 17C17.5817 17 14 20.3579 14 24.5C14 28.6421 17.5817 32 22 32C22.0764 32 22.1526 31.999 22.2286 31.997V32C30.4571 32 32 24.1458 32 20.5V8C32 7.94387 31.9994 7.88788 31.9983 7.83203Z" fill="url(#paint3_linear_134_148781)"/>
+<path d="M0 8V20.5C0 24.1458 1.54286 32 9.77143 32V31.997C9.84736 31.999 9.92355 32 10 32C14.4183 32 18 28.6421 18 24.5C18 20.3579 14.4183 17 10 17C5.03105 17 0.199129 12.9115 0.00629317 7.83203H0.00172835C0.000577993 7.88788 0 7.94387 0 8Z" fill="url(#paint4_linear_134_148781)"/>
+<defs>
+<linearGradient id="paint0_linear_134_148781" x1="3" y1="15.6667" x2="6.52301" y2="-1.02832" gradientUnits="userSpaceOnUse">
+<stop stop-color="#053377"/>
+<stop offset="1" stop-color="#2F91F2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_134_148781" x1="26.6805" y1="2.47731" x2="18.6667" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4AC1FF"/>
+<stop offset="0.926632" stop-color="#155EB5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_134_148781" x1="13.8333" y1="7.16667" x2="21.6667" y2="22.6667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#96DFFF"/>
+<stop offset="0.413439" stop-color="#53ADEE"/>
+<stop offset="1" stop-color="#006BB9"/>
+</linearGradient>
+<linearGradient id="paint3_linear_134_148781" x1="19.7736" y1="19.4194" x2="28.113" y2="33.6775" gradientUnits="userSpaceOnUse">
+<stop offset="0.0799194" stop-color="#4AC1FF"/>
+<stop offset="1" stop-color="#155EB5"/>
+</linearGradient>
+<linearGradient id="paint4_linear_134_148781" x1="3.41586" y1="13.8763" x2="11.1995" y2="33.1337" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2F91F2"/>
+<stop offset="1" stop-color="#053377"/>
+</linearGradient>
+</defs>
+</svg>

src/img/OneNote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;}.cls-2{fill:#ca64ea;}.cls-3{opacity:0.75;}.cls-4{fill:#7719aa;}.cls-5{fill:#fff;}.cls-6{fill:#ae4bd5;}.cls-7{fill:#9332bf;}</style></defs><title>OneNote_24x</title><g id="OneNote"><g id="_24" data-name="24"><rect class="cls-1" width="24" height="24"/><path class="cls-2" d="M23,1H7A1,1,0,0,0,6,2V22a1,1,0,0,0,1,1H20.23A3.77,3.77,0,0,0,24,19.23V2A1,1,0,0,0,23,1Z"/><path class="cls-3" d="M13.83,6H6V20h7.6A1.5,1.5,0,0,0,15,18.65V7.17A1.18,1.18,0,0,0,13.83,6Z"/><rect id="Back_Plate" data-name="Back Plate" class="cls-4" y="5" width="14" height="14" rx="1.17"/><path class="cls-5" d="M3.8,8H5.5l2.94,5.16a5.34,5.34,0,0,1,.33.77h0a6.57,6.57,0,0,1-.05-1.06V8H10.2v8H8.61L5.55,10.68a5.11,5.11,0,0,1-.31-.55h0a10.22,10.22,0,0,1,0,1.16V16H3.8Z"/><rect class="cls-6" x="18" y="5" width="6" height="6"/><rect class="cls-7" x="18" y="11" width="6" height="6"/><path class="cls-4" d="M18,17v6h5a1,1,0,0,0,1-1V17Z"/></g></g></svg>

src/img/PA.svg

@@ -0,0 +1,45 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="-1" y="2" width="25" height="20">
+<path d="M15.3029 2.5C15.5874 2.5 15.8584 2.62117 16.0481 2.8332L23.6534 11.3332C23.9931 11.7129 23.9931 12.2871 23.6534 12.6668L16.0481 21.1668C15.8584 21.3788 15.5874 21.5 15.3029 21.5H0.986581C0.12219 21.5 -0.335034 20.4774 0.241337 19.8332L7.25 12L0.241337 4.1668C-0.335034 3.52263 0.12219 2.5 0.986581 2.5H15.3029Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M15.75 2.5L7.25 12L-1.25 2.5H15.75Z" fill="url(#paint0_linear)"/>
+<g filter="url(#filter0_f)">
+<path d="M15.75 2.60001L-1.25 21.6H15.75L24.25 12.1L15.75 2.60001Z" fill="black" fill-opacity="0.24"/>
+</g>
+<g filter="url(#filter1_f)">
+<path d="M15.75 3L-1.25 22H15.75L24.25 12.5L15.75 3Z" fill="black" fill-opacity="0.32"/>
+</g>
+<path d="M-1.25 21.5L15.75 2.5L24.25 12L15.75 21.5H-1.25Z" fill="url(#paint1_linear)"/>
+<path d="M-1.25 21.5L15.75 2.5L20 7.25L7.25 21.5H-1.25Z" fill="url(#paint2_linear)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f" x="-2.05" y="1.80001" width="27.1" height="20.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.4" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter1_f" x="-9.25" y="-5" width="41.5" height="35" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur"/>
+</filter>
+<linearGradient id="paint0_linear" x1="10.75" y1="13.75" x2="7.25" y2="2.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0D36A5"/>
+<stop offset="1" stop-color="#1152D4"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="11.5" y1="2.5" x2="11.5" y2="21.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#84CAFF"/>
+<stop offset="1" stop-color="#61B1FB"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="9.375" y1="2.5" x2="9.375" y2="21.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3B90F5"/>
+<stop offset="1" stop-color="#2A78EE"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/img/SPS.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;}.cls-2{fill:#036c70;}.cls-3{fill:#1a9ba1;}.cls-4{fill:#37c6d0;}.cls-5{opacity:0.5;}.cls-6{fill:#038387;}.cls-7{fill:#fff;}</style></defs><title>Sharepoint_24x</title><g id="Sharepoint"><g id="_24" data-name="24"><rect class="cls-1" width="24" height="24"/><circle class="cls-2" cx="11" cy="7" r="7"/><circle class="cls-3" cx="18" cy="13" r="6"/><circle class="cls-4" cx="12" cy="19" r="5"/><path class="cls-5" d="M13.83,6H4.07A6.63,6.63,0,0,0,4,7a7,7,0,0,0,7,7,7.59,7.59,0,0,0,1.07-.08s0,.05,0,.08H12a5,5,0,0,0-1.55.25l.42,0v0l-.64.06A5,5,0,0,0,7,19a4.71,4.71,0,0,0,.1,1h6.5A1.5,1.5,0,0,0,15,18.65V7.17A1.18,1.18,0,0,0,13.83,6Z"/><rect id="Back_Plate" data-name="Back Plate" class="cls-6" y="5" width="14" height="14" rx="1.17"/><path class="cls-7" d="M5,11.85a2.37,2.37,0,0,1-.71-.74,2.08,2.08,0,0,1-.24-1,2,2,0,0,1,.45-1.32A2.69,2.69,0,0,1,5.72,8a5.2,5.2,0,0,1,1.66-.26A6.11,6.11,0,0,1,9.56,8V9.57a3.48,3.48,0,0,0-1-.41A5,5,0,0,0,7.42,9a2.43,2.43,0,0,0-1.18.26.77.77,0,0,0-.48.71.72.72,0,0,0,.2.5,1.88,1.88,0,0,0,.54.39c.23.11.56.26,1,.44l.14.06A7.87,7.87,0,0,1,8.92,12a2.24,2.24,0,0,1,.75.75,2.19,2.19,0,0,1,.27,1.14,2.18,2.18,0,0,1-.42,1.38A2.38,2.38,0,0,1,8.37,16a5.06,5.06,0,0,1-1.62.24,8.7,8.7,0,0,1-1.48-.12,5.17,5.17,0,0,1-1.2-.35V14.18a3.64,3.64,0,0,0,1.22.58A4.79,4.79,0,0,0,6.62,15a2.31,2.31,0,0,0,1.21-.26A.81.81,0,0,0,8.24,14,.78.78,0,0,0,8,13.44,2.31,2.31,0,0,0,7.38,13c-.27-.13-.66-.31-1.19-.53A6.37,6.37,0,0,1,5,11.85Z"/></g></g></svg>

src/img/Teams.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{opacity:0.1;}.cls-2{fill:none;}.cls-3{fill:#5059c9;}.cls-4{fill:#7b83eb;}.cls-5{opacity:0.5;}.cls-6{fill:#4b53bc;}.cls-7{fill:#fff;}</style></defs><title>Teams_24x</title><g id="Teams"><path class="cls-1" d="M8,10.12V17.5A5.4,5.4,0,0,0,8.61,20h5A1.5,1.5,0,0,0,15,18.65V9l-.28,0H9.12A1.12,1.12,0,0,0,8,10.12Z"/><path class="cls-1" d="M13.83,6h-3A3.29,3.29,0,0,0,14,8.31a3.33,3.33,0,0,0,1-.17v-1A1.18,1.18,0,0,0,13.83,6Z"/><rect class="cls-2" width="24" height="24"/><path class="cls-3" d="M22.87,9h-5l-1.39,1.13v5.59a3.76,3.76,0,0,0,7.51,0V10.13A1.12,1.12,0,0,0,22.87,9Z"/><circle id="Head" class="cls-3" cx="20.5" cy="5.5" r="2.5"/><path class="cls-4" d="M9.12,9h8.76A1.12,1.12,0,0,1,19,10.12V17.5A5.5,5.5,0,0,1,13.5,23h0A5.5,5.5,0,0,1,8,17.5V10.12A1.12,1.12,0,0,1,9.12,9Z"/><circle id="Head-2" data-name="Head" class="cls-4" cx="14" cy="5" r="3.31"/><path class="cls-5" d="M8,10.12V17.5A5.4,5.4,0,0,0,8.61,20h5A1.5,1.5,0,0,0,15,18.65V9l-.28,0H9.12A1.12,1.12,0,0,0,8,10.12Z"/><path class="cls-5" d="M13.83,6h-3A3.29,3.29,0,0,0,14,8.31a3.33,3.33,0,0,0,1-.17v-1A1.18,1.18,0,0,0,13.83,6Z"/><rect id="Back_Plate" data-name="Back Plate" class="cls-6" y="5" width="14" height="14" rx="1.17"/><path class="cls-7" d="M10.18,9.58H7.79V16H6.22V9.58H3.82V8h6.36Z"/></g></svg>

src/img/Vi.svg

@@ -0,0 +1,7 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<g id="Right Icon 4">
+<path id="Vector" d="M9.17157 8.82843C10.7337 10.3905 13.2663 10.3905 14.8284 8.82843C16.3905 7.26633 16.3905 4.73367 14.8284 3.17157C13.2663 1.60948 10.7337 1.60948 9.17157 3.17157C7.60948 4.73367 7.60948 7.26633 9.17157 8.82843Z" fill="#2DBACE"/>
+<path id="Union" d="M17 19.3149L21.8214 13.2077C22.0616 12.901 22.0643 12.4655 21.8005 12.1788C18.9796 9.11331 14.7416 9.28276 12.0768 12.6861L7 19.3149C9.80389 22.8959 14.1961 22.8959 17 19.3149Z" fill="#4846B4"/>
+<path id="Union_2" d="M7 19.3149L2.17859 13.2076C1.93845 12.9009 1.9357 12.4654 2.19946 12.1788C5.02034 9.11334 9.25841 9.28277 11.9232 12.686L17 19.3149C14.1961 22.8958 9.80389 22.8957 7 19.3149Z" fill="#426EE8"/>
+</g>
+</svg>

src/img/excel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#21a366;}.cls-2{fill:none;}.cls-3{fill:#107c41;}.cls-4{fill:#33c481;}.cls-5{fill:#185c37;}.cls-6{opacity:0.5;}.cls-7{fill:#fff;}</style></defs><title>Excel_24x</title><g id="Excel"><g id="_24" data-name="24"><path class="cls-1" d="M16,1H7A1,1,0,0,0,6,2V7l10,5,4,1.5L24,12V7Z"/><rect class="cls-2" width="24" height="24"/><rect class="cls-3" x="6" y="7.02" width="10" height="4.98"/><path class="cls-4" d="M24,2V7H16V1h7A1,1,0,0,1,24,2Z"/><path class="cls-5" d="M16,12H6V22a1,1,0,0,0,1,1H23a1,1,0,0,0,1-1V17Z"/><path class="cls-6" d="M13.83,6H6V20h7.6A1.5,1.5,0,0,0,15,18.65V7.17A1.18,1.18,0,0,0,13.83,6Z"/><rect id="Back_Plate" data-name="Back Plate" class="cls-3" y="5" width="14" height="14" rx="1.17"/><path class="cls-7" d="M3.43,16,6,12,3.64,8H5.55l1.3,2.55a4.63,4.63,0,0,1,.24.54h0a5.77,5.77,0,0,1,.27-.56L8.76,8h1.75L8.08,12l2.49,4H8.71l-1.5-2.8A2.14,2.14,0,0,1,7,12.83H7a1.54,1.54,0,0,1-.17.36L5.3,16Z"/><rect class="cls-3" x="16" y="12" width="8" height="5"/></g></g></svg>

src/img/m365.svg

@@ -0,0 +1,34 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.2358 5.47998L29.99 5.62218C29.1768 6.09272 28.4322 6.6505 27.765 7.2798L30.2338 5.49072L32 8V22L24 29.0022V35.5818C24 39.864 26.2818 43.8216 29.9878 45.967L37.5032 50.3178L23.9076 59.007H17.2399L11.9879 55.9666C8.2819 53.8212 6 49.8634 6 45.5812V26.4202C6 22.1372 8.28284 18.1788 11.99 16.0337L29.99 5.61834C30.0716 5.57118 30.1534 5.52506 30.2358 5.47998Z" fill="url(#paint0_radial_4816_393575)"/>
+<path d="M30.2358 5.47998L29.99 5.62218C29.1768 6.09272 28.4322 6.6505 27.765 7.2798L30.2338 5.49072L32 8V22L24 29.0022V35.5818C24 39.864 26.2818 43.8216 29.9878 45.967L37.5032 50.3178L23.9076 59.007H17.2399L11.9879 55.9666C8.2819 53.8212 6 49.8634 6 45.5812V26.4202C6 22.1372 8.28284 18.1788 11.99 16.0337L29.99 5.61834C30.0716 5.57118 30.1534 5.52506 30.2358 5.47998Z" fill="url(#paint1_linear_4816_393575)"/>
+<path d="M47.9998 27.8335V35.5815C47.9998 39.8637 45.7178 43.8215 42.0118 45.9669L24.0118 56.3871C21.1606 58.0379 17.7992 58.4229 14.71 57.5425L29.9878 66.3869C33.7068 68.5397 38.293 68.5397 42.012 66.3869L60.012 55.9665C63.718 53.8211 65.9998 49.8633 65.9998 45.5813V41.1295L61.9998 36.0003L47.9998 27.8335Z" fill="url(#paint2_radial_4816_393575)"/>
+<path d="M47.9998 27.8335V35.5815C47.9998 39.8637 45.7178 43.8215 42.0118 45.9669L24.0118 56.3871C21.1606 58.0379 17.7992 58.4229 14.71 57.5425L29.9878 66.3869C33.7068 68.5397 38.293 68.5397 42.012 66.3869L60.012 55.9665C63.718 53.8211 65.9998 49.8633 65.9998 45.5813V41.1295L61.9998 36.0003L47.9998 27.8335Z" fill="url(#paint3_linear_4816_393575)"/>
+<path d="M60.0098 16.0337L42.0098 5.61834C38.292 3.46706 33.7078 3.46706 29.99 5.61834L29.6958 5.78858C26.1622 7.96964 23.9998 11.8307 23.9998 15.9993V29.0844L29.99 25.6184C33.7078 23.467 38.292 23.467 42.0098 25.6184L60.0098 36.0336C63.5958 38.1086 65.849 41.88 65.9926 46.0008C65.9974 45.8614 65.9998 45.7214 65.9998 45.5812V26.4202C65.9998 22.1372 63.717 18.1788 60.0098 16.0337Z" fill="url(#paint4_radial_4816_393575)"/>
+<path d="M60.0098 16.0337L42.0098 5.61834C38.292 3.46706 33.7078 3.46706 29.99 5.61834L29.6958 5.78858C26.1622 7.96964 23.9998 11.8307 23.9998 15.9993V29.0844L29.99 25.6184C33.7078 23.467 38.292 23.467 42.0098 25.6184L60.0098 36.0336C63.5958 38.1086 65.849 41.88 65.9926 46.0008C65.9974 45.8614 65.9998 45.7214 65.9998 45.5812V26.4202C65.9998 22.1372 63.717 18.1788 60.0098 16.0337Z" fill="url(#paint5_linear_4816_393575)"/>
+<defs>
+<radialGradient id="paint0_radial_4816_393575" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(25.3432 20.7828) rotate(110.825) scale(50.4486 89.9418)">
+<stop offset="0.06441" stop-color="#AE7FE2"/>
+<stop offset="1" stop-color="#0078D4"/>
+</radialGradient>
+<linearGradient id="paint1_linear_4816_393575" x1="25.8046" y1="56.2122" x2="19.3745" y2="43.8216" gradientUnits="userSpaceOnUse">
+<stop stop-color="#114A8B"/>
+<stop offset="1" stop-color="#0078D4" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint2_radial_4816_393575" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.2775 55.0665) rotate(-10.5514) scale(47.526 32.4896)">
+<stop offset="0.117797" stop-color="#D59DFF"/>
+<stop offset="1" stop-color="#5E438F"/>
+</radialGradient>
+<linearGradient id="paint3_linear_4816_393575" x1="60.7896" y1="37.3203" x2="53.1014" y2="47.9175" gradientUnits="userSpaceOnUse">
+<stop stop-color="#493474"/>
+<stop offset="1" stop-color="#8C66BA" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_4816_393575" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64.1102 40.0344) rotate(-161.155) scale(46.5358 75.848)">
+<stop offset="0.097966" stop-color="#50E6FF"/>
+<stop offset="1" stop-color="#436DCD"/>
+</radialGradient>
+<linearGradient id="paint5_linear_4816_393575" x1="25.0286" y1="5.53226" x2="36" y2="5.53226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2D3F80"/>
+<stop offset="1" stop-color="#436DCD" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/img/oneDrice.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;}.cls-2{fill:#0364b8;}.cls-3{fill:#0078d4;}.cls-4{fill:#1490df;}.cls-5{fill:#28a8ea;}</style></defs><title>OneDrive_24x</title><g id="OneDrive"><rect class="cls-1" width="24" height="24"/><path class="cls-2" d="M14.5,15l4.95-4.74A7.5,7.5,0,0,0,5.92,8C6,8,14.5,15,14.5,15Z"/><path class="cls-3" d="M9.15,8.89h0A6,6,0,0,0,6,8H5.92a6,6,0,0,0-4.84,9.43L8.5,16.5l5.69-4.59Z"/><path class="cls-4" d="M19.45,10.26h-.32a4.84,4.84,0,0,0-1.94.4h0l-3,1.26L17.5,16l5.92,1.44a4.88,4.88,0,0,0-4-7.18Z"/><path class="cls-5" d="M1.08,17.43A6,6,0,0,0,6,20H19.13a4.89,4.89,0,0,0,4.29-2.56l-9.23-5.53Z"/></g></svg>

src/img/ppt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;}.cls-2{fill:#ed6c47;}.cls-3{fill:#ff8f6b;}.cls-4{fill:#d35230;}.cls-5{opacity:0.5;}.cls-6{opacity:0.1;}.cls-7{fill:#c43e1c;}.cls-8{fill:#fff;}</style></defs><title>Powerpoint_24x</title><g id="Powerpoint"><rect class="cls-1" width="24" height="24"/><path class="cls-2" d="M13,1A11,11,0,0,0,2,12l14.84,3.84Z"/><path class="cls-3" d="M13,1A11,11,0,0,1,24,12L18.5,15,13,12Z"/><path class="cls-4" d="M2,12a11,11,0,0,0,22,0Z"/><path class="cls-5" d="M15,18.65V7.17A1.18,1.18,0,0,0,13.83,6H3.8A10.91,10.91,0,0,0,5.49,20H13.6A1.5,1.5,0,0,0,15,18.65Z"/><path class="cls-6" d="M15,18.65V7.17A1.18,1.18,0,0,0,13.83,6H3.8A10.91,10.91,0,0,0,5.49,20H13.6A1.5,1.5,0,0,0,15,18.65Z"/><rect id="Back_Plate" data-name="Back Plate" class="cls-7" y="5" width="14" height="14" rx="1.17"/><path class="cls-8" d="M7.4,8a3.32,3.32,0,0,1,2.2.64,2.32,2.32,0,0,1,.76,1.86A3.42,3.42,0,0,1,10,12.11a2.54,2.54,0,0,1-1.07,1,3.7,3.7,0,0,1-1.61.34H5.78V16H4.22V8ZM5.78,12H7.12a1.78,1.78,0,0,0,1.19-.35,1.46,1.46,0,0,0,.4-1.1c0-.88-.51-1.32-1.54-1.32H5.78Z"/></g></svg>

src/img/word.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;}.cls-2{fill:#41a5ee;}.cls-3{fill:#2b7cd3;}.cls-4{fill:#185abd;}.cls-5{fill:#103f91;}.cls-6{opacity:0.5;}.cls-7{fill:#fff;}</style></defs><title>Word_24x</title><g id="Word"><g id="_24" data-name="24"><rect class="cls-1" width="24" height="24"/><path class="cls-2" d="M24,7V2a1,1,0,0,0-1-1H7A1,1,0,0,0,6,2V7l9,2Z"/><polygon class="cls-3" points="24 7 6 7 6 12 15.5 14 24 12 24 7"/><polygon class="cls-4" points="24 12 6 12 6 17 15 18.5 24 17 24 12"/><path class="cls-5" d="M6,17H24a0,0,0,0,1,0,0v5a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V17a0,0,0,0,1,0,0Z"/><path class="cls-6" d="M13.83,6H6V20h7.6A1.5,1.5,0,0,0,15,18.65V7.17A1.18,1.18,0,0,0,13.83,6Z"/><rect id="Back_Plate" data-name="Back Plate" class="cls-4" y="5" width="14" height="14" rx="1.17"/><path id="Letter" class="cls-7" d="M10.16,16H8.72L7,10.48,5.28,16H3.84L2.24,8H3.68L4.8,13.6,6.48,8.16h1.2l1.6,5.44L10.4,8h1.36Z"/></g></g></svg>

src/img/创建更多.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
+  <path d="M13 9C13 8.44771 13.4477 8 14 8C14.5523 8 15 8.44772 15 9V13H19C19.5523 13 20 13.4477 20 14C20 14.5523 19.5523 15 19 15H15V19C15 19.5523 14.5523 20 14 20C13.4477 20 13 19.5523 13 19V15H9C8.44771 15 8 14.5523 8 14C8 13.4477 8.44772 13 9 13H13V9ZM28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14ZM26 14C26 7.37258 20.6274 2 14 2C7.37258 2 2 7.37258 2 14C2 20.6274 7.37258 26 14 26C20.6274 26 26 20.6274 26 14Z" fill="#616161"/>
+</svg>

src/img/工作普1.svg

@@ -0,0 +1,60 @@
+<svg width="52" height="41" viewBox="0 0 52 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_1958_585417)">
+<rect x="2" y="2" width="47.6757" height="36" rx="0.972973" fill="white"/>
+</g>
+<g opacity="0.2">
+<rect x="5.89192" y="5.8916" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="5.89191" y="11.7295" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="5.89191" y="17.5674" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="5.89191" y="23.4053" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="5.89191" y="29.2429" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="11.7297" y="5.8916" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="11.7297" y="11.7295" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="11.7297" y="17.5674" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="11.7297" y="23.4053" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="11.7297" y="29.2429" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="17.5675" y="5.8916" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="17.5675" y="11.7295" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="17.5675" y="17.5674" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="17.5675" y="23.4053" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="17.5675" y="29.2429" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="23.4054" y="5.8916" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="23.4054" y="11.7295" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="23.4054" y="17.5674" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="23.4054" y="23.4053" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="23.4054" y="29.2429" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="29.2433" y="5.8916" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="29.2433" y="11.7295" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="29.2433" y="17.5674" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="29.2433" y="23.4053" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="29.2433" y="29.2429" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="35.0811" y="5.8916" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="35.0811" y="11.7295" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="35.0811" y="17.5674" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="35.0811" y="23.4053" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="35.0811" y="29.2429" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="40.9189" y="5.8916" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="40.9189" y="11.7295" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="40.9189" y="17.5674" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="40.9189" y="23.4053" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+<rect x="40.9189" y="29.2429" width="4.86486" height="4.86486" rx="0.486486" fill="#10893C"/>
+</g>
+<defs>
+<filter id="filter0_dd_1958_585417" x="0.230958" y="0.230958" width="51.2138" height="40.4226" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.884521"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1958_585417"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.884521"/>
+<feGaussianBlur stdDeviation="0.884521"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1958_585417" result="effect2_dropShadow_1958_585417"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1958_585417" result="shape"/>
+</filter>
+</defs>
+</svg>

src/img/工作普2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M9.5 29h19c.275 0 .5-.225.5-.5V9h-4.5c-.827 0-1.5-.673-1.5-1.5V3H9.5c-.275 0-.5.225-.5.5v25c0 .275.225.5.5.5z"/><path fill="#FFF" d="M28.293 8L24 3.707V7.5c0 .275.225.5.5.5h3.793z"/><path opacity=".64" fill="#605E5C" d="M29.56 7.854l-5.414-5.415A1.51 1.51 0 0023.086 2H9.5C8.673 2 8 2.673 8 3.5v25c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5V8.914c0-.4-.156-.777-.44-1.06zM24 3.707L28.293 8H24.5a.501.501 0 01-.5-.5V3.707zM28.5 29h-19a.501.501 0 01-.5-.5v-25c0-.275.225-.5.5-.5H23v4.5c0 .827.673 1.5 1.5 1.5H29v19.5c0 .275-.225.5-.5.5z"/><path fill="#134A2C" d="M25 23h-2a1 1 0 110-2h2a1 1 0 110 2z"/><path fill="#185C37" d="M20 23h-2a1 1 0 110-2h2a1 1 0 110 2z"/><path fill="#21A366" d="M25 19h-2a1 1 0 110-2h2a1 1 0 110 2z"/><path fill="#107C41" d="M20 19h-2a1 1 0 110-2h2a1 1 0 110 2z"/><path fill="#33C481" d="M25 15h-2a1 1 0 110-2h2a1 1 0 110 2z"/><path fill="#21A366" d="M20 15h-2a1 1 0 110-2h2a1 1 0 110 2z"/><path fill="#107C41" d="M3.5 25h11a1.5 1.5 0 001.5-1.5v-11a1.5 1.5 0 00-1.5-1.5h-11A1.5 1.5 0 002 12.5v11A1.5 1.5 0 003.5 25z"/><path fill="#F9F7F7" d="M6 22l2.174-4.01L6.182 14h1.602l1.087 2.549c.1.242.169.423.206.542h.015c.071-.194.146-.382.224-.564L10.478 14h1.47l-2.042 3.967L12 22h-1.565L9.18 19.2a2.568 2.568 0 01-.15-.375h-.018a1.93 1.93 0 01-.145.363L7.574 22H6z"/></svg>

src/img/文档1.svg

@@ -0,0 +1,24 @@
+<svg width="36" height="49" viewBox="0 0 36 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_1958_585406)">
+<rect x="2" y="2" width="32" height="44" rx="1" fill="white"/>
+</g>
+<rect opacity="0.2" x="6.00002" y="6" width="24" height="36" rx="0.5" fill="#185ABD"/>
+<defs>
+<filter id="filter0_dd_1958_585406" x="0.181818" y="0.181818" width="35.6364" height="48.5455" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.909091"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1958_585406"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.909091"/>
+<feGaussianBlur stdDeviation="0.909091"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1958_585406" result="effect2_dropShadow_1958_585406"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1958_585406" result="shape"/>
+</filter>
+</defs>
+</svg>

src/img/文档2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M9.5 29h19c.275 0 .5-.225.5-.5V9h-4.5c-.827 0-1.5-.673-1.5-1.5V3H9.5c-.275 0-.5.225-.5.5v25c0 .275.225.5.5.5z"/><path fill="#FFF" d="M28.293 8L24 3.707V7.5c0 .275.225.5.5.5h3.793z"/><path opacity=".64" fill="#605E5C" d="M29.56 7.854l-5.414-5.415A1.51 1.51 0 0023.086 2H9.5C8.673 2 8 2.673 8 3.5v25c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5V8.914c0-.4-.156-.777-.44-1.06zM24 3.707L28.293 8H24.5a.501.501 0 01-.5-.5V3.707zM28.5 29h-19a.501.501 0 01-.5-.5v-25c0-.275.225-.5.5-.5H23v4.5c0 .827.673 1.5 1.5 1.5H29v19.5c0 .275-.225.5-.5.5z"/><path fill="#103F91" d="M25.5 22H17v1h8.5a.5.5 0 000-1z"/><path fill="#185ABD" d="M25.5 19H17v1h8.5a.5.5 0 000-1z"/><path fill="#2B7CD3" d="M25.5 16H17v1h8.5a.5.5 0 000-1z"/><path fill="#41A5EE" d="M25.5 13H17v1h8.5a.5.5 0 000-1z"/><path fill="#185ABD" d="M3.5 25h11a1.5 1.5 0 001.5-1.5v-11a1.5 1.5 0 00-1.5-1.5h-11A1.5 1.5 0 002 12.5v11A1.5 1.5 0 003.5 25z"/><path fill="#F9F7F7" d="M7.215 20.73h.022C7.246 20.615 8.37 15 8.37 15h1.306s1.14 5.353 1.175 5.72h.017c.015-.252.944-5.72.944-5.72H13l-1.462 7h-1.389s-1.153-5.53-1.162-5.628h-.018C8.959 16.485 7.886 22 7.886 22h-1.41L5 15h1.21s1 5.607 1.005 5.73z"/></svg>

src/img/更多.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <path d="M24.8079 2.95386C23.5387 1.68465 21.4809 1.68465 20.2117 2.95386L16.999 6.16657C16.9547 4.41019 15.517 2.99997 13.75 2.99997H6.25C4.45507 2.99997 3 4.45504 3 6.24997V25.75C3 27.5449 4.45507 29 6.25 29L25.75 29C27.5449 29 29 27.5449 29 25.75V18.25C29 16.4858 27.5944 15.0499 25.842 15.0012L29.0505 11.7927C30.3197 10.5235 30.3197 8.4657 29.0505 7.1965L24.8079 2.95386ZM19.1763 15H17V12.8237L19.1763 15ZM21.6259 4.36807C22.114 3.87991 22.9055 3.87991 23.3936 4.36807L27.6363 8.61071C28.1244 9.09887 28.1244 9.89032 27.6363 10.3785L23.3936 14.6211C22.9055 15.1093 22.114 15.1093 21.6259 14.6211L17.3832 10.3785C16.8951 9.89032 16.8951 9.09887 17.3832 8.61071L21.6259 4.36807ZM15 6.24997V15H5V6.24997C5 5.55961 5.55964 4.99997 6.25 4.99997H13.75C14.4404 4.99997 15 5.55961 15 6.24997ZM5 25.75V17H15V27H6.25C5.55964 27 5 26.4403 5 25.75ZM17 17H25.75C26.4404 17 27 17.5596 27 18.25V25.75C27 26.4403 26.4404 27 25.75 27H17V17Z" fill="#616161"/>
+</svg>

src/img/演示文档1.svg

@@ -0,0 +1,28 @@
+<svg width="53" height="35" viewBox="0 0 53 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_1958_585470)">
+<rect x="2" y="2" width="49" height="30" rx="1" fill="white"/>
+</g>
+<rect opacity="0.2" x="5.99991" y="5.99976" width="8" height="5.125" rx="0.5" fill="#C43E1C"/>
+<rect opacity="0.2" x="5.99988" y="11.6248" width="8" height="5.125" rx="0.5" fill="#C43E1C"/>
+<rect opacity="0.2" x="5.99988" y="17.2498" width="8" height="5.125" rx="0.5" fill="#C43E1C"/>
+<rect opacity="0.2" x="5.99988" y="22.8745" width="8" height="5.125" rx="0.5" fill="#C43E1C"/>
+<rect opacity="0.2" x="14.9999" y="5.99951" width="32" height="22" rx="0.5" fill="#C43E1C"/>
+<defs>
+<filter id="filter0_dd_1958_585470" x="0.181818" y="0.181818" width="52.6364" height="34.5455" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.909091"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1958_585470"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.909091"/>
+<feGaussianBlur stdDeviation="0.909091"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1958_585470" result="effect2_dropShadow_1958_585470"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1958_585470" result="shape"/>
+</filter>
+</defs>
+</svg>

src/img/演示文档2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M9.5 29h19c.275 0 .5-.225.5-.5V9h-4.5c-.827 0-1.5-.673-1.5-1.5V3H9.5c-.275 0-.5.225-.5.5v25c0 .275.225.5.5.5z"/><path fill="#FFF" d="M28.293 8L24 3.707V7.5c0 .275.225.5.5.5h3.793z"/><path opacity=".64" fill="#605E5C" d="M29.56 7.854l-5.414-5.415A1.51 1.51 0 0023.086 2H9.5C8.673 2 8 2.673 8 3.5v25c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5V8.914c0-.4-.156-.777-.44-1.06zM24 3.707L28.293 8H24.5a.501.501 0 01-.5-.5V3.707zM28.5 29h-19a.501.501 0 01-.5-.5v-25c0-.275.225-.5.5-.5H23v4.5c0 .827.673 1.5 1.5 1.5H29v19.5c0 .275-.225.5-.5.5z"/><path fill="#ED6C47" d="M21 18l-1-1h-2l-1 1v2.973C17.911 22.197 19.357 23 21 23a5 5 0 005-5h-5z"/><path fill="#FF8F6B" d="M17 15.027V18h4v-5c-1.643 0-3.089.803-4 2.027z"/><path fill="#FFC7B5" d="M22 12a5 5 0 015 5h-5v-5z"/><path fill="#C43E1C" d="M3.5 25h11a1.5 1.5 0 001.5-1.5v-11a1.5 1.5 0 00-1.5-1.5h-11A1.5 1.5 0 002 12.5v11A1.5 1.5 0 003.5 25z"/><path fill="#FFF" d="M9.524 14.02c.921 0 1.625.214 2.115.64.488.427.733 1.045.733 1.854 0 .52-.116.986-.358 1.39-.241.405-.59.714-1.036.938-.446.225-.957.342-1.544.342H7.967L7.962 22h-1.18v-7.98h2.742zM7.962 18h1.615c.503 0 .885-.118 1.143-.353.258-.236.441-.655.441-1.108 0-.879-.548-1.539-1.537-1.539H7.962v3z"/></svg>

src/img/调查1.svg

@@ -0,0 +1,29 @@
+<svg width="42" height="47" viewBox="0 0 42 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_1958_585488)">
+<rect x="2.00049" y="2" width="38" height="42" rx="1" fill="white"/>
+</g>
+<rect opacity="0.2" x="6.00003" y="7.00024" width="30" height="9.5" rx="0.5" fill="#008272"/>
+<rect opacity="0.2" x="6.00003" y="17.5002" width="5" height="5" rx="0.5" fill="#008272"/>
+<rect opacity="0.2" x="12" y="17.5002" width="24" height="5" rx="0.5" fill="#008272"/>
+<rect opacity="0.2" x="6.00003" y="24.5002" width="30" height="9.5" rx="0.5" fill="#008272"/>
+<rect opacity="0.2" x="6.00003" y="35.0002" width="5" height="5" rx="0.5" fill="#008272"/>
+<rect opacity="0.2" x="12" y="35.0002" width="24" height="5" rx="0.5" fill="#008272"/>
+<defs>
+<filter id="filter0_dd_1958_585488" x="0.182306" y="0.181818" width="41.6364" height="46.5455" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.909091"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1958_585488"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.909091"/>
+<feGaussianBlur stdDeviation="0.909091"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_1958_585488" result="effect2_dropShadow_1958_585488"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1958_585488" result="shape"/>
+</filter>
+</defs>
+</svg>

src/img/调查2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#FFF" d="M9.5 29h19c.275 0 .5-.225.5-.5V9h-4.5c-.827 0-1.5-.673-1.5-1.5V3H9.5c-.275 0-.5.225-.5.5v25c0 .275.225.5.5.5z"/><path fill="#FFF" d="M28.293 8L24 3.707V7.5c0 .275.225.5.5.5h3.793z"/><path opacity=".64" fill="#605E5C" d="M29.56 7.854l-5.414-5.415A1.51 1.51 0 0023.086 2H9.5C8.673 2 8 2.673 8 3.5v25c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5V8.914c0-.4-.156-.777-.44-1.06zM24 3.707L28.293 8H24.5a.501.501 0 01-.5-.5V3.707zM28.5 29h-19a.501.501 0 01-.5-.5v-25c0-.275.225-.5.5-.5H23v4.5c0 .827.673 1.5 1.5 1.5H29v19.5c0 .275-.225.5-.5.5z"/><path fill="#038387" d="M3.5 25h11a1.5 1.5 0 001.5-1.5v-11a1.5 1.5 0 00-1.5-1.5h-11A1.5 1.5 0 002 12.5v11A1.5 1.5 0 003.5 25z"/><path fill="#FFF" d="M11.91 15.3H7.833v1.93h3.822v1.293H7.833V22H6.187v-8h5.723v1.3z"/><path fill="#038387" d="M17 19v1h7.5a.5.5 0 010 1H17v1h7.5a1.5 1.5 0 000-3H17z"/><path fill="#1A9BA1" d="M17 14v1h7.5a.5.5 0 010 1H17v1h7.5a1.5 1.5 0 000-3H17z"/></svg>

src/pages/home/index.tsx

@@ -1,10 +1,24 @@
-import React, { Component } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
+import {FocusMode as Card} from '../../component/card';
 
 function MyNavlink() {
     const { t } = useTranslation();
     return (
-        <div>{t('menu.home')}</div>
+        <div className="layout-main">
+            <div className="layout-row">
+                <div className="layout-col-12 card-height">
+                    <Card></Card>
+                </div>
+            </div>
+            <div className="layout-row">
+                <div className="layout-col-4 tree-height"></div>
+                <div className="layout-col-8 list-height"></div>
+            </div>
+            <div className="layout-row">
+                <div className="layout-col-12 form-height"></div>
+            </div>
+        </div>
     );
 }