百色农校

components/Index/HotNews.vue

@@ -4,22 +4,22 @@
       <h2 class="text-4xl font-bold tracking-tight text-gray-800 dark:text-white">
         {{ title || '热点新闻' }}
       </h2>
-<!--      <div class="sub-title">-->
-<!--        <p class="text-gray-400 text-sm dark:text-gray-400 py-3">-->
-<!--          {{ comments || '官方开发的应用' }}-->
-<!--        </p>-->
-<!--      </div>-->
+      <div class="sub-title">
+        <p class="text-gray-400 text-sm dark:text-gray-400 py-3">
+          {{ comments || 'Unlimited Scenery' }}
+        </p>
+      </div>
     </div>
     <el-row :gutter="24" id="container" class="clearfix">
-      <el-col v-for="(item,index) in list" :key="index" :xs="24" :span="6" class="left mb-6">
+      <el-col v-for="(item,index) in list" :key="index" :xs="12" :span="6" class="left mb-6">
         <el-card shadow="hover" :body-style="{ padding: '0px' }" class=" hover:bg-gray-50 cursor-pointer" @click="navigateTo(`/detail/${item.articleId}.html`)">
           <el-image
             :src="item.image"
             fit="cover"
-            :lazy="true" class="w-full md:h-[166px] h-[199px] cursor-pointer bg-gray-50"/>
+            :lazy="true" class="w-full md:h-[166px] h-[100px] lg: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]">
+              <div class="line-clamp-2 text-sm lg:text-lg lg:min-h-[54px] min-h-auto">
                 {{ item.title }}
               </div>
             </div>
@@ -47,9 +47,11 @@
 <script lang="ts" setup>
 import {navigateTo} from "#imports";
 import dayjs from "dayjs";
+import { View } from '@element-plus/icons-vue'
 import type {CmsArticle} from "~/api/cms/cmsArticle/model";
-import {listCmsArticle} from "~/api/cms/cmsArticle";
+import {listCmsArticle, pageCmsArticle} from "~/api/cms/cmsArticle";
 import type {CmsArticleParam} from "~/api/cms/cmsArticle/model";
+import {getImage} from "~/utils/common";
 
 const props = withDefaults(
     defineProps<{
@@ -74,12 +76,14 @@ const id = ref<number>(0);
 
 // 请求数据
 const reload = async () => {
-  listCmsArticle({
+  pageCmsArticle({
     limit: 8,
-    recommend: 1,
     categoryId: props.categoryId
-  }).then(data => {
-    list.value = data || [];
+  }).then(res => {
+    list.value = res?.list.map(d => {
+      d.image = getImage(d.image)
+      return d;
+    }) || [];
   })
 }
 reload();