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

.scroll-body {
  flex: 1;
  height: 0;
}

.cat-scroll {
  background: #fff;
  white-space: nowrap;
}

.cat-row {
  display: inline-flex;
  padding: 20rpx 24rpx;
}

.cat-item {
  flex-shrink: 0;
  padding: 0 32rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #3C3C43;
  background: #F2F2F7;
  margin-right: 16rpx;
}

.cat-item.active {
  background: #007AFF;
  color: #fff;
}

.stat {
  padding: 8rpx 32rpx 0;
  font-size: 22rpx;
  color: #8E8E93;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  padding: 24rpx;
  gap: 24rpx;
}

.grid-item {
  width: calc(50% - 12rpx);
  box-sizing: border-box;
}

.sk-card {
  height: 320rpx;
  border-radius: 32rpx;
}

.sk-line {
  height: 40rpx;
  margin-top: 16rpx;
  border-radius: 12rpx;
}

.no-more {
  text-align: center;
  font-size: 24rpx;
  color: #C7C7CC;
  padding: 24rpx 0 40rpx;
}