修改

src/views/Index.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
      <div class="course-banner">
-       <portal-header current="index" ></portal-header>
-    <div id="container">
+       <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-slide v-for="(item , idx ) in resonimg" :key="idx" class="swiper-slide games">
- <img class="banner-img" :src=" fileBaseUrl + item.image" alt="">
+<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>
 </swiper-slide>
 
 <div class="swiper-pagination" slot="pagination"></div>
@@ -364,7 +367,9 @@ export default {
      autoplay:true, //可选选项，自动滑动
    	 speed: 1000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
    	 loop:true, //循环切换
-   	 grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
+   	 grabCursor: true,
+      centeredSlides:true,
+       //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
   	 // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
   	 autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。   
   	 scrollbar: '.swiper-scrollbar',
@@ -416,13 +421,28 @@ export default {
     this.getArticleData();
     this.getQaData();
      this.couresreso();
+
   },
   computed: {
+    
   swiper() {
    return this.$refs.mySwiper.swiper
   }
+  
+  },
+  created(){
+   // undefined
+  //   this.$nextTick(() => {
+	// 	console.log(this.$refs.bannimg)  //获取到正确元素
+	// })
   },
   methods: {
+    // bgfun(){
+    //  console.log(this.$refs.bannimg[0]); 
+    //  this.$nextTick(() => {
+		// 		console.log(this.$refs.bannimg[0])
+		// 	})
+    // },
      couresreso(){
       let key = 'index';
       apiPlace.detail(key).then(res=>{
@@ -707,14 +727,39 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+
+.bannbox{
+  width: 100%;
+  text-align: center;
+  z-index: 66;
+
+  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;
   top: 0;
   width: 100%;
 }
 .banner-img{
-  width: 100%;
+  // width: 100%;
   height: 520px;
+  text-align: center;
+ 
+  
 }
 .course-banner{
     height: 520px;