fix:修改图片预览

sample-form-client-ui/admin/src/components/MateralsList.vue

@@ -23,7 +23,7 @@
           @click="handleWrite"
         >
           <div class="pic-box">
-            <img :src="api + v.preViewPath" />
+            <img class="pic" :src="api + v.preViewPath" />
           </div>
           <div class="for-short">{{ v.materialName }}</div>
           <div class="matterDatumList-name">
@@ -144,6 +144,7 @@ export default {
     img {
       width: 100%;
       height: 100%;
+      object-fit: cover;
     }
   }
   .for-short {

sample-form-client-ui/admin/src/pages/showpage/ShowMaterials.vue

@@ -21,14 +21,14 @@
           class="preview-img-box flex aic jcc"
           :style="{
             width: width * (scale / 100) + 'px',
-            height: height * (scale / 100) + 'px',
+            height: v.height * (scale / 100) + 'px',
           }"
         >
           <img
             :style="{
               transform: `scale(${scale / 100})`,
               width: width + 'px',
-              height: height + 'px',
+              height: v.height + 'px',
             }"
             class="preview-img"
             :src="api + v.preViewPath"
@@ -49,7 +49,7 @@
         <!-- 侧边内容 -->
         <div class="sidebar-main">
           <div class="title flex jcc aic" @click="showSidebar = false">
-            <span class="mr30"> 申请表填写进度 </span>
+            <span class="mr30"> 样表展示 </span>
             <span class="icon2">
               <i class="el-icon-d-arrow-left"></i>
             </span>
@@ -63,16 +63,18 @@
             {{ matterInfo.matterName }}
           </div>
           <!-- 材料列表 -->
-          <div
-            class="materails-item pdl10"
-            v-ellipsis="'340px'"
-            :class="{ active: i === active }"
-            v-for="(v, i) in materailsList"
-            :key="v.id"
-            @click="active = i"
-          >
-            {{ v.materiaFullName }}
-            <div class="line"></div>
+          <div class="materails-list">
+            <div
+              class="materails-item pdl10"
+              v-ellipsis="'330px'"
+              :class="{ active: i === active }"
+              v-for="(v, i) in materailsList"
+              :key="v.id"
+              @click="active = i"
+            >
+              {{ v.materiaFullName }}
+              <div class="line"></div>
+            </div>
           </div>
         </div>
 
@@ -83,7 +85,7 @@
           @click="showSidebar = true"
         >
           <div class="sidebar-btn-text flex flexc aic">
-            <span class="sidebar-btn-title"> 申请表填写记录 </span>
+            <span class="sidebar-btn-title"> 样表展示 </span>
             <span class="mt15 mb15">
               {{ active + 1 }}/{{ materailsList.length }}
             </span>
@@ -116,16 +118,12 @@ export default {
       scale: 100,
       showSidebar: false, // 切换侧边弹窗显示
       width: 600,
-      height: 800,
     };
   },
   created() {
     this.getMaterialsList();
 
-    console.log("matterDatumList",this.matterInfo.matterDatumList)
-
-   // this.materailsList=this.matterInfo.matterDatumList;
-
+    // this.materailsList=this.matterInfo.matterDatumList;
   },
 
   methods: {
@@ -141,6 +139,13 @@ export default {
         matterId: this.matterInfo.matterId,
       });
       let { data } = res.data.data;
+      data.forEach((v) => {
+        let image = new Image();
+        image.src = this.api + v.preViewPath;
+        image.onload = function () {
+          v.height = image.height;
+        };
+      });
       this.materailsList = data;
     },
 
@@ -178,22 +183,37 @@ export default {
 }
 .main {
   width: 100%;
-  height: 1px;
   position: relative;
   overflow: auto;
   .sidebar-box {
     width: 360px;
     min-height: 340px;
-    max-height: 800px;
     padding: 10px;
     background: #fff;
     box-shadow: 6px -1px 10px 0px rgba(0, 0, 0, 0.11);
     border-radius: 0px 38px 8px 0px;
-    position: absolute;
-    top: 130px;
+    position: fixed;
+    top: 230px;
     left: 0px;
     z-index: 10;
     transition: all 500ms;
+    .materails-list {
+      max-height: 600px;
+      &::-webkit-scrollbar {
+        width: 6px;
+        overflow-y: auto;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 6px;
+        background-color: rgba(144, 147, 153, 0.5);
+      }
+
+      &::-webkit-scrollbar-track {
+        border-radius: 6px;
+        background: #fff;
+      }
+    }
     .title {
       margin-bottom: 15px;
       font-size: 22px;
@@ -321,9 +341,8 @@ export default {
     font-family: Source Han Sans CN;
     color: #888888;
   }
-  .preview-img {
-    object-fit: contain;
-  }
+  // .preview-img {
+  // }
   // 放大控制
   .control-box {
     position: fixed;