修改：优化文章卡片样式

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
-				class="thumbnail"
-				radius="12rpx"
-				:url="$utils.checkThumbnailUrl(article.thumbnail)"
-				:fileMd5="$utils.checkThumbnailUrl(article.thumbnail)"
-				mode="aspectFill"
-			></cache-image>
+			<cache-image class="thumbnail" radius="6rpx" :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,277 +27,327 @@
 </template>
 
 <script>
-import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
-export default {
-	name: 'article-card',
-	components: { tmTags },
-	props: {
-		from: {
-			type: String,
-			default: ''
+	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
+	export default {
+		name: 'article-card',
+		components: { tmTags },
+		props: {
+			from: {
+				type: String,
+				default: ''
+			},
+			article: {
+				type: Object,
+				default: () => {}
+			}
 		},
-		article: {
-			type: Object,
-			default: () => {}
-		}
-	},
-	computed: {
-		cardType() {
-			// tb_image_text=上图下文
-			// tb_text_image=上文下图
-			if (this.from == 'home' && this.globalAppSettings.layout.home == 'h_row_col2') {
-				if (!['tb_image_text', 'tb_text_image', 'only_text'].some(x => x == this.globalAppSettings.layout.cardType)) {
-					return [this.from, this.globalAppSettings.layout.home, 'tb_image_text'];
+		computed: {
+			cardType() {
+				// tb_image_text=上图下文
+				// tb_text_image=上文下图
+				if (this.from == 'home' && this.globalAppSettings.layout.home == 'h_row_col2') {
+					if (!['tb_image_text', 'tb_text_image', 'only_text'].some(x => x == this.globalAppSettings.layout.cardType)) {
+						return [this.from, this.globalAppSettings.layout.home, 'tb_image_text'];
+					}
+					return [this.from, this.globalAppSettings.layout.home, this.globalAppSettings.layout.cardType];
 				}
-				return [this.from, this.globalAppSettings.layout.home, this.globalAppSettings.layout.cardType];
+				return [this.globalAppSettings.layout.home, this.globalAppSettings.layout.cardType];
+			}
+		},
+		methods: {
+			fnClickEvent() {
+				this.$emit('on-click', this.article);
 			}
-			return [this.globalAppSettings.layout.home, this.globalAppSettings.layout.cardType];
-		}
-	},
-	methods: {
-		fnClickEvent() {
-			this.$emit('on-click', this.article);
 		}
-	}
-};
+	};
 </script>
 
 <style scoped lang="scss">
-.article-card {
-	display: flex;
-	box-sizing: border-box;
-	margin: 0 24rpx;
-	padding: 32rpx;
-	border-radius: 12rpx;
-	background-color: #ffff;
-	box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
-	overflow: hidden;
-	margin-bottom: 24rpx;
-	&.home {
-		&.h_row_col2 {
-			margin: 12rpx;
+	.article-card {
+		display: flex;
+		box-sizing: border-box;
+		margin: 0 24rpx;
+		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;
+							line-height: 36rpx;
+							vertical-align: 4rpx;
+							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 {
+								border-radius: 6rpx !important;
+							}
+						}
+					}
+				}
+
+				&.only_text {
+					padding: 24rpx;
+
+					.right .foot {
+						.create-time {
+							.time-label {
+								display: none;
+							}
+						}
+
+						.visits {
+							font-size: 24rpx;
+						}
+					}
+				}
+			}
+		}
+
+		&.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: 200rpx;
+				height: 340rpx;
+
 				.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;
-						line-height: 36rpx;
-						vertical-align: 4rpx;
-						transform: scale(0.9);
-					}
-				}
+				padding-left: 0;
+				padding: 24rpx 0;
+				padding-bottom: 0;
+				width: 100%;
+
 				.foot {
-					justify-content: space-between;
+					justify-content: flex-start;
+
 					.create-time {
-						font-size: 24rpx;
 						.time-label {
-							display: none;
+							display: inline-block;
 						}
 					}
+
 					.visits {
-						font-size: 24rpx;
-						margin-left: 0;
+						margin-left: 24rpx;
 					}
 				}
 			}
