From 3883f9880ac96ac7f50d34b2c7e8d6958255a863 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 7 Dec 2023 13:51:08 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

*无法实例化多个Artplayer
*生成图 div 无实际占位
---
 src/components/post/tp-vod.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/post/tp-vod.vue b/src/components/post/tp-vod.vue
index 17d81ee0..7ad982f7 100644
--- a/src/components/post/tp-vod.vue
+++ b/src/components/post/tp-vod.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="tp-vod-box">
-    <div class="tp-vod-container" data-html2canvas-ignore></div>
+    <div
+      class="tp-vod-container"
+      data-html2canvas-ignore
+      :id="`tp-vod-${props.data.insert.vod.id}`"
+    ></div>
     <div class="tp-vod-cover">
       <img alt="cover" :src="props.data.insert.vod.cover" />
       <img src="/source/UI/video_play.svg" alt="icon" />
@@ -48,7 +52,8 @@ console.log("tpVod", props.data.insert.vod.id, toRaw(props.data).insert.vod);
 
 onMounted(async () => {
   const option: Option = {
-    container: ".tp-vod-container",
+    id: props.data.insert.vod.id.toString(),
+    container: `#tp-vod-${props.data.insert.vod.id}`,
     url: "",
     poster: props.data.insert.vod.cover,
     type: "",
@@ -125,14 +130,16 @@ function getVodTime(): string {
 <style lang="css" scoped>
 .tp-vod-box {
   position: relative;
+  max-width: 100%;
   margin: 10px auto;
+  aspect-ratio: 16 / 9;
 }
 
 .tp-vod-container {
   overflow: hidden;
   max-width: 100%;
-  height: 450px;
   border-radius: 10px;
+  aspect-ratio: 16 / 9;
 }
 
 .tp-vod-cover {