修改图片放大预览

src/page/emergencyCar/components/emergencyCarDialog.vue

@@ -109,26 +109,24 @@
               :headers="{ token: token }"
               accept="image/jpg, image/jpeg, image/png"
               :on-success="handleAvatarSuccess"
-              :before-upload="beforeAvatarUpload"
             >
-              <!-- <img
-                v-if="dataForm.emergencyCarUrl"
-                :src="dataForm.emergencyCarUrl"
+              <el-button
+                size="small"
+                slot="trigger"
+                type="primary"
+              >点击上传</el-button>
+              <div
                 class="avatar"
-              > -->
-               <el-image 
-                style="width: 100px; height: 100px"
                 v-if="dataForm.emergencyCarUrl"
-                :src="dataForm.emergencyCarUrl" 
-                 class="avatar"
-                :preview-src-list="[dataForm.emergencyCarUrl]">
-              </el-image>
-              <div
-                class="avatar-show"
-                v-else
               >
-                <i class="el-icon-plus avatar-uploader-icon"></i>
-                <span>上传图片</span>
+                <el-image
+                  class="avatar_img"
+                  :src="dataForm.emergencyCarUrl"
+                  :preview-src-list="[
+                    dataForm.emergencyCarUrl
+                  ]"
+                >
+                </el-image>
               </div>
             </el-upload>
           </el-form-item>
@@ -526,37 +524,19 @@ export default {
   .el-input {
     // width: 200px;
   }
-  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409eff;
-  }
-  .avatar-show {
-    width: 84px;
-    height: 84px;
-    padding-top: 24px;
-    box-sizing: border-box;
-    .avatar-uploader-icon {
-      font-size: 28px;
-      color: #8c939d;
-      display: block;
-      text-align: center;
-    }
-    span {
-      font-size: 12px;
-      color: #9e9e9e;
-    }
-  }
 
   .avatar {
     width: 84px;
     height: 84px;
     display: block;
+    position: relative;
+    margin-top: 10px;
+    border: 1px solid #c0ccda;
+    border-radius: 6px;
+    .avatar_img {
+      width: 100%;
+      height: 100%;
+    }
   }
   .el-dialog__body {
     padding: 32px 64px 0 60px;