chore(视频号组件): 支持2-3-4列布局

components-diy/diy-channel-list.vue

@@ -10,7 +10,7 @@
 			:style="swiperHeight"
 			class="channel-swiper">
 			<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
-				<view class="swiper-slide-content">
+				<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
 					<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
 						<!-- 视频号视频卡片，轮播模式 -->
 						<diy-channel-video 
@@ -46,7 +46,7 @@
 		</view>
 
 		<!-- 其他布局模式（如滚动布局） -->
-		<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
+		<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle, 'row1-of' + value.rowCount]"
 			:scroll-x="value.showStyle == 'singleSlide'">
 			<view class="uni-scroll-view-content">
 				<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
@@ -272,6 +272,7 @@ export default {
 	box-sizing: border-box;
 
 	.channel-item {
+		// 默认 3 列布局
 		flex: 0 0 calc(33.3333333% - 10rpx);
 		box-sizing: border-box;
 
@@ -294,6 +295,21 @@ export default {
 			}
 		}
 	}
+
+	// 4 列布局
+	&.row1-of4 {
+		.channel-item {
+			flex: 0 0 calc(25% - 12rpx);
+
+			&:nth-child(3n) {
+				margin-right: 16rpx;
+			}
+
+			&:nth-child(4n) {
+				margin-right: 0;
+			}
+		}
+	}
 }
 
 /**
@@ -326,6 +342,7 @@ export default {
 		display: flex;
 		flex-direction: column;
 		box-sizing: border-box;
+		// 默认 3 列布局
 		flex: 0 0 calc(33.3333333% - 10rpx);
 
 		&:nth-child(3n) {
@@ -347,6 +364,21 @@ export default {
 			}
 		}
 	}
+
+	// 4 列布局
+	&.row1-of4 {
+		.channel-nav-item {
+			flex: 0 0 calc(25% - 12rpx);
+
+			&:nth-child(3n) {
+				margin-right: 16rpx;
+			}
+
+			&:nth-child(4n) {
+				margin-right: 0;
+			}
+		}
+	}
 }
 
 /**
@@ -373,6 +405,7 @@ export default {
 		box-sizing: border-box;
 
 		.channel-item {
+			// 默认 3 列布局
 			flex: 0 0 calc(33.3333333% - 10rpx);
 			box-sizing: border-box;
 
@@ -395,6 +428,21 @@ export default {
 				}
 			}
 		}
+
+		// 轮播模式下的 4 列布局
+		&.row1-of4 {
+			.channel-item {
+				flex: 0 0 calc(25% - 12rpx);
+
+				&:nth-child(3n) {
+					margin-right: 16rpx;
+				}
+
+				&:nth-child(4n) {
+					margin-right: 0;
+				}
+			}
+		}
 	}
 }
 
@@ -411,6 +459,7 @@ export default {
 
 		.channel-item,
 		.channel-nav-item {
+			// 默认 3 列布局
 			flex: 0 0 calc(33.3333333% - 8rpx);
 
 			&:nth-child(3n) {
@@ -433,6 +482,22 @@ export default {
 				}
 			}
 		}
+
+		// 小屏幕上的 4 列布局
+		&.row1-of4 {
+			.channel-item,
+			.channel-nav-item {
+				flex: 0 0 calc(25% - 9rpx);
+
+				&:nth-child(3n) {
+					margin-right: 12rpx;
+				}
+
+				&:nth-child(4n) {
+					margin-right: 0;
+				}
+			}
+		}
 	}
 
 	// 小屏幕上的单滑动模式