首页

src/pages/Container/Bi/components/bottom/index.js

@@ -3,10 +3,26 @@ import "./index.less";
 import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
 import img2 from "~/assets/images/public/bigScreen/bg13.png";
 import img3 from "~/assets/images/public/bigScreen/bg14.png";
+import img4 from "~/assets/images/public/bigScreen/more1.png";
 
 
 function BottomScreen() {
   return (
+    <div className="bottom-container_con">
+      <div className="top_container">
+        <div className="title">管理九项 <img src={img4} alt=""/></div>
+        <div className="con">
+          <div className="item">安全管理台账</div>
+          <div className="item active">双重预防管理</div>
+          <div className="item">相关方管理</div>
+          <div className="item">现场重点监管</div>
+          <div className="item">消防应急管理</div>
+          <div className="item">安全教育培训</div>
+          <div className="item">综合查询（同比、环比 )</div>
+          <div className="item">综合考评管理</div>
+          <div className="item">科技兴安</div>
+        </div>
+      </div>
       <div className="bottom-container" >
         <div className="left">
           <div className="title" style={{ backgroundImage: `url(${img1})` }}>分子公司考核情况</div>
@@ -66,9 +82,9 @@ function BottomScreen() {
             </div>
           </div>
         </div>
-
-
       </div>
+  </div>
+
   );
 }
 

src/pages/Container/Bi/components/bottom/index.less

@@ -1,10 +1,44 @@
-.bottom-container{
+
+.bottom-container_con{
   width: 1120px;
-  height: 200px;
+  height: 240px;
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
+  .top_container{
+    width: 100%;
+    display: flex;
+    color: #ffffff;
+    font-size: 12px;
+    margin-bottom: 10px;
+
+    .title{
+      background: #074abe;
+      color: #ffffff;
+      padding: 5px 10px;
+      border-radius: 2px;
+    }
+    .con{
+      display: flex;
+      background: rgba(1,50,115,0.5);
+     line-height: 30px;
+      margin-left: 2px;
+
+      .item{
+        padding: 0 10px;
+        &:hover{
+          cursor: pointer;
+          background: #011d41;
+        }
+      }
+      .active{
+        background: #011d41;
+      }
+    }
+  }
+  .bottom-container{
+
     display: flex;
     justify-content: space-between;
     .left{
@@ -123,3 +157,5 @@
       }
     }
   }
+}
+