/**  index.wxss  **/
@import "../../../config/styles/mp/index.less";
@import "../../../config/styles/mp/mixins.less";

.page-body {
  height: 100vh;
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: @oak-bg-color-page;
  box-sizing: border-box;
  .safe-area-inset-bottom();
}

.user-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 36rpx;
}

.cell {
  display: flex;
  align-items: center;
  padding: 26rpx;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
}

.row {
  display: flex;
  align-items: center;
  min-width: 300rpx;
  justify-content: space-between;
  margin-bottom: 20rpx;

  .primary {
    background-color: @oak-color-primary;
  }

  .success {
    background-color: @oak-color-success;
  }

  .danger {
    background-color: @oak-color-error;
  }
}

.row2 {
  display: flex;
  align-items: center;
  font-size: small;
  .label {
    min-width: 100rpx;
    color: @oak-text-color-primary;
  }
  .value {
    color: @oak-text-color-secondary;
  }
}

.add {
  position: fixed;
  right: 20rpx;
  z-index: 10;
  bottom: constant(safe-area-inset-bottom) !important;
  /* 兼容 iOS < 11.2 */
  bottom: env(safe-area-inset-bottom) !important;
  /* 兼容 iOS >= 11.2 */
}