.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;
      margin: 0rpx 40rpx;
      padding-bottom: 4rpx;
      color: #777;
      font-weight: bold;
      font-size: 28rpx;
    }

    .currentClass {
      font-size: 34rpx;
      color: #333;
      border-bottom: 6rpx solid #00C657;
    }
  }

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

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

    .searchBtn {
      position: absolute;
      right: 40rpx;
      top: 12rpx;
      padding: 6rpx 40rpx;
      background: #00C657;
      border-radius: 40rpx;

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

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

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

      .left {
        flex: 1;
        display: flex;
        align-items: center;

        .cover {
          width: 230rpx;
          height: 128rpx;
          border-radius: 8rpx;
        }

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

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

          .audioPlayZhen {
            position: absolute;
            right: 52rpx;
            top: 20rpx;
            width: 24rpx;
            height: 30rpx;
          }

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

        .work {
          margin-left: 16rpx;

          .title {
            width: 270rpx;
            font-size: 34rpx;
            font-weight: bold;
            margin-bottom: 12rpx;
          }

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

            .statistic {
              width: 110rpx;
              display: flex;
              align-items: center;

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

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

      .goRead {
        padding: 6rpx 28rpx 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;
      }
    }
  }

  .historyList {
    padding: 80rpx 30rpx 0rpx;

    .notes {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 0rpx 14rpx;
      border-bottom: 1rpx solid #DDDDDD;

      .left {
        display: flex;
        align-items: center;
        font-size: 28rpx;

        .clock {
          width: 34rpx;
          height: 34rpx;
          margin-right: 16rpx;
        }
      }

      .delete {
        color: #A4A4A5;
        font-size: 50rpx;
        line-height: 40rpx;
        padding: 0rpx 20rpx;
      }
    }

    .clearHistory {
      padding: 20rpx 0rpx;
      text-align: center;
      font-size: 28rpx;
    }
  }
}

.empty {
  margin-top: 300rpx;
}