page {
  background-color: rgba(246, 248, 249, 1);
}
.page {
  padding-bottom: 120rpx;
  position: relative;
  .search {
    margin: 32rpx 30rpx 0;
    padding: 12rpx 32rpx;
    background: #ffffff;
    border-radius: 38rpx;
    display: flex;
    align-items: center;
    .icon {
      width: 40rpx;
      height: 40rpx;
    }
    .input {
      flex: 1;
      margin-left: 20rpx;
      font-size: 28rpx;
    }
    .placeholder-input {
      color: rgba(173, 172, 178, 1);
    }
    .clear {
      color: #ccc;
    }
  }
  .sticky {
    padding-bottom: 10rpx;
    .tags {
      margin-top: 20rpx;
      padding-top: 28rpx;
      position: relative;
      overflow-y: hidden;
      overflow-x: auto;
      padding-bottom: 8rpx;
      &::-webkit-scrollbar {
        display: none;
      }
      .scroll {
        padding-left: 30rpx;
        display: flex;
        flex-wrap: nowrap;
        .tag {
          margin-right: 16rpx;
          flex-shrink: 0;
          font-size: 28rpx;
          color: rgba(33, 29, 46, 1);
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8rpx;
          padding: 8rpx 24rpx;
          line-height: 1.2;
          &.active {
            position: relative;
            color: #fff;
            background-color: rgba(185, 130, 255, 1);
          }
        }
        .site {
          flex-shrink: 0;
          margin-left: auto;
          position: sticky;
          top: 0;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 164rpx;
          white-space: nowrap;
          font-size: 24rpx;
          color: #484848;
          background-color: #fafafa;
          box-shadow: -12rpx 2rpx 10rpx -12rpx rgba(0, 0, 0, 0.5);
          .icon {
            margin-right: 8rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }
  .info-list {
    margin: 32rpx 40rpx;
    .list-item {
      margin-bottom: 32rpx;
      background: #ffffff;
      border-radius: 24rpx;

      .photo-wrap {
        position: relative;
        .photo {
          border-radius: 24rpx 24rpx 0 0;
          display: block;
          width: 100%;
          height: 330rpx;
        }
        .sign {
          position: absolute;
          right: 24rpx;
          top: 24rpx;
          width: 120rpx;
          height: 42rpx;
          font-size: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 1);
          background: rgba(0, 0, 0, 0.53);
          border-radius: 74rpx 74rpx 74rpx 74rpx;
        }
      }
      .inner {
        padding: 32rpx 34rpx;
        background-color: #fff;
        border-radius: 0 0 24rpx 24rpx;
        .title {
          font-size: 32rpx;
          color: rgba(33, 29, 46, 1);
          font-weight: bold;
          line-height: 48rpx;
        }
        .labels {
          margin-top: 16rpx;
          font-size: 28rpx;
          color: rgba(105, 104, 110, 1);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          .line {
            margin: 0 8rpx;
            vertical-align: baseline;
            display: inline-block;
            width: 1px;
            height: 24rpx;
            background-color: rgba(105, 104, 110, 0.2);
          }
        }
        .footer {
          margin-top: 32rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .people {
            flex-shrink: 0;
            color: rgba(173, 172, 178, 1);
            font-size: 28rpx;
          }
          .btn {
            margin-left: 10rpx;
            flex-shrink: 0;
            padding: 18rpx 36rpx;
            font-size: 28rpx;
            line-height: 1;
            color: #ffffff;
            background: linear-gradient(to right, #c690fd, #d79ffc);
            border-radius: 80rpx;
            min-width: 182rpx;
            box-sizing: border-box;
            text-align: center;
            &.active {
              color: #484848;
              background: #e7e7e7;
            }
            .icon {
              width: 24rpx;
              height: 24rpx;
            }
          }
        }
      }
    }
  }

  .video-list {
    margin: 32rpx 30rpx;
    .list-item {
      margin-bottom: 32rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
      border-radius: 24rpx;
      border: 2rpx solid #ebecee;

      .photo-wrap {
        position: relative;
        .photo {
          border-radius: 24rpx 24rpx 0 0;
          display: block;
          width: 100%;
          height: 388rpx;
        }
        .status {
          padding: 6rpx 32rpx;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          background: linear-gradient(90deg, #e5e9f5 0%, #fde4ec 100%);
          border-radius: 24rpx 0rpx 24rpx 0rpx;
          font-size: 28rpx;
          color: var(--name);
          .dot {
            margin-right: 8rpx;
            width: 13rpx;
            height: 13rpx;
            border-radius: 50%;
            background-color: var(--name);
          }
          &.bad {
            color: #484848;
            background: #e6e6e6;
            .dot {
              display: none;
            }
          }
        }
        .date {
          padding: 18rpx 18rpx 8rpx;
          position: absolute;
          left: 40rpx;
          bottom: 0;
          background: var(--name);
          border-radius: 11rpx 11rpx 0rpx 0rpx;
          text-align: center;
          .d-title {
            font-size: 22rpx;
            color: #ffffff;
            font-weight: bold;
          }
          .ymd {
            font-size: 18rpx;
            color: #fff;
            line-height: 28rpx;
            border-bottom: 2rpx solid rgba(255, 255, 255, 0.34);
          }
          .hm {
            font-size: 18rpx;
            color: #fff;
            line-height: 28rpx;
          }
        }
        .money {
          padding: 0 16rpx 0 0;
          position: absolute;
          right: 16rpx;
          bottom: 16rpx;
          background-color: #ffedca;
          font-size: 24rpx;
          color: #f5ad1d;
          line-height: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 36rpx;
          .icon {
            margin-right: 5rpx;
            width: 38rpx;
            height: 36rpx;
          }
        }
      }
      .inner {
        padding: 32rpx 34rpx;
        background-color: #fff;
        border-radius: 0 0 24rpx 24rpx;
        .title {
          font-size: 32rpx;
          color: #252525;
          font-weight: bold;
        }
        .content {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .labels {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .label {
              margin-right: 16rpx;
              padding: 2rpx 20rpx;
              font-size: 22rpx;
              color: var(--name);
              border-radius: 18rpx;
              background-color: var(--tag-bg);
              word-break: break-all;
            }
          }
          .people {
            color: #9e9e9e;
            flex-shrink: 0;
            font-size: 22rpx;
          }
        }
        .footer {
          margin-top: 32rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .site {
            font-size: 22rpx;
            color: #bebebe;
          }
          .btn {
            margin-left: 10rpx;
            flex-shrink: 0;
            padding: 4rpx 36rpx;
            font-size: 28rpx;
            color: #ffffff;
            background: var(--name);
            border-radius: 24rpx;
            &.active {
              color: #484848;
              background-color: #e7e7e7;
            }
          }
        }
      }
    }
  }

  .empty {
    display: block;
    margin: 260rpx auto 0;
    text-align: center;
    .icon {
      margin: 0 auto;
      display: block;
      width: 458rpx;
      height: 210rpx;
    }
    .title {
      font-size: 32rpx;
      color: #69686e;
    }
  }
}