|
1
|
1
|
<template>
|
|
2
|
2
|
<div class="banner-box" ref="root">
|
|
3
|
|
- <div class="wrapper">
|
|
|
3
|
+ <div class="wrapper">
|
|
4
|
4
|
<div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
|
|
5
|
5
|
<CameraItem
|
|
6
|
6
|
ref="cameraRef"
|
|
...
|
...
|
@@ -43,7 +43,7 @@ const cameraRef = ref<InstanceType<typeof CameraItem>>() |
|
43
|
43
|
|
|
44
|
44
|
let initial = ref(0)
|
|
45
|
45
|
|
|
46
|
|
-let interval = ref(4000)
|
|
|
46
|
+let interval = ref(2500)
|
|
47
|
47
|
|
|
48
|
48
|
const computedFunc = (initial: number, source: any) => {
|
|
49
|
49
|
if (initial < 0) initial = 0
|
|
...
|
...
|
@@ -55,35 +55,35 @@ const computedFunc = (initial: number, source: any) => { |
|
55
|
55
|
temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
|
|
56
|
56
|
temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
|
|
57
|
57
|
return source?.map((item: any, index: number) => {
|
|
58
|
|
- let transform = `translate(-50%, -50%) scale(0.7)`,
|
|
|
58
|
+ let transform = `translateX(-50%) scale(0.7)`,
|
|
59
|
59
|
zIndex = 0,
|
|
60
|
60
|
className = 'slide'
|
|
61
|
61
|
switch (index) {
|
|
62
|
62
|
case temp3:
|
|
63
|
|
- transform = `translate(-50%, -50%) scale(1)`
|
|
|
63
|
+ transform = `translateX(-50%) scale(1)`
|
|
64
|
64
|
className = ['slide', 'activate'] as any
|
|
65
|
|
- zIndex = 3
|
|
|
65
|
+ zIndex = 300
|
|
66
|
66
|
break
|
|
67
|
67
|
case temp1:
|
|
68
|
|
- transform = `translate(-80%, -50%) scale(0.7)`
|
|
69
|
|
- zIndex = 1
|
|
|
68
|
+ transform = `translateX(-80%) scale(0.7)`
|
|
|
69
|
+ zIndex = 100
|
|
70
|
70
|
break
|
|
71
|
71
|
case temp5:
|
|
72
|
|
- transform = `translate(100%, -50%) scale(0.7)`
|
|
73
|
|
- zIndex = 1
|
|
|
72
|
+ transform = `translateX(100%) scale(0.7)`
|
|
|
73
|
+ zIndex = 100
|
|
74
|
74
|
break
|
|
75
|
75
|
case temp2:
|
|
76
|
|
- transform = `translate(-100%, -50%) scale(0.85)`
|
|
77
|
|
- zIndex = 2
|
|
|
76
|
+ transform = `translateX(-100%) scale(0.85)`
|
|
|
77
|
+ zIndex = 200
|
|
78
|
78
|
break
|
|
79
|
79
|
case temp4:
|
|
80
|
|
- transform = `translate(58%, -50%) scale(0.85)`
|
|
81
|
|
- zIndex = 2
|
|
|
80
|
+ transform = `translateX(58%) scale(0.85)`
|
|
|
81
|
+ zIndex = 200
|
|
82
|
82
|
break
|
|
83
|
83
|
}
|
|
84
|
84
|
item.sty = {
|
|
85
|
85
|
transform,
|
|
86
|
|
- zIndex
|
|
|
86
|
+ zIndex,
|
|
87
|
87
|
}
|
|
88
|
88
|
item.className = className
|
|
89
|
89
|
return item
|
|
...
|
...
|
@@ -155,16 +155,18 @@ function changeSlide(dir: string) { |
|
155
|
155
|
<style lang="scss" scoped>
|
|
156
|
156
|
.banner-box {
|
|
157
|
157
|
.wrapper {
|
|
158
|
|
- width: 100%;
|
|
|
158
|
+ // width: 100%;
|
|
159
|
159
|
height: 100%;
|
|
160
|
|
- position: relative;
|
|
|
160
|
+ // position: relative;
|
|
|
161
|
+ display: flex;
|
|
|
162
|
+ overflow: hidden;
|
|
161
|
163
|
.slide {
|
|
162
|
164
|
width: 20%;
|
|
163
|
165
|
height: 100%;
|
|
164
|
166
|
position: absolute;
|
|
165
|
|
- top: 50%;
|
|
|
167
|
+ // top: 50%;
|
|
166
|
168
|
left: 10%;
|
|
167
|
|
- transform: translate(-50%, -50%);
|
|
|
169
|
+ transform: translateX(-50%);
|
|
168
|
170
|
transition: 0.5s;
|
|
169
|
171
|
box-shadow: 0 0 4px black;
|
|
170
|
172
|
.video-title {
|
...
|
...
|
|