antd-mobile/lib/picker/style/picker.less

基于 React 的移动设计规范实现

.@{pickerColPrefixCls} {
  display: block;
  position: relative;
  height: 7*@picker-item-height;
  overflow: hidden;
  width: 100%;

  &-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    padding: 3*@picker-item-height 0;
  }

  &-item {
    touch-action: manipulation;
    text-align: center;
    font-size: @font-size-caption;
    height: @picker-item-height;
    line-height: @picker-item-height;
    color: @color-text-base;
    white-space: nowrap;
    text-overflow: ellipsis;
    direction: rtl;
    &-selected {
      font-size: @font-size-heading;
    }
  }

  &-mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    z-index: 3;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
    -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
    linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
    background-position: top, bottom;
    background-size: 100% 3*@picker-item-height;
    background-repeat: no-repeat;
  }

  &-indicator {
    width: 100%;
    height: @picker-item-height;
    position: absolute;
    left: 0;
    top: 3*@picker-item-height;
    z-index: 3;
    background-image: -webkit-linear-gradient(top, #d0d0d0, #d0d0d0, transparent, transparent),
    -webkit-linear-gradient(bottom, #d0d0d0, #d0d0d0, transparent, transparent);
    background-image: linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),
    linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);
    background-position: top, bottom;
    background-size: 100% 1px;
    background-repeat: no-repeat;
  }
}