From 685b052268e6d05968c4184a51f89935de6bfa0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Fri, 15 Nov 2024 13:19:54 +0800
Subject: [PATCH] =?UTF-8?q?1920=E5=B1=8F=E5=B9=95=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/car.vue     | 23 +++++++++++++++++------
 src/views/carInfo.vue | 31 +++++++++++++++++++++----------
 src/views/index.vue   |  2 +-
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/views/car.vue b/src/views/car.vue
index 70b98ae..5a7c35d 100644
--- a/src/views/car.vue
+++ b/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;
diff --git a/src/views/carInfo.vue b/src/views/carInfo.vue
index cb698df..b6a050b 100644
--- a/src/views/carInfo.vue
+++ b/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%;
diff --git a/src/views/index.vue b/src/views/index.vue
index b71f858..ffa2484 100644
--- a/src/views/index.vue
+++ b/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,