From 9e7996c6176f7b977c7b8a7998ca08e709349643 Mon Sep 17 00:00:00 2001
From: HuaYu <15600557119@163.com>
Date: Tue, 14 Feb 2023 20:20:18 +0800
Subject: [PATCH] backup

---
 src/components/NavHeader/index.css        |  4 ++++
 src/components/NavHeader/index.js         | 16 ++++++++++++++++
 src/components/NavHeader/index.module.css |  8 ++++++++
 src/pages/CityList/index.css              |  6 +-----
 src/pages/CityList/index.js               |  5 ++++-
 src/pages/CityList/index.module.css       |  0
 src/pages/Map/index.module.css            | 10 ++++++++++
 7 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 src/components/NavHeader/index.css
 create mode 100644 src/components/NavHeader/index.js
 create mode 100644 src/components/NavHeader/index.module.css
 create mode 100644 src/pages/CityList/index.module.css
 create mode 100644 src/pages/Map/index.module.css

diff --git a/src/components/NavHeader/index.css b/src/components/NavHeader/index.css
new file mode 100644
index 0000000..e973e0d
--- /dev/null
+++ b/src/components/NavHeader/index.css
@@ -0,0 +1,4 @@
+.navbar {
+    color: #333;
+    background-color: #f6f5f6;
+}
diff --git a/src/components/NavHeader/index.js b/src/components/NavHeader/index.js
new file mode 100644
index 0000000..b1b3ba0
--- /dev/null
+++ b/src/components/NavHeader/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { NavBar } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+import PropTypes from 'prop-types'
+import styles from './index.module.css'
+export default function NavHeader({children,back}){
+    const defaultHandler =()=>navigate(-1);
+    const navigate = useNavigate();
+    return (<NavBar className={styles.NavBar} back='返回' onBack={back||defaultHandler} >{children}</NavBar>)
+}
+// 添加校验
+NavHeader.propTypes={
+    children:PropTypes.string.isRequired,
+    back:PropTypes.func
+}
+// export default withRouter(NavHeader)
\ No newline at end of file
diff --git a/src/components/NavHeader/index.module.css b/src/components/NavHeader/index.module.css
new file mode 100644
index 0000000..d01d23d
--- /dev/null
+++ b/src/components/NavHeader/index.module.css
@@ -0,0 +1,8 @@
+.navbar {
+    color: #333;
+    background-color: #f6f5f6;
+}
+/* 全局类型处理 */
+.navbar :global(.am-navbar-title){
+    color: #333;
+}
\ No newline at end of file
diff --git a/src/pages/CityList/index.css b/src/pages/CityList/index.css
index e5d8ab4..ea7662f 100644
--- a/src/pages/CityList/index.css
+++ b/src/pages/CityList/index.css
@@ -1,10 +1,6 @@
 .citylist{
     height: 100%;
-    padding-top: 45px;
-}
-.citylist-navbar {
-    background: #f6f5f6;
-    margin-top: -45px;
+    /* padding-top: 45px; */
 }
 ul{
     list-style: none;
diff --git a/src/pages/CityList/index.js b/src/pages/CityList/index.js
index 91138ec..84dc9be 100644
--- a/src/pages/CityList/index.js
+++ b/src/pages/CityList/index.js
@@ -6,6 +6,9 @@ import axios from "axios";
 import { getCurrentCity } from "../../utils";
 import { List, AutoSizer } from "react-virtualized";
 import WidthUseNavigate from "../WidthUseNavigate";
+import NavHeader from "../../components/NavHeader";
+import styles from './index.module.css'
+console.log(styles)
 // list:[{},{}]
 const formatCityIndex = (letter) => {
     switch (letter) {
@@ -165,7 +168,7 @@ class CityListInner extends React.Component {
     }
 
     render() {
-        return <div className="citylist"><NavBar className="citylist-navbar" back='返回' onBack={back}>城市选择</NavBar>
+        return <div className="citylist"><NavHeader>城市选择</NavHeader>
             <AutoSizer>
                 {({ width, height }) => (
                     <List
diff --git a/src/pages/CityList/index.module.css b/src/pages/CityList/index.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Map/index.module.css b/src/pages/Map/index.module.css
new file mode 100644
index 0000000..cfc5011
--- /dev/null
+++ b/src/pages/Map/index.module.css
@@ -0,0 +1,10 @@
+.map{
+    padding-top: 45px;
+    height: 100%;
+}
+.container{
+    height: 100%;
+}
+.map :global(.adm-nav-bar){
+    margin-top: -45px;
+}
\ No newline at end of file