-			&.tb_text_image {
-				padding: 12rpx;
-				.left .thumbnail {
-					::v-deep {
-						uni-image {
-							border-radius: 6rpx !important;
-						}
-					}
-				}
+		}
+
+		&.tb_text_image {
+			flex-direction: column;
+
+			.left {
+				width: 100%;
+				height: 340rpx;
+				order: 2;
+				margin-top: 24rpx;
 			}
-			&.only_text {
-				padding: 24rpx;
-				.right .foot {
+
+			.right {
+				padding-left: 0;
+				width: 100%;
+				order: 1;
+
+				.foot {
+					justify-content: flex-start;
+
 					.create-time {
 						.time-label {
-							display: none;
+							display: inline-block;
 						}
 					}
+
 					.visits {
-						font-size: 24rpx;
+						margin-left: 24rpx;
 					}
 				}
 			}
 		}
-	}
-	&.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;
-				}
+		&.only_text {
+			padding: 36rpx;
+
+			.left {
+				display: none;
 			}
-		}
-		.right {
-			padding-left: 0;
-			padding: 24rpx 0;
-			padding-bottom: 0;
-			width: 100%;
-			.foot {
-				justify-content: flex-start;
-				.create-time {
-					.time-label {
-						display: inline-block;
-					}
+
+			.right {
+				padding-left: 0;
+
+				.content {
+					margin-top: 24rpx;
 				}
-				.visits {
-					margin-left: 24rpx;
+
+				.foot {
+					justify-content: flex-start;
+					margin-top: 24rpx;
+
+					.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;
+			width: 240rpx;
+			height: 180rpx;
+
+			.thumbnail {
+				width: 100%;
+				height: 100%;
+				border-radius: 12rpx;
+			}
 		}
+
 		.right {
-			padding-left: 0;
-			width: 100%;
-			order: 1;
-			.foot {
-				justify-content: flex-start;
-				.create-time {
-					.time-label {
-						display: inline-block;
-					}
+			width: 0;
+			flex-grow: 1;
+			display: flex;
+			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;
+					margin-right: 10rpx;
+					line-height: 40rpx;
+					font-size: 24rpx;
+					white-space: nowrap;
+					vertical-align: 4rpx;
+					color: #fff;
+					// background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
+					border-radius: 6rpx 12rpx;
+					box-shadow: none !important;
 				}
-				.visits {
-					margin-left: 24rpx;
+
+				&-text {
+					color: #303133;
 				}
 			}
-		}
-	}
-	&.only_text {
-		padding: 36rpx;
-		.left {
-			display: none;
-		}
-		.right {
-			padding-left: 0;
+
 			.content {
-				margin-top: 24rpx;
+				display: -webkit-box;
+				font-size: 26rpx;
+				color: #909399;
+				height: 80rpx;
+				margin-top: 14rpx;
+				line-height: 42rpx;
 			}
+
 			.foot {
-				justify-content: flex-start;
-				margin-top: 24rpx;
+				display: flex;
+				font-size: 24rpx;
+				justify-content: space-between;
+				align-items: center;
+				color: #909399;
+				margin-top: 18rpx;
+
 				.create-time {
+					font-size: 26rpx;
+
 					.time-label {
-						display: inline-block;
+						display: none;
 					}
 				}
-				.visits {
-					margin-left: 24rpx;
-				}
-			}
-		}
-	}
 
-	.left {
-		width: 240rpx;
-		height: 180rpx;
-		.thumbnail {
-			width: 100%;
-			height: 100%;
-			border-radius: 12rpx;
-		}
-	}
-	.right {
-		width: 0;
-		flex-grow: 1;
-		display: flex;
-		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;
-				margin-right: 10rpx;
-				line-height: 40rpx;
-				font-size: 24rpx;
-				white-space: nowrap;
-				vertical-align: 4rpx;
-				color: #fff;
-				// background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
-				border-radius: 6rpx 12rpx;
-				box-shadow: none !important;
-			}
-			&-text {
-				color: #303133;
-			}
-		}
-		.content {
-			display: -webkit-box;
-			font-size: 26rpx;
-			color: #909399;
-			height: 80rpx;
-			margin-top: 14rpx;
-			line-height: 42rpx;
-		}
-		.foot {
-			display: flex;
-			font-size: 24rpx;
-			justify-content: space-between;
-			align-items: center;
-			color: #909399;
-			margin-top: 18rpx;
-
-			.create-time {
-				font-size: 26rpx;
-				.time-label {
-					display: none;
-				}
-			}
-			.visits {
-				.number {
-					padding: 0 6rpx;
-					font-size: 26rpx;
+				.visits {
+					.number {
+						padding: 0 6rpx;
+						font-size: 26rpx;
+					}
 				}
 			}
 		}
 	}
-}
-</style>
+</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
-				class="thumbnail"
-				radius="12rpx"
-				:url="$utils.checkThumbnailUrl(article.thumbnail)"
-				:fileMd5="$utils.checkThumbnailUrl(article.thumbnail)"
-				mode="aspectFill"
-			></cache-image>
+			<cache-image class="thumbnail" radius="6rpx" :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,168 +24,197 @@
 </template>
 
 <script>
-export default {
-	name: 'article-min-card',
-	props: {
-		article: {
-			type: Object,
-			default: () => {}
-		}
-	},
-	methods: {
-		fnClickEvent() {
-			this.$emit('on-click', this.article);
+	export default {
+		name: 'article-min-card',
+		props: {
+			article: {
+				type: Object,
+				default: () => {}
+			}
+		},
+		methods: {
+			fnClickEvent() {
+				this.$emit('on-click', this.article);
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style scoped lang="scss">
-.article-min-card {
-	display: flex;
-	box-sizing: border-box;
-	border-radius: 12rpx;
-	background-color: #ffff;
-	overflow: hidden;
-	margin: 12rpx 24rpx;
-	margin-bottom: 24rpx;
-	padding: 16rpx;
-	box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
-	&.lr_image_text {
-	}
+	.article-min-card {
+		display: flex;
+		box-sizing: border-box;
+		border-radius: 12rpx;
+		background-color: #ffff;
+		overflow: hidden;
+		margin: 12rpx 24rpx;
+		margin-bottom: 24rpx;
+		padding: 16rpx;
+		box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
 
-	&.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;
+		&.lr_image_text {}
+
+		&.lr_text_image {
+			.left {
+				order: 2;
+				padding-left: 30rpx;
+			}
+
+			.right {
+				order: 1;
+				padding-left: 0;
+			}
 		}
-		.right {
-			padding-left: 0;
-			width: 100%;
-			.title {
-				margin-top: 24rpx;
+
+		&.tb_image_text {
+			flex-direction: column;
+
+			.left {
+				width: 100%;
+				height: 220rpx;
 			}
-			.foot {
-				justify-content: flex-start;
-				.create-time {
-					.time-label {
-						display: inline-block;
-					}
+
+			.right {
+				padding-left: 0;
+				width: 100%;
+
+				.title {
+					margin-top: 24rpx;
 				}
-				.visits {
-					margin-left: 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;
+
+		&.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;
 					}
 				}
-				.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;
+					}
 				}
 			}
 		}
-	}
-	&.only_text {
+
 		.left {
-			display: none;
+			width: 180rpx;
+			height: 130rpx;
+
+			.thumbnail {
+				width: 100%;
+				height: 100%;
+				border-radius: 12rpx;
+			}
 		}
+
 		.right {
-			padding-left: 0;
+			width: 0;
+			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+			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 {
-				justify-content: flex-start;
+				display: flex;
+				font-size: 24rpx;
+				justify-content: space-between;
+				align-items: center;
+				color: #909399;
+				margin-top: 14rpx;
+
 				.create-time {
+					font-size: 24rpx;
+
 					.time-label {
-						display: inline-block;
+						display: none;
+					}
+
+					.icon {
+						font-size: 24rpx;
+						padding-right: 4rpx;
 					}
 				}
+
 				.visits {
-					margin-left: 24rpx;
-				}
-			}
-		}
-	}
+					.icon {
+						font-size: 28rpx;
+					}
 
-	.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;
-		.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;
-			justify-content: space-between;
-			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;
+					.number {
+						padding: 0 6rpx;
+						font-size: 24rpx;
+					}
 				}
 			}
 		}
 	}
-}
-</style>
+</style>