Commit 39b9c0c9 authored by xhx's avatar xhx

闪烁调整

parent 00326569
......@@ -7,11 +7,11 @@
<img src="@/assets/images/home/scene-bottom.png" class="scene_img_bottom" alt="场景">
<div class="scene_img_box absolute text-center" ref="box" :style="{'transition': isRight ? '0s' : ''}">
<img src="@/assets/images/home/scene.png" class="scene_img" alt="场景">
<img src="@/assets/images/home/scene.png" class="scene_img absolute" style="left: 2026px; top: 0" alt="场景">
<img src="@/assets/images/home/scene.png" class="scene_img absolute" style="left: -2026px; top: 0" alt="场景">
<img src="@/assets/images/home/scene.png" class="scene_img absolute" style="left: 2027px; top: 0" alt="场景">
<img src="@/assets/images/home/scene.png" class="scene_img absolute" style="left: -2027px; top: 0" alt="场景">
<div class="dot absolute" v-for="(item, _index) in lists" :key="_index" :style="{'left': !enStyle ? l_width * _index + 100 + 'px' : l_width * _index + 100 - 36 + 'px'}">
<p class="text-14px absolute dot1_text text-article-color" :class="{'opacity-0': index === _index}" :style="{'top': item.direction === 'u' ? '-15px' : '', 'white-space': enStyle ? 'nowrap' : ''}">{{ item.title }}</p>
<div class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': (index !== _index),}" :style="{'width': enStyle ? '245px' : '', 'height': item.height + 'px'}">
<p class="text-14px absolute dot1_text text-article-color" :class="{'opacity-0': index === _index}" :style="{'top': item.direction === 'u' ? '-15px' : '', 'white-space': enStyle ? 'nowrap' : 'nowrap'}">{{ item.title }}</p>
<div ref="block" class="dot_block flex flex-col items-center justify-start" :class="{'opacity-0': (index !== _index),}" :style="{'width': enStyle ? '245px' : '', 'height': item.height + 'px'}">
<div class="circle flex items-center justify-center" @click="clickChange(_index)">
<div class="circle_dot"></div>
</div>
......@@ -119,7 +119,6 @@ export default Vue.extend({
let next = this.next as any
const list = this.list as any
next = JSON.parse(JSON.stringify(list.slice(0, this.copyNum)))
console.log(next)
return [...prev, ...list, ...next]
}
},
......@@ -140,10 +139,18 @@ export default Vue.extend({
el.transition = '0s'
el.transform = i === 12 ? `translateX(-${this.l_width * (i - 2 - this.list.length)}px)` : 'translateX(0)'
this.index = i === 12 ? 3 : 2
}, 1000)
const array = this.$refs.block as any
for (const item of array) {
item.style.transition = '0s'
}
}, 300)
setTimeout(() => {
el.transition = ''
}, 1200)
const array = this.$refs.block as any
for (const item of array) {
item.style.transition = ''
}
}, 500)
return
}
el.transform = i >= 2 ? `translate3d(-${this.l_width * (i - 2)}px, 0, 0)` : 'translate3d(0, 0, 0)'
......@@ -154,15 +161,23 @@ export default Vue.extend({
this.index++
this.clickChange(this.index)
if (this.index === 13) {
const el = (this.$refs.box as any & { style: () => any }).style
const el = (this.$refs.box as any & { style: () => any })?.style
setTimeout(() => {
this.index = 4
el.transition = '0s'
el.transform = 'translate3D(0, 0, 0)'
}, 500)
const array = this.$refs.block as any
for (const item of array) {
item.style.transition = '0s'
}
}, 300)
setTimeout(() => {
el.transition = ''
}, 800)
const array = this.$refs.block as any
for (const item of array) {
item.style.transition = ''
}
}, 500)
}
}, 4000)
},
......
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