Commit 800d7fe2cac8bb29b6910936a0d50e5a5a561555

Authored by fengwotao
1 parent 9a56955f

perf(external/Composes): 优化摄像头新增时样式错乱

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