修改：优化文章卡片样式

components/article-card/article-card.vue

@@ -1,13 +1,7 @@
 <template>
 	<view class="article-card " :class="cardType" @click="fnClickEvent('card')">
 		<view class="left">
-			<cache-image
+			<cache-image class="thumbnail" radius="6rpx" :url="$utils.checkThumbnailUrl(article.thumbnail)" :fileMd5="$utils.checkThumbnailUrl(article.thumbnail)" mode="aspectFill"></cache-image>
-				class="thumbnail"
-				radius="12rpx"
-				:url="$utils.checkThumbnailUrl(article.thumbnail)"
-				:fileMd5="$utils.checkThumbnailUrl(article.thumbnail)"
-				mode="aspectFill"
-			></cache-image>
 			<!-- <image class="thumbnail" lazy-load :src="$utils.checkThumbnailUrl(article.thumbnail)" mode="aspectFill"></image> -->
 		</view>
 		<view class="right">
@@ -33,8 +27,8 @@
 </template>
 
 <script>
-import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
+	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
-export default {
+	export default {
 		name: 'article-card',
 		components: { tmTags },
 		props: {
@@ -65,38 +59,49 @@ export default {
 				this.$emit('on-click', this.article);
 			}
 		}
-};
+	};
 </script>
 
 <style scoped lang="scss">
