启动预案

src/views/emergencyCommandMap/RightSection/StartPlan.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="dialog">
-    <div class="title gradient-text">启动预案</div>
-    <div class="close-icon" @click="onClose"></div>
+  <Dialog title="启动预案" tupe="lg" hide-footer custom-show @close="onClose">
     <!-- 响应等级选择和操作按钮 -->
     <div class="section-box">
       <div class="title2">响应等级</div>
@@ -11,14 +9,14 @@
         class="custom-select"
         popper-class="custom-select-popper"
         :teleported="false"
-        style="width: 1200px; margin-left: 30px"
+        style="width: 240px; margin-left: 10px"
       >
         <el-option v-for="level in responseLevels" :key="level.value" :label="level.name" :value="level.value"></el-option>
       </el-select>
       <div class="common-btn-primary2" @click="onStartPlan">启动预案</div>
       <div class="common-btn-primary2" @click="onTaskDelivery">预案任务下发</div>
     </div>
-    <div class="title-box">{{ planTitle }}</div>
+    <div class="common-title-box">{{ planTitle }}</div>
 
     <div class="plan-content">
       <!-- 预案内容的标签页 -->
@@ -48,7 +46,7 @@
     </div>
 
     <TaskDelivery v-model="taskDeliveryState.show" :title="taskDeliveryState.title" :planId="planData.plan_id" :eventId="props.eventId" />
-  </div>
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
@@ -235,136 +233,95 @@ watch(
 </script>
 
 <style scoped>
-.dialog {
-  position: absolute;
-  top: 478px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 2839px;
-  height: 1263px;
-  background: url('@/assets/images/plan/dialog.png') no-repeat;
-  padding-top: 200px;
-  color: #fff;
-  font-size: 36px;
-  .title {
-    position: absolute;
-    top: 30px;
-    left: 55px;
-    font-size: 80px;
-  }
-  .close-icon {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    width: 75px;
-    height: 70px;
-    background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
-    background-size: 100% 100%;
-    cursor: pointer;
-  }
-  .section-box {
-    display: flex;
-    align-items: center;
-    padding: 15px 60px;
-    border-bottom: 6px solid rgba(50, 132, 251, 0.4);
-    .common-btn-primary2 {
-      margin-left: 40px;
-    }
-  }
-  .title-box {
-    background-image: url('@/assets/images/plan/titleBox.png');
-    background-repeat: no-repeat;
-    background-size: 354px 28px;
-    background-position: bottom left;
-    margin: 40px 60px 0;
-    font-family: 'YouSheBiaoTiHei';
-    font-size: 56px;
-    padding-left: 50px;
-  }
-}
-
 h2 {
   text-align: center;
 }
+.section-box {
+  display: flex;
+  align-items: center;
+  padding: 5px 20px;
+  border-bottom: 1px solid rgba(50, 132, 251, 0.4);
+  .common-btn-primary2 {
+    margin-left: 12px;
+  }
+}
+.common-title-box {
+  font-size: 20px;
+  font-weight: bold;
+  height: 30px;
+  margin-top: 15px;
+}
 /* 样式 */
 .plan-content {
   display: flex;
   flex-direction: column;
-  margin: 40px 60px;
-}
-
-.button-container {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.content-row {
-  margin-top: 20px;
+  margin: 12px 20px;
 }
 .tabs {
   display: flex;
+  align-items: flex-end;
   width: 100%;
   overflow-x: auto;
   .tab {
-    width: 350px;
-    min-height: 78px;
-    background: url('@/assets/images/plan/tab.png') no-repeat;
-    background-size: 350px 78px;
-    background-position: bottom;
+    width: 121px;
+    min-height: 27px;
+    background: url('@/assets/images/plan/tab.png') no-repeat bottom;
+    background-size: 100% 100%;
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    margin-left: 50px;
+    margin-left: 15px;
     font-family: 'YouSheBiaoTiHei';
-    font-size: 38px;
+    font-size: 16px;
     cursor: pointer;
-    padding: 0 35px;
+    padding: 0 12px;
     text-align: center;
+    flex-shrink: 0;
     &:hover {
-      background: url('@/assets/images/plan/tabActive.png') no-repeat;
-      background-position: bottom;
+      background: url('@/assets/images/plan/tabActive.png') no-repeat bottom;
+      background-size: 100% 100%;
     }
     &:first-child {
       margin-left: 0;
     }
   }
   .tabActive {
-    background: url('@/assets/images/plan/tabActive.png') no-repeat;
-    background-position: bottom;
+    background: url('@/assets/images/plan/tabActive.png') no-repeat bottom;
+    background-size: 100% 100%;
   }
 }
 .tab-content {
   display: flex;
   margin-top: 30px;
   .tabs2 {
-    height: 560px;
+    height: 470px;
 
     overflow-y: auto;
     .tab {
-      /*width: 399px;*/
-      width: 600px;
-      height: 70px;
+      min-width: 171px;
+      min-height: 30px;
       background: url('@/assets/images/plan/tab2.png') no-repeat;
+      background-size: 171px 30px;
       display: flex;
       align-items: center;
-      padding-left: 76px;
       color: #9badc4;
-      font-size: 36px;
+      font-size: 14px;
       font-weight: bold;
-      margin-top: 60px;
+      margin-top: 20px;
       position: relative;
       cursor: pointer;
       .text {
-        white-space:nowrap;
+        margin-left: 35px;
+        white-space: nowrap;
       }
       &::before {
         content: '';
-        width: 2px;
-        height: 68px;
+        width: 1px;
+        height: 21px;
         background: #2b88bd;
         position: absolute;
-        top: -63px;
-        left: 42px;
+        top: -21px;
+        left: 18px;
       }
       &:first-child {
         margin-top: 0;
@@ -373,9 +330,8 @@ h2 {
         }
       }
       &:hover {
-        /*width: 439px;*/
-        width: 600px;
         background: url('@/assets/images/plan/tab2Active.png') no-repeat;
+        background-size: 171px 30px;
         .text {
           /* 设置字体透明 */
           color: transparent;
@@ -391,9 +347,8 @@ h2 {
       }
     }
     .tab-active2 {
-      /*width: 439px;*/
-      width: 600px;
       background: url('@/assets/images/plan/tab2Active.png') no-repeat;
+      background-size: 171px 30px;
       .text {
         /* 设置字体透明 */
         color: transparent;
@@ -409,9 +364,9 @@ h2 {
     }
   }
   .tab-content2 {
-    padding-left:20px;
-    height: 560px;
-    width: 90%;
+    padding-left: 20px;
+    height: 470px;
+    flex: 1;
     overflow-y: auto;
   }
 }