diff --git a/src/assets/images/public/white/img7.png b/src/assets/images/public/white/img7.png
new file mode 100644
index 0000000..6a9a9b8
Binary files /dev/null and b/src/assets/images/public/white/img7.png differ
diff --git a/src/assets/images/public/white/more.png b/src/assets/images/public/white/more.png
new file mode 100644
index 0000000..6636b57
Binary files /dev/null and b/src/assets/images/public/white/more.png differ
diff --git a/src/pages/Container/Share/components/Header/index.js b/src/pages/Container/Share/components/Header/index.js
index 0e0f293..c4bba93 100644
--- a/src/pages/Container/Share/components/Header/index.js
+++ b/src/pages/Container/Share/components/Header/index.js
@@ -1,21 +1,37 @@
-import { useMount } from "ahooks";
-import autoFit from "autofit.js";
-import bg from "~/assets/images/public/white/bg.png";
-import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
+
+import bg from "~/assets/images/public/white/titlebg.png";
+import title from "~/assets/images/public/white/title.png";
+import more from "~/assets/images/public/white/more.png";
 import "./index.less";
 
-function WhiteShareOffice() {
-  useMount(() => {
-    autoFit.init({ dw: 1920, dh: 1080, el: ".white_branch_office", resize: true });
-  });
+function WhiteShareHead() {
 
   return (
-    <div className="white_share_office" style={{ backgroundImage: `url(${bg})` }}>
-      <div>
-        <Title title={123123} />
+    <div className="white_share_header" style={{ backgroundImage: `url(${bg})` }}>
+      <div className="left">
+        <div className="list">已安全生产 365 天</div>
+        <div className="list">10~27℃    多云     星期三</div>
+      </div>
+      <div className="title">
+       <img src={title} alt=""/>
+      </div>
+      <div className="right">
+        <div className="top">
+          <div className="name">股份公司数据统计</div>
+          <div className="more">
+          <img src={more} alt=""/>
+          </div>
+          <div className="down_main">
+            <div className="list">二公司</div>
+            <div className="list">六公司</div>
+            <div className="list">七公司</div>
+            <div className="list">九公司</div>
+          </div>
+        </div>
+
       </div>
     </div>
   );
 }
 
-export default WhiteShareOffice;
+export default WhiteShareHead;
diff --git a/src/pages/Container/Share/components/Header/index.less b/src/pages/Container/Share/components/Header/index.less
index e69de29..72c911c 100644
--- a/src/pages/Container/Share/components/Header/index.less
+++ b/src/pages/Container/Share/components/Header/index.less
@@ -0,0 +1,82 @@
+.white_share_header{
+  width: 100vw;
+  height: 86px;
+  position: relative;
+  .title{
+    position: absolute;
+    left: 50.5%;
+    transform: translateX(-50%);
+    top: 25px;
+  }
+  .left{
+    position: absolute;
+    top: 30px;
+    left: 20px;
+    display: flex;
+    .list{
+      padding: 6px 15px;
+      border-radius: 23px;
+      background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
+      background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
+      background-image: -ms-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
+      box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.75);
+      margin-right: 10px;
+      color: #465683;
+      opacity: 0.8;
+    }
+  }
+  .right{
+    position: absolute;
+    right: 20px;
+    top:25px;
+    border-radius: 23px;
+    background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
+    background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
+    background-image: -ms-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
+    box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.75);
+    padding: 6px 15px;
+    color: #465683;
+
+
+    .top{
+      display: flex;
+      justify-content: space-between;
+      position: relative;
+      .name{
+        margin-right: 20px;
+        font-weight: bold;
+      }
+      .more{
+        cursor: pointer;
+      }
+      .down_main{
+        width: 150px;
+        position: absolute;
+        top: 30px;
+        left: 0;
+        background: #ddf1fe;
+        border: 1px solid #b8dcf3;
+        border-radius: 4px;
+        opacity: 0;
+        .list{
+          font-weight: bold;
+          border-bottom: 1px solid #d4e3f7;
+          line-height: 36px;
+          padding: 0 10px;
+          text-align: center;
+          font-size: 12px;
+          cursor: pointer;
+          &:hover{
+            background: #def1ff;
+          }
+        }
+      }
+      &:hover{
+        .down_main{
+          opacity: 1;
+        }
+      }
+    }
+
+  }
+}
diff --git a/src/pages/Container/Share/components/Left/index.js b/src/pages/Container/Share/components/Left/index.js
new file mode 100644
index 0000000..c2f86e9
--- /dev/null
+++ b/src/pages/Container/Share/components/Left/index.js
@@ -0,0 +1,136 @@
+
+import "./index.less";
+import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
+import cake from "~/assets/images/public/white/img7.png";
+import bg1 from "~/assets/images/public/white/bg1.png";
+import img1 from "~/assets/images/public/white/img1.png";
+import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+import {useState} from "react";
+
+
+function WhiteShareLeft() {
+  const [block3List, setBlock3List] = useState([
+    { id: 1, level: "二级", name: "东区一号罐", state: "正常"},
+    { id: 2, level: "二级", name: "东区一号罐", state: "正常"},
+    { id: 3, level: "二级", name: "东区一号罐", state: "正常"},
+    { id: 4, level: "二级", name: "东区一号罐", state: "正常"},
+    { id: 5, level: "二级", name: "东区一号罐", state: "正常"},
+    { id: 6, level: "二级", name: "东区一号罐", state: "正常"},
+
+  ]);
+  return (
+    <div className="white_share_left">
+      <div className="block1">
+      <Title title={"风险辨识管控情况"} />
+      <div className="white_share_left_conten">
+        <div className="cake">
+          <img src={cake} alt="" />
+        </div>
+        <div className="cake_contant" style={{ backgroundImage: `url(${bg1})` }}>
+          <div className="item">
+            <div className="title">重大风险</div>
+            <div className="num fcr">467</div>
+          </div>
+          <div className="item">
+            <div className="title">较大风险</div>
+            <div className="num fco">467</div>
+          </div>
+          <div className="item">
+            <div className="title">一般风险</div>
+            <div className="num fcc">467</div>
+          </div>
+          <div className="item">
+            <div className="title">低风险</div>
+            <div className="num fcb">9809</div>
+          </div>
+        </div>
+      </div>
+      </div>
+   <div className="block2">
+     <Title title={"重大危险源安全情况"} />
+    <div className="white_share_left_conten">
+      <div className="top">
+        <div className="item">
+          <div className="title">二级重大危险源（1个）</div>
+          <div className="item_container">
+          <span>储罐数: <span className="fcb">3</span> </span>
+          <span>在用数: <span className="fcg">3</span> </span>
+          <span>停用数: <span className="fcr">0</span></span>
+          </div>
+        </div>
+        <div className="item">
+          <div className="title">三级重大危险源（2个）</div>
+          <div className="item_container">
+            <span>储罐数: <span className="fcb">10</span> </span>
+            <span>在用数: <span className="fcg">10</span> </span>
+            <span>停用数: <span className="fcr">0</span></span>
+          </div>
+        </div>
+      </div>
+
+      <div className="container">
+        <div className="left_table">
+          <div className="table">
+            <div className="tr">
+              <div className="th">级别</div>
+              <div className="th">名称</div>
+              <div className="th">状态</div>
+
+            </div>
+            <div className="scroll">
+              <SeamlessScroll list={block3List} step={0.5}>
+                {block3List.map((item, index) => (
+                  <div key={index} className="tr">
+                    <div className="td">{item.level}</div>
+                    <div className="td">{item.name}</div>
+                    <div className="td">{item.state}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </div>
+          </div>
+        </div>
+        <div className="info">
+          <div className="title"><img src={img1} alt=""/> 东区二号罐液位过低</div>
+          <div className="comment">
+            <p>温度待处置数/报警个数：<span>0/0</span> </p>
+            <p>压力待处置数/报警个数：<span>0/0</span></p>
+            <p>液位待处置数/报警个数：<span> <span className="fcr">1</span>/1</span></p>
+          </div>
+      </div>
+
+
+
+
+      </div>
+      </div>
+
+    </div>
+   <div className="block3">
+     <Title title={"隐患排查治理情况"} />
+     <div className="white_share_left_conten">
+       <div className="top">
+         <div className="item">
+           <div className="content">
+             <div className="title">股份<br/>公司</div>
+             <div className="info">
+               <div className="list">
+                 <div className="name">隐患总数</div>
+                 <div className="num">1398</div>
+               </div>
+             </div>
+           </div>
+         </div>
+
+       </div>
+
+     </div>
+   </div>
+
+
+    </div>
+
+  );
+}
+
+export default WhiteShareLeft;
diff --git a/src/pages/Container/Share/components/Left/index.less b/src/pages/Container/Share/components/Left/index.less
new file mode 100644
index 0000000..609ed52
--- /dev/null
+++ b/src/pages/Container/Share/components/Left/index.less
@@ -0,0 +1,271 @@
+.white_share_left{
+  width: 500px;
+  color: #305683;
+
+  .block1{
+    width: 100%;
+
+    .white_share_left_conten{
+      width: 100%;
+      background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
+      background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
+      background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
+      padding: 5px;
+      border: 2px solid transparent;
+      border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
+      display: flex;
+      align-items: center;
+      border-radius: 2px;
+
+
+      .cake_contant{
+        width: 100%;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        margin-left: 20px;
+        display: flex;
+        flex-wrap: wrap;
+
+        .item{
+          width: 50%;
+          text-align: center;
+          margin: 5px 0;
+          .title{
+            font-size: 14px;
+            font-weight: bold;
+            color: #2b4977;
+          }
+          .num{
+            font-size: 24px;
+
+          }
+          .fcb{
+            color: #5daaff;
+          }
+          .fcc{
+            color: #ffa801;
+          }
+          .fco{
+            color: #ff6000;
+          }
+          .fcr{
+            color: #ff2709;
+          }
+        }
+
+      }
+    }
+  }
+  .block2{
+    margin-top: 10px;
+    .white_share_left_conten{
+      width: 100%;
+      background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
+      background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
+      background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
+      padding: 5px;
+      border: 2px solid transparent;
+      border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
+      border-radius: 2px;
+      padding: 5px;
+      .top{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .item{
+          text-align: center;
+          border-style: solid;
+          border-width: 1px;
+          border-color: rgb(255, 255, 255);
+          border-radius: 4px;
+          background-color: rgba(1, 162, 255, 0);
+          width: 49%;
+
+          box-shadow: 0 2px 2px 0 rgba(114, 163, 191, 0.45);
+          padding: 10px;
+          .title{
+            font-weight: bold;
+            color: #305683;
+          }
+          .item_container{
+           color: #51719c;
+            margin-top: 5px;
+            .fcb{
+              color: #0097f7;
+            }
+            .fcg{
+              color: #0a9503;
+            }
+            .fcr{
+              color: #ff2100;
+            }
+          }
+
+
+        }
+
+      }
+      .container{
+        width: 100%;
+        display: flex;
+        margin-top: 10px;
+        .left_table{
+          width: 50%;
+          .table-style(109px, 1fr 1.2fr 1fr);
+        }
+        .info{
+          width: 50%;
+          margin-left: 10px;
+          .title{
+            font-size: 14px;
+            border-width: 1px;
+            border-color: rgb(255, 255, 255);
+            border-style: solid;
+            background-image: -moz-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
+            background-image: -webkit-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
+            background-image: -ms-linear-gradient( 180deg, rgb(217,239,253) 0%, rgb(225,243,254) 58%, rgb(232,246,255) 100%);
+            box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
+            border-radius: 50px;
+            padding: 5px 10px;
+            font-weight: bold;
+            color: #38688e;
+          }
+          .comment{
+            padding-left: 10px;
+            margin-top: 10px;
+            p{
+              margin: 0;
+              line-height: 30px;
+              color: #305683;
+              span{
+                color: #00aeff;
+                font-weight: bold;
+
+                .fcr{
+                  color: #f90102;
+
+                }
+              }
+            }
+
+          }
+        }
+
+      }
+    }
+  }
+
+  .block3{
+    margin-top: 10px;
+    .white_share_left_conten{
+      width: 100%;
+      background-image: -moz-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
+      background-image: -webkit-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
+      background-image: -ms-linear-gradient( 90deg, rgb(218,233,250) 39%, rgb(226,239,255) 100%);
+      padding: 5px;
+      border: 2px solid transparent;
+      border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
+      display: flex;
+      align-items: center;
+      border-radius: 2px;
+
+      .top{
+        width: 100%;
+        .item{
+          width: 100%;
+          border-style: solid;
+          border-width: 1px;
+          border-color:#aacbed;
+          border-radius: 4px;
+          background-color: rgb(205, 233, 255);
+          padding: 4px;
+          .content{
+            width: 100%;
+            border-style: solid;
+            border-width: 1px;
+            border-color: rgb(255, 255, 255);
+            border-radius: 4px;
+            background-color: rgb(215, 236, 254);
+            box-shadow: 0 1px 1px 0 rgba(114, 163, 191, 0.45);
+            display: flex;
+            align-items: center;
+            .title{
+              font-size: 18px;
+              color: #457fc0;
+              font-weight: bold;
+              border-style: solid;
+              border-width: 2px;
+              border-color: #c6e6fe;
+              background-image: -moz-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%);
+              background-image: -webkit-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%);
+              background-image: -ms-linear-gradient( 90deg, rgb(227,240,255) 0%, rgb(201,231,249) 100%);
+              text-align: center;
+              padding: 5px 10px;
+              line-height: 20px;
+            }
+            .info{
+              flex: 1;
+              .list{
+                text-align: center;
+                width: 25%;
+                .name{
+                  font-size: 12px;
+                }
+              }
+            }
+          }
+
+        }
+
+      }
+    }
+  }
+}
+.table-style(@height, @grid-template-columns) {
+  .table {
+    border: 1px solid #fff;
+
+    .scroll {
+      height: @height;
+      overflow-y: hidden;
+
+      .tr {
+        &:nth-child(odd) {
+          background-color: transparent;
+        }
+      }
+    }
+
+    .tr {
+      display: grid;
+      grid-template-columns: @grid-template-columns;
+      background-color: #C4E2F8;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #fff;
+      }
+
+      .td, .th {
+        text-align: center;
+        font-size: 14px;
+        color: #3B445C;
+        border-right: 1px solid #fff;
+        height: 28px;
+        line-height: 28px;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+
+      .th {
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+    }
+  }
+}
+
diff --git a/src/pages/Container/Share/index.js b/src/pages/Container/Share/index.js
index 683c4a0..dcb23a2 100644
--- a/src/pages/Container/Share/index.js
+++ b/src/pages/Container/Share/index.js
@@ -2,11 +2,17 @@
 import bg from "~/assets/images/public/white/bg.png";
 import "./index.less";
 import Header from "~/pages/Container/Share/components/Header";
+import Left from "~/pages/Container/Share/components/Left";
 
 function WhiteShareOffice() {
   return (
     <div className="white_share_office" style={{ backgroundImage: `url(${bg})` }}>
       <Header />
+    <div className="white_share_office_content">
+      <div className="left">
+        <Left/>
+      </div>
+    </div>
     </div>
   );
 }
diff --git a/src/pages/Container/Share/index.less b/src/pages/Container/Share/index.less
index d21391e..ae29635 100644
--- a/src/pages/Container/Share/index.less
+++ b/src/pages/Container/Share/index.less
@@ -1,7 +1,15 @@
-.white_branch_office{
+.white_share_office{
   width: 100vw;
   height: 100vh;
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  overflow: hidden;
+  .white_share_office_content{
+    width: 100%;
+    display: flex;
+    .left{
+      width: 500px;
+      margin-left: 20px;
+    }
+  }
 }
+
diff --git a/src/pages/Container/WhiteBranchOffice/components/Title/index.js b/src/pages/Container/WhiteBranchOffice/components/Title/index.js
index e3d5af9..496b8a0 100644
--- a/src/pages/Container/WhiteBranchOffice/components/Title/index.js
+++ b/src/pages/Container/WhiteBranchOffice/components/Title/index.js
@@ -4,10 +4,14 @@ import "./index.less";
 function Title(props) {
   return (
     <div className="white_bi_title">
-      <div className="decoration">
-        <img src={titlebg} alt="" />
+      <div className="name">
+        <div className="decoration">
+          <img src={titlebg} alt="" />
+        </div>
+        <div className="title">{props.title}</div>
       </div>
-      <div className="title">{props.title}</div>
+
+      <div className="more">更多 ></div>
     </div>
   );
 }
diff --git a/src/pages/Container/WhiteBranchOffice/components/Title/index.less b/src/pages/Container/WhiteBranchOffice/components/Title/index.less
index 7debac6..40eda7c 100644
--- a/src/pages/Container/WhiteBranchOffice/components/Title/index.less
+++ b/src/pages/Container/WhiteBranchOffice/components/Title/index.less
@@ -8,18 +8,29 @@
   background-image: linear-gradient(0deg, rgb(206, 227, 246) 0%, rgb(188, 219, 244) 100%);
   box-shadow: 0.5px 0.866px 2px 0px rgba(44, 91, 162, 0.28), inset 0px 1px 1px 0px rgba(168, 194, 219, 0.82);
   display: flex;
-  padding-top: 5px;
+  justify-content: space-between;
+  align-items: center;
+  .name{
+    display: flex;
+    align-items: center;
+    .decoration {
+      width: 18px;
+      height: 18px;
+      padding-left: 5px;
+      margin-top: -5px;
+    }
 
-  .decoration {
-    width: 18px;
-    height: 18px;
-    padding-left: 10px;
+    .title {
+      font-size: 15px;
+      color: #3F4554;
+      font-weight: bold;
+      padding-left: 10px;
+    }
+  }
+  .more{
+    color: #3177be;
+    margin-right: 10px;
   }
 
-  .title {
-    font-size: 16px;
-    color: #3F4554;
-    font-weight: bold;
-    padding-left: 18px;
-  }
+
 }