.mediaBox { position: fixed; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; display: flex; justify-content: center; background-color: rgba(0, 0, 0, 0.6); .poster { position: relative; margin-bottom: 120rpx; width: 646rpx; height: 959rpx; .close { position: absolute; width: 60rpx; height: 60rpx; top: -71rpx; right: -26rpx; } .img { width: 100%; height: 100%; border-radius: 20rpx; overflow: hidden; } .qrCode { position: absolute; left: 38rpx; bottom: 32rpx; width: 170rpx; height: 170rpx; } } .btns { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 25rpx 60rpx; padding-bottom: calc(env(safe-area-inset-bottom) + 25rpx); background-color: white; .btn { width: 275rpx; padding: 13rpx 0; text-align: center; font-size: 32rpx; color: #FFFFFF; background: linear-gradient(180deg, #6EC8FF 0%, #31BDFE 100%); box-shadow: 0rpx 6rpx 4rpx 0rpx rgba(0, 0, 0, 0.08); border-radius: 39rpx; } } .canvas { width: 646rpx; height: 959rpx; position: absolute; left: -9999rpx; top: -9999rpx; } } /* 转圈动画 */ @keyframes falsh-identifier { 0% { transform: rotate(0deg) scale(0.7); } 50% { transform: rotate(180deg) scale(1); } 100% { transform: rotate(360deg) scale(0.7); } } @keyframes falsh-scale { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }