update:前命题UI修改

src/views/Design/components/Questions/SignQuestion.vue

@@ -12,7 +12,7 @@ const { element, active } = toRefs(props);
 const signatureCanvas = useTemplateRef('signatureCanvas');
 
 const canvasWidth = ref(100);
-const canvasHeight = computed(() => canvasWidth.value / 2.5);
+const canvasHeight = computed(() => canvasWidth.value / 1.5);
 const showSignText = ref(true);
 const isEraser = ref(false);
 
@@ -60,7 +60,7 @@ const togglePen = () => {
 onMounted(() => {
   if (!signatureCanvas.value) return;
   // 将 canvas 宽度和窗口的宽度保持一致
-  canvasWidth.value = window.innerWidth - 50;
+  canvasWidth.value = window.innerWidth - 60;
 
   // 获取 canvas 上下文
   ctx = signatureCanvas.value.getContext('2d')!;
@@ -170,44 +170,48 @@ const emitValue = () => {
 </script>
 
 <template>
-  <van-cell>
-    <van-field
-      :label="element.stem"
-      :required="element.config.is_required === 1"
-      label-align="top"
-      :border="false"
-      readonly
-      class="base-select"
-    >
-      <template #left-icon>
-        {{ index + 1 }}
-      </template>
-      <template #label>
-        <contenteditable
-          v-model="element.stem"
-          :active="active"
-          @blur="emitValue"
-        ></contenteditable>
-      </template>
-      <template #input>
-        <div class="sign-question">
-          <canvas
-            ref="signatureCanvas"
-            :width="canvasWidth"
-            :height="canvasHeight"
-            style="border: 1px solid #ccc; border-radius: 4px"
-          >
-          </canvas>
-          <div class="sign-text" :class="{ show: showSignText }">
-            <span @click="clearCanvas">清空</span>
-            <span @click="undo">撤销</span>
-            <span @click="togglePen">{{ isEraser ? '画笔' : '橡皮擦' }}</span>
-            <span @click="saveCanvas">完成并上传</span>
-          </div>
+  <!--  <van-cell>-->
+  <van-field
+    :label="element.stem"
+    :required="element.config.is_required === 1"
+    label-align="top"
+    :border="false"
+    readonly
+  >
+    <template #left-icon>
+      {{ index + 1 }}
+    </template>
+    <template #label>
+      <contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
+    </template>
+    <template #input>
+      <div class="sign-question">
+        <canvas
+          ref="signatureCanvas"
+          :width="canvasWidth"
+          :height="canvasHeight"
+          style="border: 1px dashed #ccc; border-radius: 4px"
+        >
+        </canvas>
+        <div class="sign-text" v-if="active" :class="{ show: active }">
+          <span
+            class="icon mobilefont mobilefont-qingkong"
+            title="清空"
+            @click="clearCanvas"
+          ></span>
+          <span class="icon mobilefont mobilefont-chexiao" @click="undo"></span>
+          <span
+            class="icon mobilefont"
+            :class="isEraser ? 'mobilefont-huabi' : 'mobilefont-rubber'"
+            @click="togglePen"
+          ></span>
+          <span class="icon mobilefont mobilefont-shangchuan" @click="saveCanvas"></span>
         </div>
-      </template>
-    </van-field>
-  </van-cell>
+        <div class="sign-tips" v-else>请在空白区域书写您的签名</div>
+      </div>
+    </template>
+  </van-field>
+  <!--  </van-cell>-->
 </template>
 
 <style lang="scss" scoped>
@@ -255,5 +259,13 @@ const emitValue = () => {
       }
     }
   }
+  .sign-tips {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: max-content;
+    transform: translate(-50%, -50%);
+    color: #cdcdcd;
+  }
 }
 </style>