chore(视频号组件): 不仅支持16：9的封面，还支持3：4的

components-diy/diy-channel-video.vue

@@ -2,7 +2,7 @@
 	<view class="channel-video" :class="{ 'list-mode': listMode }">
 		<!-- 嵌入式视频播放 -->
 		<view v-if="canUseEmbedMode" class="embed-video-container">
-			<view class="video-cover-wrap" :style="coverStyle">
+			<view class="video-cover-wrap" :class="videoCoverClass" :style="computedCoverStyle">
 				<!-- #ifdef MP-WEIXIN -->			
 				<native-component>
 					<!-- 嵌入式视频播放组件 -->
@@ -12,7 +12,7 @@
 						:feed-token="value.feedToken" 
 						:auto-play="autoPlay"
 						>
-					</channel-video>
+						</channel-video>
 				</native-component>
 				<!-- #endif -->
 			</view>
@@ -26,7 +26,7 @@
 		
 		<!-- 跳转式视频播放 -->
 		<view v-else @click.stop="playVideo" class="video-container">
-			<view class="video-cover-wrap" :style="coverStyle">
+			<view class="video-cover-wrap" :class="videoCoverClass" :style="computedCoverStyle">
 				<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
 				<view class="channel-play-btn" v-if="showPlayBtn" :style="playBtnStyle">
 					<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
@@ -106,6 +106,17 @@ export default {
 			type: Boolean,
 			default: true
 		},
+		/**
+		 * 视频比例
+		 * @type {string}
+		 * @default '16:9'
+		 * @options '16:9', '3:4'
+		 */
+		aspectRatio: {
+			type: String,
+			default: '16:9',
+			validator: (value) => ['16:9', '3:4'].includes(value)
+		},
 		/**
 		 * 视频封面图样式
 		 * 采用 16:9 比例的响应式高度
@@ -143,7 +154,7 @@ export default {
 		 */
 		canUseEmbedMode() {
 			// #ifdef MP-WEIXIN
-			const enableEmbedMode =  Boolean(this.value?.embedMode) 
+			const enableEmbedMode = Boolean(this.value?.embedMode)
 				&& Boolean(this.value?.feedToken)
 				&& wechatChannelUtil.isEmbedModeSupported();
 			console.log('enableEmbedMode', enableEmbedMode);
@@ -160,6 +171,22 @@ export default {
 			return wechatChannelConfig.icon.playIcon
 			// #endif
 			return ''
+		},
+		/**
+		 * 计算视频封面类名
+		 * 根据环境和宽高比生成适当的 CSS 类
+		 * @returns {Array}
+		 */
+		videoCoverClass() {
+			const classes = [];
+			// #ifdef MP-WEIXIN
+			classes.push('mp-weixin');
+			// #endif
+			// #ifndef MP-WEIXIN
+			classes.push('h5');
+			// #endif
+			classes.push(`ratio-${this.aspectRatio.replace(':', '-')}`);
+			return classes;
 		}
 	},
 	methods: {
@@ -177,6 +204,35 @@ export default {
 <style scoped lang="scss">
 @import './css/common-channel.scss';
 
+/* 微信小程序环境样式 - 3:4 比例 */
+.video-cover-wrap.mp-weixin.ratio-3-4 {
+	width: 100%;
+	height: 400rpx;
+	position: relative;
+}
+
+/* 微信小程序环境样式 - 16:9 比例 */
+.video-cover-wrap.mp-weixin.ratio-16-9 {
+	width: 100%;
+	height: 300rpx;
+	position: relative;
+}
+
+/* H5 环境样式 - 3:4 比例 */
+.video-cover-wrap.h5.ratio-3-4 {
+	width: 100%;
+	height: 0;
+	padding-top: 133.33%;
+}
+
+/* H5 环境样式 - 16:9 比例 */
+.video-cover-wrap.h5.ratio-16-9 {
+	width: 100%;
+	height: 0;
+	padding-top: 56.25%;
+}
+
+
 /**
  * 视频卡片容器样式
  * 包含卡片基础样式、悬停效果和列表模式样式
@@ -236,12 +292,13 @@ export default {
 
 /**
  * 视频封面容器
- * 采用 16:9 比例的响应式高度
+ * 比例由 computedCoverStyle 动态控制
  */
 .video-cover-wrap {
 	position: relative;
 	width: 100%;
-	padding-top: 56.25%; /* 16:9 比例 */
+	padding-top: 56.25%;
+	/* 16:9 比例 */
 	height: 0;
 	overflow: hidden;
 	border-radius: 12rpx 12rpx 0 0;