中间图标

src/views/emergencyCommandMap/MiddleSection.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="middle-section">
-    <div class="search-button">
-      <el-button type="primary" @click="handleQuery1">备战防御</el-button>
-      <el-button type="primary" :disabled="true" @click="handleQuery2">指挥调度</el-button>
+    <div class="btn-box">
+      <div class="btn" @click="handleQuery1">备战防御</div>
+      <div class="btn-active" style="margin-left: 40px">指挥调度</div>
     </div>
     <GlobalMap is-component width="3321" height="2140" />
   </div>
@@ -24,17 +24,35 @@ const handleQuery1 = () => {
   height: 2140px;
   animation: slideAndFade 1.5s;
 }
-.search-button {
+.btn-box {
   position: absolute;
-  top: 240px;
-  left: 3700px;
+  top: 60px;
+  left: 940px;
   z-index: 10;
-}
-.el-button {
-  width: 360px;
-  height: 100px;
-  padding: 20px 40px;
-  font-size: 48px;
+  display: flex;
+  align-items: center;
+  .btn,
+  .btn-active {
+    width: 454px;
+    height: 176px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fafdf9;
+    font-size: 78px;
+    font-family: YouSheBiaoTiHei;
+    background-size: 100% 100%;
+  }
+  .btn {
+    background: url('@/assets/images/btn.png') no-repeat;
+    &:hover {
+      background: url('@/assets/images/btnActive.png') no-repeat;
+    }
+  }
+  .btn-active {
+    background: url('@/assets/images/btnActive.png') no-repeat;
+  }
 }
 
 @keyframes slideAndFade {

src/views/emergencyCommandMap/RightSection/RenWuGenZong.vue

@@ -151,7 +151,7 @@ onMounted(() => {
     z-index: 1;
     width: 123px;
     height: 79px;
-    background: url('@/assets/images/taskTracking/success.png') no-repeat;
+    background: url('@/assets/images/taskTracking/processing.png') no-repeat;
   }
 }
 </style>

src/views/routineCommandMap/MiddleSection.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="middle-section">
-    <div class="search-button">
-      <el-button type="primary" @click="handleQuery1" :disabled="true">备战防御</el-button>
-      <el-button type="primary" @click="handleQuery2">指挥调度</el-button>
+    <div class="btn-box">
+      <div class="btn-active">备战防御</div>
+      <div class="btn" style="margin-left: 40px" @click="handleQuery2">指挥调度</div>
     </div>
     <PositionMap v-if="mapDialogVisible" v-model:visible="mapDialogVisible" @change="handleMapChange" />
     <GlobalMap is-component width="3894" height="2140" />
@@ -47,17 +47,35 @@ const handleMapChange = (data) => {
   animation: slideAndFade 1.5s;
   position: relative;
 }
-.search-button {
+.btn-box {
   position: absolute;
   top: 60px;
-  left: 900px;
+  left: 940px;
   z-index: 10;
-}
-.el-button {
-  width: 360px;
-  height: 100px;
-  padding: 20px 40px;
-  font-size: 48px;
+  display: flex;
+  align-items: center;
+  .btn,
+  .btn-active {
+    width: 454px;
+    height: 176px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fafdf9;
+    font-size: 78px;
+    font-family: YouSheBiaoTiHei;
+    background-size: 100% 100%;
+  }
+  .btn {
+    background: url('@/assets/images/btn.png') no-repeat;
+    &:hover {
+      background: url('@/assets/images/btnActive.png') no-repeat;
+    }
+  }
+  .btn-active {
+    background: url('@/assets/images/btnActive.png') no-repeat;
+  }
 }
 
 @keyframes slideAndFade {

src/views/routineCommandMap/PositionMap.vue

@@ -290,8 +290,8 @@ function handleClose() {
 let queryFormRef = ref();
 let containerRef = ref();
 function handleResize() {
-  const containerWidth = 2980 * (document.body.clientWidth / 8960);
-  const containerHeight = 980 * (document.body.clientHeight / 2520);
+  const containerWidth = 2900 * (document.body.clientWidth / 8960);
+  const containerHeight = 950 * (document.body.clientHeight / 2520);
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
   nextTick(() => {