点击展示多图

src/views/realTimeMonitor/components/carouselChart.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="thumb-example">
-    <div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</div>
+    <div class="radioBox" v-if="roleUser != 2">
+      {{ radioPx }}
+    </div>
     <div class="topPic">
       <div
         class="bigPic"
@@ -59,14 +61,16 @@
           class="el-car-item"
           ref="scrollBox"
           v-on:wheel="handleScroll"
-          :class="terminalPhoto.length < 5 ? 'littlePic' : ''"
+          :class="terminalPhoto.length < photoNum ? 'littlePic' : ''"
         >
           <div
             class="smallPic"
             v-for="(item, index2) in terminalPhoto"
             :key="index2"
             @click="changeBigPic(item, index2)"
-            :class="activeSmall === index2 ? 'borderActive' : ''"
+            :class="`${activeSmall === index2 ? 'borderActive ' : ''}${
+              photoNum === 10 ? 'moreSmallPic' : ''
+            }`"
           >
             <div
               class="picBox"
@@ -327,13 +331,17 @@ export default {
     },
     //点击大图左右按钮
     leftClick() {
+      console.log(this.photoNum);
       this.activeSmall--;
-      this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5;
+      this.$refs.scrollBox.scrollLeft -=
+        this.$refs.scrollBox.offsetWidth / this.photoNum;
       this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
     },
     rightClick() {
+      console.log(this.photoNum);
       this.activeSmall++;
-      this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5;
+      this.$refs.scrollBox.scrollLeft +=
+        this.$refs.scrollBox.offsetWidth / this.photoNum;
       this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
     },
     //获取第一张大图
@@ -367,11 +375,11 @@ export default {
 
       if (direction == "down") {
         this.$refs.scrollBox.scrollLeft +=
-          (this.$refs.scrollBox.offsetWidth / 5) * 3;
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 3;
       }
       if (direction == "up") {
         this.$refs.scrollBox.scrollLeft -=
-          (this.$refs.scrollBox.offsetWidth / 5) * 3;
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 3;
       }
     },
     //缩略图的左右箭头
@@ -568,6 +576,9 @@ export default {
           }
         }
       }
+      .moreSmallPic {
+        width: 9.8%;
+      }
       .borderActive {
         .timeInfo {
           color: #fff;