From 96049bbcaecf251dd767e426fa2cf19cd551721c Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Tue, 23 Dec 2025 11:22:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(diy-article):=20=20=E6=94=AF=E6=8C=81diy-a?=
 =?UTF-8?q?rticle=20=E7=BB=84=E4=BB=B6=E5=86=85=E7=9A=84=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E5=9E=82=E7=9B=B4=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy-components/diy-article.vue | 72 ++++++++++++++---------
 1 file changed, 45 insertions(+), 27 deletions(-)

diff --git a/components/diy-components/diy-article.vue b/components/diy-components/diy-article.vue
index 7688db8..30aec58 100644
--- a/components/diy-components/diy-article.vue
+++ b/components/diy-components/diy-article.vue
@@ -2,22 +2,30 @@
 	<x-skeleton data-component-name="diy-article" type="list" :loading="loading" :configs="skeletonConfig">
 		<view class="article-wrap" :style="warpCss">
 			<view :class="['list-wrap', value.style]" :style="warpCss">
-				<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :style="itemCss">
-					<view class="article-img">
-						<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
-					</view>
-					<view class="info-wrap">
-						<text class="title">{{ item.article_title }}</text>
-						<text class="desc" style="color:#888;font-size: 24rpx; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">{{ item.article_abstract }}</text>
-						<view class="read-wrap">
-							<block v-if="item.category_name">
-								<text class="category-icon"></text>
-								<text>{{ item.category_name }}</text>
-							</block>
-							<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
+				<!-- 自动垂直滚动 -->
+				<swiper class="auto-scroll-swiper" vertical="true" autoplay="true" circular="true" 
+					interval="3000" duration="500" display-multiple-items="3">
+					<swiper-item v-for="(item, index) in list" :key="index" @click="toDetail(item)">
+						<view class="swiper-item-content">
+							<view :class="['item', value.ornament.type]" :style="itemCss">
+								<view class="article-img">
+									<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
+								</view>
+								<view class="info-wrap">
+									<text class="title">{{ item.article_title }}</text>
+									<text class="desc" style="color:#888;font-size: 24rpx; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">{{ item.article_abstract }}</text>
+									<view class="read-wrap">
+										<block v-if="item.category_name">
+											<text class="category-icon"></text>
+											<text>{{ item.category_name }}</text>
+										</block>
+										<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
+									</view>
+								</view>
+							</view>
 						</view>
-					</view>
-				</view>
+					</swiper-item>
+				</swiper>
 			</view>
 		</view>
 	</x-skeleton>
@@ -33,18 +41,18 @@
 			}
 		},
 		data() {
-			return {
-				list: [],
-				loading: true,
-				skeletonConfig: {
-					gridRows: 1,
-					gridRowsGap: '40rpx',
-					headWidth: '160rpx',
-					headHeight: '160rpx',
-					textRows: 2
-				}
-			};
-		},
+		return {
+			list: [],
+			loading: true,
+			skeletonConfig: {
+				gridRows: 1,
+				gridRowsGap: '40rpx',
+				headWidth: '160rpx',
+				headHeight: '160rpx',
+				textRows: 2
+			}
+		};
+	},
 		created() {
 			this.getList();
 		},
@@ -123,10 +131,20 @@
 	.article-wrap {
 		.list-wrap {
 			&.style-1 {
+				.auto-scroll-swiper {
+					height: 480rpx;
+					width: 100%;
+				}
+				.swiper-item-content {
+					width: 100%;
+					box-sizing: border-box;
+				}
 				.item {
 					display: flex;
 					padding: 20rpx;
 					margin-top: 24rpx;
+					height: 120rpx;
+					box-sizing: border-box;
 
 					&:first-of-type {
 						margin-top: 0;