fix(视频号组件): 让原生channel-video 组件样式与普通模式组件模式保持一致

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>