首页，导航栏

20190226111443945/src/App.js

+/* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Route from 'react-router-dom/Route';
 import Router from 'react-router-dom/Router';
 import createHistory from 'history/createHashHistory';
-import { Tab, TabBarItem, TabBar } from 'react-weui';
 const history = createHistory();
+// import { BrowserRouter } from 'react-router-dom';
 
 /*
  全局导入less
  */
 import './app.less';
 import * as global from 'actions/global';
-
 import routes from './routes';
 
 @connect(
@@ -21,6 +21,11 @@ import routes from './routes';
 )
 export default class App extends React.Component {
 
+  state={
+    // eslint-disable-next-line react/no-unused-state
+    tab: 0
+  }
+
   componentDidMount() {
     window.addEventListener('hashchange', () => {
     });
@@ -51,24 +56,54 @@ export default class App extends React.Component {
                   component={route.component}
                 />
               ));
+             
             }
+           
           }
           }
           />
+         
         </Router>
-        <Tab type="tabbar">
+        
+        {/* <Tab>
+          <TabBody>
+            <Article style={{ display: this.state.tab === 0 ? null : 'none' }}>
+              <h1>Page 1</h1>
+              <section>
+                <h2 className="title">Heading</h2>
+                <section>
+                  <h3>1.1 Title</h3>
+                  <p>Lorem ipsum dolor sit amet,</p>
+                </section>
+              </section>
+            </Article>
+            <Article style={{ display: this.state.tab === 1 ? null : 'none' }}>
+              <h1>Page 2</h1>
+              <section>
+                <h2 className="title">Heading</h2>
+                <section>
+                  <h3>1.2 Title</h3>
+                  <p>Lorem ipsum dolor sit amet,</p>
+                </section>
+              </section>
+            </Article>
+          </TabBody>
           <TabBar>
-           <TabBarItem label="会议">
-            {i18n.t('home:meeting')}
-           </TabBarItem>
-         <TabBarItem label="预定">
-           预定
-         </TabBarItem>
-         <TabBarItem label="我的">
-           我的
-         </TabBarItem>
-       </TabBar>
-     </Tab>
+            <TabBarItem
+              active={this.state.tab === 0}
+              onClick={e=>this.setState({ tab: 0 })}
+              icon={<img src={TabBarlist} alt="" />}
+              label="Tab1"
+            />
+            <TabBarItem active={this.state.tab === 1} onClick={e=>this.setState({ tab: 1 })}>
+              <TabBarIcon>
+                <img src={TabBarroom} alt="" />
+              </TabBarIcon>
+              <TabBarLabel>Tab2</TabBarLabel>
+            </TabBarItem>
+          </TabBar>
+        </Tab> */}
+
       </div>
     );
   }

20190226111443945/src/components/MyTab/index.js

-import React from 'react';
-import './index.less';
-import { Tab, TabBarItem, TabBar } from 'react-weui';
-import { Link } from 'react-router-dom';
-import i18n from 'i18n';
-
-// import { meetingIcon } from '../../../build/apps/20190226111443945/1.0.0/images';
-
-export default class MyTab extends React.Component {
-
-  componentWillMount() {
-  }
-
-  componentDidMount() {
-  }
-
-  render() {
-    return (
-      <Tab type="tabbar">
-       
-        <TabBar>
-          <TabBarItem label="会议">
-            <Link to="/meeting">{i18n.t('home:meeting')}</Link>
-          </TabBarItem>
-          <TabBarItem label="预定">
-            <Link to="/meeting">预定</Link>
-          </TabBarItem>
-          <TabBarItem label="我的">
-            <Link to="/meeting">我的</Link>
-          </TabBarItem>
-        </TabBar>
-      </Tab>
-    );
-  }
-};

20190226111443945/src/components/MyTab/package.json

-{
-  "name": "index",
-  "version": "1.0.0",
-  "private": true,
-  "main": "./index.js"
-}

20190226111443945/src/routes/Home/index.js

