Ver código fonte

添加上传文件的样式

魏熙美 5 anos atrás
pai
commit
102897125c

+ 15
- 10
src/views/carouselFigure/advertisementEdit.vue Ver arquivo

13
       </el-form-item>
13
       </el-form-item>
14
       <el-form-item label="主图:">
14
       <el-form-item label="主图:">
15
         <el-upload
15
         <el-upload
16
+                class="avatar-uploader"
16
                 :headers="uploadHeaders"
17
                 :headers="uploadHeaders"
17
                 :action="upFileUrl"
18
                 :action="upFileUrl"
18
                 :show-file-list="false"
19
                 :show-file-list="false"
479
   };
480
   };
480
 </script>
481
 </script>
481
 
482
 
482
-<style lang="scss">
483
-  .header {
484
-    width: 50px;
485
-    height: 50px;
486
-    img {
487
-      width: 100%;
488
-      height: 100%;
489
-    }
490
-  }
483
+<style scoped>
491
   .avatar-uploader .el-upload {
484
   .avatar-uploader .el-upload {
492
     border: 1px dashed #d9d9d9;
485
     border: 1px dashed #d9d9d9;
493
     border-radius: 6px;
486
     border-radius: 6px;
496
     overflow: hidden;
489
     overflow: hidden;
497
   }
490
   }
498
   .avatar-uploader .el-upload:hover {
491
   .avatar-uploader .el-upload:hover {
499
-    border-color: #409eff;
492
+    border-color: #409EFF;
500
   }
493
   }
501
   .avatar-uploader-icon {
494
   .avatar-uploader-icon {
502
     font-size: 28px;
495
     font-size: 28px;
511
     height: 178px;
504
     height: 178px;
512
     display: block;
505
     display: block;
513
   }
506
   }
507
+
508
+</style>
509
+
510
+<style lang="scss">
511
+  .header {
512
+    width: 50px;
513
+    height: 50px;
514
+    img {
515
+      width: 100%;
516
+      height: 100%;
517
+    }
518
+  }
514
   .edit-carousel {
519
   .edit-carousel {
515
     .el-select {
520
     .el-select {
516
       max-width: 300px !important;
521
       max-width: 300px !important;

+ 29
- 24
src/views/carouselFigure/edit.vue Ver arquivo

13
         </el-form-item>
13
         </el-form-item>
14
         <el-form-item label="主图:">
14
         <el-form-item label="主图:">
15
           <el-upload
15
           <el-upload
16
+                  class="avatar-uploader"
16
                   :headers="uploadHeaders"
17
                   :headers="uploadHeaders"
17
                   :action="upFileUrl"
18
                   :action="upFileUrl"
18
                   :show-file-list="false"
19
                   :show-file-list="false"
479
 };
480
 };
480
 </script>
481
 </script>
481
 
482
 
482
-<style lang="scss">
483
+<style lang="scss" scoped>
484
+  .avatar-uploader .el-upload {
485
+    border: 1px dashed #d9d9d9;
486
+    border-radius: 6px;
487
+    cursor: pointer;
488
+    position: relative;
489
+    overflow: hidden;
490
+  }
491
+  .avatar-uploader .el-upload:hover {
492
+    border-color: #409EFF;
493
+  }
494
+  .avatar-uploader-icon {
495
+    font-size: 28px;
496
+    color: #8c939d;
497
+    width: 178px;
498
+    height: 178px;
499
+    line-height: 178px;
500
+    text-align: center;
501
+  }
502
+  .avatar {
503
+    width: 178px;
504
+    height: 178px;
505
+    display: block;
506
+  }
507
+
508
+</style>
509
+
510
+<style lang="scss" scoped>
483
 .header {
511
 .header {
484
   width: 50px;
512
   width: 50px;
485
   height: 50px;
513
   height: 50px;
488
     height: 100%;
516
     height: 100%;
489
   }
517
   }
490
 }
518
 }
