From 57111a00c26a17b2cbd64d9127e1ac4521e52d14 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 12 Jan 2026 11:56:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=A7=86=E9=A2=91=E5=8F=B7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6):=20=E8=AE=A9=E5=8E=9F=E7=94=9Fchannel-video=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=B8=8E=E6=99=AE=E9=80=9A?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E7=BB=84=E4=BB=B6=E6=A8=A1=E5=BC=8F=E4=BF=9D?=
 =?UTF-8?q?=E6=8C=81=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-channel-video.vue | 82 ++++++++++++++++++++--------
 1 file changed, 60 insertions(+), 22 deletions(-)

diff --git a/components-diy/diy-channel-video.vue b/components-diy/diy-channel-video.vue
index 2fd4d5b..7aa5ddd 100644
--- a/components-diy/diy-channel-video.vue
+++ b/components-diy/diy-channel-video.vue
@@ -1,18 +1,28 @@
 <template>
 	<view class="channel-video" :class="{ 'list-mode': listMode }">
 		<!-- 嵌入式视频播放 -->
-		<native-component v-if="canUseEmbedMode">
-			<!-- #ifdef MP-WEIXIN -->
-			<!-- 嵌入式视频播放组件 -->
-			<channel-video 
-				:feed-id="value.feedId" 
-				:finder-user-name="value.finderUserName" 
-				:feed-token="value.feedToken" 
-				:auto-play="autoPlay"
-				:style="embedVideoStyle">
-			</channel-video>
-			<!-- #endif -->
-		</native-component>
+		<view v-if="canUseEmbedMode" class="embed-video-container">
+			<view class="video-cover-wrap" :style="coverStyle">
+				<!-- #ifdef MP-WEIXIN -->			
+				<native-component>
+					<!-- 嵌入式视频播放组件 -->
+					<channel-video 
+						:feed-id="value.feedId" 
+						:finder-user-name="value.finderUserName" 
+						:feed-token="value.feedToken" 
+						:auto-play="autoPlay"
+						>
+					</channel-video>
+				</native-component>
+				<!-- #endif -->
+			</view>
+			<view class="video-info">
+				<!-- 视频标题，支持多行显示控制 -->
+				<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}</view>
+				<!-- 视频统计信息，非列表模式下显示 -->
+				<view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
+			</view>
+		</view>
 		
 		<!-- 跳转式视频播放 -->
 		<view v-else @tap="playVideo" class="video-container">
@@ -148,16 +158,7 @@ export default {
 			// #endif
 			return ''
 		},
-		/**
-		 * 嵌入式视频样式
-		 * @returns {Object}
-		 */
-		embedVideoStyle() {
-			return {
-				width: '100%',
-				height: `${this.listMode ? 180 : 320}rpx`
-			};
-		},
+
 		/**
 		 * 视频号用户名，适用于微信视频号
 		 * 优先使用 finderUserName，其次使用 channelName
@@ -237,6 +238,16 @@ export default {
 	height: 100%;
 }
 
+/**
+ * 嵌入式视频容器样式
+ * 与视频容器样式保持一致
+ */
+.embed-video-container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
 /**
  * 视频封面容器
  * 采用 16:9 比例的响应式高度
@@ -478,4 +489,31 @@ export default {
 		margin-left: 3rpx;
 	}
 }
+
+/**
+ * 原生组件样式控制
+ * 确保 native-component 和 channel-video 正确填充容器
+ */
+native-component {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+}
+
+/**
+ * channel-video 组件样式控制
+ * 避免受到 wx-channel-video 全局样式的影响
+ */
+channel-video {
+	width: 100%;
+	height: 100%;
+	min-width: 100%;
+	min-height: 100%;
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: cover;
+}
 </style>
\ No newline at end of file