From 04188aae83fd552e74b46439c85f564260d4e510 Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Fri, 15 May 2026 15:04:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(ads/compliance/tencent):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E8=A7=86=E9=A2=91=E9=A2=84=E8=A7=88=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将原先的播放图标预览替换为视频缩略图预览，添加播放遮罩层并优化 hover 交互效果，无预览地址时仍显示原播放图标
---
 src/views/ads/compliance/tencent/index.vue | 45 +++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/views/ads/compliance/tencent/index.vue b/src/views/ads/compliance/tencent/index.vue
index 1b36340..10cbf66 100644
--- a/src/views/ads/compliance/tencent/index.vue
+++ b/src/views/ads/compliance/tencent/index.vue
@@ -142,7 +142,18 @@
 								<el-table-column label="预览" width="220">
 									<template #default="scope">
 										<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>
 									</template>
 								</el-table-column>
@@ -876,6 +887,38 @@ onMounted(() => {
 	border-radius: 4px;
 	color: #fff;
 	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 {