完成了SearchHeader的功能和样式

HeeBooo · Jan 17, 2018 · 68b0735 · 68b0735
1 parent 6a1dfb4
commit 68b0735
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 26 deletions.
diff --git a/src/components/SearchHeader/index.js b/src/components/SearchHeader/index.js
@@ -8,24 +8,27 @@ class SearchHead extends PureComponent {
  render() {
  return (
  <div className="search-head">
- <div className="search-left">
- <i className="icon-angle-right"></i>
+ <div className="search-left" onClick={this.goBack}>
+ <i className="icon-chevron-left"></i>
  </div>
- <div className="serach-middle">
- <div className="search-container">
- <i className="icon-search"></i>
- <SearchInput
- value=""
- enterHandle={this.enterHandle}
- />
- </div>
+ <div className="input-container">
+ <i className="icon-search"></i>
+ <SearchInput
+ value={this.props.keyword || ''}
+ enterHandle={this.enterHandle}
+ />
  </div>
  </div>
  );
  };
 
+ // 返回
+ goBack = () => {
+ window.history.back();
+ };
+
+ // 跳转界面
  enterHandle = (value) => {
- // 跳转界面
  this.props.history.push(`/search/all/${encodeURIComponent(value)}`);
  };
 }

diff --git a/src/components/SearchHeader/style.scss b/src/components/SearchHeader/style.scss
@@ -1,31 +1,27 @@
-
 @import '../../static/scss/common.scss';
 @import '../../static/scss/font.css';
-
 .search-head {
  display: flex;
- padding: 10px;
+ padding: 10px 30px 10px 10px;
  background-color: rgb(233, 32, 61);
 }
 
 .search-left {
- width: 60px;
+ width: 16px;
  margin: 5px 0;
  text-align: left;
  font-size: 16px;
  color: #fff;
- transform: rotate(180deg);
 }
 
-.search-middle {
+.input-container {
  flex: 1;
- .search-container {
- padding: 5px;
- border-radius: 15px;
- background-color: #fff;
- overflow: hidden;
- i {
- color: #ccc;
- }
+ margin-left: 30px;
+ padding: 5px;
+ border-radius: 15px;
+ background-color: #fff;
+ overflow: hidden;
+ i {
+ color: #ccc;
  }
 }
diff --git a/src/containers/Search/index.js b/src/containers/Search/index.js
@@ -4,13 +4,21 @@ import SearchHead from '~components/SearchHeader';
 
 class Search extends PureComponent {
  render() {
+ const params = this.props.match.params;
  return (
  <div>
- <SearchHead />
+ <SearchHead 
+ keyword={params.keyword}
+ history={this.props.history}
+ />
  </div>
  );
  };
 
+ componentDidMount() {
+ console.log(this.props)
+ }
+
 }
 
 export default Search;