股份

src/pages/Container/Share/components/LeftPanel/index.js

@@ -185,6 +185,7 @@ function WhiteShareLeft() {
                    <div className="td">{item.unNumber}</div>
                    <div className="td">{item.rectificationRate}</div>
                  </div>
+
                ))}
              </SeamlessScroll>
            </div>

src/pages/Container/Share/components/LeftPanel/index.less

@@ -2,6 +2,7 @@
   width: 500px;
   color: #305683;
 
+
   .block1{
     width: 100%;
 
@@ -67,7 +68,7 @@
       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;

src/pages/Container/Share/components/MiddlePanel/index.js

@@ -0,0 +1,76 @@
+
+import "./index.less";
+import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
+import cake from "~/assets/images/public/white/img7.png";
+import {useState} from "react";
+import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+function WhiteShareMiddle() {
+  const [block1List, setBlock1List] = useState([
+    { name: "综合应急预案", num: "13"  },
+    { name: "现场处置方案", num: "75"  },
+    { name: "应急应对措施", num: "58" },
+    { name: "应急救援队伍", num: "3" },
+  ]);
+  const [block2List, setBlock2List] = useState([
+    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
+    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
+    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
+    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
+    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
+    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
+    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
+
+  ]);
+
+  return (
+    <div className="white_share_middle">
+      <div className="block1">
+        <Title title={"应急管理"} />
+       <div className="block1_content">
+         <div className="emergency_left">
+           <div className="top">
+             {
+               block1List.map((item, index) => (
+                 <div key={index} className="item">
+                   <p className="name">{item.name}</p>
+                   <div className="num">{item.num}</div>
+                 </div>
+               ))
+             }
+           </div>
+           <div className="emergency_left_main">
+             <div className="table">
+               <div className="tr">
+                 <div className="th">单位名称</div>
+                 <div className="th">姓名</div>
+                 <div className="th">职务</div>
+                 <div className="th">电话</div>
+               </div>
+               <div className="scroll">
+                 <SeamlessScroll list={block2List} step={0.5}>
+                   {block2List.map((item, index) => (
+                     <div key={index} className="tr">
+                       <div className="td">{item.unitName}</div>
+                       <div className="td">{item.name}</div>
+                       <div className="td">{item.duties}</div>
+                       <div className="td">{item.phone}</div>
+                     </div>
+                   ))}
+                 </SeamlessScroll>
+               </div>
+             </div>
+
+           </div>
+         </div>
+       </div>
+
+      </div>
+
+
+
+    </div>
+
+  );
+}
+
+export default WhiteShareMiddle;

src/pages/Container/Share/components/MiddlePanel/index.less

@@ -0,0 +1,111 @@
+.white_share_middle{
+  width: 840px;
+  .block1{
+    width: 840px;
+    .block1_content{
+      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%);
+      border: 2px solid transparent;
+      border-image: linear-gradient(180deg, rgba(255,255,255,0), #ffffff) 1;
+      border-radius: 2px;
+      display: flex;
+      .emergency_left{
+        width: 480px;
+        .top{
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          padding: 5px;
+          box-sizing: border-box;
+
+          .item{
+            border-width: 1px;
+            border-color: rgb(255, 255, 255);
+            border-style: solid;
+            background-color: rgba(197, 224, 246, 0.8);
+            box-shadow: inset 1px 1.732px 1px 0 rgba(124, 163, 189, 0.3);
+            padding: 5px 12px;
+            text-align: center;
+            color: #3d5882;
+            border-radius: 4px;
+            p{
+              padding: 0;
+              margin: 0;
+            }
+            .num{
+              font-size: 20px;
+              color: #4387d6;
+            }
+          }
+        }
+        .emergency_left_main{
+          width: 470px;
+          margin: 0 5px 5px;
+          border-style: solid;
+          border-width: 1px;
+          border-color: #b5d7f7;
+          border-radius: 4px;
+          background-color: rgb(205, 233, 255);
+          padding: 5px;
+          box-sizing: border-box;
+
+
+
+          .table-style(109px, 1fr 1fr 1fr 1fr);
+        }
+      }
+    }
+  }
+}
+
+
+
+.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;
+      }
+    }
+  }
+}

src/pages/Container/Share/index.js

@@ -2,7 +2,8 @@
 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";
+import Left from "pages/Container/Share/components/LeftPanel";
+import Middle from "pages/Container/Share/components/MiddlePanel";
 
 function WhiteShareOffice() {
   return (
@@ -11,6 +12,10 @@ function WhiteShareOffice() {
     <div className="white_share_office_content">
       <div className="left">
         <Left/>
+
+      </div>
+      <div className="middle">
+        <Middle/>
       </div>
     </div>
     </div>

src/pages/Container/Share/index.less

@@ -8,7 +8,11 @@
     display: flex;
     .left{
       width: 500px;
-      margin-left: 20px;
+      margin-left: 10px;
+    }
+    .middle{
+      width: 840px;
+      margin-left: 10px;
     }
   }
 }