底部按钮添加染出键盘处理和边框

src/containers/PublicCar/index.js

@@ -5,7 +5,30 @@ import PublicCarApply from './PublicCarApply';
 import styles from './style.css';
 
 class PublicCar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showFooter: true,
+    };
+  }
+
+  componentDidMount() {
+    let screenHeight = document.body.offsetHeight;
+    window.onresize = () => {
+      let nowHeight = document.body.offsetHeight;
+      if (nowHeight < screenHeight) {
+        this.setState({
+          showFooter: false,
+        });
+      } else {
+        this.setState({
+          showFooter: true,
+        });
+      }
+    };
+  }
   render() {
+    const { showFooter } = this.state;
     return (
       <div className="Content-Wrap">
         <div className="RepairContent">
@@ -18,23 +41,25 @@ class PublicCar extends Component {
             <Route render={() => <Redirect to="/publicCar/PublicCarApply" />} />
           </Switch>
         </div>
-        <div className={styles.footer}>
-          <NavLink
-            className={styles['footer-item']}
-            to="/publicCar/PublicCarApply"
-            replace
-          >
-            约车服务
-          </NavLink>
-          <span className={styles.line} />
-          <NavLink
-            className={styles['footer-item']}
-            to="/publicCar/PublicCarList"
-            replace
-          >
-            约车记录
-          </NavLink>
-        </div>
+        {showFooter && (
+          <div className={styles.footer}>
+            <NavLink
+              className={styles['footer-item']}
+              to="/publicCar/PublicCarApply"
+              replace
+            >
+              约车服务
+            </NavLink>
+            <span className={styles.line} />
+            <NavLink
+              className={styles['footer-item']}
+              to="/publicCar/PublicCarList"
+              replace
+            >
+              约车记录
+            </NavLink>
+          </div>
+        )}
       </div>
     );
   }

src/containers/Repair/index.js

@@ -4,19 +4,31 @@ import styles from './style.css';
 import ReprtRepair from './ReprtRepair';
 import RepairList from './RepairList';
 class index extends Component {
-  state = {
-    tab: 'ReprtRepair',
-  };
-  toggleRouteHandle = name => {
-    if (name === this.state.tab) return;
-    console.log(name);
-    const { history } = this.props;
-    this.setState({
-      tab: name,
-    });
-    history.replace('/repair/' + name);
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      showFooter: true,
+    };
+  }
+
+  componentDidMount() {
+    let screenHeight = document.body.offsetHeight;
+    window.onresize = () => {
+      let nowHeight = document.body.offsetHeight;
+      if (nowHeight < screenHeight) {
+        this.setState({
+          showFooter: false,
+        });
+      } else {
+        this.setState({
+          showFooter: true,
+        });
+      }
+    };
+  }
+
   render() {
+    const { showFooter } = this.state;
     return (
       <div className="Content-Wrap">
         <div className="RepairContent">
@@ -26,23 +38,25 @@ class index extends Component {
             <Route render={() => <Redirect to="/repair/ReprtRepair" />} />
           </Switch>
         </div>
-        <div className={styles.footer}>
-          <NavLink
-            className={styles['footer-item']}
-            to="/repair/ReprtRepair"
-            replace
-          >
-            报修服务
-          </NavLink>
-          <span className={styles.line} />
-          <NavLink
-            className={styles['footer-item']}
-            to="/repair/RepairList"
-            replace
-          >
-            报修记录
-          </NavLink>
-        </div>
+        {showFooter && (
+          <div className={styles.footer}>
+            <NavLink
+              className={styles['footer-item']}
+              to="/repair/ReprtRepair"
+              replace
+            >
+              报修服务
+            </NavLink>
+            <span className={styles.line} />
+            <NavLink
+              className={styles['footer-item']}
+              to="/repair/RepairList"
+              replace
+            >
+              报修记录
+            </NavLink>
+          </div>
+        )}
       </div>
     );
   }

src/containers/Repair/style.css

@@ -4,6 +4,14 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
+.footerTopLine {
+  position: absolute;
+  top: -5px;
+  width: 100%;
+  height: 6px;
+  background: linear-gradient(0deg, #626466, transparent);
+  opacity: 0.3;
+}
 .footer {
   width: 100%;
   height: 80px;
@@ -12,6 +20,7 @@
   justify-content: center;
   align-items: center;
   font-size: 30px;
+  border-top: 1px solid #dee0de;
 }
 .line {
   width: 2px;
@@ -22,6 +31,7 @@
   flex: 1;
   color: #999;
   text-align: center;
+  background-color: #fff;
 }
 :global(.active) {
   background-color: #3695c0;