57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<script lang='ts' setup>
|
|
import type { NewData } from "@/api/types";
|
|
import { client, safeClient } from "@/api";
|
|
|
|
const router = useRouter();
|
|
const { data } = await safeClient(() => client.api.news.get({
|
|
query: {
|
|
limit: 10,
|
|
offset: 0,
|
|
},
|
|
}));
|
|
|
|
function openNewsDetail(item: NewData) {
|
|
router.push(`/new/${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?.data"
|
|
:key="item.id"
|
|
class="flex gap-3 p-3 rounded-lg bg-(--ion-color-faint) transition-colors cursor-pointer"
|
|
@click="openNewsDetail(item)"
|
|
>
|
|
<div class="shrink-0">
|
|
<img
|
|
:src="item.thumbnailId!"
|
|
: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.summary }}
|
|
</p>
|
|
<div class="text-xs mt-1">
|
|
{{ useDateFormat(item.createdAt, 'YY/MM/DD') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
</style>
|