diff --git a/src/App.vue b/src/App.vue
index 68e9f6b..4467e80 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,6 +21,24 @@
 .el-message__icon,.el-message__content{
 		font-size: 16px !important;
 }
+.BMap_bubble_pop{
+  color: #fff !important;
+  height:220px !important;
+  padding:0 !important;
+  background-image: url(@/assets/images/infowindow_bg.png) !important;
+  background-color: transparent !important;
+  background-repeat: no-repeat;
+  border: 0 !important;
+  img{
+    display: none !important;
+  }
+}
+.BMap_bubble_buttons{
+  div{
+    color:#fff !important;
+    font-size:0.4rem !important;
+  }
+}
 .BMap_cpyCtrl,.anchorBL{
   opacity: 0 !important;
 }
diff --git a/src/api/data.js b/src/api/data.js
index c458622..daa0978 100644
--- a/src/api/data.js
+++ b/src/api/data.js
@@ -43,3 +43,1257 @@ export const lunzApi = {
         data,
     })
 };
+
+//个性化地图
+export const styleJson = [{
+    "featureType": "land",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "on",
+        "color": "#0b1838ff"
+    }
+}, {
+    "featureType": "manmade",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "on",
+        "color": "#9b9b9bff"
+    }
+}, {
+    "featureType": "water",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#061b93ff"
+    }
+}, {
+    "featureType": "road",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "road",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#554631ff"
+    }
+}, {
+    "featureType": "districtlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "districtlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#17263cff",
+        "opacity": "00",
+        "weight": "3"
+    }
+}, {
+    "featureType": "poilabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "poilabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#17263cff",
+        "opacity": "00",
+        "weight": "3"
+    }
+}, {
+    "featureType": "subway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "railway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "poilabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "on"
+    }
+}, {
+    "featureType": "subwaylabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "subwaylabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "provincialwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "provincialwaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "nationalwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "nationalwaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "highwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "highwaysign",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "green",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#263b3eff"
+    }
+}, {
+    "featureType": "nationalwaysign",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#d0021bff"
+    }
+}, {
+    "featureType": "nationalwaysign",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "city",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "on"
+    }
+}, {
+    "featureType": "city",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "city",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "city",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#17263cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "water",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "local",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "local",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#ffffff00"
+    }
+}, {
+    "featureType": "fourlevelway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "fourlevelway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#ffffff00"
+    }
+}, {
+    "featureType": "tertiaryway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "tertiaryway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#ffffff00"
+    }
+}, {
+    "featureType": "tertiaryway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "fourlevelway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#554631ff"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#554631ff"
+    }
+}, {
+    "featureType": "tertiaryway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#1a2e1cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "fourlevelway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#1a2e1cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#1a2e1cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#1a2e1cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#554631ff"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#554631ff"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#554631fa"
+    }
+}, {
+    "featureType": "medicallabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "medicallabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "entertainmentlabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "entertainmentlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "estatelabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "on"
+    }
+}, {
+    "featureType": "estatelabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "businesstowerlabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "businesstowerlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "companylabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "companylabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "governmentlabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "on"
+    }
+}, {
+    "featureType": "governmentlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "on"
+    }
+}, {
+    "featureType": "restaurantlabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "restaurantlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "hotellabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "hotellabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "shoppinglabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "shoppinglabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "lifeservicelabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "lifeservicelabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "carservicelabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "carservicelabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "financelabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "financelabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "otherlabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "otherlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "airportlabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "on"
+    }
+}, {
+    "featureType": "airportlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "airportlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#17263cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "airportlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "highway",
+    "stylers": {
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "stylers": {
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "stylers": {
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "stylers": {
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "stylers": {
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "stylers": {
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "stylers": {
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "stylers": {
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "provincialway",
+    "stylers": {
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
+    }
+}, {
+    "featureType": "provincialway",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "8-9"
+    }
+}, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "stylers": {
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "6",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "7",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "8",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "6-10"
+    }
+}, {
+    "featureType": "arterial",
+    "stylers": {
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
+    }
+}, {
+    "featureType": "arterial",
+    "stylers": {
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "9",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off",
+        "level": "10",
+        "curZoomRegionId": "0",
+        "curZoomRegion": "9-10"
+    }
+}, {
+    "featureType": "building",
+    "elementType": "geometry.topfill",
+    "stylers": {
+        "color": "#2a3341ff"
+    }
+}, {
+    "featureType": "building",
+    "elementType": "geometry.sidefill",
+    "stylers": {
+        "color": "#313b4cff"
+    }
+}, {
+    "featureType": "building",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "color": "#1a212eff"
+    }
+}, {
+    "featureType": "road",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "road",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#1a2e1cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "provincialway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#1a2e1cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "cityhighway",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#1a2e1cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "arterial",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#1a2e1cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "local",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "on"
+    }
+}, {
+    "featureType": "manmade",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "manmade",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "color": "#17263cff",
+        "opacity": "00"
+    }
+}, {
+    "featureType": "subwaystation",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "transportationlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "transportationlabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "off"
+    }
+}, {
+    "featureType": "estate",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#4a4a4aff"
+    }
+}, {
+    "featureType": "background",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "off",
+        "color": "#cc1a98ff"
+    }
+}, {
+    "featureType": "water",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "scenicspots",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#4a4a4aff"
+    }
+}, {
+    "featureType": "scenicspots",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "scenicspots",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "education",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#4a4a4aff"
+    }
+}, {
+    "featureType": "education",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "education",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "scenicspotsway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "scenicspotsway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "vacationway",
+    "elementType": "geometry.fill",
+    "stylers": {
+        "color": "#3b90acff"
+    }
+}, {
+    "featureType": "vacationway",
+    "elementType": "geometry.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "transportation",
+    "elementType": "geometry",
+    "stylers": {
+        "visibility": "on",
+        "color": "#9b9b9bff"
+    }
+}, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels",
+    "stylers": {
+        "visibility": "on"
+    }
+}, {
+    "featureType": "medical",
+    "elementType": "geometry",
+    "stylers": {
+        "color": "#4a4a4aff"
+    }
+}, {
+    "featureType": "town",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#4a4a4aff"
+    }
+}, {
+    "featureType": "village",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#4a4a4aff"
+    }
+}, {
+    "featureType": "local",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff",
+        "weight": 30
+    }
+}, {
+    "featureType": "local",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "estatelabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "estatelabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "governmentlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+        "color": "#ffffffff"
+    }
+}, {
+    "featureType": "governmentlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+        "opacity": "00"
+    }
+}, {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.icon",
+    "stylers": {
+        "visibility": "off"
+    }
+}];
\ No newline at end of file
diff --git a/src/assets/images/end_point_icon.png b/src/assets/images/end_point_icon.png
new file mode 100644
index 0000000..8155cf5
Binary files /dev/null and b/src/assets/images/end_point_icon.png differ
diff --git a/src/assets/images/infowindow_bg.png b/src/assets/images/infowindow_bg.png
new file mode 100644
index 0000000..220aff0
Binary files /dev/null and b/src/assets/images/infowindow_bg.png differ
diff --git a/src/views/components/carMile.vue b/src/views/components/carMile.vue
index 38098ab..d2ee818 100644
--- a/src/views/components/carMile.vue
+++ b/src/views/components/carMile.vue
@@ -2,10 +2,10 @@
   <div class="mile_warp">
     <table class="table_box">
       <colgroup>
