图片显示修改

src/views/pointsManagement/pointsMall/addOrEditOrDetail.vue

@@ -27,8 +27,8 @@
               </el-form-item>
               <el-form-item label="商品图" prop="productImageArr">
                 <div style="display: flex;">
-                  <ImageUpload v-model="formInline.productImageArr" :http-request="handleImageSuccess" :limit="6"
-                    @input="onUpload($event)" tipText="建议上传商品图，最多6张" />
+                  <ImageUpload class="imageUpload" v-model="formInline.productImageArr"
+                    :http-request="handleImageSuccess" :limit="6" @input="onUpload($event)" tipText="建议上传商品图，最多6张" />
                 </div>
 
               </el-form-item>
@@ -48,8 +48,8 @@
             <div class="titleInfo">售卖信息</div>
             <div style="padding:0 20px;">
               <el-form-item label="规格">
-                <el-button type="primary" size="small" plain @click="specEditFun"
-                  style="margin-bottom: 15px;"  :disabled="title == '详情'?true:false" >编辑</el-button>
+                <el-button type="primary" size="small" plain @click="specEditFun" style="margin-bottom: 15px;"
+                  :disabled="title == '详情' ? true : false">编辑</el-button>
                 <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef1"
                   :tableData="this.formInline.specList" :columnData="columnData1">
                 </tableCompontent>
@@ -64,7 +64,7 @@
                     <template v-slot:image="scope">
                       <el-form-item :prop="`skuList[${scope.$index}].image`"
                         :rules="{ required: true, message: '请上传图片', trigger: 'blur' }">
-                        <ImageUpload :isShowTip="false" :http-request="handleImageSuccess" v-model="scope.row.image"
+                        <ImageUpload class="imageUpload" :isShowTip="false" :http-request="handleImageSuccess" v-model="scope.row.image"
                           :limit="1" />
                       </el-form-item>
 
@@ -119,7 +119,7 @@
               <el-checkbox-group v-model="formInline.servicePromise" @change="handleCheckedChange">
                 <el-checkbox v-for="(item, index) in servicePromiseArr" :label="item.cdescribe" :key="index">{{
                   item.cdescribe
-                }}
+                  }}
                 </el-checkbox>
               </el-checkbox-group>
             </el-form-item>
@@ -142,7 +142,7 @@
             <!-- 操作按钮 -->
             <div style="display: flex;justify-content: center;margin-top: 25px;">
               <el-button @click="dialogVisibleSpec = false">取 消</el-button>
-              <el-button type="primary" @click="specSetSave" >保存</el-button>
+              <el-button type="primary" @click="specSetSave">保存</el-button>
             </div>
           </div>
         </el-dialog>
@@ -150,7 +150,7 @@
 
         <div style="display: flex;justify-content: center;margin-top: 25px;">
           <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="addOrEditOrDetailSave" :disabled="title == '详情'?true:false" >保存</el-button>
+          <el-button type="primary" @click="addOrEditOrDetailSave" :disabled="title == '详情' ? true : false">保存</el-button>
           <!-- <el-button type="primary" @click="previewFun">预览</el-button> -->
         </div>
       </div>
@@ -685,9 +685,10 @@ export default {
   border-bottom: 1px solid #f1f1f1;
 
 }
-.titleInfo:first-of-type{
-    margin-top: 0;
-  }
+
+.titleInfo:first-of-type {
+  margin-top: 0;
+}
 
 ::v-deep .tableFormClass {
   .el-form-item__error {
@@ -711,6 +712,14 @@ export default {
   //justify-content: center;
 }
 
+::v-deep .imageUpload {
+  .el-upload-list__item-thumbnail {
+    width: 100%;
+    object-fit:contain
+  }
+}
+
+
 ::v-deep .el-upload-list--picture-card {
 
   .el-upload-list__item {

src/views/pointsManagement/pointsMall/savePreview.vue

@@ -35,7 +35,7 @@
               <div style="color: 12px;">规格</div>
               <div v-show="skuListItem"
                 style="display: flex;border: 1px solid #bdbdbd;width: 40px;height: 35px;display: flex;align-items: center;margin-left: 15px;overflow: hidden;">
-                <img :src="skuListItem.image" alt="" style="width: 100%;object-fit: cover;">
+                <img :src="skuListItem.image" alt="" style="width: 100%;object-fit: fill;">
               </div>
             </div>
             <div style="color: #f6a66e;font-size: 12px;">已选: {{ skuListItem.specCombo }}</div>
@@ -63,9 +63,9 @@
           style="border: 1px solid #bdbdbd;border-radius: 5px;margin: 10px 10px 0 10px;padding:10px;background-color: #fff;;">
           <div style="">商品详情</div>
           <div
-            style="height: 200px;display: flex;align-items: center;margin-top: 10px;border: 1px solid #f1f1f1;overflow: hidden;"
+            style="display: flex;align-items: center;margin-top: 10px;border: 1px solid #f1f1f1;"
             v-for="item in params.productImage">
-            <img :src="item" alt="" style="width: 100%;object-fit: cover">
+            <img :src="item" alt="" style="width: 100%;height: auto;object-fit:contain ">
           </div>
         </div>