Skip to content

G
group-buy-ui
Commit 15f3c43f authored by Xuguangxing's avatar Xuguangxing
Browse files
Options

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

parents 400ace9a 511f11b9
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 64 deletions
src/components/avatorSwiper.vue
View file @ 15f3c43f
<template>
<div class="avator-swiper">
<div v-if="isLoop" ref="refLeft" :class="{ 'ani-left': isAddClass }" class="avator-swiper_left">
<cr-image class="avator-swiper_small" :src="leftImgPath" />
<div v-if="isLoop" class="avator_left avator-swiper_item" :class="{ 'ani-left': isAddClass }">
<img :src="leftImgPath" />
</div>
<swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
<swiper-slide
......@@ -10,20 +10,14 @@
:data-src="item"
:data-name="item"
class="avator-swiper_item"
@set-translate="setTranslate"
>
<div class="avator-swiper_item">
<img :src="item | Img2Thumb" />
</div>
</swiper-slide>
</swiper>
<div
v-if="isLoop"
ref="refRight"
:class="{ 'ani-right': isAddClass }"
class="avator-swiper_right"
>
<cr-image class="avator-swiper_small" :src="rightImgPath" />
<div v-if="isLoop" class="avator_right avator-swiper_item" :class="{ 'ani-right': isAddClass }">
<img :src="rightImgPath" />
</div>
</div>
</template>
......@@ -53,6 +47,7 @@ export default {
const isLoop = vm.avatorData.length < 9 ? false : true;
const autoplay = isLoop ? { delay: 5000 } : false;
return {
timer: null,
isLoop,
isAddClass: false,
rightImgPath: '',
......@@ -62,12 +57,15 @@ export default {
initialSlide: 0,
slidesPerView: 9,
spaceBetween: 4,
speed: 900,
centeredSlides: isLoop,
speed: 600,
centeredSlides: true,
watchSlidesProgress: false,
allowTouchMove: false,
autoplay,
on: {
slideChangeTransitionStart: function() {
vm.$store.dispatch('goods_avator_info', { showInfo: false });
},
transitionStart: function() {
const activeIndex = this.activeIndex;
const slideLeft = this.slides.eq(activeIndex - 5);
......@@ -78,10 +76,13 @@ export default {
slideRight.addClass('ani-opt');
slideLeft.addClass('ani-opt');
vm.isAddClass = true;
vm.$store.dispatch('goods_avator_info', { showInfo: false });
clearTimeout(vm.timer);
vm.timer = setTimeout(() => {
vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true });
clearTimeout(vm.timer);
}, 800);
},
transitionEnd: function() {
vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true });
vm.isAddClass = false;
for (let i = 0; i < this.slides.length; i++) {
let slide = this.slides.eq(i);
......@@ -98,14 +99,14 @@ export default {
}
},
methods: {
setTranslate() {
const slides = this.swiper.slides;
for (let i = 0; i < slides.length; i++) {
const slide = slides.eq(i);
const progress = slides[i].progress;
slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
}
},
// setTranslate() {
// const slides = this.swiper.slides;
// for (let i = 0; i < slides.length; i++) {
// const slide = slides.eq(i);
// const progress = slides[i].progress;
// slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
// }
// },
getAvatorItem(ele) {
return {
src: ele.data('src'),
......@@ -119,75 +120,87 @@ export default {
@keyframes bigToSamll {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0);
transform: scale(0.3);
opacity: 0;
}
}
@keyframes samllToBig {
from {
transform: scale(0);
transform: scale(0.3);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.ani-left {
transform-origin: center;
animation: bigToSamll 1s linear;
animation-fill-mode: forwards;
animation: bigToSamll 0.6s linear;
}
.ani-right {
transform-origin: center;
animation: samllToBig 1s linear;
animation-fill-mode: forwards;
animation: samllToBig 0.6s linear;
}
.ani-opt {
opacity: 0;
}
@keyframes scaleTo {
to {
opacity: 1;
}
.avator_left,
.avator_right {
backface-visibility: hidden;
perspective: 1000;
position: absolute;
top: 0;
}
.avator_right {
right: 0;
}
.avator_left {
left: 0;
}
.avator-swiper {
position: relative;
width: 100%;
margin: 0 auto !important;
&_item {
transition: transform 0.2s linear;
height: 32px;
padding-top: 2px;
display: flex;
align-items: center;
justify-content: center;
// transform: scale(1);
// transition: transform 0 0.2s linear;
img {
height: 25px;
width: 25px;
border-radius: 50%;
}
&.active {
transform: scale(1.2);
}
}
}
.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;
.swiper-slide {
text-align: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.avator-swiper_right {
right: 3.5px;
.swiper-slide-active {
transform: scale(1.2);
transition: transform 0.6s linear;
}
</style>
src/components/groupSwiper.vue
View file @ 15f3c43f
......@@ -155,7 +155,6 @@ export default {
position: absolute;
top: 0;
right: -2px;
background-color: #000;
z-index: 2;
}
.avator-swiper {
......
src/views/goodsList/index.vue
View file @ 15f3c43f
......@@ -122,18 +122,21 @@ export default {
}
},
watch: {
$route(to) {
if (to.name !== 'groupBuyList') {
this.setTitleColor();
return;
}
this.setTitleColor(this.goodsTemp.bgcolor);
}
// $route(to) {
// if (to.name !== 'groupBuyList') {
// this.setTitleColor();
// return;
// }
// this.setTitleColor(this.goodsTemp.bgcolor);
// }
},
created() {
this.showLoops = true;
this.reload = true;
},
beforeDestroy() {
this.setTitleColor();
},
// deactivated() {
// this.showLoops = false;
// },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment