.container { position: relative; min-height: 100vh; background-color: #3609B8; overflow: hidden; } .container .headerBg { position: absolute; width: 100%; height: 598rpx; } .container .body { position: relative; z-index: 2; margin: 206rpx auto 36rpx; width: 700rpx; } .container .body .uploadBox { position: relative; width: 100%; height: 790rpx; } .container .body .uploadBox .uploadBg { width: 100%; height: 100%; } .container .body .uploadBox .loading { position: absolute; width: 100%; top: 300rpx; text-align: center; z-index: 3; color: white; } .container .body .uploadBox .loading .loadingImg { width: 110rpx; height: 110rpx; animation: identifier 2.6s infinite linear; } .container .body .uploadBox .loading .tips1 { margin: 42rpx 0rpx 42rpx; font-size: 34rpx; } .container .body .uploadBox .loading .tips2 { font-size: 26rpx; } .container .body .uploadBox .fillImg { position: absolute; width: 660rpx; height: 642rpx; left: 22rpx; top: 118rpx; border-radius: 20rpx; object-fit: cover; } .container .body .uploadBox .imgMask::before { position: absolute; content: ""; width: 660rpx; height: 642rpx; background-color: rgba(0, 0, 0, 0.4); } .container .body .templateBox { margin-top: 30rpx; } .container .body .templateBox .tHeaderBg { width: 700rpx; height: 48rpx; } .container .body .templateBox .templates { position: relative; width: 100%; border-radius: 20rpx; } .container .body .templateBox .templates .tbg { position: absolute; z-index: -1; width: 100%; height: 100%; } .container .body .templateBox .templates .templateScroll { width: 100%; padding: 36rpx 0 6rpx 16rpx; white-space: nowrap; box-sizing: border-box; } .container .body .templateBox .templates .templateScroll .template { margin-right: 10rpx; display: inline-block; } .container .body .templateBox .templates .templateScroll .template .cover { width: 140rpx; height: 140rpx; margin-right: 20rpx; background-color: white; border-radius: 10rpx; } .container .body .templateBox .templates .templateScroll .template .name { margin-top: 12rpx; width: 140rpx; color: white; text-align: center; font-size: 26rpx; } .container .body .templateBox .templates .templateScroll .template .active { border: 4rpx solid #FDD841; box-sizing: border-box; } .container .btns { width: 700rpx; margin: 0 auto 40rpx; display: flex; align-items: center; justify-content: space-between; } .container .btns .btn { width: 285rpx; height: 82rpx; }