81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<script lang='ts' setup>
|
|
import type { NewsItem } from "@/mocks/data/news";
|
|
import { mockClient } from "@/api";
|
|
|
|
// TODO: 后续从API获取新闻数据
|
|
const { data } = mockClient<NewsItem[]>("news");
|
|
|
|
function formatTime(time: string) {
|
|
const date = new Date(time);
|
|
const now = new Date();
|
|
const diff = now.getTime() - date.getTime();
|
|
const hours = Math.floor(diff / (1000 * 60 * 60));
|
|
|
|
if (hours < 1) {
|
|
const minutes = Math.floor(diff / (1000 * 60));
|
|
return `${minutes}分钟前`;
|
|
}
|
|
if (hours < 24) {
|
|
return `${hours}小时前`;
|
|
}
|
|
const days = Math.floor(hours / 24);
|
|
if (days < 7) {
|
|
return `${days}天前`;
|
|
}
|
|
return date.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
|
|
}
|
|
|
|
const router = useRouter();
|
|
|
|
function openNewsDetail(item: NewsItem) {
|
|
router.push(`/news/${item.id}`);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-5">
|
|
<div class="text-md font-semibold mb-4">
|
|
动态新闻
|
|
</div>
|
|
|
|
<!-- 新闻列表 -->
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="item in data"
|
|
:key="item.id"
|
|
class="flex gap-3 p-3 rounded-lg bg-(--ion-color-faint) transition-colors cursor-pointer"
|
|
>
|
|
<!-- 缩略图 -->
|
|
<div class="shrink-0">
|
|
<img
|
|
:src="item.thumbnail"
|
|
:alt="item.title"
|
|
class="w-20 h-20 rounded-lg object-cover"
|
|
>
|
|
</div>
|
|
|
|
<!-- 内容 -->
|
|
<div class="flex-1 min-w-0 flex flex-col justify-between">
|
|
<!-- 标题 -->
|
|
<div class="text-md font-medium line-clamp-1">
|
|
{{ item.title }}
|
|
</div>
|
|
|
|
<!-- 描述 -->
|
|
<p class="text-xs line-clamp-2 mt-1">
|
|
{{ item.description }}
|
|
</p>
|
|
|
|
<!-- 时间 -->
|
|
<div class="text-xs mt-1">
|
|
{{ formatTime(item.time) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
</style>
|