feat:update

package-lock.json

@@ -11971,12 +11971,11 @@
       }
     },
     "swiper": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmmirror.com/swiper/download/swiper-5.2.0.tgz?cache=0&sync_timestamp=1632899438741&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fswiper%2Fdownload%2Fswiper-5.2.0.tgz",
-      "integrity": "sha1-g0qvYFPTJLy2BXi6ULti9UNC+co=",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/swiper/download/swiper-4.0.7.tgz?cache=0&sync_timestamp=1632899438741&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fswiper%2Fdownload%2Fswiper-4.0.7.tgz",
+      "integrity": "sha1-iRdcKiPYZiLtqDRHQMJKNwGmsnA=",
       "requires": {
-        "dom7": "^2.1.3",
-        "ssr-window": "^1.0.1"
+        "dom7": "^2.0.1"
       }
     },
     "table": {
@@ -12788,9 +12787,24 @@
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
     "vue-awesome-swiper": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz",
-      "integrity": "sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4="
+      "version": "3.1.3",
+      "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha1-BVALUB/7P+yb9+uZhbz0roNg7Z4=",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      },
+      "dependencies": {
+        "swiper": {
+          "version": "4.5.1",
+          "resolved": "https://registry.npmmirror.com/swiper/download/swiper-4.5.1.tgz?cache=0&sync_timestamp=1632899438741&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fswiper%2Fdownload%2Fswiper-4.5.1.tgz",
+          "integrity": "sha1-7UOZjngM60eGEAecjSP9Ql7KY28=",
+          "requires": {
+            "dom7": "^2.1.3",
+            "ssr-window": "^1.0.1"
+          }
+        }
+      }
     },
     "vue-eslint-parser": {
       "version": "7.1.0",

package.json

@@ -23,9 +23,9 @@
     "qiniu-js": "^3.3.1",
     "raven-js": "^3.27.2",
     "sa-sdk-javascript": "^1.15.16",
-    "swiper": "^5.2.0",
+    "swiper": "^4.0.7",
     "vue": "2.6.11",
-    "vue-awesome-swiper": "4.1.1",
+    "vue-awesome-swiper": "3.1.3",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
     "weixin-js-sdk": "^1.6.0"

src/components/avatorSwiper.vue

@@ -22,14 +22,15 @@
   </div>
 </template>
 <script>
-import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
-import 'swiper/css/swiper.css';
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+import 'swiper/dist/css/swiper.css';
+
 import Img2Thumb from '@/filters/img2Thumb.filter';
 export default {
   name: 'AvatorSwiper',
   components: {
-    Swiper,
-    SwiperSlide
+    swiper,
+    swiperSlide
   },
   filters: {
     Img2Thumb
@@ -45,7 +46,7 @@ export default {
   data() {
     const vm = this;
     const isLoop = vm.avatorData.length < 9 ? false : true;
-    const autoplay = isLoop ? { delay: 5000 } : false;
+    const autoplay = isLoop ? { delay: 3000 } : false;
     return {
       timer: null,
       isLoop,
@@ -57,10 +58,10 @@ export default {
         initialSlide: 0,
         slidesPerView: 9,
         spaceBetween: 4,
-        speed: 600,
+        cssMode: true,
+        speed: 800,
         centeredSlides: true,
         centeredSlidesBounds: true,
-        // watchSlidesProgress: false,
         allowTouchMove: false,
         autoplay,
         on: {
@@ -155,14 +156,15 @@ export default {
 }
 .ani-left {
   transform-origin: center;
-  animation: bigToSamll 0.6s linear;
+  animation: bigToSamll 0.8s linear;
 }
 .ani-right {
   transform-origin: center;
-  animation: samllToBig 0.6s linear;
+  animation: samllToBig 0.8s linear;
 }
 .ani-opt {
   opacity: 0;
+  transition: 0.1s linear;
 }
 .avator_left,
 .avator_right {

src/components/groupSwiper.vue

@@ -21,13 +21,13 @@
   </div>
 </template>
 <script>
-import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
-import 'swiper/css/swiper.css';
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+import 'swiper/dist/css/swiper.css';
 export default {
   name: 'GroupSwiper',
   components: {
-    Swiper,
-    SwiperSlide
+    swiper,
+    swiperSlide
   },
   props: {
     bgColor: {
@@ -58,6 +58,7 @@ export default {
         initialSlide: 0,
         slidesPerView: 7,
         // spaceBetween: 8,
+        // cssMode: true,
         speed: 600,
         centeredSlides: true,
         centeredSlidesBounds: true,