修改UI

src/components/ImgPanel.vue

@@ -1,14 +1,19 @@
 <template>
-  <div style="display: flex;
+  <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>
+    <PicPicker class="ele-add" @uploaded="uploadImage" :themeId="themeId" :ismultiple="ismultiple" :isButton='isButton'>
+    </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>
     </template>
     <template v-else>
-      <div class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }" @click="selectedImg(element)"
-        v-for="element in picList2"></div>
+
+      <div v-if='!isButton' class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }"
+        @click="selectedImg(element)" v-for="element in picList2"></div>
+      <div v-else class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }"
+        @click="selectedImg(element)" v-for="element in picList3"></div>
     </template>
   </div>
 </template>
@@ -24,6 +29,7 @@
       themeId: {
         type: String
       },
+      isButton: Boolean,
       ismultiple: Boolean
     },
     data() {
@@ -47,7 +53,17 @@
       picList2() {
         var arr = [];
         this.picList.forEach(function (item) {
-          if (!item.morePic) {
+          if (!item.morePic && !item.isButton) {
+            arr.push(item)
+          }
+        })
+        return arr
+      },
+
+      picList3() {
+        var arr = [];
+        this.picList.forEach(function (item) {
+          if (!item.morePic && item.isButton) {
             arr.push(item)
           }
         })
@@ -61,7 +77,8 @@
           'themeId': this.themeId,
           'width': data['width'],
           'height': data['height'],
-          'morePic': data.morePic
+          'morePic': data.morePic,
+          'isButton': data.isButton,
         })
       }
     },
@@ -74,12 +91,13 @@
 <style lang="less" scoped>
   .ele-add {
     float: left;
-    width: 110px;
-    height: 80px;
+    width: 45%;
+    height: calc(324px *0.45 * 0.73);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     margin-bottom: 16px;
+
     &:hover {
       cursor: pointer;
     }
@@ -87,12 +105,13 @@
 
   .ele {
     float: left;
-    width: 110px;
-    height: 80px;
+    width: 45%;
+    height: calc(324px *0.45 * 0.73);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     margin-bottom: 16px;
+
     &:hover {
       border: 2px solid #4E5DFF;
       cursor: pointer;

src/components/PicturePicker.vue

@@ -1,11 +1,11 @@
 <template>
   <label class="lable">
-    <div style="width:110px;
+    <div style="width:100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height:80px;
+    height:100%;
     background:rgba(239,239,239,1);">
       <img style="width:16px;
     height:16px;" src="../assets/images/add-ele.png" />
@@ -14,7 +14,7 @@
     font-weight:400;
     margin-top: 6px;
     color:rgba(51,51,51,1);
-    line-height:17px;">添加元素</span>
+    line-height:17px;">{{ismultiple?"添加轮播":isButton? "添加按钮":"添加元素"}}</span>
     </div>
     <input class="input" type="file" @change="fileChange" multiple="true">
   </label>
@@ -24,8 +24,8 @@
   .lable {
     display: block;
     cursor: pointer;
-    width: 110px;
-    height: 80px;
+    width: 45%;
+    height: calc(324px *0.45 * 0.73);
   }
 
   .input {
@@ -40,6 +40,7 @@
       themeId: {
         type: String
       },
+      isButton: Boolean,
       ismultiple: Boolean
     },
     methods: {
@@ -74,7 +75,8 @@
                 that.$emit('uploaded', {
                   'filePath': res,
                   'width': img.width,
-                  'height': img.height
+                  'height': img.height,
+                  'isButton': that.isButton,
                 })
               }
               img.src = res

src/views/h5editor/index.vue

@@ -27,35 +27,48 @@
       <div class="control-panel">
         <div class="funcs">
           <el-tooltip effect="dark" content="创建文本" placement="left">
-            <div style="width:44px;height: 44px; margin-top: 20px;display: flex;justify-content: center" @click="togglePanel(1)"
-              :class="{ active: panelState === 1 }">
+            <div style="width:44px;height: 44px; margin-top: 20px;display: flex;justify-content: center"
+              @click="togglePanel(1)" :class="{ active: panelState === 1 }">
               <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-text.png" alt="">
             </div>
           </el-tooltip>
           <el-tooltip effect="dark" content="装饰元素" placement="left">
             <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(2)"
               :class="{ active: panelState === 2 }">
-              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-zhuangshi.png" alt="">
+              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-zhuangshi.png"
+                alt="">
             </div>
           </el-tooltip>
           <el-tooltip effect="dark" content="新建轮播" placement="left">
             <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(3)"
               :class="{ active: panelState === 3 }">
-              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-lunbo.png" alt="">
+              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-lunbo.png"
+                alt="">
             </div>
           </el-tooltip>
           <!--<el-tooltip  effect="dark" content="播放动画" placement="left">-->
           <!--<button class="func el-icon-caret-right" @click="playAnimate"></button>-->
           <!--</el-tooltip>-->
-          <el-tooltip effect="dark" content="交互按钮" placement="left">
+          <!-- 默认画板页面编辑 -->
+          <!-- <el-tooltip effect="dark" content="交互按钮" placement="left">
             <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(0)"
               :class="{ active: panelState === 0 }">
-              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png" alt="">
+              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
+                alt="">
+            </div>
+          </el-tooltip> -->
+
+          <el-tooltip effect="dark" content="交互按钮" placement="left">
+            <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(4)"
+              :class="{ active: panelState === 4 }">
+              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
+                alt="">
             </div>
           </el-tooltip>
-          <el-tooltip  v-show="false" effect="dark" content="保存" placement="left">
+          <el-tooltip v-show="false" effect="dark" content="保存" placement="left">
             <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="save">
-              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png" alt="">
+              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
+                alt="">
             </div>
           </el-tooltip>
         </div>
@@ -250,12 +263,16 @@
           </div>
           <!-- 添加元素 2 -->
           <div class="panel panel-element clearfix" v-show="panelState === 2">
-            <ImgPanel :selectedImg="addPicElement" :themeId="itemId" />
+            <ImgPanel :selectedImg="addPicElement" :themeId="itemId" :isButton ="false" />
           </div>
           <!-- 添加多图上元素 3 -->
           <div class="panel panel-element clearfix" v-if="panelState === 3">
             <ImgPanel :selectedImg="addMorePicElement" :ismultiple="true" />
           </div>
+          <!-- 添加按钮 4 -->
+          <div class="panel panel-element clearfix" v-if="panelState === 4">
+            <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton ="true" />
+          </div>
           <!-- 图层编辑面板 -->
           <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10" />
         </div>
@@ -822,7 +839,7 @@
 
   .control-panel {
     position: absolute;
-    width: calc(324px - 44px);
+    width: 324px;
     height: 100%;
     right: 0;
     top: 0;
@@ -840,10 +857,10 @@
       background-color: white;
       border-right: 2px solid #E2E4EE;
       box-shadow: 0px 2px 30px 5px rgba(0, 0, 0, 0.2);
-      
+
 
       .func {
-        color:white;
+        color: white;
         background: transparent;
         cursor: pointer;
         margin-top: 20px;