.components.ShareModal {
  width: 100%;
  position: fixed;
  left: -100%;
  top: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  &.show {
    left: 0;
    >view {
      bottom: 0;
    }
  }
  >view {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -500px;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding-bottom: 40px;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    >text {
      display: block;
      font-size: 34px;
      font-weight: bold;
      line-height: 36px;
      margin-top: 36px;
      text-indent: 30px;
    }
    >view {
      padding: 0 30px;
      position: relative;
      overflow: hidden;
      margin-top: 40px;
      >view {
        text-align: center;
        font-size: 0;
        white-space: nowrap;
        >view {
          display: inline-block;
          vertical-align: middle;
          margin-left: 100px;
          &:first-child {
            margin-left: 0;
            >text {
              &:first-child {
                color: #45c895;
              }
            }
          }
          >text {
            display: block;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            line-height: 32px;
            margin-top: 20px;
            &:first-child {
              margin-top: 0;
              font-size: 68px;
              font-weight: normal;
              color: #0abc64;
              line-height: 1;
            }
          }
        }
      }
      >text {
        display: block;
        box-sizing: border-box;
        font-size: 32px;
        color: #193C83;
        line-height: 92px;
        border: 2px solid #193C83;
        border-radius: 92px;
        text-align: center;
        margin-top: 40px;
        font-weight: bold;
      }
    }
  }
}
