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%; |