提交修改

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,13 @@
+import React,{Component} from "react";
+import "./App.css";
+// import List from "./component/List";
+import Header from './component/hedaer';
+export class App extends Component{
+  render(){
+    return (
+        <Header></Header>
+    );
+  }
+}
+
+export default App;

src/component/hedaer/index.css

@@ -0,0 +1,64 @@
+.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;
+}

src/component/hedaer/index.jsx

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+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-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>
+        </div>
+        )
+    }
+}