首页

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

@@ -0,0 +1,44 @@
+
+import "./index.less";
+import img1 from "~/assets/images/public/bigScreen/topbg.png";
+import img2 from "~/assets/images/public/bigScreen/close.png";
+
+
+
+
+
+function SearchScreen() {
+  return (
+   <div className="search_container">
+     <div className="top"  style={{ backgroundImage: `url(${img1})` }}>
+       <div className="list active">分公司列表</div>
+       <div className="list">相关方列表</div>
+       <div className="close">
+         <img src={img2} alt=""/>
+       </div>
+     </div>
+     <div className="main">
+       <div className="search_con">
+         <input type="text" placeholder={"请输入公司名称"} className="input"/>
+       </div>
+       <div className="con">
+         <div className="item">
+           <div className="name">新益公司</div>
+           <div className="btn">快捷登录</div>
+         </div>
+         <div className="item">
+           <div className="name">新益公司</div>
+           <div className="btn">快捷登录</div>
+         </div>
+         <div className="item">
+           <div className="name">新益公司</div>
+           <div className="btn">快捷登录</div>
+         </div>
+       </div>
+     </div>
+
+   </div>
+  );
+}
+
+export default SearchScreen;

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

@@ -0,0 +1,85 @@
+.search_container{
+  width: 214px;
+  min-height: 200px;
+  position: absolute;
+  top: 100px;
+  left: 400px;
+  background: rgba(0,41,82,0.68);
+  border-radius: 4px;
+  border: 1px solid rgba(44,105,172,0.6);
+  .top{
+    width: 214px;
+    height: 37px;
+    background-size: 100% 100%;
+    display: flex;
+    padding: 5px;
+    position: relative;
+    .list{
+      color: #ffffff;
+      padding: 2px 8px;
+      cursor: pointer;
+      &:hover{
+        border-radius: 2px;
+        background-color: rgba(36, 115, 239, 0.549);
+        box-shadow: 0 1px 1px 0 rgba(2, 32, 95, 0.4);
+      }
+    }
+    .active{
+      border-radius: 2px;
+      background-color: rgba(36, 115, 239, 0.549);
+      box-shadow: 0 1px 1px 0 rgba(2, 32, 95, 0.4);
+    }
+    .close{
+      position: absolute;
+      top: 5px;
+      right: 10px;
+      cursor: pointer;
+    }
+  }
+  .search_con{
+    background: rgba(5,40,106,0.68);
+    height: 30px;
+    border: 1px solid rgba(23,86,168,0.68);
+    margin:5px;
+    border-radius: 4px;
+    color: #4371af;
+    line-height: 30px;
+    padding-left: 5px;
+    font-size: 12px;
+    .input{
+      border: none;
+      background: none;
+      width: 100%;
+      height: 30px;
+      outline: none;
+      color: #ffffff;
+      &::-webkit-input-placeholder{
+        color: #4371af;
+      }
+    }
+
+  }
+  .con{
+    width: 100%;
+
+    .item{
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      font-size: 12px;
+      color: #ffffff;
+      padding: 5px;
+      box-sizing: border-box;
+      border-bottom: 1px dashed #205376;
+      .btn{
+        border-radius: 4px;
+        background-color: rgba(36, 115, 239, 0.2);
+        padding:2px 5px;
+        border: 1px solid rgba(42,86,158,0.58);
+        cursor: pointer;
+
+
+      }
+    }
+  }
+}

src/pages/Container/Bi/index.js

@@ -4,6 +4,7 @@ import Header from "../Bi/components/Header/index";
 import Leftpanel from "~/pages/Container/Bi/components/LeftPanel/index";
 import Rightpanel from "~/pages/Container/Bi/components/rightPanel/index";
 import Bottom from "~/pages/Container/Bi/components/Bottom/index";
+import Search from "~/pages/Container/Bi/components/search/index";
 
 function BiScreen() {
   return (
@@ -13,6 +14,7 @@ function BiScreen() {
         <Leftpanel/>
         <Rightpanel/>
         <Bottom/>
+        <Search/>
       </div>
     </div>
   );