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

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
+package-lock.json
+pnpm-lock.yaml

src/App.css

@@ -1,38 +1,7 @@
-.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;
+.zl-365-container {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
+  flex-wrap: wrap;
 }
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+* {
+  box-sizing: border-box;
 }

src/App.js

@@ -1,13 +0,0 @@
-import React from "react";
-import "./App.css";
-import List from "./component/List";
-
-const App = () => {
-  return (
-    <>
-      <List></List>
-    </>
-  );
-};
-
-export default App;

src/App.jsx

@@ -0,0 +1,20 @@
+import React,{Component} from "react";
+import "./App.css";
+// import List from "./component/List";
+import Header from './component/hedaer';
+import Bar from './component/bar';
+import Content from './component/content';
+
+export class App extends Component{
+  render(){
+    return (
+        <div class="zl-365-container">
+          <Header></Header>
+          <Bar></Bar>
+          <Content></Content>
+        </div>
+    );
+  }
+}
+
+export default App;

src/component/bar/index.css

@@ -0,0 +1,34 @@
+
+.zl-365-bar {
+    display: inline-block;
+    flex: 0 0 47px;
+    max-width: 47px;
+    height: calc(100vh - 48px);
+    background: #F0F0F0;
+    border-right: #ebebeb;
+    text-align: center;
+}
+
+.bar-li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-size: 16px;
+    width: 47px;
+    height: 47px;
+    position: relative;
+    background: 0 0;
+    border: none;
+    color: inherit;
+    padding: 0;
+    cursor: pointer;
+}
+
+    .bar-li:hover {
+        background: #E0E0E0;
+    }
+    span.bar-li-svg {
+        color: rgb(96, 94, 92);
+    }
+    

src/component/bar/index.jsx

