提交

pages/article/index.vue

@@ -12,9 +12,13 @@
 			<!-- <view class="">
 				{{item.foreword}}
 			</view> -->
-			<view class="text">
+			<view class="text" :class="item.toggle?'':'shadow'">
 				<rich-text :nodes="item.content"></rich-text>
 			</view>
+			<view class="row-center more" :class="item.toggle?'':'shadow'" @click="toggleReadMore(index)">
+				{{item.toggle?'收起':'展开'}}
+				<uni-icons :type="item.toggle?'top':'bottom'" color="#317afd" size="16"></uni-icons>
+			</view>
 		</view>
 		<ui-empty v-if="articleList.length==0" text="暂无分析信息"></ui-empty>
 	</view>
@@ -78,6 +82,12 @@
 				this.articleList = [...this.articleList, ...data];
 				this.total = total_num ?? 0;
 			},
+			// 切换文章状态
+			toggleReadMore(index) {
+				let article = this.articleList[index];
+				article.toggle = !article.toggle;
+				this.$set(this.articleList, index, article);
+			}
 		}
 	}
 </script>
@@ -85,6 +95,7 @@
 <style lang="scss">
 	.article-item {
 		padding: 26rpx 24rpx;
+		overflow: hidden;
 
 		.title {
 			font-size: $font-size-title;
@@ -95,9 +106,30 @@
 
 		.text {
 			margin-top: 10rpx;
+			margin-bottom: 10rpx;
 			font-size: $font-size-subtitle;
 			color: $color-subtitle;
 			line-height: $line-height-subtitle;
+			overflow: hidden;
+
+			&.shadow {
+				max-height: 200rpx;
+			}
+		}
+
+
+
+		.more {
+			font-size: 26rpx;
+			color: $color-primary;
+			text-align: center;
+
+			&.shadow {
+				position: relative;
+				background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%);
+				padding-top: 160rpx;
+				margin-top: -160rpx;
+			}
 		}
 
 		.time {