491
-.avatar-uploader .el-upload {
492
-  border: 1px dashed #d9d9d9;
493
-  border-radius: 6px;
494
-  cursor: pointer;
495
-  position: relative;
496
-  overflow: hidden;
497
-}
498
-.avatar-uploader .el-upload:hover {
499
-  border-color: #409eff;
500
-}
501
-.avatar-uploader-icon {
502
-  font-size: 28px;
503
-  color: #8c939d;
504
-  width: 178px;
505
-  height: 178px;
506
-  line-height: 178px;
507
-  text-align: center;
508
-}
509
-.avatar {
510
-  width: 178px;
511
-  height: 178px;
512
-  display: block;
513
-}
514
 .edit-carousel {
519
 .edit-carousel {
515
   .el-select {
520
   .el-select {
516
     max-width: 300px !important;
521
     max-width: 300px !important;

+ 2
- 1
src/views/customer/editCustomer.vue Ver arquivo

7
         </el-form-item>
7
         </el-form-item>
8
         <el-form-item label="客户照片:">
8
         <el-form-item label="客户照片:">
9
           <el-upload
9
           <el-upload
10
+                  class="avatar-uploader"
10
                   :headers="uploadHeaders"
11
                   :headers="uploadHeaders"
11
                   :action="upFileUrl"
12
                   :action="upFileUrl"
12
                   :show-file-list="false"
13
                   :show-file-list="false"
263
   }
264
   }
264
 </style>
265
 </style>
265
 
266
 
266
-<style lang="scss">
267
+<style lang="scss" >
267
   .avatar-uploader .el-upload {
268
   .avatar-uploader .el-upload {
268
     border: 1px dashed #d9d9d9;
269
     border: 1px dashed #d9d9d9;
269
     border-radius: 6px;
270
     border-radius: 6px;

+ 5
- 4
src/views/customer/editRecommend.vue Ver arquivo

7
         </el-form-item>
7
         </el-form-item>
8
         <el-form-item label="客户照片:">
8
         <el-form-item label="客户照片:">
9
           <el-upload
9
           <el-upload
10
+                  class="avatar-uploader"
10
                   :headers="uploadHeaders"
11
                   :headers="uploadHeaders"
11
                   :action="upFileUrl"
12
                   :action="upFileUrl"
12
                   :show-file-list="false"
13
                   :show-file-list="false"
282
 .form-wrapper {
283
 .form-wrapper {
283
   width: 60%;
284
   width: 60%;
284
 }
285
 }
286
+.choose {
287
+  color: blue;
288
+  margin-left: 15px;
289
+}
285
 </style>
290
 </style>
286
 
291
 
287
 <style lang="scss">
292
 <style lang="scss">
308
   height: 178px;
313
   height: 178px;
309
   display: block;
314
   display: block;
310
 }
315
 }
311
-.choose {
312
-  color: blue;
313
-  margin-left: 15px;
314
-}
315
 </style>
316
 </style>

+ 3
- 8
src/views/news/edi/index.vue Ver arquivo

12
                 </el-select>
12
                 </el-select>
13
             </el-form-item>
13
             </el-form-item>
14
             <el-form-item label="资讯图片">
14
             <el-form-item label="资讯图片">
15
-<!--                class="avatar-uploader"-->
16
                 <el-upload
15
                 <el-upload
16
+                        class="avatar-uploader"
17
                         :headers="uploadHeaders"
17
                         :headers="uploadHeaders"
18
                         :action="upFileUrl"
18
                         :action="upFileUrl"
19
                         :show-file-list="false"
19
                         :show-file-list="false"
36
                 </el-select>
36
                 </el-select>
37
             </el-form-item>
37
             </el-form-item>
38
             <el-form-item label="资讯详情">
38
             <el-form-item label="资讯详情">
39
-                <my-wangeditor :content="form.newsDetail" @get-content="getEdiCentent"></my-wangeditor>
39
+                <rich-editor v-model="form.newsDetail" style="height: 400px; width: 1000px;" />
40
             </el-form-item>
40
             </el-form-item>
41
             <el-form-item label="状态">
41
             <el-form-item label="状态">
42
                 <el-select v-model="form.newsStatus" placeholder="请选择">
42
                 <el-select v-model="form.newsStatus" placeholder="请选择">
189
     }
189
     }
190
 </script>
190
 </script>
191
 
191
 
192
-<style scoped>
192
+<style lang="scss">
193
     .avatar-uploader .el-upload {
193
     .avatar-uploader .el-upload {
194
         border: 1px dashed #d9d9d9;
194
         border: 1px dashed #d9d9d9;
195
         border-radius: 6px;
195
         border-radius: 6px;
213
         height: 178px;
213
         height: 178px;
214
         display: block;
214
         display: block;
215
     }
215
     }
216
-    .form {
217
-        width: 800px;
218
-        margin-left: auto;
219
-        margin-right: auto;
220
-    }
221
 </style>
216
 </style>

+ 19
- 7
src/views/news/type/edi/index.vue Ver arquivo

14
             <el-form-item label="图片">
14
             <el-form-item label="图片">
15
 <!--                class="avatar-uploader"-->
15
 <!--                class="avatar-uploader"-->
16
                 <el-upload
16
                 <el-upload
17
+                        class="avatar-uploader"
17
                         :headers="uploadHeaders"
18
                         :headers="uploadHeaders"
18
                         :action="upFileUrl"
19
                         :action="upFileUrl"
19
                         :show-file-list="false"
20
                         :show-file-list="false"
75
                 // console.log(res)
76
                 // console.log(res)
76
                 this.form.newsTypeImg = res.data
77
                 this.form.newsTypeImg = res.data
77
             },
78
             },
79
+            beforeImgUpload(file) {
80
+                if (file.type !== "image/jpeg" && file.type !== "image/png") {
81
+                    this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
82
+                    return false;
83
+                }
84
+
85
+                this.showLoadding("上传中...");
86
+                return true;
87
+            },
78
             getBuildList() {
88
             getBuildList() {
79
                 this.$store.dispatch('building/getBuildings', this.buildingForm).then((res) => {
89
                 this.$store.dispatch('building/getBuildings', this.buildingForm).then((res) => {
80
                     this.buildingList = res.records
90
                     this.buildingList = res.records
117
                 }).catch(() => {
127
                 }).catch(() => {
118
                     console.log('news/getTypeById err')
128
                     console.log('news/getTypeById err')
119
                 })
129
                 })
120
-            }
130
+            },
121
         }
131
         }
122
     }
132
     }
123
 </script>
133
 </script>
124
-
134
+<style lang="scss" scoped>
135
+.form {
136
+    width: 300px;
137
+    margin-left: auto;
138
+    margin-right: auto;
139
+}
140
+</style>
125
 <style scoped>
141
 <style scoped>
126
     .avatar-uploader .el-upload {
142
     .avatar-uploader .el-upload {
127
         border: 1px dashed #d9d9d9;
143
         border: 1px dashed #d9d9d9;
146
         height: 178px;
162
         height: 178px;
147
         display: block;
163
         display: block;
148
     }
164
     }
149
-    .form {
150
-        width: 300px;
151
-        margin-left: auto;
152
-        margin-right: auto;
153
-    }
165
+
154
 </style>
166
 </style>