弹窗

src/assets/ts/antd.ts

@@ -4,6 +4,7 @@ import {
     Input,
     Button,
     Radio,
+    Modal,
 } from 'ant-design-vue';
 
 export default function registerGlobComp(app: App) {
@@ -11,4 +12,5 @@ export default function registerGlobComp(app: App) {
         .use(Form)
         .use(Input)
         .use(Radio)
+        .use(Modal)
 }

src/components/body-d-right/oneR.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
+  <div class="terminal-container">
-    <public-title title="健康终端报警"/>
+    <public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog"/>
     <div class="inner">
       <vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
         <div class="item" v-for="(item, index) in policeLists" :key="index">
@@ -13,11 +13,17 @@
         </div>
       </vue3-seamless-scroll>
     </div>
+    <Dialog :openVis="open" width="40%" title="健康终端报警列表" @close="handleClose">
+      <template #container>
+        <div>34534</div>
+      </template>
+    </Dialog>
   </div>
 </template>
 <script setup lang="ts">
   import { ref } from 'vue';
   import PublicTitle from "../publicTitle.vue";
+  import Dialog from '../dialog/Dialog.vue';
   import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
   const policeLists = ref([
     {
@@ -51,10 +57,17 @@
       time: '2023-8-25',
     }
   ])
+  const open = ref<boolean>(false);
 
+  function handleDialog(){
+    open.value = true
+  }
+  function handleClose(){
+    open.value = false
+  }
 </script>
 <style scoped lang="less">
-.inner {
+  .inner {
   height: calc(100% - 40px);
   display: flex;
   align-items: center;

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>
+<script setup lang="ts">
-export default {
+ import { defineProps, defineEmits } from 'vue';
-  name: "Dialog"
+  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>