xinda-miniprogram/src/patient/pages/live/index.scss

.page {
  padding-bottom: 120rpx;
  background-color: #fafafa;
  position: relative;
  .tab {
    font-size: 32rpx;
    color: #9e9e9e;
    background-color: #fafafa;
    &.tab-active {
      font-size: 36rpx;
      color: #484848;
    }
  }
  .search {
    margin: 32rpx 30rpx 0;
    padding: 18rpx 32rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 38rpx;
    border: 2rpx solid #ebecee;
    display: flex;
    align-items: center;
    .icon {
      width: 40rpx;
      height: 40rpx;
    }
    .input {
      flex: 1;
      margin-left: 20rpx;
      font-size: 28rpx;
    }
    .placeholder-input {
      color: #a8a8a8;
    }
    .clear {
      color: #ccc;
    }
  }
  .sticky {
    position: sticky;
    top: 0rpx;
    left: 0;
    z-index: 20;
    padding-bottom: 10rpx;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
    background-color: #fafafa;
    .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: #484848;
          background-color: #f2f2f2;
          border-radius: 24rpx;
          padding: 10rpx 24rpx;
          line-height: 1;
          &.active {
            position: relative;
            color: #fff;
            background-color: var(--name);
          }
        }
        .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 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;
            }
          }
        }
        .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;
          }
        }
        .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;
            .icon {
              margin-right: -10rpx;
            }
          }
          .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;
          }
        }
      }
      .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;
              margin-bottom: 16rpx;
              padding: 2rpx 20rpx;
              font-size: 22rpx;
              color: var(--name);
              border-radius: 18rpx;
              background-color: var(--tag-bg);
              word-break: break-all;
            }
          }
          .people {
            flex-shrink: 0;
            color: #9e9e9e;
            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;
            }
            .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;
            }
          }
        }
      }
    }
  }
}