fix: 更换封面图

components/home/banner.vue

@@ -1,306 +1,305 @@
-<template>
-  <div id="index-banner">
-    <div
-      class="swiper swiperBox"
-      v-swiper:swiper="bannerSwiperOption"
-      :cleanup-styles-on-destroy="false"
-      @ready="onSwiperRedied">
-      <div class="swiper-wrapper">
-        <div v-for="(item, index) in bannerData" :key="index" class="swiper-slide">
-          <a :href="item.href" target="_blank">
-            <img :src="item.bannerSrc" :alt="item.bannerAlt">
-          </a>
-        </div>
-      </div>
-      <div class="channelAdvantage btnPrev" slot="button-prev" @click="prev">
-        <div class="el-icon-arrow-left"></div>
-      </div>
-      <div class="channelAdvantage btnNext" slot="button-next" @click="next">
-        <div class="el-icon-arrow-right"></div>
-      </div>
-    </div>
-    <!-- <div class="banner-swiper-pagination" slot="pagination"></div> -->
-  </div>
-</template>
-
-<script>
-export default {
-  name: "VBanner",
-  props: {
-    //bannerData为对象，里面的data属性包含着图片的数组
-    bannerData: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      isLeft: true,
-      currentIndex: 0,
-      timer: "",
-      clickTime: 0,
-      bannerSwiperOption: {
-        // 配置说明直接看官网
-        slidesPerView: "auto",
-        paginationClickable: true,
-        // slidesOffsetBefore: 100,
-        // slidesOffsetAfter: 100,
-        // autoplay: {
-        //   delay: 3500,
-        //   disableOnInteraction: false,
-        // },
-        autoPlay: false,
-        speed: 1000,
-        loop: false,
-        observer: true,
-        observeParents: true,
-        autoplayDisableOnInteraction: false,
-        notNextTick: true,
-        // centeredSlides: true,
-        navigation: {
-          nextEl: ".btnNext",
-          prevEl: ".btnPrev",
-        },
-        pagination: {
-          el: ".banner-swiper-pagination",
-          clickable: true,
-        },
-      },
-    };
-  },
-  created() {
-    //在DOM加载完成后，下个tick中开始轮播
-    this.$nextTick(() => {
-      this.timer = setInterval(() => {
-        this.autoPlay();
-      }, 4000);
-    });
-  },
-  methods: {
-    go() {
-      this.timer = setInterval(() => {
-        this.autoPlay();
-      }, 4000);
-    },
-    stop() {
-      clearInterval(this.timer);
-      this.timer = null;
-    },
-    change(index) {
-      this.currentIndex = index;
-    },
-    autoPlay() {
-      this.isLeft = true;
-      this.currentIndex++;
-      if (this.currentIndex > this.bannerData.length - 1) {
-        this.currentIndex = 0;
-      }
-    },
-    prev() {
-      if (new Date() - this.clickTime > 850) {
-        this.isLeft = false;
-        this.currentIndex--;
-        if (this.currentIndex < 0) {
-          this.currentIndex = this.bannerData.length - 1;
-        }
-
-        this.clickTime = new Date();
-      }
-    },
-    next() {
-      if (new Date() - this.clickTime > 850) {
-        this.isLeft = true;
-        this.currentIndex++;
-        if (this.currentIndex > this.bannerData.length - 1) {
-          this.currentIndex = 0;
-        }
-
-        this.clickTime = new Date();
-      }
-    },
-    onSwiperRedied(swiper) {
-      // console.log('Swiper redied!', swiper)
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-#index-banner {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  // height: 540px;
-  // height: 595px;
-  // max-height: 850px;
-  .swiperBox {
-    height: 100%;
-    &:hover {
-      .channelAdvantage {
-        transform: 0.3s;
-        display: block;
-      }
-    }
-    .swiper-wrapper {
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-  .banner-swiper-pagination {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 65px;
-    z-index: 66;
-    .swiper-pagination-bullet {
-      width: 12px;
-      height: 12px;
-      background: #FFFFFF;
-      opacity: 0.50;
-      margin: 0 11px;
-      &:focus {
-        outline: none;
-      }
-      &.swiper-pagination-bullet-active {
-        width: 45px;
-        height: 12px;
-        background: #FFFFFF;
-        border-radius: 100px;
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.channelAdvantage {
-  display: none;
-  position: absolute;
-  width: 84px;
-  height: 84px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 2;
-  outline: 0;
-  cursor: pointer;
-  text-align: center;
-  line-height: 84px;
-  color: #FFFFFF;
-  background: rgba(0,0,0,.2);
-  &.btnNext {
-    right: 0;
-  }
-  &.btnPrev {
-    left: 0;
-  }
-  div {
-    height: 84px;
-    line-height: 84px;
-    font-size: 32px;
-  }
- }
-
-.i-b-container {
-  position: relative;
-  width: 1200px;
-  height: 100%;
-  margin: 0 auto;
-}
-
-.i-b-tab {
-  position: absolute;
-  left: 50%;
-  bottom: 27px;
-  width: 62px;
-  height: 10px;
-  margin-left: -30px;
-}
-
-.b-c-part {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  overflow: hidden;
-  width: 1920px;
-  height: 100%;
-  margin-left: -960px;
-}
-
-.b-c-part img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.i-b-btn {
-  position: relative;
-  width: 1200px;
-  margin: 0 auto;
-}
-
-.btn-pre {
-  position: absolute;
-  top: -340px;
-  left: -155px;
-  width: 18px;
-  height: 21px;
-  background: url('~assets/images/index/banner-btn-pre.png') center center no-repeat;
-  cursor: pointer;
-}
-
-.btn-next {
-  position: absolute;
-  top: -340px;
-  right: -155px;
-  width: 18px;
-  height: 21px;
-  background: url('~assets/images/index/banner-btn-next.png') center center no-repeat;
-  cursor: pointer;
-}
-
-.btn-pre:hover {
-  background: url('~assets/images/index/banner-btn-pre-cur.png') center center no-repeat;
-}
-
-.btn-next:hover {
-  background: url('~assets/images/index/banner-btn-next-cur.png') center center no-repeat;
-}
-
-.listNext-enter-to {
-  transition: all 1s ease;
-  transform: translateX(0);
-}
-
-.listNext-leave-active {
-  transition: all 1s ease;
-  transform: translateX(-100%);
-}
-
-.listNext-enter {
-  transform: translateX(100%);
-}
-
-.listNext-leave {
-  transform: translateX(0);
-}
-
-.listPrev-enter-to {
-  transition: all 1s ease;
-  transform: translateX(0);
-}
-
-.listPrev-leave-active {
-  transition: all 1s ease;
-  transform: translateX(100%);
-}
-
-.listPrev-enter {
-  transform: translateX(-100%);
-}
-
-.listPrev-leave {
-  transform: translateX(0);
-}
-</style>
+<template>
+  <div id="index-banner">
+    <div
+      class="swiper swiperBox"
+      v-swiper:swiper="bannerSwiperOption"
+      :cleanup-styles-on-destroy="false"
+      @ready="onSwiperRedied">
+      <div class="swiper-wrapper">
+        <div v-for="(item, index) in bannerData" :key="index" class="swiper-slide">
+          <a :href="item.href" target="_blank">
+            <img :src="item.bannerSrc" :alt="item.bannerAlt">
+          </a>
+        </div>
+      </div>
+      <div class="channelAdvantage btnPrev" slot="button-prev" @click="prev">
+        <div class="el-icon-arrow-left"></div>
+      </div>
+      <div class="channelAdvantage btnNext" slot="button-next" @click="next">
+        <div class="el-icon-arrow-right"></div>
+      </div>
+    </div>
+    <!-- <div class="banner-swiper-pagination" slot="pagination"></div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VBanner",
+  props: {
+    //bannerData为对象，里面的data属性包含着图片的数组
+    bannerData: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLeft: true,
+      currentIndex: 0,
+      timer: "",
+      clickTime: 0,
+      bannerSwiperOption: {
+        // 配置说明直接看官网
+        slidesPerView: "auto",
+        paginationClickable: true,
+        // slidesOffsetBefore: 100,
+        // slidesOffsetAfter: 100,
+        // autoplay: {
+        //   delay: 3500,
+        //   disableOnInteraction: false,
+        // },
+        autoPlay: false,
+        speed: 1000,
+        loop: false,
+        observer: true,
+        observeParents: true,
+        autoplayDisableOnInteraction: false,
+        notNextTick: true,
+        // centeredSlides: true,
+        navigation: {
+          nextEl: ".btnNext",
+          prevEl: ".btnPrev",
+        },
+        pagination: {
+          el: ".banner-swiper-pagination",
+          clickable: true,
+        },
+      },
+    };
+  },
+  created() {
+    //在DOM加载完成后，下个tick中开始轮播
+    this.$nextTick(() => {
+      this.timer = setInterval(() => {
+        this.autoPlay();
+      }, 4000);
+    });
+  },
+  methods: {
+    go() {
+      this.timer = setInterval(() => {
+        this.autoPlay();
+      }, 4000);
+    },
+    stop() {
+      clearInterval(this.timer);
+      this.timer = null;
+    },
+    change(index) {
+      this.currentIndex = index;
+    },
+    autoPlay() {
+      this.isLeft = true;
+      this.currentIndex++;
+      if (this.currentIndex > this.bannerData.length - 1) {
+        this.currentIndex = 0;
+      }
+    },
+    prev() {
+      if (new Date() - this.clickTime > 850) {
+        this.isLeft = false;
+        this.currentIndex--;
+        if (this.currentIndex < 0) {
+          this.currentIndex = this.bannerData.length - 1;
+        }
+
+        this.clickTime = new Date();
+      }
+    },
+    next() {
+      if (new Date() - this.clickTime > 850) {
+        this.isLeft = true;
+        this.currentIndex++;
+        if (this.currentIndex > this.bannerData.length - 1) {
+          this.currentIndex = 0;
+        }
+
+        this.clickTime = new Date();
+      }
+    },
+    onSwiperRedied(swiper) {
+      // console.log('Swiper redied!', swiper)
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+#index-banner {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 1700px;
+  .swiperBox {
+    height: 100%;
+    &:hover {
+      .channelAdvantage {
+        transform: 0.3s;
+        display: block;
+      }
+    }
+    .swiper-wrapper {
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+  .banner-swiper-pagination {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 65px;
+    z-index: 66;
+    .swiper-pagination-bullet {
+      width: 12px;
+      height: 12px;
+      background: #FFFFFF;
+      opacity: 0.50;
+      margin: 0 11px;
+      &:focus {
+        outline: none;
+      }
+      &.swiper-pagination-bullet-active {
+        width: 45px;
+        height: 12px;
+        background: #FFFFFF;
+        border-radius: 100px;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.channelAdvantage {
+  display: none;
+  position: absolute;
+  width: 84px;
+  height: 84px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  outline: 0;
+  cursor: pointer;
+  text-align: center;
+  line-height: 84px;
+  color: #FFFFFF;
+  background: rgba(0,0,0,.2);
+  &.btnNext {
+    right: 0;
+  }
+  &.btnPrev {
+    left: 0;
+  }
+  div {
+    height: 84px;
+    line-height: 84px;
+    font-size: 32px;
+  }
+ }
+
+.i-b-container {
+  position: relative;
+  width: 1200px;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.i-b-tab {
+  position: absolute;
+  left: 50%;
+  bottom: 27px;
+  width: 62px;
+  height: 10px;
+  margin-left: -30px;
+}
+
+.b-c-part {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  overflow: hidden;
+  width: 1920px;
+  height: 100%;
+  margin-left: -960px;
+}
+
+.b-c-part img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.i-b-btn {
+  position: relative;
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.btn-pre {
+  position: absolute;
+  top: -340px;
+  left: -155px;
+  width: 18px;
+  height: 21px;
+  background: url('~assets/images/index/banner-btn-pre.png') center center no-repeat;
+  cursor: pointer;
+}
+
+.btn-next {
+  position: absolute;
+  top: -340px;
+  right: -155px;
+  width: 18px;
+  height: 21px;
+  background: url('~assets/images/index/banner-btn-next.png') center center no-repeat;
+  cursor: pointer;
+}
+
+.btn-pre:hover {
+  background: url('~assets/images/index/banner-btn-pre-cur.png') center center no-repeat;
+}
+
+.btn-next:hover {
+  background: url('~assets/images/index/banner-btn-next-cur.png') center center no-repeat;
+}
+
+.listNext-enter-to {
+  transition: all 1s ease;
+  transform: translateX(0);
+}
+
+.listNext-leave-active {
+  transition: all 1s ease;
+  transform: translateX(-100%);
+}
+
+.listNext-enter {
+  transform: translateX(100%);
+}
+
+.listNext-leave {
+  transform: translateX(0);
+}
+
+.listPrev-enter-to {
+  transition: all 1s ease;
+  transform: translateX(0);
+}
+
+.listPrev-leave-active {
+  transition: all 1s ease;
+  transform: translateX(100%);
+}
+
+.listPrev-enter {
+  transform: translateX(-100%);
+}
+
+.listPrev-leave {
+  transform: translateX(0);
+}
+</style>

pages/index.vue

@@ -716,7 +716,8 @@ export default {
           bannerId: "2",
           href: "http://zaojiao.net",
           // bannerSrc: "https://app-resources-luojigou.luojigou.vip/FvEcNZv8Xs_Js8OltKnADxLKVfCS?imageView2/0/q/40|imageslim",
-          bannerSrc: "http://res-teacher.luojigou.vip/1512332236274425858banner备份 2.png",
+          // bannerSrc: "http://res-teacher.luojigou.vip/1512332236274425858banner备份 2.png",
+          bannerSrc: require("~/assets/images/home/banner.jpg"),
           bannerAlt: "中德智慧",
         },
       ],