106 lines
2.8 KiB
Vue
106 lines
2.8 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="p-5">
|
||
<template v-for="(item, index) in list" :key="index">
|
||
<!-- 显示第一篇文章的大图 -->
|
||
<nuxt-link v-if="item.image && index == 0" :to="detail(item)" class="block mb-3">
|
||
<el-image
|
||
:src="item.image"
|
||
fit="cover"
|
||
:lazy="true"
|
||
class="w-full md:h-[166px] h-[199px] cursor-pointer bg-gray-50 rounded-lg"
|
||
/>
|
||
</nuxt-link>
|
||
|
||
<!-- 文章列表项 -->
|
||
<div class="flex items-start py-2 border-b border-gray-100 last:border-b-0">
|
||
<!-- 小缩略图（非第一篇文章且有图片时显示） -->
|
||
<nuxt-link v-if="item.image && index > 0" :to="detail(item)" class="flex-shrink-0 mr-3">
|
||
<el-image
|
||
:src="item.image"
|
||
fit="cover"
|
||
:lazy="true"
|
||
class="w-16 h-12 cursor-pointer bg-gray-50 rounded"
|
||
/>
|
||
</nuxt-link>
|
||
|
||
<!-- 文章内容 -->
|
||
<div class="flex-1 min-w-0">
|
||
<div class="text-gray-700 dark:text-white text-base font-semibold flex flex-col gap-1.5">
|
||
<nuxt-link :to="detail(item)" class="line-clamp-2 text-lg flex justify-between">
|
||
<h4 class="text-lg font-normal line-clamp-2 flex-1 mr-2" :class="{ 'line-clamp-1': index === 0 }">
|
||
{{ item.title }}
|
||
</h4>
|
||
<div class="text-gray-400 text-sm font-normal text-nowrap py-1 flex-shrink-0">
|
||
{{ dayjs(item.createTime).format('MM-DD') }}
|
||
</div>
|
||
</nuxt-link>
|
||
</div>
|
||
</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;
|
||
}
|
||
|
||
.line-clamp-2 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.border-b:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
// 悬停效果
|
||
.flex:hover {
|
||
background-color: rgba(0, 0, 0, 0.02);
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
// 图片悬停效果
|
||
.el-image:hover {
|
||
transform: scale(1.02);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
</style>
|