+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-undef */
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+// import { SearchBar } from 'react-weui';
 import PropTypes from 'prop-types';
-import i18n from 'i18n';
 import { Link } from 'react-router-dom';
 import * as home from '../../actions/home';
 import * as global from '../../actions/global';
-import { Tab, TabBarItem, TabBar } from 'react-weui';
 import './index.less';
-import MyTab from '../../components/MyTab';
-// import { MyTab } from '../../components/MyTab';
+
+import Footer from '../../components/Footer';
+import seach from '../../../public/images/search.png';
+import Indeximg from '../../../public/images/index.png';
+// import Banner from '../../../public/images/banner.png';
 @connect(
   state => ({ ...state.home }),
   dispatch => bindActionCreators({ ...home, ...global }, dispatch)
 )
 export default class Home extends React.Component {
   async componentWillMount() {
-    window.HWH5.navTitle({ title: 'Hello World' });
+    // window.HWH5.navTitle({ title: 'Hello World' });
+    HWH5.navTitle({ title: 'UBAINS会议' }).catch(error => {
+      console.log('设置标题异常', error);
+    });
     const {
       homeInfo, dataList, getHomeInfo, getFetchDemo
     } = this.props;
@@ -40,13 +47,23 @@ export default class Home extends React.Component {
   }
 
   render() {
+    
     return (
-     
-      <div className="App">
-         helloworld
+      <div className="container">
+        <div className="banner">
+          <div className="seach">
+            <Link to="/desc">
+              <img src={seach} alt="" />
+              <input type="text" placeholder="请输入会议室名称、状态…" disabled="disabled" />
+            </Link>
+          </div>
+        </div>
+        {/* <Seach>123</Seach> */}
+        <div className="indeximg">
+          <img src={Indeximg} alt="" />
+        </div>
+        <Footer />
       </div>
-      
-      
     );
   }
 }

20190226111443945/src/routes/Home/index.less

-.App {
-  padding: 10px;
-
-  .App-logo {
-    margin: 20px 0;
-    text-align: center;
-  }
-
-  .App-header {
-    height: 90px;
-    text-align: center;
-  }
-
-  .App-title {
-    margin-bottom: 30px;
-    font-size: 1.5em;
-    text-align: center;
-  }
-
-  .App-intro {
-    margin-bottom: 10px;
-    font-size: large;
-  }
-
-  .desc-link {
-    display: block;
-    width: 100px;
-    height: 50px;
-    margin: 0 auto;
-    margin-top: 30px;
-    color: #2b88e6;
-    font-size: 14px;
-    text-align: center;
-  }
-
-  .develop-doc {
-    h3 {
-      margin-bottom: 5px;
-    }
-
-    ul {
-      list-style: circle;
-      padding-left: 30px;
-    }
-
-    li {
-      margin-bottom: 5px;
-      color: #2b88e6;
-      cursor: pointer;
-    }
-  }
+.banner{
+  width: 100%;
+  height: 137px;
+  background: url(../../../public/images/banner.png) no-repeat;
+  background-size: cover;
+}
+.seach{
+  width: 60%;
+  height: 40px;
+  background:rgba(0, 0, 0, .5);
+  border-radius: 20px;
+  text-align: center;
+  position: relative;
+  top: 28%;
+  left: 18%;
+}
+.seach img{
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin: 10px 12px;
+}
+.seach input{
+  border: none;
+  background: none;
+  color: #fff;
+  margin: 12px 0;
+}
+.indeximg img{
+  width: 100%;
+  height: auto;
+  margin-bottom: 50px;
 }

20190226111443945/src/routes/index.js

@@ -9,6 +9,7 @@ import Meeting from './Meeting';
 // webpackChunkName 可指定模块名称，访问路由按需加载
 const routes = [
   { path: '/', component: Home, exact: true },
+  { path: '/home', component: Home, exact: true },
   { path: '/meeting', component: Meeting, exact: true },
   { path: '/desc', component: AsyncComponent(() => import('./Desc')) }
 ];