fixed

pages/blog/bloginfo.vue

@@ -41,6 +41,22 @@
 							<rich-text :nodes="contentDate" class="ql-editor"></rich-text>
 						</view>
 				</view>
+				<!-- 截图展示 -->
+				<view v-if="blogInfo.picList && blogInfo.picList.length > 0" class="titel-felx">
+					<view class="time-img">
+						<image class="ui-img" src="https://img.yidaima.cn/feastwenjian.svg" mode=""></image>
+					</view>
+					<view class="titel-h-go">
+						项目截图
+					</view>
+				</view>
+				<view v-if="blogInfo.picList && blogInfo.picList.length > 0" class="screenshot-view">
+					<view class="screenshot-list">
+						<view v-for="(item, index) in blogInfo.picList" :key="index" class="screenshot-item" @click="previewImage(index)">
+							<image class="screenshot-img" :src="item" mode="aspectFill"></image>
+						</view>
+					</view>
+				</view>
 				<!-- 猜你想搜 -->
 				<view class="titel-felx">
 					<view class="time-img">
@@ -428,14 +444,21 @@
 						}
 						
 						if (this.timer) {
-							clearInterval(this.timer);
+								clearInterval(this.timer);
-							this.timer = null;
+								this.timer = null;
+							}
 						}
-					}
+					}, 1000);
-				}, 1000);
+				},
+				// 图片预览
+				previewImage(index) {
+					uni.previewImage({
+						urls: this.blogInfo.picList,
+						current: index
+					});
+				}
 			},
 		}
-	}
 </script>
 
 <style>
@@ -595,6 +618,28 @@
 		word-wrap: break-word;
 	}
 
+	.screenshot-view {
+		margin: 20upx;
+	}
+
+	.screenshot-list {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+
+	.screenshot-item {
+		width: 48%;
+		margin-bottom: 20upx;
+		border-radius: 10upx;
+		overflow: hidden;
+	}
+
+	.screenshot-img {
+		width: 100%;
+		height: 200upx;
+	}
+
 	.list-li-left-describe {
 		text-overflow: ellipsis;
 		display: -webkit-box;