任务登记样式优化

src/views/emergencyCommandMap/RightSection/RenWuDengJi.vue

@@ -1,5 +1,4 @@
 <template>
-  // type分别为sm、md、lg
   <Dialog custom-show type="sm" title="任务下达" @confirm="confirmRegister" @close="closeDialog">
     <div class="dialog-content">
       <div class="dialog-body">
@@ -46,7 +45,7 @@
             <el-input v-model="newTask.contact_phone" class="custom-input2" placeholder="发布人的联系电话" />
           </el-form-item>
           <el-form-item label="完成时限" label-width="200px">
-            <el-date-picker v-model="newTask.complete_time" type="date" placeholder="选择完成时间" style="width: 100%" />
+            <el-date-picker v-model="newTask.complete_time" type="date" class="common-date-picker" :teleported="false" popper-class="common-date-popper" placeholder="选择完成时间" style="width: 100%" />
           </el-form-item>
         </el-form>
       </div>
@@ -56,7 +55,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from 'vue';
-import { addTask, getUnits, getUser } from '@/api/emergencyCommandMap/JointDuty.ts';
+import { addTask, getUnits, getUser } from '@/api/emergencyCommandMap/JointDuty';
 
 const taskTypes = ref([{ name: '事件处置' }, { name: '防范措施' }, { name: '险情处理' }, { name: '督办任务' }]);
 const newTask = reactive({
@@ -131,100 +130,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.dialog-wrap {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 2000;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .overlay {
-    background-color: rgba(0, 0, 0, 0.5);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    cursor: pointer;
+.dialog-content {
+  :deep(.common-date-popper) {
+    top: -600px !important;
+    left: 0 !important;
   }
-  .dialog {
-    width: 5000px;
-    height: 2000px;
-    margin: 0 auto;
-    background-color: #fff;
-    border-radius: 20px;
-  }
-}
-.dialog {
-  padding: 0 50px;
-  .dialog-header {
-    width: 100%;
-    height: 150px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .icon-close {
-      cursor: pointer;
-    }
-  }
-}
-.footer {
-  height: 64px;
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 30px;
-  .pagination-container {
-    height: 64px;
-    margin: 0;
-  }
-  :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 32px;
-  }
-  :deep(.el-pagination) {
-    .btn-next,
-    .btn-prev {
-      background-color: transparent;
-      border: none;
-      .el-icon {
-        font-size: 22px;
-        color: #a7ccdf;
-      }
-    }
-    .btn-prev:disabled,
-    .btn-next:disabled {
-      background-color: transparent;
-      border: none;
-    }
-    .el-pager li {
-      width: 64px;
-      height: 64px;
-      line-height: 64px;
-      text-align: center;
-      font-size: 32px;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
-      &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
-      }
-    }
-    .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
-    }
-  }
-}
-.flex {
-  display: flex;
-  align-items: flex-start;
 }
 </style>