From 6e78c666fd4f14ea32eaf3b5e39c8a5907a576fa Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Thu, 5 Jan 2023 16:03:01 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BF=BB=E8=BD=AC=E6=96=B0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/sealDrawer.vue | 31 ++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/sealDrawer.vue b/src/components/pages/sealDrawer.vue
index 3f94cca8..27389dd4 100644
--- a/src/components/pages/sealDrawer.vue
+++ b/src/components/pages/sealDrawer.vue
@@ -1,18 +1,29 @@
 <template>
   <section class="sealDrawer">
     <slot name="tools"/>
-    <div class="resetSignature left" @click.stop="handleClean">重写</div>
-    <div class="resetSignature" @click.stop="submit">提交</div>
     <div v-if="drawPlaceholder" class="placeholder">{{ placeholder }}</div>
     <canvas disable-scroll type="canvas" canvas-id="drawer" id="drawer" @mousedown.stop="handleDrawStart"
             @mouseup.stop="handleDrawEnd" @mouseleave="handleDrawEnd" @mousemove.stop="handleDrawing"
             @touchstart.stop="handleDrawStart" @touchend.stop="handleDrawEnd" @touchmove="handleDrawing"/>
+    <AiBottomBtn v-if="isVertical">
+      <div flex>
+        <div class="fill text reset" @click.stop="handleClean">重写</div>
+        <div class="fill text" @click.stop="submit">提交</div>
+      </div>
+    </AiBottomBtn>
+    <template v-else>
+      <div class="resetSignature left" @click.stop="handleClean">重写</div>
+      <div class="resetSignature" @click.stop="submit">提交</div>
+    </template>
   </section>
 </template>
 
 <script>
+import AiBottomBtn from "../AiBottomBtn";
+
 export default {
   name: "sealDrawer",
+  components: {AiBottomBtn},
   appName: "签名",
   props: {
     placeholder: {type: String, default: "请在此处清晰书写你的签名"},
@@ -21,7 +32,8 @@ export default {
     return {
       drawing: false,//判断是否处于绘画中
       drawer: {},
-      drawPlaceholder: true
+      drawPlaceholder: true,
+      isVertical: true
     }
   },
   watch: {
@@ -30,10 +42,10 @@ export default {
     }
   },
   mounted() {
-    window.onorientationonchange = () => {
-      if ([90, -90].includes(window.orientation)) {
-        location.reload()
-      }
+    this.isVertical = ![90, -90].includes(window.orientation)
+    window.onresize = () => {
+      this.isVertical = ![90, -90].includes(window.orientation)
+      location.reload()
     }
     this.initDrawer()
   },
@@ -141,5 +153,10 @@ export default {
     font-size: 64px;
     color: #DDDDDD;
   }
+
+  ::v-deep.reset {
+    background-color: #fff;
+    color: #333;
+  }
 }
 </style>