"修改弹框问题及其样式"

src/renderer/src/assets/styles/global.css

@@ -644,3 +644,6 @@ img {
 .el-message--error svg {
   color: rgba(241, 108, 85, 1) !important;
 }
+.el-popup-parent--hidden{
+  width: 100% !important;
+}

src/renderer/src/views/TS/list.vue

@@ -112,6 +112,7 @@ import type {SortBy} from 'element-plus'
 import {TsApi} from "../../api/ts";
 import NewPlan from "./newPlan.vue"
 
+const eventBus: any = inject('bus')
 const {ipcRenderer} = require('electron')
 const router = useRouter()
 let searchParams = ref({
@@ -192,8 +193,9 @@ const delPlan = (id) => {
   })
 }
 const addPlan = () => {
-  $(".newPlan")[0].style.display = 'block'
+  // $(".newPlan")[0].style.display = 'block'
-
+  // $(".el-overlay")[0].style.display = 'block'
+  eventBus.emit('openAddPlan', true)
 }
 /*
 const generateData = (

src/renderer/src/views/TS/newPlan.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="newPlan">
-    <el-dialog v-model="isShowPup" :modal="true" draggable :close-on-click-modal="false">
+    <el-dialog v-model="isShowPup" draggable :close-on-click-modal="false" :modal="true">
       <template #header>
         <div class="set_pup_header">
           <div class="system_title">
@@ -48,8 +48,9 @@ import {ref, reactive,} from "vue";
 import {ElMessage} from 'element-plus'
 import {TsApi} from "../../api/ts";
 
+const eventBus: any = inject('bus')
 const emit = defineEmits(['addCallback']);
-const isShowPup = ref(true)
+const isShowPup = ref(false)
 const sizeForm = reactive({
   name: '',
   // date1: '',
@@ -68,6 +69,15 @@ const addPlan = () => {
     $(".newPlan")[0].style.display = "none"
   })
 }
+eventBus.on('openAddPlan', (data, cb, type) => {
+  // selectCallback = cb
+  // addType.value = type
+  isShowPup.value = data
+  // if (data) {
+  //   getModelList()
+  //   getSetting()
+  // }
+})
 const close = () => {
 
   isShowPup.value = false
@@ -80,7 +90,38 @@ defineExpose({
 
 <style lang="scss" scoped>
 .newPlan {
-  display: none;
+  width: 40vw;
+  height: 50vh;
+
+  :deep(.el-dialog) {
+    background: linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(var(--color-base1), 0) 100%),
+    rgba(0, 0, 0, 0.6);
+    border: 1px solid var(--color-border1);
+    padding-left: 0 !important;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 0 !important;
+  }
+
+  :deep(.el-dialog__headerbtn) {
+    height: 30px;
+    width: 30px;
+    border-bottom-left-radius: 80%;
+    background-color: rgba(var(--color-base1), 0.5);
+
+    &:hover {
+      background-color: rgba(var(--color-base1), 1);
+
+      .el-dialog__close {
+        color: rgba(0, 66, 66, 1); // 悬停时改变关闭图标为红色
+      }
+    }
+  }
+
+  :deep(.el-dialog__headerbtn .el-dialog__close) {
+    color: #f00;
+  }
 
   .set_detail {
     width: 90%;