对接数据

2025-10-24 15:45:38 +08:00
parent 672a2f4c90
commit d3375a347f
138 changed files with 16904 additions and 1026 deletions
--- a/pages/DailyNews/components/NewsCardItem.vue
+++ b/pages/DailyNews/components/NewsCardItem.vue
@ -0,0 +1,110 @@
+<template>
+	<div class="card card-content" @click="handleClick">
+		<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">
+				{{ item.summary || '' }}
+			</div>
+		</div>
+		<div class="bottom">
+			<div class="flex items-center" style="gap: 12px">
+				<div class="circle"></div>
+				<div class="text">{{ item.slug || '' }}</div>
+			</div>
+			<div class="flex items-center" style="gap: 8px">
+				<img src="/ToolDetail/icon_thumb.png" alt="" style="width: 14px; height: 14px" />
+				<div class="text">{{ item.likeCount || 0 }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		item: {
+			type: Object,
+			default: () => ({})
+		},
+	},
+	data() {
+		return {
+		}
+	},
+	methods: {
+		handleClick() {
+			this.$emit('refresh', this.item);
+			this.$api.article.recordArticleClick(this.id);
+		}
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.card {
+	padding: 20px;
+	background-color: #FFFFFF;
+	border-radius: 12px;
+	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
+}
+.card-content {
+	width: 256px;
+	gap: 20px;
+	display: flex;
+	flex-direction: column;
+	cursor: pointer;
+
+	&:active {
+		opacity: 0.8;
+	}
+
+	.preview {
+		height: 100px;
+		border-radius: 6px;
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.bottom {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.circle {
+			width: 16px;
+			height: 16px;
+			border-radius: 50%;
+			border: 1px solid #64748B;
+		}
+		.text {
+			font-size: 14px;
+			color: #C8CFD7;
+			font-family: 'Poppins-Regular', serif;
+			line-height: 18px;
+		}
+	}
+	.title {
+		font-size: 20px;
+		color: #3A4A65;
+		font-family: 'Poppins-SemiBold', serif;
+		font-weight: 600;
+		display: -webkit-box;
+		-webkit-line-clamp: 4;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.description {
+		color: #64748B;
+		font-family: 'Poppins-Regular', serif;
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+</style>