@web-utils/component 2.7.19 → 2.7.21

package/dist/components/sign/index.js

@@ -1,29 +1,29 @@
-import { s as g } from "../../chunks/util.23fe58fb.js";
-import { n as m } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var x = function() {
-  var t = this, n = t.$createElement, s = t._self._c || n;
-  return s("div", {
+import { s as setPx } from "../../chunks/util.89913643.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "avue-sige"
-  }, [s("canvas", {
+  }, [_c("canvas", {
     ref: "canvas",
     staticClass: "avue-sige__canvas",
     attrs: {
-      width: t.width,
-      height: t.height
+      width: _vm.width,
+      height: _vm.height
     }
   })]);
-}, _ = [];
-function y(t, n, s, h, e, o) {
-  t.save(), t.fillStyle = e, t.translate(n, s), t.rotate(Math.PI + o), t.beginPath();
-  var a = Math.sin(0), d = Math.cos(0);
-  const f = Math.PI / 5 * 4;
-  for (let r = 0; r < 5; r++) {
-    var a = Math.sin(r * f), d = Math.cos(r * f);
-    t.lineTo(a * h, d * h);
+}, staticRenderFns = [];
+function create5star(context, sx, sy, radius, color, rotato) {
+  context.save(), context.fillStyle = color, context.translate(sx, sy), context.rotate(Math.PI + rotato), context.beginPath();
+  var x = Math.sin(0), y = Math.cos(0);
+  const dig = Math.PI / 5 * 4;
+  for (let i = 0; i < 5; i++) {
+    var x = Math.sin(i * dig), y = Math.cos(i * dig);
+    context.lineTo(x * radius, y * radius);
   }
-  t.closePath(), t.stroke(), t.fill(), t.restore();
+  context.closePath(), context.stroke(), context.fill(), context.restore();
 }
-const M = {
+const __vue2_script = {
   name: "Sign",
   props: {
     width: {
@@ -48,8 +48,8 @@ const M = {
   computed: {
     styleName() {
       return {
-        width: g(this.width),
-        height: g(this.height)
+        width: setPx(this.width),
+        height: setPx(this.height)
       };
     }
   },
@@ -57,77 +57,77 @@ const M = {
     this.init();
   },
   methods: {
-    getStar(t, n, s) {
-      const h = this.canvas, e = this.context, o = h.width / 2, a = h.height / 2;
-      e.lineWidth = 7, e.strokeStyle = "#f00", e.beginPath(), e.arc(o, a, 110, 0, Math.PI * 2), e.stroke(), y(e, o, a, 20, "#f00", 0), e.font = "18px 黑体", e.textBaseline = "middle", e.textAlign = "center", e.lineWidth = 1, e.strokeStyle = "#f00", e.strokeText(t, o, a + 50), e.font = "14px 黑体", e.textBaseline = "middle", e.textAlign = "center", e.lineWidth = 1, e.strokeStyle = "#f00", e.strokeText(s, o, a + 80), e.translate(o, a), e.font = "22px 黑体";
-      const d = n.length, f = 4 * Math.PI / (3 * (d - 1)), r = n.split("");
-      let l;
-      for (let i = 0; i < d; i++)
-        l = r[i], i == 0 ? e.rotate(5 * Math.PI / 6) : e.rotate(f), e.save(), e.translate(90, 0), e.rotate(Math.PI / 2), e.strokeText(l, 0, 0), e.restore(), e.save();
+    getStar(text, text1, text2) {
+      const canvas = this.canvas, context = this.context, width = canvas.width / 2, height = canvas.height / 2;
+      context.lineWidth = 7, context.strokeStyle = "#f00", context.beginPath(), context.arc(width, height, 110, 0, Math.PI * 2), context.stroke(), create5star(context, width, height, 20, "#f00", 0), context.font = "18px 黑体", context.textBaseline = "middle", context.textAlign = "center", context.lineWidth = 1, context.strokeStyle = "#f00", context.strokeText(text, width, height + 50), context.font = "14px 黑体", context.textBaseline = "middle", context.textAlign = "center", context.lineWidth = 1, context.strokeStyle = "#f00", context.strokeText(text2, width, height + 80), context.translate(width, height), context.font = "22px 黑体";
+      const count = text1.length, angle = 4 * Math.PI / (3 * (count - 1)), chars = text1.split("");
+      let c;
+      for (let i = 0; i < count; i++)
+        c = chars[i], i == 0 ? context.rotate(5 * Math.PI / 6) : context.rotate(angle), context.save(), context.translate(90, 0), context.rotate(Math.PI / 2), context.strokeText(c, 0, 0), context.restore(), context.save();
       this.disabled = !0;
     },
-    submit(t, n) {
-      return t || (t = this.width), n || (n = this.height), this.canvas.toDataURL("i/png");
+    submit(width, height) {
+      return width || (width = this.width), height || (height = this.height), this.canvas.toDataURL("i/png");
     },
     clear() {
       this.linex = [], this.liney = [], this.linen = [], this.disabled = !1;
     },
     init() {
       this.canvas = this.$refs.canvas;
-      const t = this.canvas, n = this;
-      typeof document.ontouchstart < "u" ? (t.addEventListener("touchmove", d, !1), t.addEventListener("touchstart", f, !1), t.addEventListener("touchend", r, !1)) : (t.addEventListener("mousemove", d, !1), t.addEventListener("mousedown", f, !1), t.addEventListener("mouseup", r, !1), t.addEventListener("mouseleave", r, !1)), this.context = t.getContext("2d");
-      const s = this.context;
+      const canvas = this.canvas, _safe = this;
+      typeof document.ontouchstart < "u" ? (canvas.addEventListener("touchmove", onMouseMove, !1), canvas.addEventListener("touchstart", onMouseDown, !1), canvas.addEventListener("touchend", onMouseUp, !1)) : (canvas.addEventListener("mousemove", onMouseMove, !1), canvas.addEventListener("mousedown", onMouseDown, !1), canvas.addEventListener("mouseup", onMouseUp, !1), canvas.addEventListener("mouseleave", onMouseUp, !1)), this.context = canvas.getContext("2d");
+      const context = this.context;
       this.linex = [], this.liney = [], this.linen = [];
-      let h = 1, e = 30, o = 0;
-      function a(l, i) {
-        const u = l.getBoundingClientRect();
-        let c, v;
-        return i.targetTouches ? (c = i.targetTouches[0].clientX, v = i.targetTouches[0].clientY) : (c = i.clientX, v = i.clientY), {
-          x: (c - u.left) * (l.width / u.width),
-          y: (v - u.top) * (l.height / u.height)
+      let lastX = 1, lastY = 30, flag = 0;
+      function getCanvasPos(canvas2, evt) {
+        const rect = canvas2.getBoundingClientRect();
+        let x, y;
+        return evt.targetTouches ? (x = evt.targetTouches[0].clientX, y = evt.targetTouches[0].clientY) : (x = evt.clientX, y = evt.clientY), {
+          x: (x - rect.left) * (canvas2.width / rect.width),
+          y: (y - rect.top) * (canvas2.height / rect.height)
         };
       }
-      function d(l) {
-        if (n.disabled)
+      function onMouseMove(evt) {
+        if (_safe.disabled)
           return;
-        const i = a(t, l).x, u = a(t, l).y;
-        if (o === 1) {
-          n.linex.push(i), n.liney.push(u), n.linen.push(1), s.save(), s.translate(s.canvas.width / 2, s.canvas.height / 2), s.translate(-s.canvas.width / 2, -s.canvas.height / 2), s.beginPath(), s.lineWidth = 2;
-          for (let c = 1; c < n.linex.length; c++)
-            h = n.linex[c], e = n.liney[c], n.linen[c] === 0 ? s.moveTo(h, e) : s.lineTo(h, e);
-          s.shadowBlur = 10, s.stroke(), s.restore();
+        const x = getCanvasPos(canvas, evt).x, y = getCanvasPos(canvas, evt).y;
+        if (flag === 1) {
+          _safe.linex.push(x), _safe.liney.push(y), _safe.linen.push(1), context.save(), context.translate(context.canvas.width / 2, context.canvas.height / 2), context.translate(-context.canvas.width / 2, -context.canvas.height / 2), context.beginPath(), context.lineWidth = 2;
+          for (let i = 1; i < _safe.linex.length; i++)
+            lastX = _safe.linex[i], lastY = _safe.liney[i], _safe.linen[i] === 0 ? context.moveTo(lastX, lastY) : context.lineTo(lastX, lastY);
+          context.shadowBlur = 10, context.stroke(), context.restore();
         }
-        l.preventDefault();
+        evt.preventDefault();
       }
-      function f(l) {
-        if (n.disabled)
+      function onMouseDown(evt) {
+        if (_safe.disabled)
           return;
-        const i = a(t, l).x, u = a(t, l).y;
-        o = 1, n.linex.push(i), n.liney.push(u), n.linen.push(0);
+        const x = getCanvasPos(canvas, evt).x, y = getCanvasPos(canvas, evt).y;
+        flag = 1, _safe.linex.push(x), _safe.liney.push(y), _safe.linen.push(0);
       }
-      function r() {
-        n.disabled || (o = 0);
+      function onMouseUp() {
+        _safe.disabled || (flag = 0);
       }
     }
   }
-}, p = {};
-var w = /* @__PURE__ */ m(
-  M,
-  x,
-  _,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  b,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function b(t) {
-  for (let n in p)
-    this[n] = p[n];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const S = /* @__PURE__ */ function() {
-  return w.exports;
+const Sign = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  S as default
+  Sign as default
 };

package/dist/components/sign/style.css

@@ -1 +1,6 @@
-.avue-sign{padding:5px}.avue-sign__canvas{border:1px solid #ccc}
+.avue-sign {
+  padding: 5px;
+}
+.avue-sign__canvas {
+  border: 1px solid #ccc;
+}

package/dist/components/sign-panel/index.js

@@ -1,123 +1,123 @@
-import { n } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var o = function() {
-  var t = this, e = t.$createElement, i = t._self._c || e;
-  return i("div", {
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "sign-panel flex-column"
-  }, [i("div", {
+  }, [_c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: !t.disabled && t.edit,
+      value: !_vm.disabled && _vm.edit,
       expression: "!disabled && edit"
     }],
     staticClass: "sign-edit"
-  }, [i("div", {
+  }, [_c("div", {
     staticClass: "sign-draw-area",
     style: {
-      width: `${t.width + 2}px`,
-      height: `${t.height + 2}px`
+      width: `${_vm.width + 2}px`,
+      height: `${_vm.height + 2}px`
     }
-  }, [i("div", {
+  }, [_c("div", {
     staticClass: "sign-watermark",
     style: {
-      fontSize: `${t.fontSize}px`
+      fontSize: `${_vm.fontSize}px`
     }
-  }, [t._v(" " + t._s(t.text) + " ")]), i("canvas", {
+  }, [_vm._v(" " + _vm._s(_vm.text) + " ")]), _c("canvas", {
     ref: "canvas",
     staticClass: "sign-canvas",
     attrs: {
-      width: t.width,
-      height: t.height
+      width: _vm.width,
+      height: _vm.height
     },
     on: {
-      touchstart: function(s) {
-        return s.stopPropagation(), t.touchstart.apply(null, arguments);
+      touchstart: function($event) {
+        return $event.stopPropagation(), _vm.touchstart.apply(null, arguments);
       },
-      touchmove: function(s) {
-        return s.stopPropagation(), t.touchmove.apply(null, arguments);
+      touchmove: function($event) {
+        return $event.stopPropagation(), _vm.touchmove.apply(null, arguments);
       },
-      mousedown: function(s) {
-        return s.stopPropagation(), t.down.apply(null, arguments);
+      mousedown: function($event) {
+        return $event.stopPropagation(), _vm.down.apply(null, arguments);
       },
-      touchend: function(s) {
-        return s.stopPropagation(), t.touchend.apply(null, arguments);
+      touchend: function($event) {
+        return $event.stopPropagation(), _vm.touchend.apply(null, arguments);
       },
-      mouseup: function(s) {
-        return s.stopPropagation(), t.up.apply(null, arguments);
+      mouseup: function($event) {
+        return $event.stopPropagation(), _vm.up.apply(null, arguments);
       }
     }
-  }, [t._v("当前浏览器不支持手写签名 ")])]), i("div", {
+  }, [_vm._v("当前浏览器不支持手写签名 ")])]), _c("div", {
     staticClass: "sign-tool-bar"
-  }, [i("div", {
+  }, [_c("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
       color: "red"
     },
     on: {
-      click: t.clear
+      click: _vm.clear
     }
-  }, [i("i", {
+  }, [_c("i", {
     staticClass: "fa fa-trash"
-  }), t._v(" 清除 ")]), i("div", {
+  }), _vm._v(" 清除 ")]), _c("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
       color: "red"
     },
     on: {
-      click: t.cancel
+      click: _vm.cancel
     }
-  }, [i("i", {
+  }, [_c("i", {
     staticClass: "fa fa-close"
-  }), t._v(" 取消 ")]), i("div", {
+  }), _vm._v(" 取消 ")]), _c("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
       color: "orange"
     },
     on: {
-      click: t.rollback
+      click: _vm.rollback
     }
-  }, [i("i", {
+  }, [_c("i", {
     staticClass: "fa fa-repeat"
-  }), t._v(" 撤销 ")]), i("div", {
+  }), _vm._v(" 撤销 ")]), _c("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
       color: "green"
     },
     on: {
-      click: t.save
+      click: _vm.save
     }
-  }, [i("i", {
+  }, [_c("i", {
     staticClass: "fa fa-check"
-  }), t._v(" 确定 ")])])]), i("div", {
+  }), _vm._v(" 确定 ")])])]), _c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: t.disabled || !t.edit,
+      value: _vm.disabled || !_vm.edit,
       expression: "disabled || !edit"
     }],
     staticClass: "sign-view",
     style: {
-      cursor: t.disabled ? "not-allowed" : "pointer"
+      cursor: _vm.disabled ? "not-allowed" : "pointer"
     },
     on: {
-      click: t.showSign
+      click: _vm.showSign
     }
-  }, [t.value ? i("img", {
+  }, [_vm.value ? _c("img", {
     staticClass: "sign-image",
     attrs: {
-      src: t.value,
+      src: _vm.value,
       alt: "签名"
     }
-  }) : t._e(), t.value ? t._e() : i("p", {
+  }) : _vm._e(), _vm.value ? _vm._e() : _c("p", {
     staticClass: "sign-tips",
     style: {
-      color: !t.value && t.disabled ? "red" : ""
+      color: !_vm.value && _vm.disabled ? "red" : ""
     }
-  }, [t._v(" " + t._s(t.disabled ? "未签名" : "点击进行签名") + " ")]), t.disabled ? t._e() : i("i", {
+  }, [_vm._v(" " + _vm._s(_vm.disabled ? "未签名" : "点击进行签名") + " ")]), _vm.disabled ? _vm._e() : _c("i", {
     staticClass: "el-icon-edit-outline sign-edit-icon"
   })])]);
-}, l = [];
-const c = {
+}, staticRenderFns = [];
+const __vue2_script = {
   name: "SignPanel",
   props: {
     width: {
@@ -164,15 +164,15 @@ const c = {
     },
     rollback() {
       if (this.stack.length > 0) {
-        const t = this.stack[this.stack.length - 1];
-        this.ctx.putImageData(t, 0, 0), this.stack.length = this.stack.length - 1;
+        const restorePoint = this.stack[this.stack.length - 1];
+        this.ctx.putImageData(restorePoint, 0, 0), this.stack.length = this.stack.length - 1;
       }
     },
     // 位置初始化
     position() {
       this.restorePoint = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
-      const t = this.canvas.getBoundingClientRect();
-      this.start = t.left, this.end = t.top;
+      const rect = this.canvas.getBoundingClientRect();
+      this.start = rect.left, this.end = rect.top;
     },
     // 画布初始化
     canvasInit() {
@@ -185,32 +185,32 @@ const c = {
       this.ctx.font = `${this.fontSize}px bold 黑体`, this.ctx.fillStyle = "#eee", this.ctx.textAlign = "center", this.ctx.shadowBlur = 1, this.ctx.textBaseline = "middle", this.ctx.fillText(this.text, this.width / 2, this.height / 2);
     },
     // PC 端鼠标按下开始绘画
-    down(t) {
-      this.position(), this.startLine(t.clientX, t.clientY, t), this.target = t.target, this.target.addEventListener("mousemove", this.move), window.addEventListener("mouseup", this.up);
+    down(e) {
+      this.position(), this.startLine(e.clientX, e.clientY, e), this.target = e.target, this.target.addEventListener("mousemove", this.move), window.addEventListener("mouseup", this.up);
     },
     // PC 端鼠标按下开始绘画后，跟踪移动轨迹
-    move(t) {
-      this.moveLine(t.clientX, t.clientY, t);
+    move(e) {
+      this.moveLine(e.clientX, e.clientY, e);
     },
     // PC 端鼠标松开结束绘画
     up() {
       this.target && this.target.removeEventListener("mousemove", this.move), window.removeEventListener("mouseup", this.up), this.record();
     },
     // 移动端触摸开始绘画
-    touchstart(t) {
-      this.position(), this.startLine(t.changedTouches[0].clientX, t.changedTouches[0].clientY, t);
+    touchstart(e) {
+      this.position(), this.startLine(e.changedTouches[0].clientX, e.changedTouches[0].clientY, e);
     },
     // 移动端触摸开始绘画后，跟踪滑动轨迹
-    touchmove(t) {
-      this.moveLine(t.touches[0].clientX, t.touches[0].clientY, t);
+    touchmove(e) {
+      this.moveLine(e.touches[0].clientX, e.touches[0].clientY, e);
     },
     // 开始绘画
-    startLine(t, e) {
-      this.ctx.beginPath(), t -= this.start, e -= this.end, this.ctx.moveTo(t, e);
+    startLine(x, y) {
+      this.ctx.beginPath(), x -= this.start, y -= this.end, this.ctx.moveTo(x, y);
     },
     // 绘制移动轨迹
-    moveLine(t, e, i) {
-      i && i.preventDefault(), t -= this.start, e -= this.end, this.ctx.lineTo(t, e), this.ctx.stroke();
+    moveLine(x, y, event) {
+      event && event.preventDefault(), x -= this.start, y -= this.end, this.ctx.lineTo(x, y), this.ctx.stroke();
     },
     clear() {
       this.ctx.clearRect(0, 0, this.width, this.height);
@@ -225,31 +225,31 @@ const c = {
       this.stack.push(this.restorePoint);
     },
     save() {
-      const t = this.canvas.toDataURL("image/png");
-      this.blank === t ? this.$emit("input", "") : this.$emit("input", t), this.edit = !1, this.stack.length = 0, this.ctx.clearRect(0, 0, this.width, this.height);
+      const dataURL = this.canvas.toDataURL("image/png");
+      this.blank === dataURL ? this.$emit("input", "") : this.$emit("input", dataURL), this.edit = !1, this.stack.length = 0, this.ctx.clearRect(0, 0, this.width, this.height);
     },
     showSign() {
       this.disabled || (this.edit = !0);
     }
   }
-}, a = {};
-var h = /* @__PURE__ */ n(
-  c,
-  o,
-  l,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  r,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function r(t) {
-  for (let e in a)
-    this[e] = a[e];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const u = /* @__PURE__ */ function() {
-  return h.exports;
+const SignPanel = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  u as default
+  SignPanel as default
 };

package/dist/components/sign-panel/style.css

@@ -1 +1,91 @@
-.sign-panel{align-items:flex-start;justify-content:center;width:100%;background:#fff;user-select:none}.sign-panel .sign-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;max-width:100%;height:100%;background:rgba(255,255,155,0);border:1px solid #ccc}.sign-panel .sign-tool-bar{display:flex;width:100%;border:1px solid #ccc;border-top:none}.sign-panel .sign-tips{user-select:none;pointer-events:none}.sign-panel .sign-button{padding:6px;line-height:1.6;text-align:center;background-color:#ebeef5;cursor:pointer;user-select:none}.sign-panel .sign-button:hover{color:#1989fa;background-color:#d0d4de}.sign-panel .sign-button:nth-child(n){border-right:1px solid #ccc}.sign-panel .sign-button:last-child{border:none!important}.sign-panel .sign-watermark{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#eee}.sign-panel .sign-view{position:relative;display:flex;align-items:center;justify-content:center;min-width:212px;height:80px;background-color:#fff;border:1px solid #eee}.sign-panel .sign-edit-icon{position:absolute;right:4px;bottom:4px}.sign-panel .sign-image{display:inline-block;min-width:160px;height:80px}.sign-panel .sign-edit{display:flex;flex-direction:column;align-items:center;max-width:100%;background-color:#fff}.sign-panel .sign-draw-area{position:relative;max-width:100%}
+.sign-panel {
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  background: #fff;
+  user-select: none;
+}
+.sign-panel .sign-canvas {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 155, 0);
+  border: 1px solid #ccc;
+}
+.sign-panel .sign-tool-bar {
+  display: flex;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-top: none;
+}
+.sign-panel .sign-tips {
+  user-select: none;
+  pointer-events: none;
+}
+.sign-panel .sign-button {
+  padding: 6px;
+  line-height: 1.6;
+  text-align: center;
+  background-color: #ebeef5;
+  cursor: pointer;
+  user-select: none;
+}
+.sign-panel .sign-button:hover {
+  color: #1989fa;
+  background-color: #d0d4de;
+}
+.sign-panel .sign-button:nth-child(n) {
+  border-right: 1px solid #ccc;
+}
+.sign-panel .sign-button:last-child {
+  border: none !important;
+}
+.sign-panel .sign-watermark {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #eee;
+}
+.sign-panel .sign-view {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 212px;
+  height: 80px;
+  background-color: #fff;
+  border: 1px solid #eee;
+}
+.sign-panel .sign-edit-icon {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+}
+.sign-panel .sign-image {
+  display: inline-block;
+  min-width: 160px;
+  height: 80px;
+}
+.sign-panel .sign-edit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  background-color: #fff;
+}
+.sign-panel .sign-draw-area {
+  position: relative;
+  max-width: 100%;
+}