首页轮播

src/views/Index.vue

@@ -1,6 +1,22 @@
 <template>
   <div>
-    <portal-header current="index" ></portal-header>
+     <div class="course-banner">
+       <portal-header current="index" ></portal-header>
+    <div id="container">
+<swiper :options="swiperOption" ref="mySwiper">
+
+     
+
+<swiper-slide v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">
+ <img class="banner-img" :src=" fileBaseUrl + item.image" alt="">
+</swiper-slide>
+
+<div class="swiper-pagination" slot="pagination"></div>
+<div class="swiper-button-prev" slot="button-prev"></div>
+<div class="swiper-button-next" slot="button-next"></div>
+</swiper>   
+</div> 
+    </div>
     <div class="portal-content xcontent" >
       <!-- 推荐课程 -->
       <div class="modules">
@@ -335,6 +351,9 @@ import interactRowBar from '@/components/Portal/interactRowBar.vue';
 import courseImage from '@/components/Course/courseImage.vue';
 import articleImage from '@/components/Article/articleImage.vue';
 import { toScore,cutFullName} from '@/utils/tools.js';
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+import apiPlace from "@/api/modules/place.js"
+
 export default {
   name: 'index',
   components: { portalHeader,ad, portalFooter, articleImage, portalFloatTools, authorInfo, interactRowBar, interactBar, courseImage },
@@ -343,6 +362,32 @@ export default {
   },
   data() {
     return {
+       resonimg:[ ],
+      swiperOption: {
+      autoplay : {
+    	disableOnInteraction: false, //用户操作后是否禁止自动循环
+   		delay: 3000 //自自动循环时间
+  	  }, //可选选项，自动滑动
+   	 speed: 2000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
+   	 loop:true, //循环切换
+   	 grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
+  	 // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
+  	 autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。   
+  	 scrollbar: '.swiper-scrollbar',
+  	 mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
+  	 observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
+
+   	pagination: {
+    	el: '.swiper-pagination',
+    	// type : 'progressbar', //分页器形状
+    	clickable :true, //点击分页器的指示点分页器会控制Swiper切换
+  	 },
+  	 navigation: {
+   	 nextEl: '.swiper-button-next',
+   	 prevEl: '.swiper-button-prev',
+ 	  },    
+   },
+
       couname:'',
       isNext: true,
       pageIndex: 1,
@@ -376,8 +421,24 @@ export default {
     this.getCaseData();
     this.getArticleData();
     this.getQaData();
+     this.couresreso();
+  },
+  computed: {
+  swiper() {
+   return this.$refs.mySwiper.swiper
+  }
   },
   methods: {
+     couresreso(){
+      let key = 'index';
+      apiPlace.detail(key).then(res=>{
+        console.log(res)
+        let lmj =  JSON.parse(res.result.content) 
+        console.log(lmj)
+        this.resonimg = lmj
+        // console.log(this.resonimg)
+      })
+    },
     jumUX(){
      window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130','_blank');
     },
@@ -648,10 +709,23 @@ export default {
       this.$router.push({ path: '/qa/answer', query: { id: item.id } });
     }
   }
-};
+  }
 </script>
 
 <style scoped lang="scss">
+#container{
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.banner-img{
+  width: 100%;
+  height: 520px;
+}
+.course-banner{
+    height: 520px;
+    // background: url('/images/course-banner.png');
+  }
 .case-orginfo{
   // line-height: 25px;
   height: 45px;