Merge branch 'master' of http://192.168.4.246:3000/zhangs/surveyMaker

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);
@@ -561,7 +591,7 @@
           <el-slider v-model="element.duration" :step="0.1" :min="0" :max="10" show-input input-size="mini"
             style="width:80%;margin-right: 10px"></el-slider>
         </div>
-  
+
         <div style="display:flex; flex-direction: row;width: 100%;justify-content: space-between;align-items: center">
           <span style="font-size:12px;
           font-family:MicrosoftYaHei;
@@ -571,15 +601,17 @@
             style="width:80%;margin-right: 10px"></el-slider>
         </div>
       </div>
-     
 
-      <div style="vertical-align: middle; width: 100%; padding-top: 12px; padding-bottom: 12px;border-bottom: #E2E4EE solid 1px; display: flex; flex-direction: row;align-items: center">
+
+      <div
+        style="vertical-align: middle; width: 100%; padding-top: 12px; padding-bottom: 12px;border-bottom: #E2E4EE solid 1px; display: flex; flex-direction: row;align-items: center">
         <div style="font-size:12px;
         font-family:MicrosoftYaHei;
         margin-left: 20px;
         color:rgba(51,51,51,1);
         line-height:16px;letter-spacing: 0;">是否循环</div>
-        <el-switch v-model="element.loop" style="margin-left: 6px;" active-color="#4E5DFF" inactive-color="#D7E2FF"></el-switch>
+        <el-switch v-model="element.loop" style="margin-left: 6px;" active-color="#4E5DFF" inactive-color="#D7E2FF">
+        </el-switch>
       </div>
 
       <div style="width: 100%;">
@@ -589,30 +621,34 @@
         margin-top: 12px;
         color:rgba(51,51,51,1);">选择动画</div>
       </div>
-      <div style="margin-top: 20px; ">
-        <div v-show="panelState === 11">
-          <div style="font-size:12px;
-          font-family:MicrosoftYaHei;
-          color:rgba(51,51,51,1);letter-spacing: 0;">文字逐字特效:</div>
-          <br>
+      <div style="margin-top: 10px; ">
+        <div v-show="panelState === 11" style="width: 100%; padding-left:20px;padding-right: 8px;">
           <div
-            style="background: #EBEDEF;display: inline-flex; width:33.3%;overflow: hidden;text-align: center; cursor: pointer"
+            style="display: inline-flex;margin-right: 12px;margin-bottom: 10px; overflow: hidden;text-align: center; cursor: pointer"
             v-for="(font,index) in animateFontList">
             <div v-model="element.animatedFont" @click="checkAnimationFont(font)" :title="font.name" :type="font.type"
-              :style="{'font-size': '12px',color: element.animatedFont==font.id? 'white':'#999999','letter-spacing': 0, width:'100%','word-break':'keep-all',padding: '20px',
-               'background': element.animatedFont==font.id? 'green':'',
-               'font-weight': element.animatedFont==font.id? 'bold':''
+              :style="{'background':'rgba(238,242,250,1)',
+                'border-radius':'12px',
+                'border':'1px solid rgba(205,209,221,1)','font-size': '12px',color: element.animatedFont==font.id? 'white':'#999999','letter-spacing': 0,'word-break':'keep-all',padding: '4px 13px',
+               'background': element.animatedFont==font.id? '#4E5DFF':'rgba(238,242,250,1)',
+               'border': element.animatedFont==font.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)',
                }" :hxFont="element.animatedFont" :hxid="font.id">{{font.name}}</div>
           </div>
         </div>
-        <div
-          style="background: #EBEDEF;display: inline-flex; width:33.3%;overflow: hidden;text-align: center; cursor: pointer"
-          v-for="(item,index) in animateList">
-          <div v-model="element.animatedName" @click="checkAnimation(item)" :title="item.name" :type="item.type" :style="{'font-size': '12px',color: element.animatedName==item.id? 'white':'#999999','letter-spacing': 0, width:'100%','word-break':'keep-all',padding: '20px',
-               'background': element.animatedName==item.id? 'green':'',
-               'font-weight': element.animatedName==item.id? 'bold':''
+        <div style="width: 100%; padding-left:20px;padding-right: 8px;">
+          <div
+            style="display: inline-flex;margin-right: 12px;margin-bottom: 10px; overflow: hidden;text-align: center; cursor: pointer"
+            v-for="(item,index) in animateList">
+            <div v-model="element.animatedName" @click="checkAnimation(item)" :title="item.name" :type="item.type"
+              :style="{'background':'rgba(238,242,250,1)',
+          'border-radius':'12px',
+          'border':'1px solid rgba(205,209,221,1)','font-size': '12px',color: element.animatedName==item.id? 'white':'#999999','letter-spacing': 0,'word-break':'keep-all',padding: '4px 13px',
+               'background': element.animatedName==item.id? '#4E5DFF':'rgba(238,242,250,1)',
+               'border': element.animatedName==item.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)'
                }">{{item.name}}</div>
+          </div>
         </div>
+
       </div>
     </div>