/* components/uploadFile/index.wxss */
.upload-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(160rpx, 200rpx));
  gap: 18rpx;

  .item {
    height: 180rpx;
    position: relative;
    line-height: 0;
    background-color: rgba(247, 247, 250, 1);
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .item_mask {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .item_mask_icon {
        border-radius: 100%;
        overflow: hidden;
        background: #fff;
        font-size: 0;
      }
    }
    .image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
    .sub-image {
      width: 104rpx;
      height: 104rpx;
    }
    .clear {
      position: absolute;
      right: 0;
      top: 0;
      width: 36rpx;
      height: 36rpx;
      z-index: 9;
    }
  }

  .btn {
    width: 188rpx;
    height: 188rpx;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(247, 247, 250, 1);
    .name {
      margin-top: 12rpx;
      font-size: 28rpx;
      color: rgba(207, 209, 213, 1);
    }
  }
}

.popup {
  padding: 102rpx 48rpx calc(102rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 30rpx;
  justify-content: space-between;
  background-color: rgba(247, 247, 250, 1);
  .item {
    padding: 32rpx;
    flex: 1;
    border-radius: 36rpx;
    background-color: #fff;
    text-align: center;
    .title {
      margin-top: 16rpx;
      font-size: 32rpx;
      color: rgba(1, 1, 5, 1);
    }
    .icon {
      width: 136rpx;
      height: 136rpx;
    }
  }
}