修改

src/views/Index.vue

@@ -3,12 +3,11 @@
      <div class="course-banner">
        <portal-header current="index" style="z-index:999; position: relative;" ></portal-header>
     <div id="container" style="z-index:99;">
-<swiper :options="swiperOption" ref="mySwiper" >
+<swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length">
 <swiper-slide  style="margin: 0 auto;" v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">
   <div class="bannbox"  :style="{ 'background': `url(${fileBaseUrl + item.image})`}" >
-  
- <img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
   </div>
+  <img class="banner-img" style=" margin: 0 auto;" :src=" fileBaseUrl + item.image" alt="">
 </swiper-slide>
 
 <div class="swiper-pagination" slot="pagination"></div>
@@ -364,17 +363,14 @@ export default {
     return {
        resonimg:[ ],
       swiperOption: {
-     autoplay:true, //可选选项，自动滑动
+    autoplay: {
+       disableOnInteraction: false ,
+       delay: 2000,
+       },
    	 speed: 1000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
    	 loop:true, //循环切换
-   	 grabCursor: true,
+      peed: 300,//循环速度
-      centeredSlides: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',
@@ -731,35 +727,30 @@ export default {
 
 .bannbox{
   width: 100%;
+  height: 520px;
   text-align: center;
-  z-index: 66;
+   filter:blur(5px);
+    z-index:-1;
+    background-size:100% 100%;
+   
+}
 
-  img{
-    z-index: 998;
-    filter: none;
-  }
-}
-.bannbox::before {
-    content: "";
-    filter: blur(30px);
-    position: absolute; /* 一定要用绝对定位 */
-    width: 100%;
-    height: 100%;
-}
 ::v-deep.swiper-slide .games .swiper-slide-active{
   text-align: center !important;
 }
 #container{
   position: absolute;
+  height: 520px;
   top: 0;
   width: 100%;
 }
 .banner-img{
-  // width: 100%;
   height: 520px;
   text-align: center;
- 
+  position:absolute;
-  
+  top: 0;
+  left: 25%;
+  z-index: 888;
 }
 .course-banner{
     height: 520px;