.pkResult { width: 100vw; height: 100vh; background-color: #2B2859; overflow: hidden; } .pkResult .title { margin: 85rpx 0rpx 34rpx; color: white; text-align: center; font-size: 46rpx; } .pkResult .time { font-size: 34rpx; text-align: center; color: white; } .pkResult .body { position: relative; width: 720rpx; height: 640rpx; margin: 60rpx auto; background-image: radial-gradient(50% 102%, #5171BD 1%, #21287A 100%); box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.3), inset 0 -2rpx 3rpx 0 #052552, inset 0 2rpx 3rpx 0; border-radius: 20rpx; text-align: center; } .pkResult .body .left { position: absolute; top: 30rpx; left: 30rpx; height: 500rpx; width: 328rpx; background: url('http://reader-wx.ai160.com/images/reader/v3/victory.png') no-repeat; background-size: 100% 100%; } .pkResult .body .left .avatarL { top: 64rpx; left: 110rpx; } .pkResult .body .equal { top: 70rpx !important; background: url('http://reader-wx.ai160.com/images/reader/v3/pingzuo.png') no-repeat; background-size: 100% 100%; } .pkResult .body .right { position: absolute; top: 70rpx; right: 30rpx; height: 500rpx; width: 328rpx; background: url('http://reader-wx.ai160.com/images/reader/v3/defeated.png') no-repeat; background-size: 100% 100%; } .pkResult .body .right .avatarR { top: 57rpx; left: 107rpx; } .pkResult .body .equalRight { background: url('http://reader-wx.ai160.com/images/reader/v3/pingyou.png') no-repeat; background-size: 100% 100%; } .pkResult .body .avatar { position: absolute; width: 110rpx; height: 110rpx; border-radius: 50%; } .pkResult .body .bodyTitle { font-size: 28rpx; padding: 0rpx 30rpx; box-sizing: border-box; margin-top: 190rpx; } .pkResult .body .bodyScore { margin-top: 10rpx; font-size: 38rpx; font-weight: bold; } .pkResult .body .bodyPlay { width: 70rpx; height: 70rpx; margin-top: 40rpx; } .pkResult .body .progress { width: 250rpx; margin: 10rpx auto; border-radius: 50rpx; overflow: hidden; } .pkResult .body .duration { margin: 10rpx auto; width: 100%; display: flex; align-items: center; justify-content: space-around; font-size: 28rpx; } .pkResult .footer { position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 20rpx 104rpx; box-sizing: border-box; padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); background-color: white; display: flex; align-items: center; justify-content: space-between; } .pkResult .footer .stBtn { padding: 16rpx 0rpx; text-align: center; border-radius: 50rpx; width: 220rpx; font-size: 30rpx; color: white; background-color: #66C5FF; box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65); }