弹窗

src/components/dialog/Dialog.vue

@@ -1,13 +1,63 @@
 <template>
-
+  <a-modal
+      v-model:visible="props.openVis"
+      :title="props.title"
+      :width="props.width"
+      :maskClosable="true"
+      @cancel="handleCancel"
+  >
+    <slot name="container"></slot>
+    <template #footer></template>
+  </a-modal>
 </template>
 
-<script>
-export default {
-  name: "Dialog"
-}
+<script setup lang="ts">
+ import { defineProps, defineEmits } from 'vue';
+  const emit = defineEmits(['close'])
+  const props = defineProps({
+      width:{
+        type: String
+      },
+      openVis:{
+        type:Boolean
+      },
+      title:{
+        type:String
+      }
+  })
+  function handleCancel(){
+    emit('close')
+  }
 </script>
 
-<style scoped>
+<style lang="less">
+  .ant-modal-header{
+    position: relative;
+    background: linear-gradient(270deg, rgba(106,112,124,0.4) 0%, rgba(106,112,124,0) 70%, rgba(106,112,124,0) 100%);
+    opacity: 1;
+    border: 1px solid;
+    border-image: linear-gradient(270deg, rgba(217.0000022649765, 231.00000143051147, 255, 0.5), rgba(217.0000022649765, 231.00000143051147, 255, 0)) 1 1;
+    &:before {
+      position: absolute;
+      content: '';
+      width: 7px;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background-color: #45A2FF;
+    }
+  }
+  .ant-modal-title{
+    color: #ffffff!important;
+  }
+  .ant-modal-header,.ant-modal-content{
+    background-color: transparent!important;
+  }
+  .ant-modal-body{
+    padding: 0!important;
+  }
+  :deep(.anticon){
+    color: #999999;
+  }
 
 </style>