.mainArea {
  height: 100%;
  width: 100%;

  .pc {
    background: url('../../../assets/img/pcBack.jpeg') center center no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    overflow-x: hidden;

    .m-qrcode {
      position: absolute;
      top: 117px;
      left: calc(50% + 240px);
      width: 160px;
      height: 202px;
      background: #fff;
      box-sizing: border-box;

      .m-desc {
        margin: 0 24px;
        font-size: 12px;
        color: #999999;
        text-align: center;
        font-family: PingFangSC-Regular;
        bottom: 18px;
        position: absolute;
      }

      #qrcode {
        margin: 20px
      }
    }

    .contain {
      // position: absolute;
      position: absolute;
      width: 405px;
      height: 667px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: 0 auto;
      // transform-origin: left top;
    }

    .iphone {
      user-select: none;
      pointer-events: none;
      // position: absolute;
      // top: -46px;
      // left: -15px;
      zoom: 1;
      width: 404px;
      height: 756px;
      background: url('../../../assets/img/iphone.svg') no-repeat 50% 50%;
      background-size: 100% 100%;
      box-shadow: 0 0 32px 3px rgba(89, 91, 95, 0.08);
      border-radius: 41px;

      // .content {
      //   // margin: 46px 0 0 15px;
      //   border: 1px dashed #d1d1d1;
      //   width: 375px;
      //   height: 667px;
      // }
    }

    .edit {
      width: 375px;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      position: relative;
      top: -712px;
      left: 15px;
    }

    .toolbar {
      position: absolute;
      width: 48px;

      .btn-none {
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 48px;
        height: 48px;
        background: #fff;
        color: #8c8c8c;
        font-size: 12px;
        cursor: pointer;
      }

      .zoom-tool .zoom-item {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 48px;
        height: 32px;
        text-align: center;
        cursor: pointer;
        font-size: 32px;
        color: #8c8c8c;
      }

      .zoom-tool .label {
        height: 24px;
        font-size: 14px;
        line-height: 24px;
      }

      .zoom-tool {
        background: #fff;
      }
    }
  }

  .mobile {
    height: 100%;
    width: 100%;
  }
}