wutian-miniprogram/src/components/customRecord/index.scss

.record {
  border: 10rpx solid #e6f7f9;
  border-radius: 50%;
  &.record-slot {
    border: none;
  }
  .icon {
    width: 107rpx;
    height: 107rpx;
  }
  .record-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .record-line {
      position: relative;
      padding: 32rpx;
      border-radius: 32rpx;
      background-color: rgba(1, 180, 197, 1);
      display: flex;
      align-items: center;
      .wave {
        width: 230rpx;
        height: 68rpx;
      }
      .time {
        margin-left: 26rpx;
        font-size: 28rpx;
        color: rgba(255, 255, 255, 1);
      }
      &::after {
        position: absolute;
        left: calc(50% - 6rpx);
        bottom: -10rpx;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12rpx 12rpx 0 12rpx;
        border-color: rgba(1, 180, 197, 1) transparent transparent transparent;
      }
    }
    .record-page-icon-wrap {
      width: 320rpx;
      height: 320rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .record-page-icon {
      margin-top: 32rpx;
      width: 0;
      height: 0;
      padding: 0;
      // background-color: rgba(255, 255, 255, 0.5);
      // border: 0 solid rgba(255, 255, 255, 0.25);
      background: radial-gradient(circle, rgba(192, 192, 192, 1) 0%, rgba(133, 133, 133, 1) 100%);
      border-radius: 50%;
      transition: all 0.3s;
    }
    &.record-pape-start {
      opacity: 0;
      left: 0;
      top: 100vh;
      transition: all 0.3s;
    }
    &.record-page-active {
      left: 0;
      top: 0;
      opacity: 1;
      background-color: rgba(0, 0, 0, 0.7);
      .record-page-icon {
        width: 200rpx;
        height: 200rpx;
        padding: 56rpx;
        // border: 28rpx solid rgba(255, 255, 255, 0.25);
        border-radius: 50%;
        animation: grow-bp 0.6s ease-in-out infinite;
        @keyframes grow-bp {
          0% {
            padding: 0;
            // border-width: 0;
          }
          // 25% {
          //   padding: 28rpx;
          // }
          50% {
            padding: 56rpx;
            // border-width: 28rpx;
          }
          // 75% {
          //   padding: 28rpx;
          //   border-width: 0;
          // }
          100% {
            padding: 0;
            // border-width: 0;
          }
        }
      }
    }
  }
}