顶部输入框样式调整

src/forge/Component/Component.scss

@@ -442,3 +442,21 @@ li.ant-menu-item{
   border-left: 5px solid #494949;
   border-bottom: 6px solid transparent
 }
+//头部输入框样式
+.headSerach{
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding-left: 20px;
+  //修改antd输入框默认样式
+  .ant-input,.ant-input:focus{
+    border: none !important;
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  &:hover{
+    padding: 2px 20px 2px 20px;
+    background: #FFF;
+    & i{
+      color: #333;
+    }
+  }
+}

src/forge/Component/HeadSearch.jsx

@@ -1,41 +1,19 @@
 import React, { useState } from "react";
-import { Input ,notification} from "antd";
+import { Input} from "antd";
+import './Component.scss';
 
-const { Search } = Input;
 export default ({history}) => {
-  const [openSearch, setOpenSearch] = useState(false);
+  const [searchValue, setSearchValue] = useState(undefined);
 
-  function onGlobalSearch(value) {
-    history.push('/search?value=' + value);
-    // window.location.href = `search?value=` + value;
-    // history.push({
-    //   pathname:'/search',
-    //   state:value
-    // })
+  function onGlobalSearch(e) {
+    history.push('/search?value=' + e.target.value);
   }
   return (
     <React.Fragment>
-      {
-        openSearch ?
-          <div
-            onBlur={() => {
-              setTimeout(() => {
-                setOpenSearch(false)
-              }, 500)
-            }}
-          >
-            <Search placeholder="请输入搜索关键字"
-              className={`search-input mr20`}
-              onSearch={onGlobalSearch}
-              autoFocus={true}
-              style={{width:'260px'}}
-            />
-          </div>
-          :
-          <i className="iconfont icon-sousuo font-18 ml30" style={{color:"#a5a5a5"}} onClick={() => {
-            setOpenSearch(true)
-          }} />
-      }
+      <div className="headSerach aboutSubTitle" onBlur={()=>setSearchValue(undefined)}>
+        <i className = "iconfont icon-bianzu11 font-15" onClick={()=>onGlobalSearch({target:{value:searchValue}})}></i>
+        <Input placeholder="请输入搜索关键字" onPressEnter={onGlobalSearch} onChange={(value)=>setSearchValue(value.target.value)} value={searchValue}></Input>
+      </div>
     </React.Fragment>
   )
 };