提交修改

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.jsx

@@ -2,10 +2,17 @@ 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 (
-        <Header></Header>
+        <div class="zl-365-container">
+          <Header></Header>
+          <Bar></Bar>
+          <Content></Content>
+        </div>
     );
   }
 }

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

@@ -62,3 +62,8 @@ span.header-search-svg {
     background-color: #004d88;
     cursor: pointer;
 }
+
+.zl-365-header-tools > div:hover {
+    background-color: #065693;
+    cursor: pointer;
+}

src/component/hedaer/index.jsx

@@ -4,8 +4,7 @@ import './index.css';
 export default class Header extends Component{
     render(){
         return (
-            <div class="zl-365-container">
-                <div class="zl-365-header">
+            <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>
@@ -24,7 +23,6 @@ export default class Header extends Component{
                     <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>
-        </div>
         )
     }
 }