解决图片被拉伸的bug

src/components/photo-album/folder-item.vue

@@ -17,26 +17,32 @@ export default {
 </script>
 <style lang="scss" scoped>
 .folder {
-  width: 160px;
-  margin-right: 10px;
-  margin-bottom: 15px;
+  position: relative;
+  margin: 0 15px 15px 0;
+  padding: 10px 10px 47px 10px;
+  width: 120px;
+  height: 120px;
   border-radius: 2px;
   border: 1px solid #e4e7ed;
   .folder-icon {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 138px;
-    height: 138px;
-    border: 10px solid #fff;
+    padding: 10px;
+    width: 100px;
+    height: 100px;
     background-color: #f5f5f8;
     img {
-      vertical-align: middle;
-      width: 80px;
-      height: 80px;
+      max-width: 100%;
+      max-height: 100%;
     }
   }
   .folder-name {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
     margin: 0;
     width: 100%;
     height: 37px;

src/components/photo-album/img-item.vue

 <template>
 <div>
-  <div class="image" @dblclick="show = true">
+  <div class="image" @dblclick="showImage">
     <img :src="img.url" alt="">
     <p class="image-name">{{img.name}}</p>
   </div>
@@ -10,27 +10,27 @@
         <i class="el-icon-arrow-left" @click="lastImg"></i>
         <i class="el-icon-arrow-right" @click="nextImg"></i>
         <div class="big-img-box">
-          <img :src="img.url" alt="" />
+          <img :src="imgDetail.url" alt="" />
         </div>
       </div>
       <div class="img-detail-right">
-        <h2>{{ img.name }}</h2>
+        <h2>{{ imgDetail.name }}</h2>
         <div class="img-info">
           <h3>图片属性</h3>
           <div class="img-info-item">
-            <span>编辑时间：</span><span>{{ img.time | formatDate }} {{ img.time | formatTime }}</span>
+            <span>编辑时间：</span><span>{{ imgDetail.time | formatDate }} {{ imgDetail.time | formatTime }}</span>
           </div>
           <div class="img-info-item">
-            <span>图片大小：</span><span>{{ (img.size / 1024).toFixed(2) }}KB</span>
+            <span>图片大小：</span><span>{{ (imgDetail.size / 1024).toFixed(2) }}KB</span>
           </div>
           <div class="img-info-item">
-            <span>图片尺寸：</span><span>{{ img.size1 }}</span>
+            <span>图片尺寸：</span><span>{{ imgDetail.size1 }}</span>
           </div>
           <div class="img-info-item">
-            <span>图片类型：</span><span>{{ img.type }}</span>
+            <span>图片类型：</span><span>{{ imgDetail.type }}</span>
           </div>
           <div class="img-info-item">
-            <span>添加人：</span><span>{{img.shopper}}</span>
+            <span>添加人：</span><span>{{imgDetail.shopper}}</span>
           </div>
         </div>
       </div>
@@ -56,6 +56,7 @@ export default {
   },
   filters: {
     formatDate(ms) {
+      if (!ms) return '--';
       let date = new Date(ms);
       let dateArr = [];
       dateArr.push(date.getFullYear());
@@ -65,12 +66,13 @@ export default {
       return dateArr.join('-');
     },
     formatTime(ms) {
+      if (!ms) return '--';
       let date = new Date(ms);
       let timeArr = [];
       timeArr.push(date.getHours());
       timeArr.push(date.getMinutes());
       timeArr.push(date.getSeconds());
-      timeArr = timeArr.map(item => (item < 10 ? `${item}` : item));
+      timeArr = timeArr.map(item => (item < 10 ? `0${item}` : item));
       return timeArr.join(':');
     }
   },
@@ -98,6 +100,11 @@ export default {
     },
     onClosed() {
       this.currentIndex = this.index;
+    },
+    showImage() {
+      this.imgDetail = Object.assign({}, this.img);
+      this.currentIndex = this.index;
+      this.show = true;
     }
   }
 }
@@ -105,17 +112,28 @@ export default {
 
 <style lang="scss" scoped>
 .image {
-  margin-right: 10px;
-  margin-bottom: 15px;
-  width: 160px;
+  position: relative;
+  margin: 0 15px 15px 0;
+  padding-bottom: 37px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 140px;
+  height: 140px;
   cursor: pointer;
   border: 1px solid #e4e7ed;
   img {
-    vertical-align: middle;
-    width: 158px;
-    height: 158px;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 0;
   }
+  
   .image-name {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
     margin: 0;
     width: 100%;
     height: 37px;
@@ -138,15 +156,15 @@ export default {
   border-top: 1px solid #e4e7eb;
 }
 .img-detail-left {
-  width: 640px;
   display: inline-block;
   background: #fff;
   position: relative;
+  width: 640px;
   height: 610px;
   font-size: 14px;
 }
 .big-img-box {
-  width: 348px;
+  width: 492px;
   height: 492px;
   position: absolute;
   left: 50%;
@@ -155,11 +173,12 @@ export default {
 }
 .big-img-box img {
   max-width: 100%;
-  height: 100%;
+  max-height: 100%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+  user-select: none;
 }
 .el-icon-arrow-left {
   position: absolute;