.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 { position: relative; 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; } .progressBox { position: absolute; bottom: 0px; left: 0px; padding: 12rpx 40rpx; box-sizing: border-box; width: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2; display: flex; align-items: center; color: white; font-size: 24rpx; .progress { flex: 1; margin: 0px 30rpx; border-radius: 25rpx; overflow: hidden; } } } .footer { .countBox { display: flex; align-items: center; justify-content: space-between; .box { display: flex; align-items: center; .icon { width: 34rpx; height: 34rpx; } .num { margin-left: 4rpx; font-size: 28rpx; color: #666; } } } .handle { display: flex; justify-content: space-between; justify-content: center; margin-top: 28rpx; .btn { width: 294rpx; height: 86rpx; } } } } .footerBox { width: 100%; position: fixed; left: 0px; bottom: 0px; padding: 20rpx 0rpx; text-align: center; background-color: white; image { width: 535rpx; height: 88rpx; } } }