From bf8e177c3034c257a421596bfdabc0cb15010ec5 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 12 Jan 2026 13:47:13 +0800
Subject: [PATCH] =?UTF-8?q?chore(=E8=A7=86=E9=A2=91=E5=8F=B7=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6):=20=E6=94=AF=E6=8C=812-3-4=E5=88=97=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-channel-list.vue | 69 ++++++++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/components-diy/diy-channel-list.vue b/components-diy/diy-channel-list.vue
index da14a88..dc65bf7 100644
--- a/components-diy/diy-channel-list.vue
+++ b/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;
+				}
+			}
+		}
 	}
 
 	// 小屏幕上的单滑动模式