修改

src/views/grateful/GratefulHomePage.vue

@@ -1,6 +1,34 @@
 <template>
   <div>
-    <!-- 教师赋能 -->
+    <div class="course-banner">
+      <div id="container" style="z-index: 99" v-if="resonimg.length == 1">
+        <!-- 当轮播图等于一张时 -->
+        <swiper :options="swiperOptiontwo">
+          <swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'a' + idx"
+            class="swiper-slide games pointer">
+            <div class="bannbox" :style="{
+              background: `url(${fileBaseUrl + item.image
+                }) no-repeat 100% / 100%`,
+            }"></div>
+            <img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
+          </swiper-slide>
+        </swiper>
+      </div>
+      <div id="container" style="z-index: 99" v-else>
+        <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length > 1">
+          <swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'b' + idx"
+            class="swiper-slide games pointer">
+            <div class="bannbox" :style="{
+              background: `url(${fileBaseUrl + item.image
+                }) no-repeat 100% / 100%`,
+            }"></div>
+            <img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
+          </swiper-slide>
+          <div class="swiper-pagination" slot="pagination"></div>
+        </swiper>
+      </div>
+    </div>
+    <!-- 图片 -->
     <div class="xindex-content">
       <div class="modules xcontent2">
         <div class="xcontent2-main">
@@ -157,7 +185,7 @@
 import apiCourseStudy from "@/api/modules/courseStudy.js";
 import courseImage from "@/components/Course/courseImage.vue";
 import { toScore, formatUserNumber } from "@/utils/tools.js";
-import { saveOpinion, noticeList, courselList, toolList } from '@/api/modules/grateful.js'
+import { saveOpinion, noticeList, courselList, toolList, carouselList } from '@/api/modules/grateful.js'
 export default {
   name: "Grateful",
   components: {
@@ -179,14 +207,56 @@ export default {
         noticeList: [],
         toolList: []
       },
+      resonimg: [],
+      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
+      swiperOptiontwo: {
+        autoplay: false,
+        // noSwiping: true,
+      },
+      resonimg: [],
+      swiperOption: {
+        autoplay: {
+          delay: 2000,
+          disableOnInteraction: false, //解决滑动后不能轮播的问题
+        },
+        speed: 3000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
+        loop: true, //循环切换
+        peed: 300, //循环速度
+        scrollbar: ".swiper-scrollbar",
+        pagination: {
+          el: ".swiper-pagination",
+          // type : 'progressbar', //分页器形状
+          clickable: true, //点击分页器的指示点分页器会控制Swiper切换
+        },
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      }
     };
   },
   mounted() {
+    this.couresreso();
     this.getCourseData(1);
     this.getNoticeData()
     this.getToolData()
   },
   methods: {
+    couresreso() {
+      carouselList().then((res) => {
+        console.log(res);
+        const list = res.data.records.map(item => {
+          return {
+            image: item.picPath,
+            name: item.displayPage,
+            JumpUrl: '',
+            bgcolor: '',
+            ...item
+          }
+        });
+        this.resonimg = list;
+      })
+    },
     submitNotice() {
       if (!this.form.textarea) return this.$message({ message: '请输入内容', type: 'error' })
       saveOpinion({ content: this.form.textarea }).then(() => {
@@ -221,7 +291,13 @@ export default {
         pageSize: 8
       }).then((res) => {
         if (res.code == 200 && res.data.records.length > 0) {
-          console.log(res.result, '之前的');
+          console.log(res.data.records, '之前的');
+          // res.data.records.map((item) => {
+          //   return {
+          //     ...item,
+          //     coverImg:item.coverImg
+          //   }
+          // })
           this.courseList.list = res.data.records;
         } else {
           console.log("加载课程信息失败:" + res.error);
@@ -251,6 +327,103 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.bannbox {
+  width: 100%;
+  height: 520px;
+  text-align: center;
+  filter: blur(5px);
+  z-index: -1;
+  background-size: 100% 100%;
+}
+
+::v-deep.swiper-slide .games .swiper-slide-active {
+  text-align: center !important;
+}
+
+#container {
+  position: absolute;
+  height: 520px;
+  top: 0;
+  width: 100%;
+}
+
+.banner-img {
+  height: 520px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: (-50%, -50%);
+}
+
+.course-banner {
+  height: 520px;
+
+  .swiper-button-prev {
+    height: 38px;
+    padding: 0 16px;
+    background: rgba($color: #000000, $alpha: 0.8) url("../../assets/images/icon/ban-left.png") no-repeat;
+    background-size: 12px 18px;
+    background-position: 16px 10px;
+    bottom: 66px;
+    border-radius: 19px 0 0 19px;
+  }
+
+  .swiper-button-next {
+    height: 38px;
+    bottom: 66px;
+    top: auto;
+    padding: 0 16px;
+    background: rgba($color: #000000, $alpha: 0.1) url("../../assets/images/icon/ban-right.png") no-repeat;
+    background-size: 12px 18px;
+    background-position: 6px 10px;
+    border-radius: 0 19px 19px 0;
+  }
+
+  .swiper-pagination-bullets {
+    left: 60px;
+    bottom: 66px;
+  }
+
+  ::v-deep .swiper-pagination {
+    line-height: 25px;
+    height: 32px;
+    border-radius: 19px;
+    width: auto;
+    left: 45%;
+    padding: 0 20px;
+    border-radius: 19px;
+
+    .swiper-pagination-bullet {
+      position: relative;
+      width: 25px;
+      height: 5px;
+      margin-top: 10px;
+      background: #fff;
+      opacity: 1 !important;
+      border-radius: 2px;
+    }
+
+    .swiper-pagination-bullet::before {
+      content: "";
+      position: absolute;
+      top: -20px;
+      bottom: -20px;
+      left: -2px;
+      right: -2px;
+    }
+
+    .swiper-pagination-bullet-active {
+      height: 5px;
+      opacity: 1 !important;
+      margin-top: 10px;
+      width: 25px;
+      background: #387df7;
+      border-radius: 2px;
+    }
+  }
+}
+
 ::v-deep .el-dialog__body {
   background: linear-gradient(180deg, rgba(56, 125, 247, 0.2) 0%, rgba(166, 168, 255, 0) 100%) no-repeat;
   background-size: 100% 136px;