reader/pages/pkResult/index.less

.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;
    box-sizing: border-box;

    .left {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      height: 500rpx;
      width: 328rpx;
      background: url('http://reader-wx.ai160.com/images/reader/v3/victory-1.png')no-repeat;
      background-size: 100% 100%;

      .avatarL {
        top: 66rpx;
        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: 59rpx;
        left: 107rpx;
      }
    }

    .equalRight {
      background: url('http://reader-wx.ai160.com/images/reader/v3/pingyou.png')no-repeat;
      background-size: 100% 100%;

      .avatarR {
        top: 64rpx;
        left: 122rpx;
      }
    }

    .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;

    .btn {
      padding: 16rpx 0rpx;
      text-align: center;
      border-radius: 50rpx;
      width: 220rpx;
      font-size: 30rpx;
      color: white;
      background-color: #F84041;
      box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
    }

    .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);
    }
  }
}