antd-mini/less/Terms/index.less

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

@import (reference) './variable.less';

.ant-terms {
  box-sizing: border-box;
  padding-top: 20 * @rpx;

  .ant-terms-btn-single {
    height: 98 * @rpx;
    padding: 0;
    justify-content: center;
  }

  &-fixed {
    left: 0;
    right: 0;
    bottom: 0;
    background-color: @terms-fixed-background-color;
    position: fixed;
    border-top: 1 * @rpx solid @terms-fixed-border-color;
    z-index: 999;
  }

  .ant-terms-protocol {
    margin: 0 24 * @rpx;
    text-align: left;
    padding-bottom: 24 * @rpx;
    line-height: 37 * @rpx;
    &-item {
      vertical-align: middle;
      font-family: PingFangSC-Regular;
      font-size: 26 * @rpx;
      line-height: 37 * @rpx;
      color: @terms-protocol-item-color;
    }
    &-text {
      vertical-align: middle;
      color: @terms-protocol-text-color;
      font-size: 26 * @rpx;
      line-height: 37 * @rpx;
    }
    .ant-terms-checkbox-tips {
      .ant-popover-content {
        left: -20 * @rpx !important;
      }
    }
    .ant-checkbox-item {
      margin-left: 4 * @rpx;
      margin-right: 8 * @rpx;
      vertical-align: middle;

      .ant-checkbox-item-content {
        padding-left: 0;
        font-size: 0;
      }
      &-wrap {
        width: 32 * @rpx;
        height: 32 * @rpx;
        flex: 0 0 32 * @rpx;
      }
    }
  }
  .ant-terms-read {
    &-shadow {
      width: 100%;
      height: 115 * @rpx;
      margin-top: -115 * @rpx;
      background-image: @terms-read-shadow-background;
      position: relative;
      &-total {
        position: absolute;
        right: 48 * @rpx;
        bottom: 0;
        font-size: 22 * @rpx;
        line-height: 30 * @rpx;
        font-weight: 500;
        color: @terms-read-protocol-item-color;
      }
    }
    &-protocol {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 58 * @rpx;
      border-radius: 8 * @rpx;
      box-sizing: border-box;
      margin: 24 * @rpx 8 * @rpx 24 * @rpx 8 * @rpx;
      border: 1 * @rpx solid @terms-read-protocol-border;
      box-shadow: 0 0 10 * @rpx 0 @terms-read-protocol-box-shadow-color;

      &-item {
        color: @terms-read-protocol-item-color;
        font-size: 22 * @rpx;
        line-height: 30 * @rpx;
        font-weight: 500;
      }
      &-text {
        color: @terms-read-protocol-text-color;
        font-size: 22 * @rpx;
        line-height: 30 * @rpx;
      }
    }
  }

  &-btn {
    margin: 0 24 * @rpx;
    &-item {
      margin-bottom: 24 * @rpx;
      &:last-of-type {
        margin-bottom: 0;
      }
    }

    &-flex {
      display: flex;
      .ant-terms-btn-item {
        margin-bottom: 0;
        flex: 1;
        margin-right: 24 * @rpx;

        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}