1

components/Index/NewsCard.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+  import { pageCmsArticle } from '~/api/cms/cmsArticle';
+  import type { CmsArticle } from '~/api/cms/cmsArticle/model';
+  import dayjs from 'dayjs';
+  import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
+  import { navigateTo } from '#imports';
+
+  const props = withDefaults(
+    defineProps<{
+      categoryId?: number;
+    }>(),
+    {}
+  );
+
+  const list = ref<CmsArticle[]>([]);
+  const reload = () => {
+    pageCmsArticle({
+      categoryId: props.categoryId
+    }).then(data => {
+      list.value = data?.list || [];
+    });
+  };
+  reload();
+</script>
+
+<template>
+  <el-col v-for="(sub, index) in list" :key="index" :xs="24" :span="6" class="mb-6">
+    <el-card
+      shadow="hover"
+      :body-style="{ padding: '0px' }"
+      class="hover:bg-gray-50 cursor-pointer"
+      @click="navigateTo(`/detail/${sub.articleId}.html`)"
+    >
+      <el-image
+        :src="sub.image"
+        fit="cover"
+        :lazy="true"
+        class="w-full md:h-[166px] h-[199px] cursor-pointer bg-gray-50"
+      />
+      <div class="flex-1 px-4 py-5 sm:p-6 !p-4">
+        <div class="text-gray-700 dark:text-white text-base font-semibold flex flex-col gap-1.5">
+          <div class="line-clamp-2 text-lg min-h-[54px]">
+            {{ sub.title }}
+          </div>
+        </div>
+        <!--              <div class="flex items-center gap-1.5 py-2 text-gray-500 justify-between">-->
+        <!--                <div class="text-gray-500 line-clamp-2">{{ sub.comments }}</div>-->
+        <!--              </div>-->
+        <div class="button-group flex justify-between items-center mt-3 text-sm">
+          <el-space class="flex items-end">
+            <div class="text-gray-400 gap-1 flex items-center">
+              <el-icon>
+                <View />
+              </el-icon>
+              <span>{{ getViews(sub) }}</span>
+            </div>
+          </el-space>
+          <div class="text-gray-400">
+            {{ dayjs(sub.createTime).format('YYYY-MM-DD') }}
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </el-col>
+</template>
+
+<style scoped lang="scss"></style>