Merge branch 'feat/group-buy' of git.quantgroup.cn:ui/group-buy-ui into feat/group-buy

src/components/avatorSwiper.vue

 <template>
   <div class="avator-swiper">
-    <div ref="refLeft" :class="{ 'ani-left': isAddClass }" class="avator-swiper_left">
+    <div
+      v-if="avatorData.length"
+      ref="refLeft"
+      :class="{ 'ani-left': isAddClass }"
+      class="avator-swiper_left"
+    >
       <cr-image class="avator-swiper_small" :src="leftImgPath" />
     </div>
     <swiper
@@ -21,7 +26,12 @@
         </div>
       </swiper-slide>
     </swiper>
-    <div ref="refRight" :class="{ 'ani-right': isAddClass }" class="avator-swiper_right">
+    <div
+      v-if="avatorData.length"
+      ref="refRight"
+      :class="{ 'ani-right': isAddClass }"
+      class="avator-swiper_right"
+    >
       <cr-image class="avator-swiper_small" :src="rightImgPath" />
     </div>
   </div>
@@ -150,34 +160,9 @@ export default {
     opacity: 1;
   }
 }
-.avator-swiper_right {
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
+
 .avator-swiper {
   position: relative;
-  &_left,
-  &_right {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    top: 50%;
-    margin-top: -9px;
-    border-radius: 50%;
-    overflow: hidden;
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  &_left {
-    left: 3.5px;
-  }
-  &_right {
-    right: 3.5px;
-  }
   width: 100%;
   margin: 0 auto !important;
 
@@ -195,4 +180,24 @@ export default {
     }
   }
 }
+.avator-swiper_left,
+.avator-swiper_right {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  top: 50%;
+  margin-top: -9px;
+  border-radius: 50%;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.avator-swiper_left {
+  left: 3.5px;
+}
+.avator-swiper_right {
+  right: 3.5px;
+}
 </style>

src/components/groupSwiper.vue

@@ -101,12 +101,10 @@ export default {
 @keyframes leftToRight {
   from {
     transform: scale(0.3, 0.3);
-    transform-origin: right right;
     opacity: 0;
   }
   to {
     transform: scale(1, 1);
-    transform-origin: left left;
     opacity: 1;
   }
 }
@@ -118,6 +116,20 @@ export default {
 .ani-opt {
   opacity: 0;
 }
+.avator-swiper_left,
+.avator-swiper_right {
+  height: 100%;
+  width: 25px;
+  position: absolute;
+  top: 0px;
+  // bottom: 0;
+}
+.avator-swiper_right {
+  right: 3px;
+}
+.avator-swiper_left {
+  left: 0px;
+}
 .avator-swiper {
   width: 100%;
   margin: 0 auto !important;
@@ -125,19 +137,6 @@ export default {
   &_container {
     transition-timing-function: linear;
   }
-  &_right,
-  &_left {
-    height: 100%;
-    width: 25px;
-    position: absolute;
-    top: 0px;
-  }
-  &_right {
-    right: 3px;
-  }
-  &_left {
-    left: 0px;
-  }
   &_item {
     transition: transform 0.2s linear;
     padding-top: 2px;