类型：开发

描述：

src/components/ImageDialog/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="dialog">
+    <el-dialog
+      v-model="modelValue"
+      align-center
+      :modal="false"
+      :show-close="false"
+      :z-index="9999"
+      destroy-on-close
+    >
+      <div class="dialog-box">
+        <div class="video">
+          <img style="width: 100%;height: 100%;" :src="src" />
+        </div>
+      </div>
+      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+
+  const props = defineProps({
+    src: {
+      type: String,
+      default: ''
+    }
+  })
+  let modelValue = defineModel()
+  watch(
+    () =>modelValue.value,
+    (val) => {
+
+    },
+    {
+      immediate: true
+    }
+  )
+  const handleClose = () => {
+    modelValue.value = false
+  }
+  onMounted(()=>{
+
+  })
+</script>
+
+<style scoped lang="scss">
+  .dialog {
+    z-index: 9999;
+    .action {
+      &-box {
+        margin-top: vh(16);
+        gap: vw(20);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      &-item {
+        padding: vw(16);
+        display: flex;
+        align-items: center;
+        background: #0a4190;
+        border-radius: vw(8);
+        > img {
+          cursor: pointer;
+          width: vw(34);
+          height: auto;
+        }
+        > span {
+          margin: 0 vw(16);
+          font-weight: 400;
+          font-size: vw(16);
+          color: #ffffff;
+        }
+        .pause {
+          margin: 0 vw(10);
+        }
+      }
+    }
+    .none {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: vw(1814);
+      height: vw(980);
+      color: #fff;
+      font-weight: bold;
+      font-size: vw(30);
+      transform: translate(-50%, -50%);
+      z-index: 999;
+    }
+    :deep(.el-dialog) {
+      position: relative;
+      width: vw(1940);
+      background: transparent !important;
+    }
+    .dialog-box {
+      padding: vw(40) vw(30) vw(30) vw(30);
+      background-image: url('@/assets/images/video-bg.png');
+      background-size: 100% 100%;
+    }
+    :deep(.el-dialog__header) {
+      padding-bottom: 0 !important;
+    }
+    .video {
+      width: vw(1814);
+      height: vw(920);
+      object-fit: contain;
+      background-color: #062b57;
+    }
+    .close {
+      cursor: pointer;
+      position: absolute;
+      right: vw(70);
+      top: vw(80);
+      width: vw(60);
+      z-index: 9999;
+    }
+  }
+</style>