画板预览与位置调整处显示一致

src/views/book/courseware/preview/components/drawing/DrawingPreview.vue

@@ -47,20 +47,46 @@
         :options="options"
       />
     </div>
-    <div v-if="!disabled" class="footer">
+    <!-- v-if="!disabled" -->
+    <div class="footer">
       <div class="pen">
         <!-- 选择颜色 -->
-        <el-color-picker v-model="lineColor" @change="changeColor" />
+        <el-color-picker v-model="lineColor" @change="changeColor" :disabled="disabled" />
         <!-- 清除一笔 -->
-        <img class="clean-btn" src="@/assets/drawing-back.png" @click="undo" />
+        <img
+          class="clean-btn"
+          src="@/assets/drawing-back.png"
+          @click="undo"
+          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+        />
         <!-- 橡皮擦 -->
         <!-- <SvgIcon icon-class="eraser" size="24" @click="eraser" :style="{ color: isEraser ? 'green' : '#000' }" /> -->
         <!-- 清空画板 -->
-        <img class="clean-btn" src="@/assets/icon-clean.png" @click="clear" />
-        <img :src="penIndex == 0 ? thinpenActive : thinpen" class="pen-img" @click="selSize(0)" />
-        <img :src="penIndex == 1 ? thickpenActive : thickpen" class="pen-img" @click="selSize(1)" />
-        <img :src="penIndex == 2 ? thicskpenActive : thicskpen" class="pen-img" @click="selSize(2)" />
-        <div class="save" @click="save">保 存</div>
+        <img
+          class="clean-btn"
+          src="@/assets/icon-clean.png"
+          @click="clear"
+          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+        />
+        <img
+          :src="penIndex == 0 ? thinpenActive : thinpen"
+          class="pen-img"
+          @click="selSize(0)"
+          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+        />
+        <img
+          :src="penIndex == 1 ? thickpenActive : thickpen"
+          class="pen-img"
+          @click="selSize(1)"
+          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+        />
+        <img
+          :src="penIndex == 2 ? thicskpenActive : thicskpen"
+          class="pen-img"
+          @click="selSize(2)"
+          :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
+        />
+        <div class="save" @click="save" :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }">保 存</div>
       </div>
     </div>
   </div>
@@ -119,16 +145,19 @@ export default {
   methods: {
     // 撤销
     undo() {
+      if (this.disabled) return;
       this.$refs.signaturePad.undoSignature();
       this.isEraser = false;
     },
     // 清除
     clear() {
+      if (this.disabled) return;
       this.$refs.signaturePad.clearSignature();
       this.isEraser = false;
     },
     // 保存
     save() {
+      if (this.disabled) return;
       this.signData = this.$refs.signaturePad.toData();
       const { data } = this.$refs.signaturePad.saveSignature();
       this.imgSrc = data;
@@ -170,6 +199,7 @@ export default {
     },
     // 调节画笔粗细大小
     selSize(index) {
+      if (this.disabled) return;
       this.penIndex = index;
       this.options = {
         penColor: this.lineColor,
@@ -231,7 +261,7 @@ export default {
 
 .img-box {
   position: relative;
-  margin: 20px auto;
+  margin: 0 auto 20px;
 }
 
 .img-set {