股份

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

@@ -1,7 +1,7 @@
 
 import "./index.less";
 import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
-import cake from "~/assets/images/public/white/img7.png";
+import weather from "~/assets/images/public/weather/1.png";
 import {useState} from "react";
 import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
 function WhiteShareMiddle() {
@@ -21,6 +21,14 @@ function WhiteShareMiddle() {
     { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
 
   ]);
+  const [block3List, setBlock3List] = useState([
+    { unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
+    { unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
+    { unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
+    { unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
+    { unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
+    { unitName: "二公司", state: "未处置" ,preventiveMeasures:"远离大树、电线杆..." },
+  ]);
 
   return (
     <div className="white_share_middle">
@@ -65,20 +73,51 @@ function WhiteShareMiddle() {
 
       <div className="emergency_right">
         <div className="weather">
-         <div className="title">秦皇岛市气象台发布大风橙色预警[工级/严重]11</div>
+         <div className="title">秦皇岛市气象台发布大风橙色预警[工级/严重]</div>
           <div className="weather_main">
-            <div className="item"></div>
+            <div className="item">
+              <img src={weather} alt=""/> 晴
+            </div>
+
+            <div className="item">
+              <div>温度</div>
+              <div className="num">25℃</div>
+            </div>
+            <div className="item">
+              <div>风速：</div>
+              <div className="num">16米8级</div>
+            </div>
+          </div>
+          <div className="weather_bottom">
+            <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.unitName}</div>
+                      <div className="td fcb">{item.state}</div>
+                      <div className="td">{item.preventiveMeasures}</div>
+                    </div>
+                  ))}
+                </SeamlessScroll>
+              </div>
+            </div>
           </div>
         </div>
       </div>
        </div>
 
       </div>
-
-
-
     </div>
 
+
+
+
   );
 }
 

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

@@ -58,14 +58,38 @@
       }
 
     .emergency_right{
-      margin-left: 20px;
+      margin-left: 10px;
       padding-top: 5px;
+      padding-right: 5px;
+      flex: 1;
       .weather{
         .title{
           color: #ff6600;
           font-size: 14px;
           font-weight: bold;
         }
+        .weather_main{
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          color: #2b4977;
+          font-size: 14px;
+          font-weight: bold;
+          margin-top: 10px;
+          .item{
+            width: 30%;
+            text-align: center;
+            .num{
+              color: #2e75c6;
+            }
+          }
+        }
+        .weather_bottom{
+          .fcb{
+            color: #0c90ff;
+          }
+          .table-style(112px, 1fr 1fr 2fr);
+        }
 
       }
     }
@@ -112,6 +136,9 @@
           border-right: none;
         }
       }
+      .fcb{
+        color: #0c90ff;
+      }
 
       .th {
         font-weight: bold;

src/pages/Container/Share/index.js

@@ -12,7 +12,6 @@ function WhiteShareOffice() {
     <div className="white_share_office_content">
       <div className="left">
         <Left/>
-
       </div>
       <div className="middle">
         <Middle/>