modify some style and add navbar

src/case/billApp/src/App.css

@@ -1,10 +1,6 @@
-.App{
-    height: 100%;
-}
-.title{
-    padding-top: 8px;
-    padding-bottom: 20px;
-    font-weight: bold;
-    font-size: 18px;
-    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
-}
+
+
+
+
+
+

src/case/billApp/src/App.js

@@ -5,13 +5,15 @@ import TabBarBottom from './components/App/TabBarBottom'
 
 import './App.css';
 
-class App extends Component{
+class BillApp extends Component{
   render(){
       return(
-        <Router>
-          <Route exact path="/" component={TabBarBottom}/>
-        </Router>
+        <div className="AppWrap">
+        <div className="App">
+        {<TabBarBottom />}
+        </div>
+      </div>
       )
   }
 }
-export default App;
+export default BillApp;

src/case/orderApp/src/App.css

@@ -1,13 +1,16 @@
-.App{
-    height: 100%;
-}
 
-.title{
+
+/* .title{
     font-size: 18px;
-    /*font-weight: bold;*/
+    font-weight: bold;
     text-align: center;
     padding: 10px;
     color: #fff;
     background: #ccc;  
-}
+} */
+
+
+
+
+
 

src/case/orderApp/src/App.js

@@ -7,18 +7,20 @@ import TabBarBottom from './components/App/TabBarBottom'
 
 
 
-class App extends Component {
+class OrderApp extends Component {
   constructor(props){
     super(props)
   }
   
   render() {
     return (
+      <div className="AppWrap">
       <div className="App">
-        <TabBarBottom />
+      {<TabBarBottom />}
       </div>
+    </div>
     );
   }
 }
 
-export default App;
+export default OrderApp;

src/case/orderApp/src/components/HomePage/Cards.css

@@ -20,7 +20,7 @@ div.imgWrap{
 
 .p1{
     text-align: left;
-    color:#d24a58;
+    color: #108ee9;
     font-size: 14px;
 }
 

src/case/shopApp/src/App.css

@@ -8,17 +8,32 @@
 .App{
     box-sizing: border-box;
     position: relative;
-    width: 375px;
-    height: 667px;
+    width: 300px;
+    height: 534px;
     overflow: hidden;
-    border-radius: 25px;
     padding: 15px 0;
     overflow-x: hidden;
     overflow-y: hidden;
+    background-color:#fff;
     
 }
 
 *::-webkit-scrollbar {display:none !important}
 
+.phone6s{
+    padding: 84px 21px;
+    background: url('https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/6s.png') no-repeat;
+    background-size: cover;
+}
+
+p.p1,p.p2,p.p3{
+    font-size: 10px;
+}
+
+
+.AppWrap .title{
+    font-size: 13px;
+}
+
 
 

src/case/shopApp/src/App.js

@@ -2,22 +2,19 @@ import React, { Component } from 'react';
 import './App.css';
 import 'antd-mobile/dist/antd-mobile.css';
 
-
+import NavBars from './components/Common/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
 
 class ShopApp extends Component {
-  constructor(props){
-    super(props)
-    this.state={
-      showComponent:'TabBarBottom'
-    }
-  }
   //showComponent
   render() {
     return (
       <div className="AppWrap">
-        <div className="App">
-        {this.state.showComponent==='TabBarBottom'?<TabBarBottom />:''}
+        <div className="phone6s">
+          <div className="App">
+            <NavBars />
+            <TabBarBottom />
+          </div>
         </div>
       </div>
      

src/case/shopApp/src/components/App/TabBarBottom.css

@@ -1,4 +1,5 @@
 div.TabBarBottom{
     position: absolute !important;
     bottom: 0;
+    z-index: 5;
 } 

src/case/shopApp/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/shopApp/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/shopApp/src/components/HomePage/Cards.css

@@ -17,11 +17,18 @@ p{
     margin: 0;
 }
 
-.p1{
+
+.rightsidebar{
+    padding-left: 4px;
+}
+.rightsidebar .p1,.rightsidebar .p2{
+    font-size: 14px;
     text-align: left;
 }
 
+
 .p3{
+    text-align: left;
     margin-top: 60px;
 }
 .sidebar{

src/case/shopApp/src/components/HomePage/HomePage.css

@@ -0,0 +1,4 @@
+div.homeWrap{
+    margin-top: 60px;
+    
+}

src/case/shopApp/src/components/HomePage/HomePage.jsx

@@ -67,7 +67,7 @@ class HomePage extends Component{
 
     render(){
         return (
-            <div>
+            <div className="homeWrap">
                 <Search getProductByName={this.getGoods.bind(this)}/>
                 <TabBarTop tabs={this.state.tabs} tabChange={this.tabChange.bind(this)}/>
                 <Cards products={this.state.products||[]}/>

src/case/shopApp/src/components/HomePage/Search.jsx

@@ -23,7 +23,7 @@ class Search extends Component {
     this.manualFocusInst.focus();
   }
   render() {
-    return (<div>
+    return (<div style={{marginTop:'45px'}}>
       <SearchBar
         value={this.state.value}
         placeholder="请输入要搜索的商品名"

src/components/app/App.jsx

@@ -24,7 +24,9 @@ import {getCookie} from "../cookie";
 import Schema from "../common/schema/Schema";
 
 //引入案例
-import ShopApp from '../../case/shopApp/src/App'
+import ShopApp from '../../case/ShopApp/src/App'
+import BillApp from '../../case/BillApp/src/App'
+import OrderApp from '../../case/OrderApp/src/App'
 
 axios.defaults.withCredentials = true;
 
@@ -306,6 +308,8 @@ class App extends Component {
                             <Switch>
                                 <Route path="/" exact component={TrialCase}/>
                                 <Route path="/ShopApp" component={ShopApp}/>
+                                <Route path="/BillApp" component={BillApp}/>
+                                <Route path="/OrderApp" component={OrderApp}/>
                                 <Route path="/graphql-service/:sidebar/:case" component={TrialCase}/>
                                 <Route path="/wechat-service/:sidebar/:case" component={WechatService}/>
                                 <Route path="/quant-service/" component={QuantService}/>