修改

src/views/grateful/index.vue

@@ -1,33 +1,5 @@
 <template>
   <div class="main">
-    <div class="course-banner" v-if="!$route.meta.hidden">
-      <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>
     <router-view></router-view>
     <!-- 底部 -->
     <div class="grateful">
@@ -37,50 +9,12 @@
 </template>
 
 <script>
-import apiPlace from "@/api/phase2/place.js";
 export default {
   name: "Grateful",
   data() {
     return {
-      resonimg: [],
-      swiperOptiontwo: {
-        autoplay: false,
-        // noSwiping: true,
-      },
-      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",
-        },
-      },
-      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
     };
-  },
-  mounted() {
-    this.couresreso();
-  },
-  methods: {
-    couresreso() {
-      let key = "index";
-      apiPlace.detail(key).then((res) => {
-        let lmj = JSON.parse(res.result.content);
-        this.resonimg = lmj;
-      });
-    }
-  },
+  }
 };
 </script>
 
@@ -123,101 +57,4 @@ export default {
 
 
 }
-
-.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;
-    }
-  }
-}
 </style>