后期修改完善，上线版本

pages/DailyNews/components/ArticleCardItem.vue

@@ -1,16 +1,18 @@
 <template>
 	<div class="article-box" @click="handleClick">
 		<div class="line"></div>
-		<div style="gap: 20px" class="flex">
-			<div class="preview-box">
-				<img :src="item.coverImage || ''" alt="" >
+		<div class="flex gap-20">
+			<div class="flex flex-col justify-center">
+				<div class="preview-box">
+					<img :src="item.coverImage || ''" alt="" class="wh-100">
+				</div>
+				<div class="flex items-center gap-6">
+					<img src="/ToolDetail/icon_clock1.png" alt="" class="wh-16" />
+					<div class="time">{{ formatPublishTime(item.publishTime || '') }}</div>
+				</div>
 			</div>
 			<div class="content flex flex-col justify-between">
 				<div class="description">{{ item.summary || '' }}</div>
-				<div class="flex items-center" style="gap: 6px">
-					<img src="/ToolDetail/icon_clock1.png" alt="" />
-					<div class="time">{{ item.publishTime || '' }}</div>
-				</div>
 			</div>
 		</div>
 	</div>
@@ -33,12 +35,35 @@ export default {
 	methods: {
 		handleClick() {
 			this.$emit('refresh', this.item);
-		}
+		},
+		formatPublishTime(timeString) {
+			if (!timeString) return '';
+
+			const date = new Date(timeString);
+
+			const month = String(date.getMonth() + 1).padStart(2, '0');
+			const day = String(date.getDate()).padStart(2, '0');
+			const year = date.getFullYear();
+
+			return `${year}-${month}-${day}`;
+		},
 	},
 }
 </script>
 
 <style scoped lang="scss">
+.gap-20 {
+	gap: 20px;
+}
+.gap-6 {
+	gap: 6px;
+}
+.time {
+	color: #869EC2;
+	font-family: 'Poppins-Regular';
+	font-size: 14px;
+	line-height: 16px;
+}
 .article-box {
 	cursor: pointer;
 	&:active {
@@ -46,35 +71,22 @@ export default {
 	}
 	.preview-box {
 		width: 104px;
-		height: 104px;
+		height: 52px;
 		border-radius: 6px;
-		img {
-			width: 100%;
-			height: 100%;
-		}
+		margin-bottom: 12px;
 	}
 	.content {
 		height: 104px;
 		flex: 1;
 		.description {
 			color: #1E293B;
-			font-family: 'Poppins-Medium', serif;
+			font-family: 'Poppins-Medium';
 			display: -webkit-box;
 			-webkit-line-clamp: 3;
 			-webkit-box-orient: vertical;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
-		img {
-			width: 16px;
-			height: 16px;
-		}
-		.time {
-			color: #869EC2;
-			font-family: 'Poppins-Regular', serif;
-			font-size: 14px;
-			line-height: 16px;
-		}
 	}
 }
 </style>

pages/DailyNews/components/ArticleTextListItem.vue

@@ -73,19 +73,19 @@ export default {
 
 	.title {
 		font-size: 18px;
-		font-family: 'Poppins-SemiBold', serif;
+		font-family: 'Poppins-SemiBold';
 		font-weight: 600;
 		color: #3A4A65;
 	}
 
 	.content {
-		font-family: 'Poppins-Regular', serif;
+		font-family: 'Poppins-Regular';
 		color: #64748B;
 		margin-top: 20px;
 	}
 
 	.source {
-		font-family: 'Poppins-Regular', serif;
+		font-family: 'Poppins-Regular';
 		color: #C8CFD7;
 		margin-top: 10px;
 		font-size: 14px;

pages/DailyNews/components/NewsCardItem.vue

@@ -3,19 +3,19 @@
 		<div class="preview">
 			<img :src="item.coverImage || ''" alt="" />
 		</div>
-		<div class="flex flex-col" style="gap: 14px">
-			<div class="title" style="height: 60px">{{ item.title || '' }}</div>
-			<div class="description" style="height: 72px">
+		<div class="flex flex-col gap-12">
+			<div class="title h-60">{{ item.title || '' }}</div>
+			<div class="description h-72">
 				{{ item.summary || '' }}
 			</div>
 		</div>
 		<div class="bottom">
-			<div class="flex items-center" style="gap: 12px">
+			<div class="flex items-center gap-12">
 				<div class="circle"></div>
-				<div class="text">{{ item.slug || '' }}</div>
+				<div class="text">{{ item.author || '' }}</div>
 			</div>
-			<div class="flex items-center" style="gap: 8px">
-				<img src="/ToolDetail/icon_thumb.png" alt="" style="width: 14px; height: 14px" />
+			<div class="flex items-center gap-8">
+				<img src="/ToolDetail/icon_thumb.png" alt="" />
 				<div class="text">{{ item.likeCount || 0 }}</div>
 			</div>
 		</div>
@@ -44,6 +44,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.gap-12 {
+	gap: 12px;
+}
+.gap-8 {
+	gap: 8px;
+}
+.h-60 {
+	height: 60px;
+}
+.h-72 {
+	height: 72px;
+}
 .card {
 	padding: 20px;
 	background-color: #FFFFFF;
@@ -82,14 +94,18 @@ export default {
 		.text {
 			font-size: 14px;
 			color: #C8CFD7;
-			font-family: 'Poppins-Regular', serif;
+			font-family: 'Poppins-Regular';
 			line-height: 18px;
 		}
+		img {
+			width: 14px;
+			height: 14px;
+		}
 	}
 	.title {
 		font-size: 20px;
 		color: #3A4A65;
-		font-family: 'Poppins-SemiBold', serif;
+		font-family: 'Poppins-SemiBold';
 		font-weight: 600;
 		display: -webkit-box;
 		-webkit-line-clamp: 4;
@@ -99,7 +115,8 @@ export default {
 	}
 	.description {
 		color: #64748B;
-		font-family: 'Poppins-Regular', serif;
+		font-family: 'Poppins-Regular';
+		height: auto;
 		display: -webkit-box;
 		-webkit-line-clamp: 3;
 		-webkit-box-orient: vertical;