.picker {
  display: none;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  font-family: PingFang SC, STHeitiSC-Light, Helvetica-Light, arial, sans-serif;
  font-size: 14px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .picker-mask {
    position: absolute;
    z-index: 500;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    background: transparent;
    opacity: 0;

    &.show {
      background: rgba(0, 0, 0, 0.6);
      opacity: 1;
    }
  }

  .picker-panel {
    position: absolute;
    z-index: 600;
    bottom: 0;
    width: 100%;
    height: 243px;
    background: #fff;
    transform: translateY(243px);
    -webkit-transform: translateY(243px);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;

    &.show {
      transform: translateY(0);
      -webkit-transform: translateY(0);
    }

    .picker-choose {
      position: relative;
      height: 50px;
      color: #878787;
      font-size: 14px;

      &:after {
        content: " ";
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 1;
        position: absolute;
        border-bottom: 1px solid #ddd;
      }

      .picker-title {
        line-height: 50px;
        font-size: 19px;
        text-align: center;
        color: #333;
      }

      .cancel {
        position: absolute;
        padding: 10px;
        top: 6px;
      }

      .confirm {
        position: absolute;
        padding: 10px;
        top: 6px;
        right: 0;
        color: #fa8919;
      }

      .cancel {
        left: 0;
      }
    }

    .picker-content {
      position: relative;

      .mask-bottom {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 68px;
        pointer-events: none;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }

      .mask-top {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 68px;
        pointer-events: none;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        top: 0;
        background: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));
        background: -o-linear-gradient(bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));

        &:after {
          display: block;
          position: absolute;
          border-top: 1px solid #ccc;
          left: 0;
          width: 100%;
          content: " ";
        }

        &:before {
          display: block;
          position: absolute;
          border-top: 1px solid #ccc;
          left: 0;
          width: 100%;
          content: " ";
          display: none;
          top: 0;
        }

        &:after {
          display: block;
          bottom: 0;
        }
      }

      .mask-bottom {
        bottom: 0;
        background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0.4)), to(hsla(0, 0%, 100%, 0.8)));
        background: -o-linear-gradient(top, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.8));

        &:after {
          display: block;
          position: absolute;
          border-top: 1px solid #ccc;
          left: 0;
          width: 100%;
          content: " ";
        }

        &:before {
          display: block;
          position: absolute;
          border-top: 1px solid #ccc;
          left: 0;
          width: 100%;
          content: " ";
          display: block;
          top: 0;
        }

        &:after {
          display: none;
          bottom: 0;
        }
      }
    }

    .wheel-wrapper {
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      padding: 0 10px;

      .wheel {
        -ms-flex: 1 1 1e-9px;
        -webkit-box-flex: 1;
        flex: 1;
        flex-basis: 1e-9px;
        width: 1%;
        height: 173px;
        overflow: hidden;
        font-size: 21px;

        .wheel-scroll {
          margin-top: 68px;
          line-height: 36px;

          .wheel-item {
            height: 36px;
            overflow: hidden;
            white-space: nowrap;
            color: #333;
          }
        }
      }
    }
  }

  .picker-footer {
    height: 20px;
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  .border-1px {
    &:after,
    &:before {
      -webkit-transform: scaleY(0.7);
      -webkit-transform-origin: 0 0;
      transform: scaleY(0.7);
    }

    &:after {
      -webkit-transform-origin: left bottom;
    }
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .border-1px {
    &:after,
    &:before {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}