mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-13 09:28:14 +08:00
🐛 修复一些问题
*无法实例化多个Artplayer *生成图 div 无实际占位
This commit is contained in:
@@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="tp-vod-box">
|
<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">
|
<div class="tp-vod-cover">
|
||||||
<img alt="cover" :src="props.data.insert.vod.cover" />
|
<img alt="cover" :src="props.data.insert.vod.cover" />
|
||||||
<img src="/source/UI/video_play.svg" alt="icon" />
|
<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 () => {
|
onMounted(async () => {
|
||||||
const option: Option = {
|
const option: Option = {
|
||||||
container: ".tp-vod-container",
|
id: props.data.insert.vod.id.toString(),
|
||||||
|
container: `#tp-vod-${props.data.insert.vod.id}`,
|
||||||
url: "",
|
url: "",
|
||||||
poster: props.data.insert.vod.cover,
|
poster: props.data.insert.vod.cover,
|
||||||
type: "",
|
type: "",
|
||||||
@@ -125,14 +130,16 @@ function getVodTime(): string {
|
|||||||
<style lang="css" scoped>
|
<style lang="css" scoped>
|
||||||
.tp-vod-box {
|
.tp-vod-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
max-width: 100%;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tp-vod-container {
|
.tp-vod-container {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 450px;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tp-vod-cover {
|
.tp-vod-cover {
|
||||||
|
|||||||
Reference in New Issue
Block a user