Commit 800d7fe2cac8bb29b6910936a0d50e5a5a561555
1 parent
9a56955f
perf(external/Composes): 优化摄像头新增时样式错乱
Showing
1 changed file
with
11 additions
and
9 deletions
1 | <template> | 1 | <template> |
2 | <div class="banner-box" ref="root"> | 2 | <div class="banner-box" ref="root"> |
3 | - <div class="wrapper"> | 3 | + <div class="wrapper"> |
4 | <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty"> | 4 | <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty"> |
5 | <CameraItem | 5 | <CameraItem |
6 | ref="cameraRef" | 6 | ref="cameraRef" |
@@ -43,7 +43,7 @@ const cameraRef = ref<InstanceType<typeof CameraItem>>() | @@ -43,7 +43,7 @@ const cameraRef = ref<InstanceType<typeof CameraItem>>() | ||
43 | 43 | ||
44 | let initial = ref(0) | 44 | let initial = ref(0) |
45 | 45 | ||
46 | -let interval = ref(4000) | 46 | +let interval = ref(2500) |
47 | 47 | ||
48 | const computedFunc = (initial: number, source: any) => { | 48 | const computedFunc = (initial: number, source: any) => { |
49 | if (initial < 0) initial = 0 | 49 | if (initial < 0) initial = 0 |
@@ -62,23 +62,23 @@ const computedFunc = (initial: number, source: any) => { | @@ -62,23 +62,23 @@ const computedFunc = (initial: number, source: any) => { | ||
62 | case temp3: | 62 | case temp3: |
63 | transform = `translate(-50%, -50%) scale(1)` | 63 | transform = `translate(-50%, -50%) scale(1)` |
64 | className = ['slide', 'activate'] as any | 64 | className = ['slide', 'activate'] as any |
65 | - zIndex = 3 | 65 | + zIndex = 300 |
66 | break | 66 | break |
67 | case temp1: | 67 | case temp1: |
68 | transform = `translate(-80%, -50%) scale(0.7)` | 68 | transform = `translate(-80%, -50%) scale(0.7)` |
69 | - zIndex = 1 | 69 | + zIndex = 100 |
70 | break | 70 | break |
71 | case temp5: | 71 | case temp5: |
72 | transform = `translate(100%, -50%) scale(0.7)` | 72 | transform = `translate(100%, -50%) scale(0.7)` |
73 | - zIndex = 1 | 73 | + zIndex = 100 |
74 | break | 74 | break |
75 | case temp2: | 75 | case temp2: |
76 | transform = `translate(-100%, -50%) scale(0.85)` | 76 | transform = `translate(-100%, -50%) scale(0.85)` |
77 | - zIndex = 2 | 77 | + zIndex = 200 |
78 | break | 78 | break |
79 | case temp4: | 79 | case temp4: |
80 | transform = `translate(58%, -50%) scale(0.85)` | 80 | transform = `translate(58%, -50%) scale(0.85)` |
81 | - zIndex = 2 | 81 | + zIndex = 200 |
82 | break | 82 | break |
83 | } | 83 | } |
84 | item.sty = { | 84 | item.sty = { |
@@ -155,9 +155,11 @@ function changeSlide(dir: string) { | @@ -155,9 +155,11 @@ function changeSlide(dir: string) { | ||
155 | <style lang="scss" scoped> | 155 | <style lang="scss" scoped> |
156 | .banner-box { | 156 | .banner-box { |
157 | .wrapper { | 157 | .wrapper { |
158 | - width: 100%; | 158 | + // width: 100%; |
159 | height: 100%; | 159 | height: 100%; |
160 | - position: relative; | 160 | + // position: relative; |
161 | + display: flex; | ||
162 | + overflow: hidden; | ||
161 | .slide { | 163 | .slide { |
162 | width: 20%; | 164 | width: 20%; |
163 | height: 100%; | 165 | height: 100%; |