bug修改

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -247,6 +247,7 @@
       </div>
     </div>
   </div>
+
   <!-- 左下角图层 -->
   <div class="affix-container-left" :style="{ left: 25 + 'px' }" v-if="!isAllBoard">
     <div class="affix-container-left-box">
@@ -309,11 +310,11 @@
   <!-- 右下角的功能 -->
   <div class="affix-container-right" v-if="!isAllBoard">
     <!-- 拖拽 -->
-    <div class="affix-container-right-item" @click="changeIsDrag">
+    <div class="item" @click="changeIsDrag">
       <img src="@/assets/imgs/indexPage/编组 12.png" style="width: 100%; height: 100%" />
     </div>
     <!-- 放大 -->
-    <div class="affix-container-right-item">
+    <div class="item">
       <img
         src="@/assets/imgs/indexPage/编组 14.png"
         style="width: 100%; height: 100%"
@@ -321,7 +322,7 @@
       />
     </div>
     <!-- 缩小 -->
-    <div class="affix-container-right-item">
+    <div class="item">
       <img
         src="@/assets/imgs/indexPage/编组 15.png"
         style="width: 100%; height: 100%"
@@ -329,7 +330,7 @@
       />
     </div>
     <!-- 全屏 -->
-    <div class="affix-container-right-item">
+    <div class="item">
       <img
         src="@/assets/imgs/indexPage/编组 22.png"
         style="width: 100%; height: 100%"
@@ -1120,30 +1121,25 @@ onUnmounted(() => {
 .affix-container {
   width: 100%;
   position: relative;
-
+}
 .indexpage-container {
   width: 100%;
   position: relative;
-
-    .affix-container-top {
-      width: 100%;
-      height: 5rem;
-      background-color: #fff;
-      border-bottom: 0.0625rem solid #f5f5f5;
 }
-  }
-
 .indexpage-container-active {
   width: 100%;
   position: relative;
   cursor: grab;
 }
-}
-
 .indexpage-container-active:active {
   cursor: grabbing;
 }
-
+.indexpage-container .affix-container-top {
+  width: 100%;
+  height: 5rem;
+  background-color: #fff;
+  border-bottom: 0.0625rem solid #f5f5f5;
+}
 .indexpage-container-box-point {
   width: 100%;
   position: absolute;
@@ -1214,7 +1210,7 @@ onUnmounted(() => {
   position: absolute;
   bottom: 1.625rem;
   z-index: 999;
-}
+
   .affix-container-left-box {
     width: 9rem;
   }
@@ -1271,6 +1267,8 @@ onUnmounted(() => {
     color: #98a4bf;
     margin-right: 0.125rem;
   }
+}
+
 .affix-container-right {
   position: fixed;
   z-index: 999;
@@ -1279,12 +1277,13 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-}
-.affix-container-right-item {
+
+  .item {
     width: 1.75rem;
     height: 1.75rem;
     cursor: pointer;
     flex-shrink: 0;
     margin-left: 0.5rem;
   }
+}
 </style>

src/views/mapPage/realTimeMap/index.vue

@@ -194,7 +194,10 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .page {
-  position: relative;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
   .top-div {
     display: flex;
     align-items: center;
@@ -202,6 +205,11 @@ onMounted(() => {
     height: 60px;
     box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
     background-color: #fff;
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    right: 0;
 
     .line {
       width: 1px;
@@ -215,9 +223,7 @@ onMounted(() => {
     width: 100%;
     overflow: auto;
     position: relative;
-    // width: 100%;
-    // overflow: auto;
-    // height: calc(100vh - 140px);
+    margin-top: 62px;
   }
 }
 </style>