zl365/src/component/content/content_header/index.jsx

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>
        )
    }
}