123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- .pkResult {
- width: 100vw;
- height: 100vh;
- background-color: #2B2859;
- overflow: hidden;
- .title {
- margin: 85rpx 0rpx 34rpx;
- color: white;
- text-align: center;
- font-size: 46rpx;
- }
- .time {
- font-size: 34rpx;
- text-align: center;
- color: white;
- }
- .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.30), inset 0 -2rpx 3rpx 0 #052552, inset 0 2rpx 3rpx 0;
- border-radius: 20rpx;
- text-align: center;
- .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%;
- .avatarL {
- top: 64rpx;
- left: 110rpx;
- }
- }
- .equal {
- top: 70rpx !important;
- background: url('http://reader-wx.ai160.com/images/reader/v3/pingzuo.png')no-repeat;
- background-size: 100% 100%;
- }
- .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%;
- .avatarR {
- top: 57rpx;
- left: 107rpx;
- }
- }
- .equalRight {
- background: url('http://reader-wx.ai160.com/images/reader/v3/pingyou.png')no-repeat;
- background-size: 100% 100%;
- }
- .avatar {
- position: absolute;
- width: 110rpx;
- height: 110rpx;
- border-radius: 50%;
- }
- .bodyTitle {
- font-size: 28rpx;
- padding: 0rpx 30rpx;
- box-sizing: border-box;
- margin-top: 190rpx;
- }
- .bodyScore {
- margin-top: 10rpx;
- font-size: 38rpx;
- font-weight: bold;
- }
- .bodyPlay {
- width: 70rpx;
- height: 70rpx;
- margin-top: 40rpx;
- }
- .progress {
- width: 250rpx;
- margin: 10rpx auto;
- border-radius: 50rpx;
- overflow: hidden;
- }
- .duration {
- margin: 10rpx auto;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-around;
- font-size: 28rpx;
- }
- }
- .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;
- .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);
- }
- }
- }
|