feat(ads/compliance/tencent): 优化视频预览展示效果

将原先的播放图标预览替换为视频缩略图预览,添加播放遮罩层并优化 hover 交互效果,无预览地址时仍显示原播放图标
This commit is contained in:
2026-05-15 15:04:36 +08:00
parent f1cfa21118
commit 04188aae83

View File

@@ -142,7 +142,18 @@
<el-table-column label="预览" width="220"> <el-table-column label="预览" width="220">
<template #default="scope"> <template #default="scope">
<div class="video-preview" @click="previewMedia(scope.row.previewUrl, 'video')"> <div class="video-preview" @click="previewMedia(scope.row.previewUrl, 'video')">
<el-icon><VideoPlay style="font-size: 32px" /></el-icon> <video
v-if="scope.row.previewUrl"
:src="scope.row.previewUrl"
class="video-thumbnail"
poster="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
preload="metadata"
@loadedmetadata="(e) => ((e.target as HTMLVideoElement).currentTime = 0)"
></video>
<el-icon v-else><VideoPlay style="font-size: 32px" /></el-icon>
<div class="play-overlay">
<el-icon><VideoPlay style="font-size: 24px" /></el-icon>
</div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@@ -876,6 +887,38 @@ onMounted(() => {
border-radius: 4px; border-radius: 4px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
position: relative;
overflow: hidden;
}
.video-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
}
.play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: opacity 0.3s;
}
.video-preview:hover .play-overlay {
opacity: 1;
}
.video-preview:not(:hover) .play-overlay {
opacity: 0.7;
} }
.description-text { .description-text {