1920屏幕按钮位置适配

src/views/car.vue

@@ -28,7 +28,7 @@
         </div>
       </el-collapse-transition>
     </div>
-    <div class="albuginea" @click="initTilesetLayer()">
+    <div class="albuginea" :style="btnStyle" @click="initTilesetLayer()">
       {{ show3D ? "关闭" : "开启" }}三维
     </div>
     <mars-map @mapLoad="mapLoad" :options="options"></mars-map>
@@ -62,6 +62,7 @@ export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
+      btnStyle: {},
       timer: null,
       time2: null,
       searchList: [],
@@ -148,7 +149,18 @@ export default {
     this.mapLayer.car.remove();
     this.mapLayer.car = null;
   },
-
+  created() {
+    const screenWidth = window.innerWidth;
+    if (screenWidth > 3000) {
+      this.btnStyle = {
+        left: `32.5%`,
+      };
+    } else {
+      this.btnStyle = {
+        left: `27.8%`,
+      };
+    }
+  },
   mounted() {
     // 在mounted钩子中添加全局点击事件监听
     document.addEventListener("click", this.handleClickOutside);
@@ -583,11 +595,10 @@ export default {
 .albuginea {
   cursor: pointer;
   position: absolute;
-  // top: 103px;
+
   bottom: 4%;
-  // left: calc(554px + 24px);
-  left: 32.5%;
-  z-index: 100;
+
+  z-index: 110;
   width: 80px;
   height: 32px;
   text-align: center;

src/views/carInfo.vue

@@ -10,10 +10,14 @@
         <span>{{ mileData.mile }}</span>
       </div>
     </div>
-    <div class="albuginea backBtn" @click="initTilesetLayer()">
+    <div
+      class="albuginea backBtn"
+      :style="btnStyle"
+      @click="initTilesetLayer()"
+    >
       {{ show3D ? "关闭" : "开启" }}三维
     </div>
-    <div class="albuginea" @click="$router.back()">
+    <div class="albuginea" @click="$router.back()" :style="btnStyle">
       <i class="el-icon-back"></i> 返回
     </div>
     <mars-map @mapLoad="mapLoad" :options="options"></mars-map>
@@ -32,6 +36,7 @@ export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
+      btnStyle: {},
       missionData: {}, //任务id
       mileData: {
         mile: 0, //已经行驶多少里程
@@ -94,6 +99,16 @@ export default {
     this.mapLayer.car = null;
   },
   created() {
+    const screenWidth = window.innerWidth;
+    if (screenWidth > 3000) {
+      this.btnStyle = {
+        left: `32.5%`,
+      };
+    } else {
+      this.btnStyle = {
+        left: `27.8%`,
+      };
+    }
     this.missionData = {
       missionId: this.$route.query.missionId,
       missionName: this.$route.query.missionName,
@@ -392,12 +407,8 @@ export default {
 .albuginea {
   cursor: pointer;
   position: absolute;
-  // top: 103px;
-  bottom: 4%;
-  left: 32.5%;
-
-  // left: calc(554px + 24px);
-  z-index: 100;
+  bottom: 3%;
+  z-index: 110;
   width: 80px;
   height: 32px;
   text-align: center;
@@ -410,8 +421,7 @@ export default {
   color: #ffffff;
 }
 .backBtn {
-  // top: 145px;
-  bottom: 8%;
+  bottom: 7%;
 }
 .albuginea:hover {
   background: #0084ff;
@@ -457,6 +467,7 @@ export default {
   }
 }
 .video-list {
+  width: 35%;
   position: absolute;
   bottom: 30px;
   left: 50%;

src/views/index.vue

@@ -82,7 +82,7 @@ export default {
   },
   created() {
     const screenWidth = window.innerWidth;
-    console.log(screenWidth);
+
     if (screenWidth > 3000) {
       this.options.scene.center = {
         lat: 28.990656,