修改画布UI

src/components/AudioPanel.vue

@@ -1,18 +1,27 @@
 <template>
   <div>
-    <label class="lable"><input class="input" type="file" @change="upload"></label>
-    <el-button type="primary" plain size="small" @click="$store.state.editor.editorTheme.backgroundAudio=''" v-if="$store.state.editor.editorTheme.backgroundAudio" >移除背景音乐</el-button>
+    <label class="lable"><input class="input" type="file" @change="upload">
+      <img style="width: 16px;height: 16px;" src="../assets/images/add-ele.png" alt="">
+    </label>
+    <div style="width:100px;height:28px;text-align: center;background:rgba(78,93,255,1);border-radius:14px;font-size:14px;
+    font-family:MicrosoftYaHei;color:rgba(255,255,255,1);line-height:28px; margin-top: 10px;"
+      @click="$store.state.editor.editorTheme.backgroundAudio=''"
+      v-if="$store.state.editor.editorTheme.backgroundAudio">移除背景音乐</div>
   </div>
 </template>
 
 <style scoped>
   .lable {
-    display: block;
+    display: flex;
     cursor: pointer;
-    width: 3em;
-    height: 3em;
-    background: url("../assets/addpic_large.png") no-repeat;
+    width: 60px;
+    height: 60px;
+    background: rgba(248, 248, 248, 1);
+    border: 1px dashed rgba(182, 182, 182, 1);
     background-size: cover;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10px;
   }
 
   .input {
@@ -29,8 +38,8 @@
       }
     },
     methods: {
-      upload (event) {
-        var that =this
+      upload(event) {
+        var that = this
         let file = event.target.files[0]
         if (file) {
           const loading = this.$loading({
@@ -39,7 +48,7 @@
             spinner: 'el-icon-loading',
             background: 'rgba(0, 0, 0, 0.8)'
           });
-          http.uploadMaterielFile(file,function (res) {
+          http.uploadMaterielFile(file, function (res) {
             loading.close();
             that.$store.state.editor.editorTheme.backgroundAudio = res;
             // let audio = document.createElement('audio')
@@ -74,7 +83,7 @@
             //   left:700,
             //   top:0
             // })
-          }, function(res) {
+          }, function (res) {
             if (res.total.percent == 100) {
               loading.close();
             }
@@ -83,4 +92,4 @@
       },
     }
   }
-</script>
+</script>

src/components/EditPanel.vue

@@ -38,6 +38,36 @@
       <!-- 文字编辑界面特有控件 -->
       <div v-show="panelState === 11||panelState===15">
 
+        <div
+          style="vertical-align: middle;display: flex; flex-direction: row; padding: 12px 0; padding-left: 20px; border-bottom: #E2E4EE solid 1px;"
+          v-show="panelState == 15">
+          <div>
+            <img style="width:100px; height:100px" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png" alt="">
+          </div>
+          <div style="display:flex; flex-direction: column;margin-left: 16px;">
+            <span style="font-size:14px;
+            font-family:MicrosoftYaHei;
+            margin-bottom: 4px;
+            color:rgba(100,107,129,1);
+            line-height:19px;">当前图片</span>
+            <span style="font-size:14px;
+            font-family:MicrosoftYaHei;
+            color:rgba(100,107,129,1);
+            margin-bottom: 16px;
+            line-height:19px;">
+              3iiiiiii.jpg
+            </span>
+            <div style="width:108px;
+            height:28px;
+            background:rgba(78,93,255,1);
+            border-radius:14px;font-size:14px;
+            font-family:MicrosoftYaHei;
+            color:rgba(255,255,255,1);
+            display: flex;
+            justify-content: center;
+            line-height:28px;">替换元素</div>
+          </div>
+        </div>
         <div style="vertical-align: middle;display: flex;flex-direction: column;border-bottom: #E2E4EE solid 1px">
           <div style="font-size: 12px; font-family:MicrosoftYaHei;
             color:rgba(51,51,51,1);