reader/pages/greeting/index.less

.greetingBox {
  width: 100vw;
  min-height: 100vh;
  padding: 26rpx 20rpx;
  background-color: #fcd9927c;
  box-sizing: border-box;

  .template {
    width: 100%;
    padding: 20rpx 31rpx;
    margin-bottom: 40rpx;
    box-sizing: border-box;
    background-color: white;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 24rpx 0 rgba(252, 216, 146, 0.51);

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

      .left {
        .title {
          font-size: 34rpx;
          font-weight: bold;
        }

        .time {
          font-size: 24rpx;
          color: #666;
        }
      }

      .right {
        text-align: center;

        .delete {
          width: 24rpx;
          height: 32rpx;
        }

        .text {
          font-size: 24rpx;
        }
      }
    }

    .body {
      margin: 24rpx 0rpx;
      width: 650rpx;
      height: 520rpx;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #D8D8D8;

      .playBtn {
        width: 84rpx;
        height: 84rpx;
      }
    }

    .footer {

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

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

          .icon {
            width: 38rpx;
            height: 34rpx;
          }

          .num {
            margin-left: 4rpx;
            font-size: 26rpx;
            color: #666;
          }
        }
      }

      .handle {
        display: flex;
        justify-content: space-between;
        justify-content: center;
        margin-top: 28rpx;

        .btn {
          width: 294rpx;
          height: 86rpx;
        }
      }
    }
  }
}