官网修改

components/home/headmasterMsg.vue

@@ -21,30 +21,19 @@
         <div class="swiper-pagination swiper-pagination-bullets"></div>
       </div>
     </div>
-    <div class="title-swiper">
-      <div v-swiper:secondSwiper="swiperOption1" ref="mySwiper1" @click="handleClick">
-        <div class="swiper-wrapper">
-          <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
-            {{item.title}}
-          </div>
-        </div>
-      </div>
-      <div class="swiper-btn swiper-button-prev">
-        <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png">
-      </div>
-      <div class="swiper-btn swiper-button-next">
-        <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png">
-      </div>
-    </div>
+    <text-swiper v-if="isShowSwiper" :listData="listData" @slideTo="handleSlideTo" />
   </div>
 </template>
 <script>
 import appLink from '@/components/Link'
+import textSwiper from './textSwiper.vue'
 export default {
   components: {
-    appLink
+    appLink,
+    textSwiper
   },
   data() {
+    const that = this
     return {
       listData: [],
       swiperOption: {
@@ -60,21 +49,7 @@ export default {
         height: 500
         // autoHeight: true
       },
-      swiperOption1: {
-        observer: true,
-        observeParents: true,
-        speed: 400,
-        autoplay: false,
-        delay: 3000,
-        loop: true,
-        slidesPerView: 'auto',
-        centeredSlides: true,
-        spaceBetween: 20,
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        }
-      }
+      isShowSwiper: false
     }
   },
   async fetch() {
@@ -83,7 +58,10 @@ export default {
       type_tag: 'img_text_school'
     }
     this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
-      // console.log(res.data.data)
+      this.isShowSwiper = false
+      setTimeout(() => {
+        this.isShowSwiper = true
+      },100)
       return res.data.data
     })
   },
@@ -93,18 +71,16 @@ export default {
     // }
   },
   mounted() {
+    this.isShowSwiper = false
+    setTimeout(() => {
+      this.isShowSwiper = true
+    },100)
   },
   methods: {
-    handleClick() {
-      const index = this.$refs.mySwiper1.swiper.clickedSlide.dataset.swiperSlideIndex
+    handleSlideTo(index) {
+      console.log(index)
       this.$refs.mySwiper.swiper.slideTo(index)
     }
-    // swiperStop() {
-    //   this.swiper.autoplay.stop()
-    // },
-    // swiperStart() {
-    //   this.swiper.autoplay.start()
-    // }
   }
 }
 </script>
@@ -171,40 +147,5 @@ export default {
       }
     }
   }
-  .title-swiper{
-    padding: 0 25px;
-    margin-top:5px;
-    position:relative;
-    // overflow: auto;
-    // width: 100%;
-    .swiper-slide{
-      position: relative;
-      width: 250px;
-      height: 58px;
-      margin-right:10px;
-      padding:7px 10px;
-      line-height:22px;
-      font-size:16px;
-      cursor: pointer;
-    }
-    .swiper-btn{
-      width:20px;
-      height:35px;
-      position:absolute;
-      left:-5px;
-      top:50%;
-      transform:translateY(-50%);
-      z-index:2;
-      img{
-        width:100%;
-        height:100%;
-        display:block;
-      }
-    }
-    .swiper-button-next{
-      left:unset;
-      right: -5px;
-    }
-  }
 }
 </style> 
\ No newline at end of file

components/home/textSwiper.vue

+<template>
+  <div class="title-swiper">
+    <div v-swiper:secondSwiper="swiperOption1" ref="mySwiper1" @click="handleClick">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide swiper-no-swiping" v-for="(item, index) in listData" :key="index">
+          {{item.title}}
+        </div>
+      </div>
+    </div>
+    <div class="swiper-btn swiper-button-prev">
+      <img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png">
+    </div>
+    <div class="swiper-btn swiper-button-next">
+      <img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    listData: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      swiperOption1: {
+        observer: true,
+        observeParents: true,
+        speed: 400,
+        autoplay: false,
+        delay: 3000,
+        loop: true,
+        slidesPerView: 'auto',
+        centeredSlides: true,
+        spaceBetween: 0,
+        disableOnInteraction: false,
+        on:{
+          init: function(){
+            // that.isShowSwiper = true
+          }
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        }
+      },
+      isEn: false
+    }
+  },
+  created() {
+    this.isEn = this.$cookies.get('lang') === 'en-US'
+  },
+  methods: {
+    handleClick(e) {
+      const index = e.target.dataset.swiperSlideIndex
+      this.$emit('slideTo', index)
+    }
+  }
+}
+</script>
+<style lang="scss"  scoped>
+.title-swiper{
+  padding: 0 25px;
+  margin-top:5px;
+  position:relative;
+  // overflow: auto;
+  // width: 100%;
+  .swiper-slide{
+    position: relative;
+    width: 266px;
+    height: 44px;
+    padding:0 20px;
+    margin:7px 0;
+    line-height:22px;
+    font-size:16px;
+    cursor: pointer;
+    user-select:none;
+    border-right:1px solid #a81840;
+    overflow : hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .swiper-btn{
+    width:20px;
+    height:35px;
+    position:absolute;
+    left:-5px;
+    top:50%;
+    transform:translateY(-50%);
+    z-index:2;
+    user-select:none;
+    img{
+      width:100%;
+      height:100%;
+      display:block;
+    }
+  }
+  .swiper-button-next{
+    left:unset;
+    right: -5px;
+  }
+}
+</style>
\ No newline at end of file

components/services/swiperCom.vue

@@ -54,8 +54,12 @@ export default {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
         }
-      }
+      },
+      isEn: false
     }
+  },
+  created() {
+    this.isEn = this.$cookies.get('lang') === 'en-US'
   }
 }
 </script>