对接数据

pages/DailyNews/components/ArticleTextListItem.vue

@@ -0,0 +1,94 @@
+<template>
+	<div class="article-item-box flex" @click="goToNewsDetail">
+		<div class="dot-container">
+			<div class="dot"></div>
+		</div>
+		<div class="container">
+			<div class="title">
+				{{ item.title || '' }}
+			</div>
+			<div class="content">
+				{{ item.summary || '' }}
+			</div>
+			<div class="source">
+				Source: TechCrunch
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+		}
+	},
+	props: {
+		item: {
+			type: Object,
+			default: () => {
+				return {}
+			}
+		}
+	},
+	methods: {
+		goToNewsDetail() {
+			if (this.item && this.item.slug) {
+				this.articleClick(this.item.id);
+				this.$router.push('/tools-detail?news_slug=' + this.item.slug + '&type=news')
+			}
+		},
+		// 记录文章点击次数
+		async articleClick(id) {
+			if (id) {
+				await this.$api.article.recordArticleClick(id);
+			}
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.article-item-box {
+	gap: 10px;
+
+	&:active {
+		opacity: 0.8;
+	}
+
+	.dot-container {
+		padding-top: 8px;
+	}
+
+	.dot {
+		background: $header-backgroungd;
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+	}
+
+	.container {
+		flex: 1;
+	}
+
+	.title {
+		font-size: 18px;
+		font-family: 'Poppins-SemiBold', serif;
+		font-weight: 600;
+		color: #3A4A65;
+	}
+
+	.content {
+		font-family: 'Poppins-Regular', serif;
+		color: #64748B;
+		margin-top: 20px;
+	}
+
+	.source {
+		font-family: 'Poppins-Regular', serif;
+		color: #C8CFD7;
+		margin-top: 10px;
+		font-size: 14px;
+	}
+}
+</style>