1

components/Index/NewsList.vue

@@ -0,0 +1,105 @@
+<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>