feat:修改样式

src/components/avatorSwiper.vue

@@ -17,7 +17,7 @@
     <div v-if="isLoop" class="avator_right avator-swiper_item" :class="{ 'ani-right': isAddClass }">
       <img :src="rightImgPath" />
     </div>
-    <span class="avator-swiper-bg" :style="{ backgroundColor: bgColor }">&nbsp;</span>
+    <span class="avator-swiper-bg" />
   </div>
 </template>
 <script>
@@ -76,21 +76,21 @@ export default {
             vm.avatorItem = vm.getAvatorItem(slideRight);
             vm.leftImgPath = slideLeft.data('src');
             vm.rightImgPath = slideRight.data('src');
-            slideRight.addClass('ani-opt');
             slideLeft.addClass('ani-opt');
+            slideRight.addClass('ani-opt');
             vm.isAddClass = true;
             clearTimeout(vm.timer);
             vm.timer = setTimeout(() => {
               vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true });
               clearTimeout(vm.timer);
-            }, 800);
+            }, 1000);
           },
           transitionEnd: function() {
-            vm.isAddClass = false;
             for (let i = 0; i < this.slides.length; i++) {
               let slide = this.slides.eq(i);
               slide.removeClass('ani-opt');
             }
+            vm.isAddClass = false;
           }
         }
       }
@@ -156,8 +156,8 @@ export default {
   }
 }
 .ani-left {
-  transform-origin: center;
-  animation: bigToSamll 0.8s linear;
+  transform-origin: right;
+  animation: bigToSamll 0.8s linear forwards;
 }
 .ani-right {
   transform-origin: left;
@@ -174,6 +174,7 @@ export default {
 }
 .ani-opt {
   opacity: 0;
+  transition: opacity 0.1s linear;
 }
 .avator_left,
 .avator_right {
@@ -194,7 +195,7 @@ export default {
   &_item {
     height: 25px;
     width: 25px;
-    transition: transform 0 0.2s linear;
+    // transition: transform 0 0.2s linear;
     box-sizing: border-box;
     // display: flex;
     // align-items: center;

src/components/groupSwiper.vue

@@ -188,7 +188,7 @@ export default {
 .swiper-disabled {
   @{deep} .swiper-wrapper {
     display: flex;
-    justify-content: right;
+    justify-content: flex-end;
   }
 }
 </style>