书写组件预览

src/views/book/courseware/preview/components/write_base/WriteBasePreview.vue

@@ -17,12 +17,14 @@
           :bgColor.sync="bgColor"
         />
         <div class="btn-box">
-          <SvgIcon icon-class="clear" size="12" @click="handleReset" title="清除" />
-          <SvgIcon icon-class="camera" size="12" @click="handleGenerate" title="保存" />
+          <SvgIcon icon-class="clear" size="16" @click="handleReset" title="清除" />
+          <SvgIcon icon-class="camera" size="16" @click="handleGenerate" title="保存" />
         </div>
       </div>
-      <h2>展示区</h2>
-      <img :src="data.write_base64[0]" v-if="data.write_base64[0]" alt="" />
+      <template v-if="data.write_base64[0]">
+        <h2>展示区</h2>
+        <img style="background-color: #f7f8fa" :src="data.write_base64[0]" alt=""
+      /></template>
     </div>
   </div>
 </template>
@@ -67,7 +69,7 @@ export default {
         })
         .catch((err) => {
           console.error(err);
-          alert('生成图片失败：' + err.message);
+          // alert('生成图片失败：' + err.message);
         });
     },
   },
@@ -84,12 +86,22 @@ export default {
 
   .main {
     h2 {
-      margin: 0;
+      margin: 5px 0;
       font-size: 14px;
     }
 
-    .esign-canvas {
-      background-color: '#f7f8fa' !important;
+    .esign-box {
+      position: relative;
+      background-color: #f7f8fa;
+
+      .btn-box {
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+        display: flex;
+        gap: 5px;
+        cursor: pointer;
+      }
     }
   }
 }