大屏

src/main.js

@@ -56,6 +56,9 @@ VueAMap.initAMapApiLoader({
 })
 Vue.use(VueAMap)
 
+import Carousel3d from 'vue-carousel-3d';
+Vue.use(Carousel3d);
+
 Vue.directive('loadMore', {
   bind(el, binding) {
     const selectWrap = el.querySelector('.el-scrollbar__wrap')

src/views/bigSreen/component/CenterTop.vue

@@ -273,6 +273,7 @@ export default {
         this.activeArea = this.areas[this.activeIndex];
       } else {
         this.activeIndex > 0 ? (--this.activeIndex) : (this.activeIndex = this.areas.length-1);
+        this.activeArea = this.areas[this.activeIndex];
       }
     },
     async getAreas() {

src/views/bigSreen/component/ImgPreview.vue

@@ -3,8 +3,12 @@
     <div v-show="value" class="img-preview">
       <div class="mask" @click.prevent.stop="$emit('input',false)"></div>
       <div class="img-container">
-        <div style="background: #0d2067;height: 100%;width: 100%">
+        <div style="background: #0d2067;height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;">
-
+          <carousel-3d :key="key" :autoplay="true" :autoplay-timeout="5000" :display="3" :perspective="40" :width="660" :height="460" :controlsVisible="true">
+            <slide v-for="(img, i) in imgs" :index="i">
+              <img style="width: 100%;height: 100%;object-fit: cover;" :src="img" alt="">
+            </slide>
+          </carousel-3d>
         </div>
       </div>
     </div>
@@ -12,7 +16,12 @@
 </template>
 
 <script>
+import { Carousel3d, Slide } from 'vue-carousel-3d';
 export default {
+  components: {
+    Carousel3d,
+    Slide,
+  },
   props: {
     value: {
       type: Boolean,
@@ -25,10 +34,18 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      key: 0
+    }
   },
   methods: {},
   computed: {},
+  watch: {
+    imgs(newv) {
+      //每次都重新渲染 处理样式问题
+      ++this.key
+    }
+  }
 }
 </script>
 
@@ -63,4 +80,8 @@ export default {
     padding: 5px;
   }
 }
+
+::v-deep .carousel-3d-container {
+  margin: auto;
+}
 </style>