-        <col width="20%"/>
-        <col width="30%"/>
-        <col width="25%"/>
-        <col width="25%"/>
+        <col width="20%" />
+        <col width="30%" />
+        <col width="25%" />
+        <col width="25%" />
       </colgroup>
       <thead>
         <tr>
@@ -16,20 +16,25 @@
         </tr>
       </thead>
     </table>
-    <div style="width:100%;height:4.5rem;overflow-y:auto;">
+    <div style="width:100%;height:1.5rem;overflow-y:auto;">
       <table class="table_box">
         <colgroup>
-          <col width="20%"/>
-          <col width="30%"/>
-          <col width="25%"/>
-          <col width="25%"/>
+          <col width="20%" />
+          <col width="30%" />
+          <col width="25%" />
+          <col width="25%" />
         </colgroup>
         <tbody>
           <tr v-for="(item, index) in carMile" :key="'car' + index">
-            <td>{{ index+ 1}}</td>
-            <td title="点击定位到该车辆位置" @click="queryMap(item)"><a href="javascript:;">{{ item.cardNo }}</a></td>
-            <td>{{ item.mile }}</td>
-            <td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
+            <td>
+              <div>{{ index+ 1}}</div>
+            </td>
+            <td title="点击定位到该车辆位置" @click="queryMap(item)">
+              <div style="cursor:pointer;">{{ item.cardNo }}</div>
+            </td>
+            <td><div>{{ item.mile }}</div></td>
+            <td><a class="btn_path" :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`"
+                target="_blank">查询</a></td>
           </tr>
         </tbody>
       </table>
@@ -52,20 +57,22 @@ export default {
   methods: {
     //定位
     queryMap(item) {
-      this.$emit('doMap',item);
+      this.$emit('doMap', item);
     },
     //昨日里程
     queryYesterdayMile() {
       lunzApi.getYesterdayMile(key).then(res => {
         let resData = res.Data;
-        this.carList.map(item => {
-          let idx = resData.findIndex(item2 => item2.Imei == item.deviceId);
-          item.mile = idx > -1 ? res.Data[idx].Mile : 0;
-          this.carMile.push(item);
-        })
-        this.carMile.sort((a, b) => {
-          return b.mile - a.mile;
-        })
+        if (resData && resData != undefined) {
+          this.carList.map(item => {
+            let idx = resData.findIndex(item2 => item2.Imei == item.deviceId);
+            item.mile = idx > -1 ? res.Data[idx].Mile : 0;
+            this.carMile.push(item);
+          })
+          this.carMile.sort((a, b) => {
+            return b.mile - a.mile;
+          })
+        }
       })
     },
   },
@@ -80,17 +87,104 @@ export default {
 
   .table_box {
     width: 100%;
+    margin-top: 0.15rem;
+
+    thead {
+      font-style: italic;
+      height: 0.38rem;
+      background: url(~@/assets/img/tab_bg.png);
+      background-size: 100% 100%;
 
-    tr {
       td {
-        font-size: 0.18rem;
         color: #fff;
-        padding: 0.08rem 0;
+        font-family: "FZSK";
+        font-size: 0.16rem;
       }
     }
-    a{
-      color:#0e94ea;
-      text-decoration: none;
+
+    tbody {
+
+      tr {
+        td {
+          color: #fff;
+          font-size: 0.14rem;
+          padding: 0.08rem 0;
+        }
+
+        &:nth-child(1) {
+          td {
+            padding-top: 0;
+          }
+
+          background: url(~@/assets/img/tab1.png);
+          background-size: 100% 100%;
+
+          div {
+            font-family: "FZSK";
+            font-size: 0.18rem;
+            letter-spacing: 0px;
+            background-image: linear-gradient(to bottom,
+                #fceece,
+                #e39054);
+            /* 线性渐变背景，方向向上 */
+            -webkit-background-clip: text;
+            /* 背景被裁剪成文字的前景色 */
+            -webkit-text-fill-color: transparent;
+            /* 文字填充颜色变透明 */
+          }
+        }
+
+        &:nth-child(2) {
+          background: url(~@/assets/img/tab2.png);
+          background-size: 100% 100%;
+
+          div {
+            font-family: "FZSK";
+            font-size: 0.18rem;
+            letter-spacing: 0px;
+            background-image: linear-gradient(to bottom,
+                #cefce7,
+                #16da85);
+            /* 线性渐变背景，方向向上 */
+            -webkit-background-clip: text;
+            /* 背景被裁剪成文字的前景色 */
+            -webkit-text-fill-color: transparent;
+            /* 文字填充颜色变透明 */
+          }
+        }
+
+        &:nth-child(3) {
+          background: url(~@/assets/img/tab3.png);
+          background-size: 100% 100%;
+
+          div {
+            font-family: "FZSK";
+            font-size: 0.18rem;
+            letter-spacing: 0px;
+            background-image: linear-gradient(to bottom,
+                #cef6fc,
+                #1ca4f2);
+            /* 线性渐变背景，方向向上 */
+            -webkit-background-clip: text;
+            /* 背景被裁剪成文字的前景色 */
+            -webkit-text-fill-color: transparent;
+            /* 文字填充颜色变透明 */
+          }
+        }
+      }
+
+      .btn_path {
+        display: inline-block;
+        width: 0.6rem;
+        color: #ffffff;
+        font-size: 0.14rem;
+        font-style: italic;
+        line-height: 0.2rem;
+        text-align: center;
+        border-radius: 0.1rem 0.08rem 0.1rem 0.08rem;
+        text-decoration: none;
+        background-color: #16da85;
+      }
     }
   }
 }
diff --git a/src/views/components/carWarn.vue b/src/views/components/carWarn.vue
index a8278d6..b7da7ce 100644
--- a/src/views/components/carWarn.vue
+++ b/src/views/components/carWarn.vue
@@ -87,12 +87,31 @@ export default {
 
   .table_box {
     width: 100%;
+    margin-top: 0.15rem;
+
+    thead {
+      font-style: italic;
+      height: 0.38rem;
+      background: url(~@/assets/img/tab_bg.png);
+      background-size: 100% 100%;
 
-    tr {
       td {
-        font-size: 0.18rem;
         color: #fff;
-        padding: 0.08rem 0;
+        font-family: "FZSK";
+        font-size: 0.16rem;
+      }
+    }
+
+    tbody {
+      tr {
+        td {
+          color: #fff;
+          font-size: 0.14rem;
+          padding: 0.08rem 0;
+        }
+        &:nth-child(1) td{
+          padding-top:0;
+        }
       }
     }
   }
diff --git a/src/views/components/pathMap.vue b/src/views/components/pathMap.vue
index 1f4ffd7..789d596 100644
--- a/src/views/components/pathMap.vue
+++ b/src/views/components/pathMap.vue
@@ -1,11 +1,9 @@
 <template>
-  <div class="map_warp">
-    <div id="container" style="width:100%;height:100%"></div>
-  </div>
+  <div id="container" style="width:100%;height:100%;"></div>
 </template>
 
 <script>
-import { lunzApi, appKey, key, carList } from "@/api/data";
+import { lunzApi, appKey, key, carList, styleJson } from "@/api/data";
 import { dateFormat } from "@/util/date";
 export default {
   data() {
@@ -21,6 +19,7 @@ export default {
       markList: [],//标注点记录
       polyline: null,//昨日轨迹
       viewData: [],//点聚合坐标集合
+      // endPointMarker:null,//轨迹终点标记
     }
   },
   beforeDestroy() {
@@ -43,14 +42,22 @@ export default {
     });
   },
   methods: {
+    //回到原中心点
+    backMap() {
+      var point = new BMapGL.Point(118.880278, 35.649947);
+      this.baiduMap.centerAndZoom(point, 11);
+    },
     initMap() {
       this.baiduMap = new BMapGL.Map('container');
       var point = new BMapGL.Point(118.880278, 35.649947);
       this.baiduMap.centerAndZoom(point, 11);
       this.baiduMap.enableScrollWheelZoom(true);
+      // this.baiduMap.setMapStyleV2({
+      //   styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
+      // });
       this.baiduMap.setMapStyleV2({
-        styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
-      });
+        styleJson
+      })
       // this.view = new mapvgl.View({
       //   map: this.baiduMap
       // });
@@ -70,6 +77,10 @@ export default {
           //   isPoiMask: true,
           //   isMapMask: true,
           //   showRegion: 'inside',
+          //   topFillColor: '#5679ea',
+          //   topFillOpacity: 0.5,
+          //   sideFillColor: '#5679ea',
+          //   sideFillOpacity: 0.9
           // });
           // this.baiduMap.addOverlay(mapmask);
           var border = new BMapGL.Polyline(ptArr, {
@@ -139,15 +150,17 @@ export default {
           //   objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
           // })
           this.markList.push(marker);
-          let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
-                            <div>车牌号：${carNo}</div>
-                            <div>设备位置：${res2.Data}</div>
-                            <div>最后定位时间：${res.Data.GPSTimeStamp.replace("T", " ")}</div>
-                            <div>状态：${this.locationStatus[res.Data.SbcStatus]}</div>
-                            <div>时速：${res.Data.spd}km/h</div>
-                            <div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${deviceId}">行车轨迹</div>
+          let sContent = `<div style="font-size:14px;line-height:22px;padding:0 0 0 25px;">
+                            <div style="display:flex;align-items:center;margin-bottom:20px;font-style: italic;font-size:20px;font-family: FZSK;">
+                              <div style="color: #ffffff;margin-right:15px;">${carNo}</div>
+                              <div style="display:inline-block;color:${res.Data.SbcStatus==3?"#ffffff":"#062766"};background:${res.Data.SbcStatus==3?"#1dd58e":"#9ab3c6"};width:50px;height:24px;line-height:24px;text-align:center;border-radius:12px;font-size:16px;">${this.locationStatus[res.Data.SbcStatus]}</div>
+                              <div style="margin-left:45px;color: #fff;font-style: italic;font-size:20px;margin-right:15px;">${res.Data.spd}km/h</div>  
+                            </div>
+                            <div style="display:flex;margin-bottom:10px;"><div style="color: #ffffff;width:80px;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
+                            <div style="display:flex;"><div style="color: #ffffff;width:100px;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
+                            <div style="text-align:center;margin:15px 0 0;"> <div style="display: inline-block;width:88px;height:30px;line-height:30px;border-radius: 15px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89;font-size:18px;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div>
                         </div>`;
-          let infoWindow = new BMapGL.InfoWindow(sContent);
+          let infoWindow = new BMapGL.InfoWindow(sContent,{width:367,height:220});
           // marker添加点击事件
           infoWindow.addEventListener('open', () => {
             document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
@@ -248,8 +261,19 @@ export default {
           this.baiduMap.removeOverlay(this.polyline);
           this.polyline = null;
         }
-        this.polyline = new BMapGL.Polyline(point, { strokeColor: '#F5533D', strokeWeight: 5, strokeOpacity: 1, })
+        this.polyline = new BMapGL.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, })
         this.baiduMap.addOverlay(this.polyline);
+        //终点标注maker
+        if(this.endPointMarker){
+          this.baiduMap.removeOverlay(this.endPointMarker);
+          this.endPointMarker = null;
+        }
+        // var myIcon = new BMapGL.Icon(require("@/assets/images/end_point_icon.png"), new BMapGL.Size(37, 44));
+        // this.endPointMarker = new BMapGL.Marker(point[point.length-1], {
+        //     icon: myIcon
+        // });
+        // console.log('最后一个坐标',point[point.length-1])
+        // this.baiduMap.addOverlay(this.endPointMarker);
         this.baiduMap.centerAndZoom(point[0], 15);
         this.baiduMap.closeInfoWindow();
         // this.polyline = new BMapGL.Polyline(point, {