股份

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

@@ -8,7 +8,20 @@ import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
 import {useState} from "react";
 
 
+
 function WhiteShareLeft() {
+  const [block1List, setBlock1List] = useState([
+    { name: "隐患总数", num: "1398"  },
+    { name: "隐患整改数", num: "1212"  },
+    { name: "隐患未整改数", num: "563" },
+    { name: "隐患整改率", num: "89%" },
+  ]);
+  const [block2List, setBlock2List] = useState([
+    { name: "隐患总数", num: "1398"  },
+    { name: "隐患整改数", num: "1212"  },
+    { name: "隐患未整改数", num: "563" },
+    { name: "隐患整改率", num: "89%" },
+  ]);
   const [block3List, setBlock3List] = useState([
     { id: 1, level: "二级", name: "东区一号罐", state: "正常"},
     { id: 2, level: "二级", name: "东区一号罐", state: "正常"},
@@ -17,6 +30,13 @@ function WhiteShareLeft() {
     { id: 5, level: "二级", name: "东区一号罐", state: "正常"},
     { id: 6, level: "二级", name: "东区一号罐", state: "正常"},
 
+  ]);
+  const [block4List, setBlock4List] = useState([
+    { name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
+    { name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
+    { name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
+    { name: "一级", total: "1398" ,rectificationNumber:"56", unNumber:"56", rectificationRate:"89%" },
+
   ]);
   return (
     <div className="white_share_left">
@@ -114,16 +134,62 @@ function WhiteShareLeft() {
            <div className="content">
              <div className="title">股份<br/>公司</div>
              <div className="info">
-               <div className="list">
+               {
-                 <div className="name">隐患总数</div>
+                 block1List.map((item, index) => (
-                 <div className="num">1398</div>
+                     <div key={index} className="list">
+                       <div className="name">{item.name}</div>
+                       <div className="num">{item.num}</div>
                      </div>
+                   ))
+               }
+             </div>
+           </div>
+         </div>
+
+         <div className="item">
+           <div className="content">
+             <div className="title">分子<br/>公司</div>
+             <div className="info">
+               {
+                 block2List.map((item, index) => (
+                   <div key={index} className="list">
+                     <div className="name">{item.name}</div>
+                     <div className="num">{item.num}</div>
+                   </div>
+                 ))
+               }
              </div>
            </div>
          </div>
 
        </div>
-
+       <div className="field">
+         <div className="top">领域隐患</div>
+       </div>
+       <div className="main">
+         <div className="table">
+           <div className="tr">
+             <div className="th">领域名称</div>
+             <div className="th">隐患总数</div>
+             <div className="th">整改数</div>
+             <div className="th">未整改数</div>
+             <div className="th">整改率</div>
+           </div>
+           <div className="scroll">
+             <SeamlessScroll list={block4List} step={0.5}>
+               {block4List.map((item, index) => (
+                 <div key={index} className="tr">
+                   <div className="td">{item.name}</div>
+                   <div className="td">{item.total}</div>
+                   <div className="td">{item.rectificationNumber}</div>
+                   <div className="td">{item.unNumber}</div>
+                   <div className="td">{item.rectificationRate}</div>
+                 </div>
+               ))}
+             </SeamlessScroll>
+           </div>
+         </div>
+       </div>
      </div>
    </div>
 

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

@@ -165,10 +165,7 @@
       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{
@@ -179,6 +176,7 @@
           border-radius: 4px;
           background-color: rgb(205, 233, 255);
           padding: 4px;
+          margin-bottom: 5px;
           .content{
             width: 100%;
             border-style: solid;
@@ -200,23 +198,42 @@
               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;
+              padding: 2px 10px;
               line-height: 20px;
             }
             .info{
               flex: 1;
+              display: flex;
               .list{
                 text-align: center;
                 width: 25%;
                 .name{
                   font-size: 12px;
                 }
+                .num{
+                  font-size: 16px;
                 }
               }
             }
-
           }
-
+        }
+      }
+      .field{
+        width: 100%;
+        .top{
+          width: 100%;
+          background-color: rgb(205, 233, 255);
+          text-align: center;
+          font-size: 18px;
+          font-weight: bold;
+          border-radius: 4px;
+          border: 1px solid #b7d6f5;
+          color: #457fc0;
+        }
+      }
+      .main{
+        width: 100%;
+        .table-style(70px, 1fr 1fr 1fr 1fr 1fr);
       }
     }
   }