perf: 添加地图

app/src/assets/css/main.css

@@ -53,3 +53,11 @@ html,body {
   span {
   color: #fff !important;
 }
+
+
+.amap-logo { 
+  display: none !important;
+}
+.amap-copyright {
+  display: none !important;
+}

app/src/views/Iot/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div style="padding: 0px 35px; display: flex; justify-content: space-between">
-      <div>
+      <div style="z-index: 100;">
         <border-panel
           height="492px"  
           :header-type="4" 
@@ -15,7 +15,12 @@
             <IotVideo/>
         </border-panel>
       </div>
-      <div>
+      <div style="">
+        <div class="map-container cover">
+          <MapContainer  />
+        </div>
+      </div>
+      <div style="z-index: 100;">
         <border-panel
           height="469px"
           width="540px" :header-type="4" 
@@ -36,14 +41,42 @@
     </div>
   </template>
   <script>
+  
+import MapContainer from "@/components/Map.vue";
 import TotalityInfo from './components/TotalityInfo.vue';
 import IotVideo from './components/IotVideo.vue'
 import AlarmHandling from './components/AlarmHandling.vue'
 import RegionalDistribution from "./components/RegionalDistribution.vue";
 export default {
-    components: {  TotalityInfo, RegionalDistribution, IotVideo,AlarmHandling },
+    components: {  TotalityInfo, RegionalDistribution, IotVideo,AlarmHandling, MapContainer },
   };
   </script>
   
-  <style scoped lang="less"></style>
+  <style scoped lang="less">
+.map-container {
+  z-index: 50;
+  position: fixed;
+  top: 100px; 
+  left: 50%; 
+  transform: translateX(-50%); 
+  width: 1100px;
+  height: 90%;
+}
+
+.map-container::after {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  box-shadow:0 0 100px 100px #070b13 inset;
+  pointer-events: none;
+}
+
+iframe {
+  border: none;
+}
+
+</style>