feat: 异步弹窗调整

src/views/home/content/modal/QueryRepeatedTasksModal.vue

@@ -1,50 +1,50 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref } from 'vue'
-import { useConfig } from "@/store/modules/asideConfig";
+import { useConfig } from '@/store/modules/asideConfig'
 
 const emit = defineEmits<{
-  (e: "closeCallback", value: any);
+  (e: 'closeCallback', value: any)
-}>();
+}>()
 
-const show = ref(false);
+const show = ref(true)
 
 const stys = {
-  width: "424px",
+  'width': '424px',
-  height: "232px",
+  'height': '232px',
-  "--n-padding-bottom": "20px",
+  '--n-padding-bottom': '20px',
-  "--n-padding-left": "0px",
+  '--n-padding-left': '0px',
-  background:
+  'background':
-    "linear-gradient(132deg, rgba(255, 255, 255, 0.32) 21%, rgba(152, 172, 255, 0.14) 100%)",
+    'linear-gradient(132deg, rgba(255, 255, 255, 0.32) 21%, rgba(152, 172, 255, 0.14) 100%)',
-  "border-radius": "4px",
+  'border-radius': '4px',
-  "box-shadow": "0px 12px 48px 16px rgba(0, 0, 0, 0.03)",
+  'box-shadow': '0px 12px 48px 16px rgba(0, 0, 0, 0.03)',
-  "backdrop-filter": " blur(10px)",
+  'backdrop-filter': ' blur(10px)',
-};
+}
 
 function showModal() {
-  show.value = true;
+  show.value = true
 }
 
 function closeModal() {
-  show.value = false;
+  show.value = false
-  emit("closeCallback", true);
+  emit('closeCallback', true)
 }
 
 function closeOnlyModal() {
-  show.value = false;
+  show.value = false
 }
 
 defineExpose({
   showModal,
   closeModal,
   closeOnlyModal,
-});
+})
 
-const configStore = useConfig();
+const configStore = useConfig()
-const percent = ref(0);
+const percent = ref(0)
 
 configStore.$subscribe(() => {
-  percent.value = configStore.getTimeNum;
+  percent.value = configStore.getTimeNum
-});
+})
 </script>
 
 <template>
@@ -58,13 +58,13 @@ configStore.$subscribe(() => {
       <svg-icon
         size="15"
         name="close"
-        @click="closeModal"
         style="position: absolute; right: 15.7px; top: 6px; cursor: pointer"
+        @click="closeModal"
       />
       <div class="wrapper">
         <svg-icon size="90" name="robot2" />
-        <span style="margin-top: 24px">正在查重中</span>
       </div>
+      <span class="span_box">正在查重中</span>
       <div style="padding: 0 20px">
         <n-progress type="line" :percentage="percent" :show-indicator="false" />
       </div>
@@ -74,10 +74,22 @@ configStore.$subscribe(() => {
 
 <style lang="less" scoped>
 .wrapper {
+  width: 100%;
+  height: 95px;
   display: flex;
-  height: 100%;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
+.span_box {
+  display: flex;
+  justify-content: center;
+}
+.n-modal {
+  // 要求360*157  上下内边距为20px
+  width: 360px !important;
+  height: 157px !important;
+}
+.n-modal > .n-card > .n-card__content:first-child {
+  --n-padding-top: 16px !important;
+}
 </style>