图片上传公共样式修改

src/components/ImageUpload/index.vue

@@ -18,23 +18,34 @@
       :class="{ hide: this.fileList.length >= this.limit }"
     >
       <i class="el-icon-plus"></i>
+      <span class="upload-span-color">上传图片</span>
     </el-upload>
 
     <!-- 上传提示 -->
+<!--    <div class="el-upload__tip" slot="tip" v-if="showTip">-->
+<!--      请上传-->
+<!--      <template v-if="fileSize">-->
+<!--        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>-->
+<!--      </template>-->
+<!--      <template v-if="fileType">-->
+<!--        格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>-->
+<!--      </template>-->
+<!--      的文件-->
+<!--    </div>-->
+
     <div class="el-upload__tip" slot="tip" v-if="showTip">
-      请上传
-      <template v-if="fileSize">
-        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
-      </template>
+      只能上传
       <template v-if="fileType">
-        格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
+        {{ fileType.join('/') }}
+      </template>
+      文件，
+      <template v-if="fileSize">
+        且不得超过{{ fileSize }}MB
       </template>
-      的文件
     </div>
 
     <el-dialog
       :visible.sync="dialogVisible"
-      title="预览"
       width="800"
       append-to-body
     >
@@ -230,4 +241,26 @@ export default {
   opacity: 0;
   transform: translateY(0);
 }
+::v-deep .el-upload--picture-card {
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  line-height: normal;
+}
+.upload-span-color {
+  color: #8c939d;
+}
+::v-deep .el-dialog {
+  background: none;
+  width: 100%;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 8px !important;
+  background: url('../../assets/images/closeIcon.jpg') left no-repeat;
+  background-size: cover;
+}
+::v-deep .el-dialog__headerbtn i {
+  font-size: 25px;
+  visibility: hidden;
+}
 </style>