图片展示优化

src/views/components/carouselChart.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="thumb-example">
     <div class="picTop">
-      <viewer class="bigimg">
-        <img :src="bigPicPath + '!1280x720'" />
-        <p class="mark">
+      <viewer
+        class="bigimg"
+        :style="{ backgroundImage: 'url(' + bigPicPath + '!180x160)' }"
+        v-if="bigPicPath.indexOf('nopic') == -1"
+      >
+        <img class="animImg" :src="bigPicPath + '!1280x720'" />
+        <!-- <p class="mark">
           {{ bigPicPath }}
           <span>{{ this.activeSmall }}</span>
-        </p>
+        </p> -->
       </viewer>
+      <div class="bigimg" v-else>
+        <img class="animImg" :src="bigPicPath" />
+      </div>
       <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
         <i class="el-icon-arrow-left"></i>
       </div>
@@ -26,30 +33,34 @@
           @click="handleBigpic(item, index)"
           :class="activeSmall === index ? 'borderActive' : ''"
         >
-          <!-- <img src="../../assets/img/nopic.jpg" /> -->
-          <img :src="item.path + '!260x160'" />
-          <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="拍照时间"
-              placement="top-start"
-            >
-              <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
-            </el-tooltip>
+          <div class="smallhavePic" v-if="item.path.indexOf('nopic') == -1">
+            <img :src="item.path + '!260x160'" />
+            <p class="timeInfo">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="拍照时间"
+                placement="top-start"
+              >
+                <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
+              </el-tooltip>
 
-            (
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="图片上传时间"
-              placement="top-start"
-            >
-              <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
-            </el-tooltip>
-            )
-            <span>--通道{{ item.channelId }}</span>
-          </p>
+              (
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="图片上传时间"
+                placement="top-start"
+              >
+                <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
+              </el-tooltip>
+              )
+              <span>--通道{{ item.channelId }}</span>
+            </p>
+          </div>
+          <div class="smallnoPic" v-else>
+            <img :src="item.path" />
+          </div>
         </li>
       </ul>
       <div
@@ -125,7 +136,6 @@ export default {
       this.bigPicPath = this.terminalPhoto[this.bigNum].path;
       this.activeSmall++;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
-
       if (this.activeSmall > 4) {
         this.activeSmall = 0;
         console.log(this.activeSmall);
@@ -141,6 +151,7 @@ export default {
     },
     //点击小图切换左侧
     smallLeftClick() {
+      this.activeSmall = 0;
       console.log("点击了左侧");
 
       this.page--;
@@ -154,6 +165,7 @@ export default {
     },
     //点击小图切换右侧
     smallRightClick() {
+      this.activeSmall = 0;
       console.log("点击了右侧");
       console.log(this.page);
       this.page++;
@@ -189,23 +201,17 @@ export default {
       align-items: center;
       justify-content: center;
       position: relative;
+      background-size: 100% 100%;
       .mark {
         position: absolute;
-        bottom: 16px;
+        bottom: 12px;
         color: #fff;
         background-color: rgba(0, 0, 0, 0.5);
         left: 16px;
         font-size: 14px;
         line-height: 24px;
-        animation: move 1s;
-      }
-      @keyframes move {
-        0% {
-          bottom: -10px;
-        }
-        100% {
-          transform: 16px;
-        }
+        //opacity: 0;
+        transition: bottom 2s ease 0s;
       }
     }
     img {
@@ -250,10 +256,11 @@ export default {
       width: 100%;
       height: 100%;
       display: flex;
+      justify-content: center;
       li {
         width: 20%;
         border: 3px solid transparent;
-        overflow: hidden;
+        // overflow: hidden;
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -265,9 +272,29 @@ export default {
           object-fit: fill;
           cursor: pointer;
         }
+        .smallhavePic {
+          width: 100%;
+          height: 100%;
+        }
+        .smallnoPic {
+          width: 100%;
+          height: 100%;
+        }
       }
       .borderActive {
         border: 3px solid #409eff;
+        &::after {
+          content: "";
+          position: absolute;
+          width: 0;
+          height: 0;
+          left: 50%;
+          top: -16px;
+          margin-left: -8px;
+          border-bottom: 13px solid #409eff;
+          border-left: 8px solid transparent;
+          border-right: 8px solid transparent;
+        }
       }
       .timeInfo {
         position: absolute;