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

components-diy/diy-channel-list.vue

@@ -22,6 +22,7 @@
 							:show-play-btn="value.showPlayBtn"
 							:cover-style="value.coverStyle"
 							:play-btn-style="value.playBtnStyle"
+							:aspect-ratio="value.aspectRatio"
 						/>
 					</view>
 				</view>
@@ -41,6 +42,7 @@
 					:show-play-btn="value.showPlayBtn"
 					:cover-style="value.coverStyle"
 					:play-btn-style="value.playBtnStyle"
+					:aspect-ratio="value.aspectRatio"
 				/>
 			</view>
 		</view>
@@ -60,6 +62,7 @@
 						:show-play-btn="value.showPlayBtn"
 						:cover-style="value.coverStyle"
 						:play-btn-style="value.playBtnStyle"
+						:aspect-ratio="value.aspectRatio"
 					/>
 				</view>
 			</view>
@@ -93,6 +96,7 @@ export default {
 			 * @property {number} bottomAroundRadius - 底部圆角半径
 			 * @property {Object} ornament - 装饰效果配置
 			 * @property {number} titleLineClamp - 标题显示行数
+			 * @property {string} aspectRatio - 视频比例，可选值：16:9, 3:4
 			 * @property {boolean} showPlayBtn - 是否显示播放按钮
 			 * @property {Object} coverStyle - 视频封面图样式
 			 * @property {Object} playBtnStyle - 播放按钮样式

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;

components-diy/js/wechat-channel.js

@@ -169,7 +169,7 @@ export const wechatChannelUtil = {
 			uni.showToast({
 				title: [errorMsg, ...otherMsgs].join('\n'),
 				icon: 'none',
-				duration: 5000
+				duration: 2000
 			});
 		}
 		showErrorToast();

pages_tool/contact/contact.vue

@@ -100,8 +100,9 @@
                     <view class="view_channel_container" v-if="showChannelListDiy && channelList.length > 0">
                         <diy-channel-list :value="{
                             showStyle: 'fixed',
-                            rowCount: 1,
+                            rowCount: 2,
                             list: channelList,
+                            aspectRatio: '3:4',
                         }" @channel-video-click-play="onChannelVideoClickPlay"/>
                     </view>