reader/pages/childClassify/index.less

.classBox {
  width: 100%;
  height: 100vh;

  .classify {
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 24rpx 0rpx;
    width: 100%;
    background-color: #F2F6FC;
    z-index: 9;
    white-space: nowrap;

    .name {
      text-align: center;
      display: inline-block;
      padding: 0rpx 20rpx;
      margin-right: 40rpx;
      color: #666666;
      font-weight: bold;
      font-size: 28rpx;
    }

    .currentClass {
      font-size: 32rpx;
      color: #333;
    }
  }

  .searchBox {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 4rpx 20rpx;
    box-sizing: border-box;
    z-index: 9;

    .input {
      background-color: white;
      border-radius: 50rpx;
      padding: 10rpx 30rpx;
      padding-right: 140rpx;
    }

    .searchBtn {
      position: absolute;
      right: 40rpx;
      top: 13rpx;
      padding: 4rpx 40rpx;
      background: #F2F6FC;
      border-radius: 40rpx;

      .img {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .worksList {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding: 20rpx;
    padding-top: 90rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

    .worksBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28rpx 20rpx;
      box-sizing: border-box;
      background-color: white;
      border-radius: 20rpx;
      margin-bottom: 20rpx;

      .left {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .cover {
          width: 144rpx;
          height: 80rpx;
          border-radius: 8rpx;
        }

        .audioCover {
          position: relative;
          width: 144rpx;
          height: 80rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8rpx;
          overflow: hidden;
          background-size: cover;
          background-position: center;

          .audioPlayBg {
            width: 70rpx;
            height: 70rpx;
          }

          .audioPlayZhen {
            position: absolute;
            right: 32rpx;
            top: 12rpx;
            width: 16rpx;
            height: 22rpx;
          }

          .cover {
            position: absolute;
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
          }
        }

        .work {
          margin-left: 26rpx;
          .title {
            width: 340rpx;
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }

          .statistics {
            display: flex;
            align-items: center;

            .statistic {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-right: 14rpx;

              .playImg {
                width: 30rpx;
                height: 30rpx;
                margin-right: 6rpx;
              }

              .num {
                font-size: 26rpx;
                color: #666666;
              }
            }
          }
        }
      }

      .goRead {
        padding: 6rpx 32rpx 8rpx;
        color: white;
        font-size: 32rpx;
        background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
        border-radius: 50rpx;
      }
    }
  }
}

.empty {
  margin-top: 300rpx;
}