psvt-miniprogram/src/pages/videoList/index.scss

page {
  background-color: #f7fafc;
}

.page-title {
  font-size: 36rpx;
  color: rgba(51, 51, 51, 1);
  padding-right: 100rpx;
}

.page {
  padding-bottom: 230rpx;
  .page-header {
    margin: 42rpx 30rpx 0;
    .search {
      display: flex;
      align-items: center;
      gap: 16rpx;
      background-color: #fff;
      border-radius: 180rpx;
      padding: 0 32rpx;
      .icon {
        width: 40rpx;
        height: 40rpx;
      }
      .input {
        flex: 1;
        padding: 18rpx 0;
        line-height: 40rpx;
        font-size: 28rpx;
        color: rgba(30, 41, 59, 1);
      }
      .place-input {
        color: rgba(148, 163, 184, 1);
      }
    }
  }
  .banner {
    margin: 32rpx 30rpx 0;
    height: 246rpx;
    .b-img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 32rpx;
    }
  }
  .type-navbar {
    padding: 32rpx 0 24rpx 30rpx;
    display: flex;
    flex-wrap: nowrap;
    gap: 12rpx;
    overflow-x: auto;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    .type {
      flex-shrink: 0;
      padding: 12rpx 32rpx;
      font-size: 28rpx;
      color: rgba(71, 85, 105, 1);
      background-color: #fff;
      border: 1px solid rgba(241, 245, 249, 1);
      border-radius: 80rpx;
      line-height: 40rpx;
      &.active {
        color: #fff;
        background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%);
      }
    }
  }
  .list {
    padding: 0 30rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48rpx 30rpx;
    .card-wrap {
      position: relative;
      .hot {
        position: absolute;
        top: -10rpx;
        left: 24rpx;
        width: 104rpx;
        height: 48rpx;
        z-index: 1;
      }
      .card {
        display: block;
        width: 100%;
        overflow: hidden;
        .photo {
          position: relative;
          width: 100%;
          height: 442rpx;
          border-radius: 32rpx;
          overflow: hidden;
          .p-img {
            display: block;
            width: 100%;
            height: 100%;
          }
          .stat {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0 12rpx;
            height: 104rpx;
            box-sizing: border-box;
            background: linear-gradient(180deg, rgba(2, 2, 2, 0) 0%, rgba(3, 3, 3, 0.11) 20.97%, #090909 100%);
            backdrop-filter: opacity(67%);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8rpx;
            .s-item {
              padding: 48rpx 12rpx 24rpx;
              display: flex;
              align-items: center;
              gap: 8rpx;
              font-size: 28rpx;
              color: rgba(255, 255, 255, 1);
              .icon {
                width: 32rpx;
                height: 32rpx;
              }
              &.active1 {
                color: rgba(234, 88, 26, 1);
              }
            }
          }
        }
        .title {
          margin-top: 24rpx;
          height: 80rpx;
          padding: 0 12rpx;
          color: #2a3544;
          font-size: 28rpx;
          line-height: 40rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}