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

 <template>
   <div class="banner-box" ref="root">
-    <div class="wrapper">
+    <div  class="wrapper">
       <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
         <CameraItem
           ref="cameraRef"
@@ -43,7 +43,7 @@ const cameraRef = ref<InstanceType<typeof CameraItem>>()
 
 let initial = ref(0)
 
-let interval = ref(4000)
+let interval = ref(2500)
 
 const computedFunc = (initial: number, source: any) => {
   if (initial < 0) initial = 0
@@ -62,23 +62,23 @@ const computedFunc = (initial: number, source: any) => {
         case temp3:
           transform = `translate(-50%, -50%) scale(1)`
           className = ['slide', 'activate'] as any
-          zIndex = 3
+          zIndex = 300
           break
         case temp1:
           transform = `translate(-80%, -50%) scale(0.7)`
-          zIndex = 1
+          zIndex = 100
           break
         case temp5:
           transform = `translate(100%, -50%) scale(0.7)`
-          zIndex = 1
+          zIndex = 100
           break
         case temp2:
           transform = `translate(-100%, -50%) scale(0.85)`
-          zIndex = 2
+          zIndex = 200
           break
         case temp4:
           transform = `translate(58%, -50%) scale(0.85)`
-          zIndex = 2
+          zIndex = 200
           break
       }
       item.sty = {
@@ -155,9 +155,11 @@ function changeSlide(dir: string) {
 <style lang="scss" scoped>
 .banner-box {
   .wrapper {
-    width: 100%;
+    // width: 100%;
     height: 100%;
-    position: relative;
+    // position: relative;
+    display: flex;
+    overflow: hidden;
     .slide {
       width: 20%;
       height: 100%;