|
|
@@ -0,0 +1,86 @@
|
|
|
+<template>
|
|
|
+ <div class="vpm-overlay" @click.self="$emit('close')">
|
|
|
+ <div class="vpm-dialog">
|
|
|
+ <button class="vpm-close" @click="$emit('close')" aria-label="关闭">
|
|
|
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
|
+ stroke-width="2" stroke-linecap="round">
|
|
|
+ <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+ <div class="vpm-title">{{ title }}</div>
|
|
|
+ <video
|
|
|
+ class="vpm-video"
|
|
|
+ :src="videoUrl"
|
|
|
+ controls
|
|
|
+ autoplay
|
|
|
+ playsinline
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+defineProps<{ title: string; videoUrl: string }>()
|
|
|
+defineEmits<{ (e: 'close'): void }>()
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.vpm-overlay {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.55);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 1100;
|
|
|
+}
|
|
|
+
|
|
|
+.vpm-dialog {
|
|
|
+ position: relative;
|
|
|
+ width: min(80%, 720px);
|
|
|
+ background: #000;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.vpm-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ left: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
|
|
+ z-index: 1;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.vpm-close {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 8px;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: none;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.75);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.vpm-video {
|
|
|
+ width: 100%;
|
|
|
+ aspect-ratio: 16 / 9;
|
|
|
+ display: block;
|
|
|
+ background: #000;
|
|
|
+}
|
|
|
+</style>
|
jimmylee