add style

src/case/billApp/src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 
+import NavBars from './components/Common/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
 
 import './App.css';
@@ -9,10 +10,13 @@ class BillApp extends Component{
   render(){
       return(
         <div className="AppWrap">
-        <div className="App">
-        {<TabBarBottom />}
+          <div className="phone6s">
+            <div className="App">
+              <NavBars />
+              <TabBarBottom />
+            </div>
+          </div>
         </div>
-      </div>
       )
   }
 }

src/case/billApp/src/components/Common/NavBar.css

@@ -0,0 +1,11 @@
+.navBars{
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index:100;
+}
+
+div.am-navbar{
+    background-color: black;
+}

src/case/billApp/src/components/Common/NavBar.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { NavBar, Icon } from 'antd-mobile';
+
+import './NavBar.css'
+
+export default class NavBars extends Component{
+    goBack(){
+        console.log('back')
+    }
+    render(){
+        return(
+            <div className="navBars">
+                <NavBar
+                mode="dark"
+                icon={<Icon type="left" />}
+                onLeftClick={() => this.goBack()}
+                rightContent={[
+                    <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
+                    <Icon key="1" type="ellipsis" />,
+                ]}
+                ><span style={{fontSize:'14px'}}>电商小程序</span>
+                </NavBar>
+            </div>
+        )
+    }
+}
+
+
+

src/case/orderApp/src/App.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 
-
-
 import './App.css';
+
+import NavBars from './components/Common/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
 
 
@@ -15,10 +15,13 @@ class OrderApp extends Component {
   render() {
     return (
       <div className="AppWrap">
-      <div className="App">
-      {<TabBarBottom />}
+        <div className="phone6s">
+          <div className="App">
+            <NavBars />
+            <TabBarBottom />
+          </div>
+        </div>
       </div>
-    </div>
     );
   }
 }

src/case/orderApp/src/components/Common/NavBar.css

@@ -0,0 +1,11 @@
+.navBars{
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index:100;
+}
+
+div.am-navbar{
+    background-color: black;
+}

src/case/orderApp/src/components/Common/NavBar.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { NavBar, Icon } from 'antd-mobile';
+
+import './NavBar.css'
+
+export default class NavBars extends Component{
+    goBack(){
+        console.log('back')
+    }
+    render(){
+        return(
+            <div className="navBars">
+                <NavBar
+                mode="dark"
+                icon={<Icon type="left" />}
+                onLeftClick={() => this.goBack()}
+                rightContent={[
+                    <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
+                    <Icon key="1" type="ellipsis" />,
+                ]}
+                ><span style={{fontSize:'14px'}}>电商小程序</span>
+                </NavBar>
+            </div>
+        )
+    }
+}
+
+
+