推荐区域轮播图效果

src/api/knowledge/index.ts

@@ -26,13 +26,20 @@ export function getZxxyNavis(data: NaviQuery): AxiosPromise<Navi[]> {
 //获取推荐分页
 export function getTuijian(data: PageParam): AxiosPromise<graphicformList> {
   return request({
-    url: '/javasys/graphicform/zxxy',
+    url: '/javasys/graphicform/cardlist',
     method: 'post',
     data: data,
 
   });
-}
-
 
+}
+  //获取轮播图数据
+  export function getCarousel(data: PageParam): AxiosPromise<graphicformList> {
+    return request({
+      url: '/javasys/graphicform/carousel',
+      method: 'post',
+      data: data,
   
+    });
 
+  }

src/views/knowledge/knowledge/index.vue

@@ -1,7 +1,7 @@
 <script lang='ts' setup>
 import { useUserStore } from "@/store/modules/user"
 import { ref } from 'vue'
-import { getUserDetail, getZxxyNavis, getTuijian } from '@/api/knowledge/index'
+import { getUserDetail, getZxxyNavis, getTuijian, getCarousel } from '@/api/knowledge/index'
 import Archivestype from '@/views/knowledge/knowledge/components/archivestype.vue'
 import Navili from './components/Navili.vue'
 import { UserQuery, UserDetail, NaviQuery, Navi, Graphicform, PageParam } from '@/api/knowledge/types'
@@ -57,6 +57,7 @@ const pageParamTuijian = reactive<PageParam>({
   usertoken: userToken,
 
 })
+const carousel = ref<Graphicform[]>();
 function errorImg(e: any) {
   e.srcElement.src = errimg;
   //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
@@ -107,8 +108,14 @@ onMounted(() => {
       pageParamTuijian.total = data.total
       //console.log(tuijianPage.value)
     });
+  getCarousel(pageParamTuijian)
+    .then(({ data }) => {
+      carousel.value = data.list
 
 
+      //console.log(tuijianPage.value)
+    });
+
 
 
   //setTimeout(function(){  fatherisReady.value = 100;}, 3000);　　//三秒之后执行函数
@@ -131,6 +138,7 @@ function handleCurrentChange() {
 
       //console.log(tuijianPage.value)
     });
+
 }
 
 
@@ -148,8 +156,10 @@ function handleCurrentChange() {
         </div>
         <div class="grid-tuijian">
           <el-carousel indicator-position="outside" class="mycarousel" style="width: 412px;height:290px; ">
-            <el-carousel-item v-for="item in 4" :key="item">
+            <el-carousel-item v-for="(item, index) in carousel" :key="index">
-              <h3 text="2xl" justify="center">{{ item }}</h3>
+              <!-- <h3 text="2xl" justify="center">{{ item.gThumbnail }}</h3> -->
+              <img style="width: 412px; height: 300px;border-radius:8px;margin-top: 4px; margin-left: 4px;"
+                referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
             </el-carousel-item>
           </el-carousel>
 
@@ -158,8 +168,8 @@ function handleCurrentChange() {
               referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" />
 
             <div class="card-right">
-              <span class="card-title" :title= item.gTitle >{{ item.gTitle }}</span>
+              <span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span>
-              <span class="card-text" :title= item.gDescribe >{{ item.gDescribe }}</span>
+              <span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span>
 
               <span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</span>
 
@@ -191,7 +201,7 @@ function handleCurrentChange() {
         推荐
       </li>
       <Navili v-for="(item, index) in naviList" :class="{ active: active === index+1 }" :oneli=item :index=(index+1)
-        :active=active @click="scrollTo(index + 1)"></Navili>
+        :active=active @click="scrollTo(index+1)"></Navili>
 
     </ul>
   </div>
@@ -208,7 +218,7 @@ function handleCurrentChange() {
 
 .models {
   width: 100%;
- /*  min-height: 500px; */
+  /*  min-height: 500px; */
 
 
 }