@@ -0,0 +1,55 @@
+import React, { Component } from "react";
+import './index.css';
+
+export default class Bar extends Component{
+    render(){
+        return (
+            <div class="zl-365-bar">
+                <div class="bar-ul">
+                    <div class="bar-li">
+                        <span class="bar-li-svg">
+                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                                <path d="M7.31299 1.26164C7.69849 0.897163 8.30151 0.897163 8.68701 1.26164L13.5305 5.84098C13.8302 6.12431 14 6.51853 14 6.93094V12.5002C14 13.3286 13.3284 14.0002 12.5 14.0002H10.5C9.67157 14.0002 9 13.3286 9 12.5002V10.0002C9 9.72407 8.77614 9.50021 8.5 9.50021H7.5C7.22386 9.50021 7 9.72407 7 10.0002V12.5002C7 13.3286 6.32843 14.0002 5.5 14.0002H3.5C2.67157 14.0002 2 13.3286 2 12.5002V6.93094C2 6.51853 2.1698 6.12431 2.46948 5.84098L7.31299 1.26164ZM8 1.98828L3.15649 6.56762C3.0566 6.66207 3 6.79347 3 6.93094V12.5002C3 12.7763 3.22386 13.0002 3.5 13.0002H5.5C5.77614 13.0002 6 12.7763 6 12.5002V10.0002C6 9.17179 6.67157 8.50022 7.5 8.50022H8.5C9.32843 8.50022 10 9.17179 10 10.0002V12.5002C10 12.7763 10.2239 13.0002 10.5 13.0002H12.5C12.7761 13.0002 13 12.7763 13 12.5002V6.93094C13 6.79347 12.9434 6.66207 12.8435 6.56762L8 1.98828Z" fill="currentColor"></path>
+                            </svg>
+                        </span>
+                    </div>
+                    <div class="bar-li">
+                        <span class="bar-li-svg">
+                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                                <path d="M8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Zm2,1.4a5.08,5.08,0,0,1,.76.42l.15.1a4.7,4.7,0,0,1,.65.53l0,0a4.69,4.69,0,0,1,.56.69.83.83,0,0,1,.08.12,4.31,4.31,0,0,1,.26.47H10.77A7.56,7.56,0,0,0,9.9,3.38ZM10,8a9.85,9.85,0,0,1-.08,1.25H6.08a9.81,9.81,0,0,1,0-2.5H9.92A9.85,9.85,0,0,1,10,8ZM8,3c.59,0,1.37,1,1.76,2.75H6.24C6.63,4,7.41,3,8,3ZM3.75,5.39,4,5a4.7,4.7,0,0,1,.45-.55l0,0a4.7,4.7,0,0,1,.65-.53l.15-.1A5.08,5.08,0,0,1,6,3.4l0,0a7.56,7.56,0,0,0-.87,2.37H3.56C3.62,5.63,3.68,5.51,3.75,5.39ZM3.11,9a4.78,4.78,0,0,1,0-2,2,2,0,0,1,.07-.23H5.07C5,7.15,5,7.57,5,8s0,.85.07,1.25H3.18A2,2,0,0,1,3.11,9ZM6,12.6a5.08,5.08,0,0,1-.76-.42l-.15-.1a4.7,4.7,0,0,1-.65-.53l0,0A4.7,4.7,0,0,1,4,11l-.26-.37c-.07-.12-.13-.24-.19-.36H5.23a7.56,7.56,0,0,0,.86,2.37ZM8,13c-.59,0-1.37-1-1.76-2.75H9.76C9.37,12,8.59,13,8,13Zm4.25-2.39L12,11a4.7,4.7,0,0,1-.45.55l0,0a4.7,4.7,0,0,1-.65.53l-.15.1a4.32,4.32,0,0,1-.76.42l-.06,0a7.56,7.56,0,0,0,.87-2.37h1.67C12.38,10.37,12.32,10.49,12.25,10.61Zm.57-1.36H10.93c0-.4.07-.82.07-1.25s0-.85-.07-1.25h1.89a2,2,0,0,1,.07.23,4.78,4.78,0,0,1,0,2A2,2,0,0,1,12.82,9.25Z" fill="currentColor"></path>
+                            </svg>
+                        </span>
+                    </div>
+                    <div class="bar-li">
+                        <span class="bar-li-svg">
+                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                                <path d="M3.5 5C3.22386 5 3 5.22386 3 5.5C3 5.77614 3.22386 6 3.5 6H10.5C10.7761 6 11 5.77614 11 5.5C11 5.22386 10.7761 5 10.5 5H3.5ZM3.5 7C3.22386 7 3 7.22386 3 7.5V9.5C3 9.77614 3.22386 10 3.5 10H5.5C5.77614 10 6 9.77614 6 9.5V7.5C6 7.22386 5.77614 7 5.5 7H3.5ZM4 9V8H5V9H4ZM7.5 7C7.22386 7 7 7.22386 7 7.5C7 7.77614 7.22386 8 7.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H7.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10H10.5C10.7761 10 11 9.77614 11 9.5C11 9.22386 10.7761 9 10.5 9H7.5ZM1 4C1 2.89543 1.89543 2 3 2H11C12.1046 2 13 2.89543 13 4C14.1046 4 15 4.89543 15 6V10.5C15 11.8807 13.8807 13 12.5 13H3.5C2.11929 13 1 11.8807 1 10.5V4ZM12.5 10.5C12.2239 10.5 12 10.2761 12 10V4C12 3.44772 11.5523 3 11 3H3C2.44772 3 2 3.44772 2 4V10.5C2 11.3284 2.67157 12 3.5 12H12.5C13.3284 12 14 11.3284 14 10.5V6C14 5.44772 13.5523 5 13 5V10C13 10.2761 12.7761 10.5 12.5 10.5Z" fill="currentColor"></path>
+                            </svg>
+                        </span>
+                    </div>
+                    <div class="bar-li">
+                        <span class="bar-li-svg">
+                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                                <path d="M5 1C3.89543 1 3 1.89543 3 3V13C3 14.1046 3.89543 15 5 15H11C12.1046 15 13 14.1046 13 13V5.41421C13 5.01639 12.842 4.63486 12.5607 4.35355L9.64645 1.43934C9.36514 1.15804 8.98361 1 8.58579 1H5ZM4 3C4 2.44772 4.44772 2 5 2H8V4.5C8 5.32843 8.67157 6 9.5 6H12V13C12 13.5523 11.5523 14 11 14H5C4.44772 14 4 13.5523 4 13V3ZM11.7929 5H9.5C9.22386 5 9 4.77614 9 4.5V2.20711L11.7929 5Z" fill="currentColor"></path>
+                            </svg>
+                        </span>
+                    </div>
+                    <div class="bar-li">
+                        <span class="bar-li-svg">
+                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                                <path d="M13.5858 12H5V14H11.5858L13.5858 12ZM5 15H4H3C1.89543 15 1 14.1046 1 13V12V11V9V8V6V5V4L4 1H13C14.1046 1 15 1.89543 15 3V5V6V8V9V11V12L12 15H5ZM14 11V9H5V11H14ZM14 8V6H5V8H14ZM14 5V3C14 2.44772 13.5523 2 13 2H4.41421L2 4.41421V5H4H5H14ZM2 6V8H4V6H2ZM2 9V11H4V9H2ZM2 12V13C2 13.5523 2.44772 14 3 14H4V12H2Z" fill="currentColor"></path>
+                            </svg>
+                        </span>
+                    </div>
+                    <div class="bar-li">
+                        <span class="bar-li-svg">
+                            <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                                <path d="M8 5C8.27614 5 8.5 5.22386 8.5 5.5V7.5H10.5C10.7761 7.5 11 7.72386 11 8C11 8.27614 10.7761 8.5 10.5 8.5H8.5V10.5C8.5 10.7761 8.27614 11 8 11C7.72386 11 7.5 10.7761 7.5 10.5V8.5H5.5C5.22386 8.5 5 8.27614 5 8C5 7.72386 5.22386 7.5 5.5 7.5H7.5V5.5C7.5 5.22386 7.72386 5 8 5ZM2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8ZM8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3Z" fill="currentColor"></path>
+                            </svg>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

src/component/content/content_header/index.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+
+export default class ContentHeader extends Component{
+    render(){
+        return (
+            <div class="zl-365-content-header">
+                <div class="zl-365-content-header-left">
+                    <div class="content-header-img">
+                        <img src="/imags/microsoft365/getsitelogo.png" class="content-header-img-size" />
+                    </div>
+                    <div class="content-header-img-name">
+                        <div class="content-header-img-name-text">whc</div>
+                    </div>
+                </div>
+                <div class="zl-365-content-header-right">
+                    <div class="zl-365-content-header-btngroup">
+                        <button class="btngroup-btn">
+                            <div class="tools-text">公用组</div>
+                        </button>
+                        <button class="btngroup-btn">
+                            <div class="tools-detail-svg"><svg t="1730793263148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="55622" width="16" height="16"><path d="M283.057 873.587l208.477-109.543a44 44 0 0 1 40.932 0l208.477 109.543-39.81-231.98a44 44 0 0 1 12.663-38.957L882.41 438.382l-233.04-33.844a44 44 0 0 1-33.128-24.062L512 169.376l-104.24 211.1a44 44 0 0 1-33.13 24.062l-233.04 33.844L310.205 602.65a44 44 0 0 1 12.662 38.958l-39.81 231.98zM512 852.7L245.08 992.95c-32.28 16.962-70-10.451-63.832-46.392l50.972-297.025L16.296 439.174c-26.127-25.453-11.717-69.817 24.38-75.06l298.42-43.338L472.547 50.519c16.143-32.692 62.761-32.692 78.904 0l133.453 270.257 298.419 43.339c36.097 5.242 50.507 49.606 24.38 75.06L791.78 649.532l50.972 297.025c6.168 35.94-31.551 63.354-63.832 46.392L512 852.7z" fill="currentColor" p-id="55623"></path></svg></div>
+                            <div class="tools-text">未关注</div>
+                        </button>
+                        <button class="btngroup-btn">
+                            <div class="tools-detail-svg"><svg t="1730793342861" class="icon" viewBox="0 0 1126 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="57681" width="16" height="16"><path d="M574.63652881 526.37537848c246.1439488 0 398.54273081 173.27762546 398.54273081 296.28671091 0 49.55580757-33.5403099 73.57905465-104.05881174 75.50762211l-9.39128603 0.12577679H290.04700063C213.11391476 898.29548829 176.59690286 874.39801798 176.59690286 822.66208939c0-123.00908658 152.39878201-296.2867109 398.03962595-296.28671091z m0 68.46415758c-208.7884288 0-324.83790051 146.48730283-324.83790051 224.88777614 0 8.59470393 3.73135929 12.40991517 12.49376597 13.24842327l4.06676252 0.16770047H883.45893052c11.69718272 0 16.5605285-3.60558365 16.5605285-13.41612374 0-78.40047445-116.55257657-224.88777728-325.34100538-224.88777614zM575.72658819 59.78774413c116.76220302 0 210.88469789 93.07435918 210.88469788 211.47165356 0 119.36157696-94.62559858 217.29928192-210.88469788 217.29928191s-210.88469789-97.43460011-211.42972757-216.33499818C364.29686062 154.32949191 459.46749002 59.78774413 575.72658819 59.78774413z m-0.25155242 68.4641576c-79.99363869 0-146.06804878 63.13963293-145.48109312 145.64879472 0 83.51537152 66.66136576 149.71555726 145.48109312 149.71555728 79.40668302 0 145.48109312-67.20639545 145.48109425-150.76369181 0-82.46723698-65.52938041-144.64258617-145.48109425-144.64258617z" p-id="57682" fill="currentColor"></path></svg></div>
+                            <div class="tools-text">1名成员</div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

src/component/content/content_side/index.jsx

@@ -0,0 +1,68 @@
+import React, { Component } from "react";
+
+export default class ContentSide extends Component{
+    render(){
+        return (
+            <div class="zl-365-content-side">
+    <div class="zl-365-content-side-ul">
+        <div class="zl-365-content-side-li  side-li-active">
+            <a class="content-side-li-nav" href="/Microsoft365/home" title="主页" target="_self">
+                <span class="content-side-li-nav-text">主页</span>
+            </a>
+        </div>
+        <div class="zl-365-content-side-li">
+            <a class="content-side-li-nav" href="#" title="对话" target="_self">
+                <span class="content-side-li-nav-text">对话</span>
+            </a>
+        </div>
+        <div class="zl-365-content-side-li">
+            <a class="content-side-li-nav" href="/Microsoft365/document" title="文档" target="_self">
+                <span class="content-side-li-nav-text">文档</span>
+            </a>
+        </div>
+        <div class="zl-365-content-side-li">
+            <a class="content-side-li-nav" href="#" title="笔记本" target="_self">
+                <span class="content-side-li-nav-text">笔记本</span>
+            </a>
+        </div>
+        <div class="zl-365-content-side-li">
+            <a class="content-side-li-nav" href="/Microsoft365/listnew" title="测试人员列表" target="_self">
+                <span class="content-side-li-nav-text">测试人员列表</span>
+            </a>
+        </div>
+        <div class="zl-365-content-side-li">
+            <a class="content-side-li-nav" href="#" title="页面" target="_self">
+                <span class="content-side-li-nav-text">页面</span>
+            </a>
+        </div>
+        <div class="zl-365-content-side-li">
+            <a class="content-side-li-nav" href="#" title="网站内容" target="_self">
+                <span class="content-side-li-nav-text">网站内容</span>
+            </a>
+        </div>
+        <div class="zl-365-content-side-li">
+            <a class="content-side-li-nav" href="#" title="回收站" target="_self">
+                <span class="content-side-li-nav-text">回收站</span>
+            </a>
+        </div>
+        <div class="zl-365-content-side-li">
+            <a class="content-side-li-nav" href="#" title="编辑" target="_self">
+                <span class="content-side-li-nav-text color-theme">编辑</span>
+            </a>
+        </div>
+    </div>
+    <div class="zl-365-content-side-teamify">
+        <div class="side-teamify-title">
+            <div class="side-teamify-title-svg"></div>
+            <div class="side-teamify-title-svg-text">添加实时聊天</div>
+        </div>
+        <div class="side-teamify-description">
+            添加 Microsoft Teams 进行实时协作，并在 Microsoft 365 中与团队共享资源。
+            <span class="side-teamify-description-tip"></span>
+            <div class="side-teamify-description-link">添加 Microsoft Teams</div>
+        </div>
+    </div>
+</div>
+        )
+    }
+}

src/component/content/index.css

@@ -0,0 +1,157 @@
+.zl-365-content {
+    display: flex;
+    flex: 0 0 calc(100% - 47px);
+    max-width: calc(100% - 47px);
+    height: calc(100vh - 48px);
+    flex-wrap: wrap;
+}
+
+img.content-header-img-size {
+    width: 48px;
+    height: 48px;
+}
+
+.content-header-img {
+    flex-shrink: 0;
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+    align-self: center;
+}
+
+.zl-365-content-header {
+    display: flex;
+    flex: 0 0 100%;
+    max-width: 100%;
+    height: 80px;
+    align-items: center;
+    padding-left: 32px;
+    padding-right: 32px;
+    justify-content: space-between;
+}
+
+.zl-365-content-header-left {
+    display: flex;
+}
+
+.content-header-img-name-text {
+    color: rgb(50, 49, 48);
+    font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    font-size: 24px;
+    font-weight: 600;
+}
+
+button.btngroup-btn {
+    display: flex;
+    border: none;
+    background-color: transparent;
+    margin: 0 8px;
+}
+
+.zl-365-content-header-btngroup {
+    display: flex;
+}
+
+.tools-text {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+}
+
+button.btngroup-btn {
+    color: var(--colorNeutralForeground1);
+    color: rgb(96, 94, 92);
+}
+
+    button.btngroup-btn:hover {
+        color: var(--colorBrandBackground);
+    }
+
+a.content-side-li-nav {
+    color: #323130;
+    padding-left: 30px;
+    height: 44px;
+    line-height: 44px;
+    position: relative;
+    display: inline-block;
+    font-style: var(--fontStyleRegular);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightCustomFont500, var(--fontWeightRegular));
+}
+
+.zl-365-content-side-li:hover {
+    background: #faf9f8;
+    color: #4f6bed;
+    cursor: pointer;
+}
+
+    .zl-365-content-side-li:hover a.content-side-li-nav {
+        color: #4f6bed;
+    }
+
+.zl-365-content-side {
+    flex: 0 0 227px;
+    max-width: 227px;
+    height: calc(100vh - 128px);
+    overflow: auto;
+    border-right: 1px solid #edebe9;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.zl-365-content-body {
+    flex: 0 0 calc(100% - 227px);
+    max-width: calc(100% - 227px);
+    height: calc(100vh - 128px);
+    overflow: auto;
+}
+
+.zl-365-content-side-li.side-li-active > a:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    border-left: 2px solid #4f6bed;
+}
+
+
+.other-app-icon {
+    display: flex !important;
+    height: 40px;
+    width: 40px;
+    font-size: 32px;
+    justify-content: flex-start;
+    padding-left: 9px;
+}
+
+    .other-app-icon img {
+        width: 32px;
+        height: 40px;
+        margin-left: 20px;
+    }
+
+
+.zl-365-content-side-teamify {
+    border-top: 1px solid #edebe9;
+    color: #666;
+    font-size: 14px;
+}
+
+.zl-365-content-side-li.side-li-active {
+    background-color: #F0F0F0;
+}
+
+    .zl-365-content-side-li.side-li-active a.content-side-li-nav {
+        font-weight: 600;
+        color: #242424;
+    }
+
+.zl-365-content-side-ul {
+    font-size: var(--fontSizeBase300);
+    font-family: var(--fontFamilyBase);
+}
+

src/component/content/index.jsx

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import './index.css';
+import ContentHeader from "./content_header";
+import ContentSide from './content_side';
+
+export default class Content extends Component{
+    render(){
+        return (
+            <div class="zl-365-content">
+                <ContentHeader></ContentHeader>
+                <ContentSide></ContentSide>
+            </div>
+ 
+        )
+    }
+}

src/component/hedaer/index.css

@@ -0,0 +1,69 @@
+.zl-365-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.zl-365-header {
+    background-color: #004d88;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+.zl-365-header-function {
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+    text-align: center;
+    color: white;
+}
+
+.zl-365-header-name {
+    color: white;
+    font-weight: 500;
+    padding: 0 12px;
+}
+
+.zl-365-header-tools {
+    display: flex;
+    justify-content: flex-end;
+    flex: 0 0 200px;
+    max-width: 200px;
+    color: white;
+    height: 48px;
+    align-items: center;
+}
+
+.zl-365-header-search {
+    flex: 1 1 auto;
+    text-align: center;
+}
+
+.zl-365-header-tools > div {
+    padding: 12px 16px;
+}
+
+input.header-search-input {
+    height: 32px;
+    padding-left: 40px;
+    width: 470px;
+}
+
+span.header-search-svg {
+    position: relative;
+    left: 30px;
+    top: 3px;
+    color: #0078d4;
+}
+
+.zl-365-header-function:hover {
+    background-color: #004d88;
+    cursor: pointer;
+}
+
+.zl-365-header-tools > div:hover {
+    background-color: #065693;
+    cursor: pointer;
+}

src/component/hedaer/index.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import './index.css';
+
+export default class Header extends Component{
+    render(){
+        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">
+                    <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>
+        )
+    }
+}