-.article-card {
+	.article-card {
 		display: flex;
 		box-sizing: border-box;
 		margin: 0 24rpx;
-	padding: 32rpx;
+		padding: 24rpx;
 		border-radius: 12rpx;
 		background-color: #ffff;
 		box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
 		overflow: hidden;
 		margin-bottom: 24rpx;
+
+		&.h_row_col1 {
+			display: flex;
+			align-items: center;
+		}
+
 		&.home {
 			&.h_row_col2 {
 				margin: 12rpx;
+
 				.left {
 					width: 100%;
 					height: 200rpx;
+
 					.thumbnail {
+
 						::v-deep uni-image {
 							border-radius: 6rpx 6rpx 0 0 !important;
 						}
 					}
 				}
+
 				.right {
 					.title {
 						display: flex;
 						align-items: center;
 						font-size: 26rpx;
 						font-weight: bold;
+
 						.is-top {
 							height: 36rpx;
 							margin-right: 10rpx;
@@ -105,22 +110,28 @@ export default {
 							transform: scale(0.9);
 						}
 					}
+
 					.foot {
 						justify-content: space-between;
+
 						.create-time {
 							font-size: 24rpx;
+
 							.time-label {
 								display: none;
 							}
 						}
+
 						.visits {
 							font-size: 24rpx;
 							margin-left: 0;
 						}
 					}
 				}
+
 				&.tb_text_image {
 					padding: 12rpx;
+
 					.left .thumbnail {
 						::v-deep {
 							uni-image {
@@ -129,14 +140,17 @@ export default {
 						}
 					}
 				}
+
 				&.only_text {
 					padding: 24rpx;
+
 					.right .foot {
 						.create-time {
 							.time-label {
 								display: none;
 							}
 						}
+
 						.visits {
 							font-size: 24rpx;
 						}
@@ -144,92 +158,113 @@ export default {
 				}
 			}
 		}
-	&.lr_image_text {
+
-	}
+		&.lr_image_text {}
 
 		&.lr_text_image {
 			.left {
 				order: 2;
 				padding-left: 30rpx;
 			}
+
 			.right {
 				order: 1;
 				padding-left: 0;
 			}
 		}
+
 		&.tb_image_text {
 			flex-direction: column;
 			padding: 24rpx;
+
 			.left {
 				width: 100%;
 				height: 340rpx;
+
 				.thumbnail {
 					::v-deep uni-image {
 						border-radius: 6rpx 6rpx 0 0 !important;
 					}
 				}
 			}
+
 			.right {
 				padding-left: 0;
 				padding: 24rpx 0;
 				padding-bottom: 0;
 				width: 100%;
+
 				.foot {
 					justify-content: flex-start;
+
 					.create-time {
 						.time-label {
 							display: inline-block;
 						}
 					}
+
 					.visits {
 						margin-left: 24rpx;
 					}
 				}
 			}
 		}
+
 		&.tb_text_image {
 			flex-direction: column;
+
 			.left {
 				width: 100%;
 				height: 340rpx;
 				order: 2;
 				margin-top: 24rpx;
 			}
+
 			.right {
 				padding-left: 0;
 				width: 100%;
 				order: 1;
+
 				.foot {
 					justify-content: flex-start;
+
 					.create-time {
 						.time-label {
 							display: inline-block;
 						}
 					}
+
 					.visits {
 						margin-left: 24rpx;
 					}
 				}
 			}
 		}
+
 		&.only_text {
 			padding: 36rpx;
+
 			.left {
 				display: none;
 			}
+
 			.right {
 				padding-left: 0;
+
 				.content {
 					margin-top: 24rpx;
 				}
+
 				.foot {
 					justify-content: flex-start;
 					margin-top: 24rpx;
+
 					.create-time {
 						.time-label {
 							display: inline-block;
 						}
 					}
+
 					.visits {
 						margin-left: 24rpx;
 					}
@@ -240,12 +275,14 @@ export default {
 		.left {
 			width: 240rpx;
 			height: 180rpx;
+
 			.thumbnail {
 				width: 100%;
 				height: 100%;
 				border-radius: 12rpx;
 			}
 		}
+
 		.right {
 			width: 0;
 			flex-grow: 1;
@@ -253,11 +290,13 @@ export default {
 			flex-direction: column;
 			padding-left: 30rpx;
 			box-sizing: border-box;
+
 			.title {
 				display: flex;
 				align-items: center;
 				font-size: 30rpx;
 				color: var(--main-text-color);
+
 				.is-top {
 					height: 40rpx;
 					padding: 0 12rpx;
@@ -271,10 +310,12 @@ export default {
 					border-radius: 6rpx 12rpx;
 					box-shadow: none !important;
 				}
+
 				&-text {
 					color: #303133;
 				}
 			}
+
 			.content {
 				display: -webkit-box;
 				font-size: 26rpx;
@@ -283,6 +324,7 @@ export default {
 				margin-top: 14rpx;
 				line-height: 42rpx;
 			}
+
 			.foot {
 				display: flex;
 				font-size: 24rpx;
@@ -293,10 +335,12 @@ export default {
 
 				.create-time {
 					font-size: 26rpx;
+
 					.time-label {
 						display: none;
 					}
 				}
+
 				.visits {
 					.number {
 						padding: 0 6rpx;
@@ -305,5 +349,5 @@ export default {
 				}
 			}
 		}
-}
+	}
 </style>

components/article-min-card/article-min-card.vue

@@ -1,13 +1,7 @@
 <template>
 	<view class="article-min-card" :class="[globalAppSettings.layout.cardType]" @click="fnClickEvent('card')">
 		<view class="left">
-			<cache-image
+			<cache-image class="thumbnail" radius="6rpx" :url="$utils.checkThumbnailUrl(article.thumbnail)" :fileMd5="$utils.checkThumbnailUrl(article.thumbnail)" mode="aspectFill"></cache-image>
-				class="thumbnail"
-				radius="12rpx"
-				:url="$utils.checkThumbnailUrl(article.thumbnail)"
-				:fileMd5="$utils.checkThumbnailUrl(article.thumbnail)"
-				mode="aspectFill"
-			></cache-image>
 		</view>
 		<view class="right">
 			<view class="title text-overflow">{{ article.title }}</view>
@@ -30,7 +24,7 @@
 </template>
 
 <script>
-export default {
+	export default {
 		name: 'article-min-card',
 		props: {
 			article: {
@@ -43,11 +37,11 @@ export default {
 				this.$emit('on-click', this.article);
 			}
 		}
-};
+	};
 </script>
 
 <style scoped lang="scss">
-.article-min-card {
+	.article-min-card {
 		display: flex;
 		box-sizing: border-box;
 		border-radius: 12rpx;
@@ -57,82 +51,101 @@ export default {
 		margin-bottom: 24rpx;
 		padding: 16rpx;
 		box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
-	&.lr_image_text {
+
-	}
+		&.lr_image_text {}
 
 		&.lr_text_image {
 			.left {
 				order: 2;
 				padding-left: 30rpx;
 			}
+
 			.right {
 				order: 1;
 				padding-left: 0;
 			}
 		}
+
 		&.tb_image_text {
 			flex-direction: column;
+
 			.left {
 				width: 100%;
 				height: 220rpx;
 			}
+
 			.right {
 				padding-left: 0;
 				width: 100%;
+
 				.title {
 					margin-top: 24rpx;
 				}
+
 				.foot {
 					justify-content: flex-start;
+
 					.create-time {
 						.time-label {
 							display: inline-block;
 						}
 					}
+
 					.visits {
 						margin-left: 24rpx;
 					}
 				}
 			}
 		}
+
 		&.tb_text_image {
 			flex-direction: column;
+
 			.left {
 				width: 100%;
 				height: 220rpx;
 				order: 2;
 				margin-top: 20rpx;
 			}
+
 			.right {
 				padding-left: 0;
 				width: 100%;
 				order: 1;
+
 				.foot {
 					justify-content: flex-start;
+
 					.create-time {
 						.time-label {
 							display: inline-block;
 						}
 					}
+
 					.visits {
 						margin-left: 24rpx;
 					}
 				}
 			}
 		}
+
 		&.only_text {
 			.left {
 				display: none;
 			}
+
 			.right {
 				padding-left: 0;
+
 				.foot {
 					justify-content: flex-start;
+
 					.create-time {
 						.time-label {
 							display: inline-block;
 						}
 					}
+
 					.visits {
 						margin-left: 24rpx;
 					}
@@ -143,28 +156,33 @@ export default {
 		.left {
 			width: 180rpx;
 			height: 130rpx;
+
 			.thumbnail {
 				width: 100%;
 				height: 100%;
 				border-radius: 12rpx;
 			}
 		}
+
 		.right {
 			width: 0;
 			flex-grow: 1;
 			display: flex;
 			flex-direction: column;
-		padding-left: 24rpx;
+			padding-left: 20rpx;
+
 			.title {
 				font-size: 28rpx;
 				font-weight: 600;
 				color: var(--main-text-color);
 			}
+
 			.content {
 				font-size: 26rpx;
 				color: #909399;
 				margin-top: 14rpx;
 			}
+
 			.foot {
 				display: flex;
 				font-size: 24rpx;
@@ -172,20 +190,25 @@ export default {
 				align-items: center;
 				color: #909399;
 				margin-top: 14rpx;
+
 				.create-time {
 					font-size: 24rpx;
+
 					.time-label {
 						display: none;
 					}
+
 					.icon {
 						font-size: 24rpx;
 						padding-right: 4rpx;
 					}
 				}
+
 				.visits {
 					.icon {
 						font-size: 28rpx;
 					}
+
 					.number {
 						padding: 0 6rpx;
 						font-size: 24rpx;
@@ -193,5 +216,5 @@ export default {
 				}
 			}
 		}
-}
+	}
 </style>