百色农校完成

components/Index/HotNewsCarousel.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="lg:my-3 my-0 relative">
-    <el-carousel :height="flashHeight + 'px'" indicator-position="none">
-      <el-carousel-item v-for="(item,index) in list" :key="index">
+    <el-carousel :height="flashHeight + 'px'" :interval="2000"  motion-blur indicator-position="none">
+      <el-carousel-item v-for="(item,index) in data" :key="index">
         <nuxt-link :to="`/detail/${item.articleId}.html`" class="item flex justify-center items-center">
-          <img :src="`${FILE_SERVER}${item.image}`" class="w-[500px] h-[380px]" />
-          <div class="absolute bottom-3 z-100 text-white font-bold px-4 line-clamp-1 text-sm lg:text-lg">{{ item.title }}</div>
+          <el-image :src="`${FILE_SERVER}${item.image}`" class="w-[500px] h-[380px]" />
+          <div class="absolute bottom-0 z-100 w-[468px] bg-black opacity-80 font-bold px-4 line-clamp-1 text-sm lg:text-lg">
+            <span class="text-white">{{ item.title }}</span>
+          </div>
         </nuxt-link>
       </el-carousel-item>
     </el-carousel>
@@ -13,7 +15,6 @@
 
 <script setup lang="ts">
 import type {CompanyParam} from "~/api/system/company/model";
-import {pageCmsArticle} from "~/api/cms/cmsArticle";
 import type {CmsArticle} from "~/api/cms/cmsArticle/model";
 import {FILE_SERVER} from "~/config";
 
@@ -21,8 +22,7 @@ const isMobile = useIsMobile();
 
 const props = withDefaults(
     defineProps<{
-      config?: any;
-      list?: any[];
+      data?: CmsArticle[];
       disabled?: boolean;
       title?: string;
       comments?: string;
@@ -36,7 +36,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'done'): void;
 }>();
-
+const loading = ref(false);
 const list = ref<CmsArticle[]>([]);
 const flashHeight = ref<number>(372)
 
@@ -47,20 +47,18 @@ const where = reactive<CompanyParam>({
 
 // 请求数据
 const reload = async () => {
-  pageCmsArticle({
-    recommend: 1,
-    limit: 5,
-    lang: getLang()
-  }).then(res => {
-    list.value = res?.list || [];
-  })
+  loading.value = true;
   if(isMobile.value){
     flashHeight.value = 260;
   }
+  setTimeout(() => {
+    list.value = props.data || [];
+    loading.value = false;
+  },500)
 }
 
 watch(
-    () => props.config,
+    () => props.data,
     () => {
       reload();
     },