/**index.wxss**/
@import "/style/theme.less";
@import "/style/form.less";

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scrollarea {
  flex: 1;
  overflow-y: hidden;
  padding: 32rpx 30rpx;

  .container {
    background-color: white;
    box-shadow: 0rpx 1rpx 7rpx -1rpx rgba(55, 139, 152, 0.15);
    border-radius: 24rpx;

    &.pad {
      padding: 68rpx 56rpx;
    }

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
    .img-require {
      width: 10rpx;
      height: 11rpx;
    }

    .pill {
      flex: 0 0 25%;
      text-align: center;

      &-img {
        width: 112rpx;
        height: 112rpx;
        margin: 0 auto;
      }

      &-txt {
        margin-top: 12rpx;
      }
    }

    .cell-icon {
      width: 44rpx;
      height: 44rpx;
    }
  }
}
.btn-contaier {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  padding-bottom: env(safe-area-inset-bottom, 28rpx);
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0rpx -0.5rpx 0rpx 0rpx rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(40rpx);

  .btn {
    height: 88rpx;
    border-radius: 8rpx;

    &.gradient {
      background: linear-gradient(145.75deg, rgba(62, 214, 227, 1) 0%, rgba(39, 169, 189, 1) 100%);
    }
  }
}

.popup {
  &-title {
    padding: 32rpx;
    &-btn {
      font-size: 32rpx;
      &.confirm {
        color: @mainColor;
      }
    }
  }
  &-search {
    padding: 0 32rpx;
    padding-bottom: 16rpx;
  }
  &-filter {
    padding-bottom: env(safe-area-inset-bottom, 28rpx);
    &-item {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &-avatar {
        width: 60rpx;
        height: 60rpx;

        &-img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}