xinda-miniprogram/src/components/timeOut/index.scss

.movearea {
  position: fixed;
  right: 0;
  top: 100rpx;
  height: calc(100vh - 200rpx);
  width: 0;
  .moveview {
    position: relative;
    width: 0;
    height: 0;
    .move-container {
      perspective: 1000px;
      position: absolute;
      left: -20rpx;
      top: 50%;
      width: 112rpx;
      height: 112rpx;
      transform: translate(-100%, -50%);
      .aside-out {
        width: 100%;
        height: 100%;
        position: relative;
        transition: 1.5s;
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        transform-style: preserve-3d;
        transform-origin: center;
        .front {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .progress {
            width: inherit;
            height: inherit;
            background: conic-gradient(#e04775 var(--progress), #fff 0%);
            border-radius: 50%;
            position: relative;
            box-sizing: border-box;
            box-shadow:
              0rpx 8rpx 18rpx 0rpx rgba(0, 0, 0, 0.12),
              -6rpx 0rpx 18rpx 0rpx rgba(0, 0, 0, 0.09);
            .progress-wrpa {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 92rpx;
              height: 92rpx;
              background-color: #fff;
              border-radius: 50%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              .icon {
                width: 56rpx;
                height: 56rpx;
              }
              .content {
                margin-top: -12rpx;
                width: 68rpx;
                height: 26rpx;
                text-align: center;
                line-height: 26rpx;
                font-size: 20rpx;
                color: #eaeded;
                background: linear-gradient(180deg, #fddd39 0%, #f5ad1d 100%);
                border-radius: 16rpx;
                text-shadow: 0px 0px 6px #ba7000;
              }
            }
          }
        }
        .back {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: darkseagreen;
          transform: rotateY(180deg);
          backface-visibility: hidden;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          border-radius: 50%;
          // border: 7rpx solid #e04775;
          .icon {
            width: 56rpx;
            height: 56rpx;
          }
          .sub-icon {
            position: absolute;
            top: 40rpx;
            right: 16rpx;
            width: 20rpx;
            height: 20rpx;
          }
          .content {
            margin-top: -12rpx;
            width: 80rpx;
            height: 26rpx;
            text-align: center;
            line-height: 26rpx;
            font-size: 16rpx;
            color: #eaeded;
            background: linear-gradient(180deg, #fddd39 0%, #f5ad1d 100%);
            border-radius: 16rpx;
            text-shadow: 0px 0px 6px #ba7000;
          }
        }
        &.perspective {
          transform: rotateY(180deg);
          .front {
            .progress {
              background: conic-gradient(#fff var(--progress), #fff 0%);
            }
          }
        }
      }
    }
  }
}

.toast {
  padding: 50rpx;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.74);
  border-radius: 32rpx;
  max-width: 80vw;
  .icon {
    display: block;
    margin: 0 auto;
    width: 80rpx;
    height: 80rpx;
  }
  .content {
    margin-top: 24rpx;
    text-align: center;
    font-size: 32rpx;
    color: #ffffff;
    .p {
      white-space: nowrap;
    }
    .num {
      color: #f5ad1d;
    }
  }
}