Vue 电子签名 UI库ele-ui 画笔颜色可选择

.signatureBox {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  box-sizing: border-box;

  overflow: hidden;

  background: #fff;

  z-index: 100;

  display: flex;

  flex-direction: column;

}

.sing-title {

  font-size: 20px;

  text-align: center;

}

.visaDetailTop {

  /*position: absolute;*/

  /*top: 0px;*/

  /*left: 0px;*/

  width: 100%;

  /*overflow: hidden;*/

  padding: 5px;

  box-sizing: border-box;

  z-index: 2;

  border-bottom: 1px solid #e5e5e5;

}

.visaDetailTop p {

  margin: 0px;

  text-align: center;

  color: #000;

  font-size: 1em;

  position: relative;

}

p.visaTitle {

  width: 100%;

  position: absolute;

  top: 5px;

  left: 0px;

  text-align: center;

  font-size: 1.2em;

}

.btnBack {

  display: block;

  position: absolute;

  top: 0px;

  left: 0px;

  width: 100%;

  height: 100%;

  z-index: 1;

  background: transparent;

  border-color: transparent;

  outline: none;

}

.btnDaoHang {

  display: block;

  position: absolute;

  left: 0px;

  top: 0px;

  height: 2.2em;

  width: 2em;

  z-index: 1;

  background: transparent;

  border-color: transparent;

  outline: none;

}

.visaDetailTop p span {

  color: #fff;

  font-size: 1.2em;

}

.visaDetailTop p:first-of-type {

  float: left;

}

.visaDetailTop p:nth-of-type(2) {

  float: right;

}

.canvasBox {

  padding: 0px 5px;

  box-sizing: border-box;

  flex: 1;

}

canvas {

  border: 1px solid #409eff;

}

.btnBox {

  padding: 5px;

  text-align: right;

  line-height: 30px;

  padding-bottom: 20px;

}

.btnBox button:first-of-type {

  border: 1px solid #409eff;

  background: transparent;

  border-radius: 4px;

  padding: 10px 10px;

}

.btnBox button:last-of-type {

  border: 1px solid #409eff;

  background: #409eff;

  color: #fff;

  border-radius: 4px;

  padding: 10px 10px;

}

@media only screen and (min-width: 750px) {

  .signatureBox {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    min-height: 100%;

    box-sizing: border-box;

    overflow: visible;

  }

}