翻转新样式

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,11 +42,11 @@ export default {
     }
   },
   mounted() {
-    window.onorientationonchange = () => {
+    this.isVertical = ![90, -90].includes(window.orientation)
-      if ([90, -90].includes(window.orientation)) {
+    window.onresize = () => {
+      this.isVertical = ![90, -90].includes(window.orientation)
       location.reload()
     }
-    }
     this.initDrawer()
   },
   methods: {
@@ -141,5 +153,10 @@ export default {
     font-size: 64px;
     color: #DDDDDD;
   }
+
+  ::v-deep.reset {
+    background-color: #fff;
+    color: #333;
+  }
 }
 </style>