.main { position: fixed; top: 0; width: 100%; height: 100%; } .absolutely { width: 100%; height: 100%; } .main .logo { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; background: #fff; } .main .logo image { width: 218rpx; border-radius: 0; } .main .middle { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 142rpx); transform: translateX(-50%); } .main .logo_middle { width: 525rpx; height: 64rpx; margin-bottom: 64rpx; } .main .middle .title { width: 100%; height: 38rpx; font-size: 40rpx; font-weight: 500; color: #ffffff; line-height: 60rpx; text-align: center; z-index: 100; } .main .indicator { position: relative; left: 50%; bottom: calc(44rpx + env(safe-area-inset-bottom)); transform: translate(-50%, -50%); width: 360rpx; height: 1rpx; background: #ccc; } .main .indicator .dot { height: 100%; background: #fff; transition-duration: 0.5s; } .main .bg { position: absolute; top: 0; z-index: -1; width: 100%; height: 100%; } .main .bg .bg_item { display: block; width: 100%; height: 100%; } .body { position: relative; background: #f8f8f8; text-align: center; display: flex; flex-direction: column; align-items: center; } .body .cover { display: inline-block; width: 660rpx; height: 922rpx; border-radius: 50rpx; margin-top: 48rpx; margin-bottom: 7rpx; } .body .bottom { width: 660rpx; height: 474rpx; background: rgba(204, 204, 204, 0.4); border-radius: 50rpx; } .bottom .text { height: 45rpx; font-size: 48rpx; font-weight: 500; color: #000; line-height: 60rpx; margin-top: 80rpx; margin-bottom: 48rpx; } .bottom .txt { height: 27rpx; font-size: 26rpx; font-weight: 500; color: #666; } .bottom .btn { width: 270rpx; height: 90rpx; background: #000000; border-radius: 45rpx; color: #fff; line-height: 90rpx; margin: 50rpx auto 0; }