修改添加元素样式UI

src/components/ImgPanel.vue

@@ -1,90 +1,101 @@
 <template>
-  <div>
-    <PicPicker class="ele"
-               @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple"></PicPicker>
+  <div style="display: flex;
+  flex-wrap: wrap; align-content: baseline; justify-content: space-between ; padding-left: 21px; padding-right: 21px;padding-top: 27px;">
+    <PicPicker class="ele-add" @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple"></PicPicker>
     <template v-if="ismultiple">
       <div class="ele" :style="{ backgroundImage: 'url(' + (element.morePic[0]?element.morePic[0].filePath:'') + ')' }"
-           @click="selectedImg(element)"
-           v-for="element in picList1"></div>
+        @click="selectedImg(element)" v-for="element in picList1"></div>
     </template>
     <template v-else>
-      <div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }"
-           @click="selectedImg(element)"
-           v-for="element in picList2"></div>
+      <div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }" @click="selectedImg(element)"
+        v-for="element in picList2"></div>
     </template>
   </div>
 </template>
 
 <script>
-import appConst from '../util/appConst'
-import PicPicker from './PicturePicker'
-export default {
-  props: {
-    selectedImg: {
-      type: Function
+  import appConst from '../util/appConst'
+  import PicPicker from './PicturePicker'
+  export default {
+    props: {
+      selectedImg: {
+        type: Function
+      },
+      themeId: {
+        type: String
+      },
+      ismultiple: Boolean
     },
-    themeId: {
-      type: String
+    data() {
+      return {
+        http: appConst.BACKEND_DOMAIN
+      }
     },
-    ismultiple: Boolean
-  },
-  data () {
-    return {
-      http: appConst.BACKEND_DOMAIN
-    }
-  },
-  computed: {
-    picList () {
-      return this.$store.state.editor.picList
+    computed: {
+      picList() {
+        return this.$store.state.editor.picList
+      },
+      picList1() {
+        var arr = [];
+        this.picList.forEach(function (item) {
+          if (item.morePic) {
+            arr.push(item)
+          }
+        })
+        return arr
+      },
+      picList2() {
+        var arr = [];
+        this.picList.forEach(function (item) {
+          if (!item.morePic) {
+            arr.push(item)
+          }
+        })
+        return arr
+      }
     },
-    picList1(){
-      var arr=[];
-      this.picList.forEach(function (item) {
-        if(item.morePic){
-          arr.push(item)
-        }
-      })
-      return arr
+    methods: {
+      uploadImage(data) {
+        this.$store.dispatch('savePic', {
+          'filePath': data['filePath'],
+          'themeId': this.themeId,
+          'width': data['width'],
+          'height': data['height'],
+          'morePic': data.morePic
+        })
+      }
     },
-    picList2(){
-      var arr=[];
-      this.picList.forEach(function (item) {
-        if(!item.morePic){
-          arr.push(item)
-        }
-      })
-      return arr
-    }
-  },
-  methods: {
-    uploadImage (data) {
-      this.$store.dispatch('savePic', {
-        'filePath': data['filePath'],
-        'themeId': this.themeId,
-        'width': data['width'],
-        'height': data['height'],
-        'morePic':data.morePic
-      })
+    components: {
+      PicPicker
     }
-  },
-  components: {
-    PicPicker
   }
-}
 </script>
 
 <style lang="less" scoped>
-.ele {
-  float: left;
-  width: 80px;
-  height: 80px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  margin: 5px 5px;
-  &:hover {
-    border: 2px solid #18ccc0;
-    cursor: pointer;
+  .ele-add {
+    float: left;
+    width: 110px;
+    height: 80px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    margin-bottom: 16px;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .ele {
+    float: left;
+    width: 110px;
+    height: 80px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    margin-bottom: 16px;
+    &:hover {
+      border: 2px solid #4E5DFF;
+      cursor: pointer;
+    }
   }
-}
-</style>
+</style>

src/components/PicturePicker.vue

@@ -1,15 +1,31 @@
 <template>
-  <label class="lable"><input class="input" type="file" @change="fileChange" multiple="true"></label>
+  <label class="lable">
+    <div style="width:110px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height:80px;
+    background:rgba(239,239,239,1);">
+      <img style="width:16px;
+    height:16px;" src="../assets/images/add-ele.png" />
+      <span style="font-size:12px;
+    font-family:PingFangSC-Regular;
+    font-weight:400;
+    margin-top: 6px;
+    color:rgba(51,51,51,1);
+    line-height:17px;">添加元素</span>
+    </div>
+    <input class="input" type="file" @change="fileChange" multiple="true">
+  </label>
 </template>
 
 <style scoped>
   .lable {
     display: block;
     cursor: pointer;
-    width: 3em;
-    height: 3em;
-    background: url("../assets/addpic_large.png") no-repeat;
-    background-size: cover;
+    width: 110px;
+    height: 80px;
   }
 
   .input {
@@ -27,15 +43,15 @@
       ismultiple: Boolean
     },
     methods: {
-      fileChange (event) {
+      fileChange(event) {
         if (this.ismultiple) {
           this.multipleUpload(event)
         } else {
           this.upload(event)
         }
       },
-      async upload (event) {
-        var that=this;
+      async upload(event) {
+        var that = this;
         let files = event.target.files
         if (!files.length) {
           return false
@@ -50,20 +66,20 @@
         for (var i = 0; i < files.length; i++) {
           var file = files[i]
           if (file) {
-            http.uploadMaterielFile(file,function (res) {
+            http.uploadMaterielFile(file, function (res) {
               loading.close();
               let img = document.createElement('img')
 
               img.onload = () => {
                 that.$emit('uploaded', {
-                          'filePath': res,
-                          'width': img.width,
-                          'height': img.height
-                        })
-                      }
-                      img.src = res
-            }, function(res) {
-              if (res.total.percent == 100 && (files.length == i+1)) {
+                  'filePath': res,
+                  'width': img.width,
+                  'height': img.height
+                })
+              }
+              img.src = res
+            }, function (res) {
+              if (res.total.percent == 100 && (files.length == i + 1)) {
                 loading.close();
               }
             })
@@ -97,7 +113,7 @@
         //   })
         // }
       },
-      multipleUpload (event) {
+      multipleUpload(event) {
         let files = event.target.files
         if (!files.length) {
           return false
@@ -113,7 +129,7 @@
         for (var i = 0; i < files.length; i++) {
           var file = files[i]
           if (file) {
-            http.uploadMaterielFile(file,function (res) {
+            http.uploadMaterielFile(file, function (res) {
               loading.close();
               let img = document.createElement('img')
 
@@ -125,8 +141,8 @@
                 })
               }
               img.src = res
-            }, function(res) {
-              if (res.total.percent == 100 && (files.length == i+1)) {
+            }, function (res) {
+              if (res.total.percent == 100 && (files.length == i + 1)) {
                 loading.close();
               }
             })
@@ -138,4 +154,4 @@
       }
     }
   }
-</script>
+</script>