70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
import { pageCmsArticle } from '~/api/cms/cmsArticle';
|
||
import type { CmsArticle } from '~/api/cms/cmsArticle/model';
|
||
import dayjs from 'dayjs';
|
||
import { detail, navTo } from '~/utils/common';
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
categoryId?: number;
|
||
row?: number;
|
||
}>(),
|
||
{}
|
||
);
|
||
|
||
const list = ref<CmsArticle[]>([]);
|
||
const reload = () => {
|
||
pageCmsArticle({
|
||
categoryId: props.categoryId,
|
||
limit: props.row || 10
|
||
}).then(data => {
|
||
list.value = data?.list || [];
|
||
});
|
||
};
|
||
|
||
// 监听categoryId变化，自动重新加载数据
|
||
watch(() => props.categoryId, () => {
|
||
reload();
|
||
}, { immediate: true });
|
||
</script>
|
||
|
||
<template>
|
||
<div class="px-5 py-3">
|
||
<template v-for="(item, index) in list" :key="index">
|
||
<!-- 纯文字列表项，不显示图片 -->
|
||
<div class="flex items-center py-2 border-b border-gray-100 last:border-b-0 hover:bg-gray-50 transition-colors duration-200">
|
||
<!-- 序号 -->
|
||
<div class="flex-shrink-0 w-6 text-gray-400 text-sm mr-3">
|
||
{{ index + 1 }}
|
||
</div>
|
||
|
||
<!-- 文章内容 -->
|
||
<div class="flex-1 min-w-0">
|
||
<nuxt-link :to="detail(item)" class="flex justify-between items-center group">
|
||
<h4 class="text-base font-normal text-gray-700 line-clamp-1 flex-1 mr-4 group-hover:text-green-600 transition-colors duration-200">
|
||
{{ item.title }}
|
||
</h4>
|
||
<div class="text-gray-400 text-sm font-normal text-nowrap flex-shrink-0">
|
||
{{ dayjs(item.createTime).format('MM-DD') }}
|
||
</div>
|
||
</nuxt-link>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.line-clamp-1 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 悬停效果
|
||
.group:hover h4 {
|
||
color: #16a34a;
|
||
}
|
||
</style>
|