弹窗样式调整

src/assets/styles/index.scss

@@ -273,8 +273,8 @@ aside {
 }
 
 .common-btn-primary {
-  width: 204px;
-  height: 120px;
+  width: 212px;
+  height: 136px;
   background: url('@/assets/images/common/btnPrimary.png') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
@@ -286,7 +286,7 @@ aside {
 }
 .common-btn-primary2 {
   width: 332px;
-  height: 56px;
+  height: 72px;
   background: url('@/assets/images/common/btnPrimary2.png') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
@@ -309,8 +309,8 @@ aside {
   font-size: 38px;
 }
 .common-btn-danger{
-  width: 188px;
-  height: 56px;
+  width: 268px;
+  height: 72px;
   background: url('@/assets/images/common/btnDanger.png') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
@@ -321,8 +321,8 @@ aside {
   font-size: 38px;
 }
 .common-btn {
-  width: 140px;
-  height: 56px;
+  width: 148px;
+  height: 72px;
   background: url('@/assets/images/common/btn.png') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;

src/views/emergencyCommandMap/RightSection/PublicOpinionSupervision.vue

@@ -36,8 +36,8 @@ const dataList = ref([
 
 <style lang="scss" scoped>
 .supervision-container {
-  width: 1968px;
-  height: 400px;
+  width: 1966px;
+  height: 494px;
   background: url('@/assets/images/emergencyCommandMap/supervision/supervisionBg.png') no-repeat;
   position: relative;
   color: #fff;

src/views/emergencyCommandMap/RightSection/RenWuDengJi.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="showRegisterDialog" type="md" height="auto" title="任务登记" hide-footer>
+  <Dialog custom-show type="md" height="auto" title="任务登记" @confirm="confirmRegister" @close="closeDialog">
     <div class="dialog-content">
       <div class="dialog-body">
         <el-form ref="taskFormRef" :model="newTask">
@@ -29,12 +29,6 @@
           </el-form-item>
         </el-form>
       </div>
-      <div class="dialog-footer">
-        <div class="flex">
-          <div class="common-btn-primary" @click="confirmRegister" style="margin-top: -32px">确定</div>
-          <div class="common-btn" @click="closeDialog">取消</div>
-        </div>
-      </div>
     </div>
   </Dialog>
 </template>

src/views/emergencyCommandMap/RightSection/RenWuGenZong.vue

@@ -26,7 +26,7 @@
   />
 
   <!--弹窗-->
-  <RenWuGenZongInfo v-model="eventManageState.showListDialog" :event-id="eventId" />
+  <RenWuGenZongInfo v-if="eventManageState.showListDialog" v-model="eventManageState.showListDialog" :event-id="eventId" />
 </template>
 
 <script lang="ts" setup>

src/views/emergencyCommandMap/RightSection/RenWuGenZongInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="show" type="xl" title="任务跟踪列表" hide-footer>
+  <Dialog custom-show type="xl" title="任务跟踪列表" hide-footer @close="closeDialog">
     <transition name="fade">
       <div v-show="showSearch" class="mb-[20px]">
         <el-form ref="queryFormRef" :model="queryParams">
@@ -83,7 +83,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, reactive } from 'vue';
 import { selectTask } from '@/api/emergencyCommandMap/JointDuty';
 
 const taskList = ref([]);
@@ -189,8 +189,6 @@ const props = defineProps<{
 }>();
 const emit = defineEmits(['update:modelValue']);
 
-let show = ref(false);
-
 // 你可以在这里使用 props.eventId，例如在 fetchData 函数中：
 const fetchData = async () => {
   if (props.eventId) {
@@ -206,7 +204,6 @@ const fetchData = async () => {
 watch(
   () => props.modelValue,
   (newValue) => {
-    show.value = newValue;
     if (newValue) {
       getList();
     }
@@ -218,7 +215,6 @@ watch(
 
 // 关闭弹窗
 const closeDialog = () => {
-  show.value = false;
   emit('update:modelValue', false);
 };
 </script>

src/views/emergencyCommandMap/RightSection/RightTop.vue

@@ -254,8 +254,8 @@ watch(
 }
 
 .duty-card {
-  width: 1966px;
-  height: 879px;
+  width: 1968px;
+  height: 812px;
   background: url('@/assets/images/commandDynamic/dialog.png') no-repeat;
   position: relative;
   color: #fff;

src/views/emergencyCommandMap/RightSection/TaskDelivery.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="dialog" v-if="dialogVisible">
-    <div class="title gradient-text">{{ props.title }}</div>
-    <div class="close-icon" @click="closeDialog"></div>
+  <Dialog v-model="dialogVisible" type="xl" :title="props.title" @close="closeDialog">
     <div class="content">
       <el-skeleton :loading="loading" animated>
         <template #template>
@@ -18,11 +16,13 @@
         </template>
       </el-skeleton>
     </div>
-    <div class="dialog-footer">
-      <el-button class="btn" @click="sendTasks">确认发送H5短信</el-button>
-      <el-button class="btn" @click="closeDialog">取 消</el-button>
-    </div>
-  </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div class="common-btn-primary2" @click="sendTasks" style="margin-right: 20px">确认发送H5短信</div>
+        <div class="common-btn" @click="closeDialog">取 消</div>
+      </div>
+    </template>
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
@@ -91,53 +91,10 @@ const sendTasks = () => {
 };
 </script>
 
-<style scoped>
-.dialog {
-  position: absolute;
-  top: 478px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 900px;
-  background: url('@/assets/images/plan/dialog.png') no-repeat;
-  padding-top: 20px;
-  color: #fff;
-  font-size: 36px;
-  .title {
-    position: absolute;
-    top: 30px;
-    left: 55px;
-    font-size: 80px;
-  }
-
-  .dialog-footer {
-    display: flex;
-    align-items: center;
-    padding: 15px 60px;
-    border-bottom: 6px solid rgba(50, 132, 251, 0.4);
-    .btn {
-      width: 440px;
-      height: 120px;
-      background: url('@/assets/images/plan/btn.png') no-repeat;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #ffffff;
-      font-size: 36px;
-      border: none;
-    }
-  }
-}
-
-.close-icon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 75px;
-  height: 70px;
-  background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
-  background-size: 100% 100%;
-  cursor: pointer;
+<style lang="scss" scoped>
+.dialog-footer {
+  display: flex;
+  align-items: center;
 }
 
 .task-item {

src/views/emergencyCommandMap/index.vue

@@ -5,8 +5,8 @@
       <div class="dashboard-content">
         <LeftSection v-show="showLeftSection" />
         <MiddleSection>
-          <i class="left-icon" @click="handleTelescoping('left')" />
-          <i class="right-icon" @click="handleTelescoping('right')" />
+          <i :class="showLeftSection ? 'arrow-icon left-icon' : 'arrow-icon right-icon'" @click="handleTelescoping('left')" />
+          <i :class="showRightSection ? 'arrow-icon2 right-icon' : 'arrow-icon2 left-icon'" @click="handleTelescoping('right')" />
         </MiddleSection>
         <RightSection v-show="showRightSection" />
       </div>
@@ -85,26 +85,32 @@ onUnmounted(() => {
   }
 }
 .left-icon {
+  background: url('@/assets/images/left.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.right-icon {
+  background: url('@/assets/images/right.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.arrow-icon {
   position: absolute;
   bottom: 100px;
   left: 0;
   z-index: 9;
   width: 152px;
   height: 158px;
-  background: url('@/assets/images/left.png') no-repeat;
-  background-size: 100% 100%;
   cursor: pointer;
 }
 
-.right-icon {
+.arrow-icon2 {
   position: absolute;
   bottom: 100px;
   right: 0;
   z-index: 9;
   width: 152px;
   height: 158px;
-  background: url('@/assets/images/right.png') no-repeat;
-  background-size: 100% 100%;
   cursor: pointer;
 }
 </style>

src/views/routineCommandMap/index.vue

@@ -5,8 +5,8 @@
       <div class="dashboard-content">
         <LeftSection v-show="showLeftSection" />
         <MiddleSection>
-          <i class="left-icon" @click="handleTelescoping('left')" />
-          <i class="right-icon" @click="handleTelescoping('right')" />
+          <i :class="showLeftSection ? 'arrow-icon left-icon' : 'arrow-icon right-icon'" @click="handleTelescoping('left')" />
+          <i :class="showRightSection ? 'arrow-icon2 right-icon' : 'arrow-icon2 left-icon'" @click="handleTelescoping('right')" />
         </MiddleSection>
         <RightSection v-show="showRightSection" />
       </div>
@@ -85,26 +85,32 @@ onUnmounted(() => {
   }
 }
 .left-icon {
+  background: url('@/assets/images/left.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.right-icon {
+  background: url('@/assets/images/right.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.arrow-icon {
   position: absolute;
   bottom: 100px;
   left: 0;
   z-index: 9;
   width: 152px;
   height: 158px;
-  background: url('@/assets/images/left.png') no-repeat;
-  background-size: 100% 100%;
   cursor: pointer;
 }
 
-.right-icon {
+.arrow-icon2 {
   position: absolute;
   bottom: 100px;
   right: 0;
   z-index: 9;
   width: 152px;
   height: 158px;
-  background: url('@/assets/images/right.png') no-repeat;
-  background-size: 100% 100%;
   cursor: pointer;
 }
 </style>