reader/pages/reading/index.less

.readingBox {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: white;

  .poster {
    top: 0px;
    left: 0px;
    position: absolute;
    width: 100%;
    height: 422rpx;
    z-index: 10;
    pointer-events: auto;
  }

  .watermark {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 422rpx;
    z-index: 10;
    pointer-events: none;
  }

  #myVideo {
    width: 100%;
    height: 422rpx;
    pointer-events: auto;

  }

  .audio {
    position: relative;
    width: 100%;
    height: 422rpx;

    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .audioBg {
      width: 100%;
      height: 100%;
      filter: blur(12px);
    }

    .audioPlay {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      border-radius: 20rpx;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;

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

      .audioPlayZhen {
        position: absolute;
        right: 270rpx;
        top: 118rpx;
        width: 42rpx;
        height: 50rpx;
      }

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

      .circle {
        animation: identifier 12s infinite linear;
      }
    }
  }

  .contentBox {
    flex: 1;
    width: 100%;
    overflow: hidden;
    position: relative;

    .articleMask {
      position: absolute;
      top: 0rpx;
      width: 100%;
      height: 50rpx;
      z-index: 10;
      background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.4))
    }

    .content {
      width: 100%;
      height: 100%;
      padding: 0rpx 30rpx;
      padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
      text-align: center;
      box-sizing: border-box;

      .row {
        min-height: 60rpx;
        padding: 18rpx 0rpx;
        font-size: 40rpx;
      }

      .currentRow {
        font-weight: bold;
        color: #019e45;
      }

      .article {
        height: 2000rpx;
        background-color: red;
      }
    }
  }

  .controller {
    width: 100%;
    height: 110rpx;
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
    background-color: white;
    z-index: 10;

    .readingNow {
      position: absolute;
      top: -62rpx;
      border-radius: 50%;
      width: 114rpx;
      height: 114rpx;
      padding: 26rpx;
      box-sizing: border-box;
      box-shadow: #4EC4FF 0px 0rpx 14rpx;
      background-color: #4EC4FF;
    }

    .playImg {
      position: absolute;
      top: -62rpx;
      border-radius: 50%;
      width: 114rpx;
      height: 114rpx;
      box-shadow: #4EC4FF 0px 0rpx 14rpx;
      background-color: #4EC4FF;
    }

    .text {
      position: absolute;
      top: 60rpx;
      font-size: 28rpx;
    }

    .btnPosition {
      position: absolute;
      right: 30rpx;
      top: 20rpx;
    }
  }

  .playImgBg {
    position: absolute;
    width: 134rpx;
    height: 124rpx;
    z-index: 1;
    left: -1rpx;
    right: 0px;
    margin: auto;
    bottom: calc(56rpx + env(safe-area-inset-bottom));
    background-color: white;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2rpx 4rpx 0px, rgba(14, 30, 37, 0.32) 0px 2rpx 16rpx 0px;
    border-radius: 50%;
  }

  .countDownBox {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    z-index: 999;

    .countDown {
      position: absolute;
      left: 0rpx;
      right: 0rpx;
      top: 30%;
      margin: auto;
      width: 293rpx;
      height: 293rpx;
      border-radius: 30rpx;
      color: white;
      background-color: rgba(0, 0, 0, 0.8);
      text-align: center;
      padding: 30rpx 0rpx;
      box-sizing: border-box;

      .number {
        font-size: 124rpx;
        margin-bottom: 6rpx;
      }
    }
  }


  .uploadBox {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    z-index: 999;

    .upload {
      position: absolute;
      left: 0rpx;
      right: 0rpx;
      top: 30%;
      margin: auto;
      width: 293rpx;
      height: 293rpx;
      border-radius: 30rpx;
      color: white;
      background-color: rgba(0, 0, 0, 0.8);
      text-align: center;
      padding: 0rpx 38rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      z-index: 998;

      .speed {
        margin-top: 70rpx;
      }

      .speedProgress {
        border-radius: 50rpx;
        overflow: hidden;
        margin: 18rpx 0rpx 60rpx;
      }
    }
  }
}

.scoreBoxC {
  flex: 1;
  width: 100%;
  overflow: auto;
  position: relative;
  padding-bottom: calc(170rpx + env(safe-area-inset-bottom));

  .scoreBox {
    width: 610rpx;
    margin: 80rpx auto 0rpx;

    .lightBox {
      position: relative;
      height: 180rpx;

      .light {
        position: absolute;
        width: 360rpx;
        height: 180rpx;
        left: 0px;
        right: 0px;
        margin: auto;
      }

      .stars {
        position: absolute;
        width: 62rpx;
        height: 62rpx;
      }

      .stars-1 {
        top: 64rpx;
        left: 132rpx;
      }

      .stars-2 {
        top: 25rpx;
        left: 198rpx;
      }

      .stars-3 {
        top: 6rpx;
        left: 276rpx;
      }

      .stars-4 {
        top: 25rpx;
        right: 198rpx;
      }

      .stars-5 {
        top: 62rpx;
        right: 132rpx;
      }
    }

    .score {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      padding: 70rpx 40rpx 32rpx;
      border-radius: 18rpx;
      background-color: white;
      box-shadow: rgba(255, 255, 255, 0.15) 0px 6px 12px -2px, rgba(255, 255, 255, 0.1) 0px 3px 7px -3px;

      .avatarBox {
        position: absolute;
        top: -72rpx;
        left: 0px;
        right: 0px;
        margin: 0 auto;
        width: 100rpx;
        height: 100rpx;
        padding: 16rpx;
        border-radius: 50%;
        background-color: white;
        font-size: 0px;

        .avatar {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .nickName {
        font-size: 36rpx;
        text-align: center;
      }

      .totalScore {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 26rpx;
        font-size: 42rpx;

        .num {
          color: #58C5FF;
          font-size: 42rpx;
        }
      }

      .progressBox {
        margin-top: 50rpx;

        .row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 42rpx;

          .name {
            font-size: 32rpx;
            width: 96rpx;
          }

          .progress {
            width: 306rpx;
            border-radius: 20rpx;
            overflow: hidden;
          }

          .scoreInfo {
            font-size: 27rpx;
            color: #666666;
          }
        }
      }
    }
  }

}