search

QinZonger · Dec 20, 2018 · 2f87c50 · 2f87c50
1 parent a988c7b
commit 2f87c50
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "react-redux": "^6.0.0",
     "react-router": "^4.3.0",
     "react-router-dom": "^4.3.1",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "zent": "^6.5.2"
   }
 }
diff --git a/src/App.css b/src/App.css
@@ -13,10 +13,34 @@ html, body, #root, .box {
   flex: 1;
 }
 
-header {
+.header {
   width: 100%;
   height: 68px;
   background: #666;
+  display: flex;
+}
+
+.header .search {
+  width: 1067px;
+  border-left: 1px solid #999;
+  border-right: 1px solid #999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.header .search .ser {
+  width: 500px;
+  height: 40px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: #fff;
+  border-radius: 2px;
+}
+
+.header .left, .header .right {
+  flex: 1;
 }
 
 .left-ani, .right-ani {

diff --git a/src/App.js b/src/App.js
@@ -7,6 +7,8 @@ import {
 } from 'react-router-dom';
 import {num} from './method/index'
 import Card from 'antd/lib/card';
+import { Input ,Button ,Select} from 'zent';
+import 'zent/css/index.css';
 import './App.css';
 import './common.css';
 import imgReact from './image/react.png'
@@ -25,12 +27,54 @@ import imgVue from './image/vue.png'
 import imgWebpack from './image/webpack.png'
 
 class App extends Component {
+  state = {
+    value :'',
+    show: "谷歌",
+    selectedValue: '1'
+  }
+  // onChange = (e) => {
+  //   this.setState({
+  //     value: e.target.value
+  //   })
+  // }
+  // onClick(){
+  //   console.log(this.state.value)
+  // }
+  showOption(e,data){
+    this.setState({
+      show : data.name,
+      selectedValue: data.value
+    })
+  }
   render() {
     const { Meta } = Card;
+    const data = [
+      {id: 1, name: '谷歌'},
+      {id: 2, name: '百度'},
+    ];
     return (
       <div className="box">
-      <header ref="head">
-
+      <header ref="head" className="header">
+        <div className="left">1</div>
+        <div className="search">
+            <div className="ser">
+            {
+               this.state.show === '谷歌'
+               ?
+               <form method="get" action="http://www.google.com/search"  target="_blank"> <input type="text" name="q" size="40"/><input type="submit" name="btnG" value="搜索"/> </form>
+               :
+               <form action="http://www.baidu.com/baidu" target="_blank"> <input type="text" name="word" size="40"/><input type="submit" value="搜索"/> </form>
+            }
+          <Select
+            data={data}
+            optionValue="id"
+            optionText="name"
+            onChange={this.showOption.bind(this)}
+            value={this.state.selectedValue}
+          />
+          </div>
+        </div>
+        <div className="right">2</div>
       </header>
       <div className="App" ref="app">
       <div className="left-ani" ref="left"></div>

diff --git a/src/App.min.css b/src/App.min.css
diff --git a/src/App.scss b/src/App.scss
@@ -10,10 +10,32 @@ html,body,#root,.box{
     display: flex;
     flex: 1;
 }
-header{
+.header{
     width: 100%;
     height: 68px;
     background: #666;
+
+    display: flex;
+    .search{
+        width: 1067px;
+        border-left:1px solid #999;
+        border-right:1px solid #999;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .ser{
+            width: 500px;
+            height: 40px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            background: #fff;
+            border-radius: 2px;
+        }
+    }
+    .left,.right{
+        flex: 1;
+    }
 }
 .left-ani,.right-ani{
     width: 300px;

diff --git a/src/compents/java.js b/src/compents/java.js
@@ -42,15 +42,9 @@ class Index extends Component {
         <Menu.Item key="js">
           JS
         </Menu.Item>
-        <SubMenu title={<span className="submenu-title-wrapper">Navigation Three - Submenu</span>}>
-          <MenuItemGroup title="Item 1">
-            <Menu.Item key="setting:1">Option 31</Menu.Item>
-            <Menu.Item key="setting:2">Option  2</Menu.Item>
-          </MenuItemGroup>
-          <MenuItemGroup title="Item 2">
-            <Menu.Item key="setting:3">Option 3</Menu.Item>
-            <Menu.Item key="setting:4">Option 4</Menu.Item>
-          </MenuItemGroup>
+        <SubMenu title={<span className="submenu-title-wrapper">工具</span>}>
+            <Menu.Item key="setting:1">Github</Menu.Item>
+            <Menu.Item key="setting:2">VsCode</Menu.Item>
         </SubMenu>
         <Menu.Item key="alipay">
           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>