百色农校

components/Index/BNNews.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="xl:w-screen-xl m-auto py-4 px-4 lg:px-0">
+    <div class="text-center flex flex-col items-center z-0 relative">
+      <h2 class="text-4xl font-bold tracking-tight text-gray-800 dark:text-white">
+        {{ '百农新闻' }}
+      </h2>
+      <div class="sub-title">
+        <p class="text-gray-400 text-sm dark:text-gray-400 py-3">
+          {{ 'BaiSe NongXiao News' }}
+        </p>
+      </div>
+    </div>
+    <el-card shadow="hover">
+      <el-row :gutter="24">
+        <el-col :lg="10" :xs="24">
+          <HotNewsCarousel />
+        </el-col>
+        <el-col :lg="14" :xs="24" class="w-full h-auto">
+          <template v-for="(item, index) in list" :key="index">
+            <nuxt-link :to="`/detail/${item.articleId}.html`" class="item">
+              <div class="text-lg my-3 flex justify-between">
+                <span class="title text-gray-800 hover:text-green-700 text-sm lg:text-lg">{{ item.title }}</span>
+                <span class="text-gray-400 text-sm text-right w-[100px]">{{
+                  dayjs(item.createTime).format('MM-DD')
+                }}</span>
+              </div>
+            </nuxt-link>
+          </template>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+  <div v-if="list.length == 0" class="px-1 text-center text-gray-500 min-h-xs">没有更多了</div>
+</template>
+
+<script lang="ts" setup>
+  import { navigateTo } from '#imports';
+  import dayjs from 'dayjs';
+  import type { CmsArticle } from '~/api/cms/cmsArticle/model';
+  import { pageCmsArticle } from '~/api/cms/cmsArticle';
+  import HotNewsCarousel from '~/components/Index/HotNewsCarousel.vue';
+
+  const list = ref<CmsArticle[]>([]);
+
+  // 请求数据
+  const reload = async () => {
+    pageCmsArticle({
+      limit: 8,
+      recommend: 1,
+      parentId: 4131
+    }).then(res => {
+      list.value = res?.list || [];
+    });
+  };
+  onMounted(() => {
+    reload();
+  });
+</script>