修改轮播

package-lock.json

@@ -7351,8 +7351,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -10685,9 +10684,44 @@
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
     "vue-awesome-swiper": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
-      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      },
+      "dependencies": {
+        "dom7": {
+          "version": "2.1.5",
+          "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+          "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+          "requires": {
+            "ssr-window": "^2.0.0"
+          },
+          "dependencies": {
+            "ssr-window": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+              "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+            }
+          }
+        },
+        "ssr-window": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+          "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+        },
+        "swiper": {
+          "version": "4.5.1",
+          "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
+          "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+          "requires": {
+            "dom7": "^2.1.3",
+            "ssr-window": "^1.0.1"
+          }
+        }
+      }
     },
     "vue-eslint-parser": {
       "version": "7.1.1",

package.json

@@ -87,7 +87,7 @@
     "swiper": "^6.3.5",
     "viewerjs": "^1.9.0",
     "vue": "^2.6.12",
-    "vue-awesome-swiper": "^4.1.1",
+    "vue-awesome-swiper": "3.1.3",
     "vue-i18n": "^8.22.2",
     "vue-loader": "^15.9.5",
     "vue-meta-info": "^0.1.7",

src/pages/home/index.vue

@@ -9,7 +9,7 @@
             </router-link>
           </swiper-slide>
         </swiper>
-        <div class="assist">
+        <div class="assist" v-if="swiperList.length">
           <div class="text">{{ swiperList[swiperIndex].content }}</div>
           <div class="pagination">
             <span v-for="(item, index) in swiperList" :key="index" :class="index == swiperIndex && 'active'"></span>
@@ -22,17 +22,17 @@
           <div :class="tabsIndex ? 'btn active' : 'btn'" @click="tabs(1)">活动公告</div>
         </div>
         <div class="news-content">
-          <div class="title" v-if="list[0]">{{ list[0].excerpt }}</div>
+          <div class="title" v-if="list[0]"><router-link :to="`/news/detail?id=${list[0].id}&type=home`">{{ list[0].title }}</router-link></div>
           <ul>
             <template v-for="(item, index) in list">
-              <template v-if="index <= 3">
+              <template v-if="index >= 1 && index <= 4">
                 <router-link :to="`/news/detail?id=${item.id}&type=home`" :key="index">
                   <li>
                     <span>
                       {{ item.title }}
                     </span>
-                    <template v-if="list.length >= 4">
-                      <div class="more" v-if="index == 3">
+                    <template v-if="list.length >= 5">
+                      <div class="more" v-if="index == 4">
                         <router-link to="/news">更多</router-link>
                       </div>
                     </template>
@@ -103,13 +103,12 @@
 
 <script>
 import action from '@action'
-import { Swiper, SwiperSlide, directive, pagination } from 'vue-awesome-swiper'
+import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
 export default {
   components: {
-    Swiper,
-    SwiperSlide,
-    pagination
+    swiper,
+    swiperSlide
   },
   directives: {
     swiper: directive
@@ -134,6 +133,13 @@ export default {
           slideChangeTransitionStart: function() {
             _this.swiperIndex = this.activeIndex
           }
+        },
+        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
+        observeParents:true,//修改swiper的父元素时，自动初始化swiper 
+        // loop:true,
+        autoplay: {
+          delay: 1000,
+          disableOnInteraction: false
         }
       },
       swiperIndex: 0,
@@ -182,12 +188,13 @@ export default {
           this.list = res.data.list
           this.swiperList = []
           res.data.list.map((item, index) => {
-            if (index <= 3) {
+            if (index <= 4) {
               this.swiperList.push({
                 url: item.cover_pc_url,
                 content: item.title,
                 id: item.id
               })
+              console.log(this.swiperList)
             }
           })
           loading.close()
@@ -277,6 +284,11 @@ export default {
     }
     .news-content{
       .title{
+        cursor: pointer;
+        width:510px;    
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
         text-align: center;
         font-size: 24px;
         font-weight: bold;