.pkResult { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; .body { position: relative; width: 600rpx; height: 674rpx; .userBox { position: absolute; bottom: 0; padding-top: 140rpx; box-sizing: border-box; width: 300rpx; height: 514rpx; text-align: center; color: white; .avatar { width: 110rpx; height: 110rpx; background-color: white; border-radius: 50%; } .bodyTitle { margin: 12rpx 0 4rpx; font-size: 27rpx; } .bodyScore { font-size: 38rpx; font-weight: 600; letter-spacing: 3rpx; } .duration { margin-top: 30rpx; box-sizing: border-box; .bodyPlay { left: 26rpx; width: 70rpx; height: 70rpx; } .time { padding-bottom: 20rpx; display: flex; align-items: center; font-size: 28rpx; font-weight: 500; } } } .left { left: 0; .duration { padding-left: 20rpx; text-align: left; } } .right { right: 0; padding-left: 70rpx; .duration { padding-right: 20rpx; text-align: right; .time { justify-content: flex-end; } } } .celebrate { position: absolute; left:20rpx; top: -160rpx; width: 600rpx; height: 600rpx; } } .body-win { background: url('https://reader-wx.ai160.com/images/reader/v3/win.png') no-repeat; background-size: 100% 100%; } .body-lose { background: url('https://reader-wx.ai160.com/images/reader/v3/lose.png') no-repeat; background-size: 100% 100%; } .body-equal { background: url('https://reader-wx.ai160.com/images/reader/v3/equal.png') no-repeat; background-size: 100% 100%; } .footer { width: 600rpx; margin-top: 96rpx; margin-bottom: 10%; display: flex; justify-content: center; align-items: center; .stBtn { position: relative; width: 267rpx; height: 70rpx; line-height: 70rpx; border-radius: 40rpx; .imgBtn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .text { position: absolute; width: 100%; text-align: center; z-index: 2; font-size: 26rpx; font-weight: 500; color: #FFFFFF; letter-spacing: 2rpx; } } } } /* #share { left: 0; top: 0; } */