/* pages/user/completeData/index.wxss */ page{ width: 100%; height: 100vh; } .page-box{ width: 100%; height: 100%; position: relative; } .bg-img-box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .bg-img-box image{ width: 100%; height: 100%; } .mail-box{ width: 687rpx; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .mail-box .mail-img-box{ position: absolute; } .mail-top,.mail-bottom{ z-index: 3; } .mail-top{ z-index: 4; top: 10rpx; /* top: 314rpx; */ } .top-move{ -webkit-animation: topMove 2s ease; animation: topMove 2s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .mail-top image{ width: 687rpx; height: 445rpx; } .mail-center image{ width: 684rpx; height: 648rpx; -webkit-transform: scale(0.99); transform: scale(0.99); } .mail-center{ top: 316rpx; } .mail-bottom image{ width: 687rpx; height: 432rpx; } .mail-bottom{ top: 616rpx; } .btm-move{ -webkit-animation: btmMove 1.5s ease; animation: btmMove 1.5s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes topMove{ 0% { top: 10rpx; opacity: 0.8; } 100% { top: 314rpx; opacity: 1; } } @keyframes topMove{ 0% { top: 10rpx; opacity: 0.8; } 100% { top: 314rpx; opacity: 1; } } @-webkit-keyframes btmMove{ 0% { top: 616rpx; opacity: 0.2; } 100% { top: 532rpx; opacity: 1; } } @keyframes btmMove{ 0% { top: 616rpx; opacity: 0.2; } 100% { top: 532rpx; opacity: 1; } } .tips{ width: 100%; color:#EFDACA; font-size: 40rpx; line-height: 56rpx; position: absolute; top: 1000rpx; text-align: center; } .word-move{ -webkit-animation: wordMove 1s ease; animation: wordMove 1s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes wordMove{ 0%{ left: -100%; } 100%{ left: 0; } } @keyframes wordMove{ 0%{ left: -100%; } 100%{ left: 0; } } .pay-btn{ width: 686rpx; height: 82rpx; position: absolute; top: 1100rpx; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: -webkit-linear-gradient(128deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%); background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%); border-radius: 62rpx; text-align: center; line-height: 82rpx; color: #946F46; } .tip{ width: 100%; text-align: center; color: #EFDACA; font-size: 32rpx; line-height: 44rpx; position: absolute; top: 1200rpx; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }