wxsapp/SuperBrain/pages/pk/pk.wxss

/* pages/pk/pk.wxss */
page {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #5444a3;
  overflow: hidden;
}
.btn {
  display: inline-block;
  min-width: 280rpx;
  min-height: 108rpx;
  line-height: 108rpx;
  border-radius: 54rpx;
  color: #fff;
  background-color: #4a90e2;
  font-size: 34rpx;
}
.pk-bg {
  position: absolute;
  bottom: 0;
  width: 750rpx;
  height: 336rpx;
}

/* friend wait style */
.pk-friend-wait {
  position: relative;
  height: 1052rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pk-friend-wait .name {
  display: block;
  width: 700rpx;
  margin: 0 auto;
  text-align: center;
  font-size: 32rpx;
  color: #bfbdff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-friend-wait .head {
  position: relative;
  margin: 0 auto;
  width: 508rpx;
}
.pk-friend-wait .head-bg-1 {
  width: 508rpx;
  height: 208rpx;
}
.pk-friend-wait .head-bg-2 {
  position: absolute;
  width: 180rpx;
  height: 140rpx;
  left: 164rpx;
  top: 50rpx;
}
.pk-friend-wait .head-main {
  position: absolute;
  width: 108rpx;
  height: 108rpx;
  left: 192rpx;
  top: 40rpx;
  border: 8rpx solid #fff;
  border-radius: 108rpx;
  background-color: #fff;
}
.pk-friend-wait .radar, .pk-rank-wait .radar {
  position: relative;
  width: 524rpx;
  height: 524rpx;
  margin: 0 auto;
  text-align: center;
}
.pk-friend-wait .radar-1, .pk-rank-wait .radar-1 {
  position: absolute;
  opacity: 0.1;
  width: 524rpx;
  height: 524rpx;
  background: linear-gradient(to left, #7daae9, #ad83f1);
  border-radius: 524rpx;
}
.pk-friend-wait .radar-2, .pk-rank-wait .radar-2 {
  position: absolute;
  opacity: 0.25;
  width: 404rpx;
  height: 404rpx;
  left: 60rpx;
  top: 60rpx;
  background: linear-gradient(to left, #7daae9, #ad83f1);
  border-radius: 404rpx;
}
.pk-friend-wait .radar-3, .pk-rank-wait .radar-3 {
  position: absolute;
  opacity: 0.45;
  width: 288rpx;
  height: 288rpx;
  left: 118rpx;
  top: 118rpx;
  background: linear-gradient(to left, #7daae9, #ad83f1);
  border-radius: 288rpx;
}
.pk-friend-wait .radar-4, .pk-rank-wait .radar-4 {
  position: absolute;
  width: 160rpx;
  height: 160rpx;
  left: 182rpx;
  top: 182rpx;
  background: linear-gradient(to left, #7daae9, #ad83f1);
  border-radius: 144rpx;
}
.pk-friend-wait .radar-img, .pk-rank-wait .radar-img {
  position: absolute;
  width: 108rpx;
  height: 108rpx;
  left: 200rpx;
  top: 200rpx;
  border: 8rpx solid #fff;
  border-radius: 108rpx;
  background-color: #fff;
}
.pk-friend-wait .leave {
  height: 288rpx;
  padding-top: 288rpx;
}
.pk-friend-wait .tip {
  display: block;
  margin-top: 52rpx;
  text-align: center;
  font-size: 32rpx;
  color: #bfbdff;
}
.pk-friend-wait .footer {
  margin: 66rpx;
}
.pk-friend-wait .btn-share {
  margin-left: 58rpx;
  background: linear-gradient(to left, #625af7, #dd7fff);
}
.pk-rank-wait{
  position: relative;
  height: 986rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pk-rank-wait .bg-content{
  position: absolute;
  width: 508rpx;
  height: 208rpx;
  left: 121rpx;
  bottom: 100rpx;
}
.pk-rank-wait .content {
  display: block;
  width: 380rpx;
  margin: 38rpx auto 0;
}
.pk-rank-wait .content > text {
  display: block;
  width: 100%;
  height: 108rpx;
  line-height: 108rpx;
  text-align: center;
  font-size: 34rpx;
  color: #fff;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-rank-wait .content > text:first-child {
  font-size: 40rpx;
}
.pk-rank-wait .content > view {
  width: 100%;
  height: 108rpx;
  line-height: 108rpx;
  text-align: center;
}
.pk-rank-wait .content > view > image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
  vertical-align: middle;
}
.pk-rank-wait .content > view > text {
  color: #fff;
  font-size: 34rpx;
  vertical-align: middle;
}


/* pk into style */
.pk-into {
  position: relative;
  min-height: 928rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pk-bg .head {
  position: relative;
  display: inline-block;
}
.pk-into .top {
  position: relative;
  margin: 0 60rpx;
  transform: translate(-100%, -100%);
}
.pk-into .head-bg {
  position: relative;
  width: 230rpx;
  height: 180rpx;
  margin-top: 10rpx;
}
.pk-into .head-main {
  position: absolute;
  width: 134rpx;
  height: 134rpx;
  top: 0;
  border: 8rpx solid #fff;
  border-radius: 134rpx;
  background-color: #fff;
}
.pk-into .top .head-main{
  left: 40rpx;
}
.pk-into .content {
  display: inline-block;
  vertical-align: top;
  width: 240rpx;
  margin: 0 40rpx;
}
.pk-into .content > text {
  display: block;
  width: 100%;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-into .content > text:first-child {
  font-size: 36rpx;
}
.pk-into .content > view {
  width: 100%;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
}
.pk-into .content > view > image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
  vertical-align: middle;
}
.pk-into .content > view > text {
  color: #fff;
  font-size: 34rpx;
  vertical-align: middle;
}
.pk-into .mid{
  position: relative;
  margin: 40rpx 121rpx;
}
.pk-into .mid .bg-word {
  position: relative;
  width: 508rpx;
  height: 208rpx;
}
.pk-into .mid .word {
  position: absolute;
  width: 508rpx;
  height: 208rpx;
  left: 0;
}
.pk-into .bottom .content{
  margin: 0 45rpx 0 116rpx;
}
.pk-into .bottom .content > text{
  text-align: left;
}
.pk-into .bottom .content > view {
  text-align: left;
}
.pk-into .bottom {
  position: relative;
  margin: 0 60rpx;
  transform: translate(100%, 100%);
}
.pk-into .bottom .head-main {
  right: 40rpx;
}
/* pk room style */
.pk-room .head-mid{
  position: absolute;
  width: 124rpx;
  height: 124rpx;
  top: 10rpx;
  left: 313rpx;
}
.pk-room .head-mid text{
  position: absolute;
  display: block;
  width: 124rpx;
  height: 124rpx;
  top: 0;
  line-height: 124rpx;
  font-size: 48rpx;
  color: #fff;
  text-align: center;
}
.pk-room .head-left, .pk-room .head-right{
  position: absolute;
  top: 10rpx;
  z-index: 1001;
}
.pk-room .head-right{
  right: 0;
}
.pk-room .head-left .head-left-bg, .pk-room .head-right .head-left-bg{
  position: relative;
  width: 208rpx;
  height: 144rpx;
  border-radius: 0 72rpx 72rpx 0;
  background: #6a57ba;
}
.pk-room .head-right .head-left-bg{
  border-radius: 72rpx 0 0 72rpx;
}
.pk-room .head-left .head-bg, .pk-room .head-right .head-bg{
  position: absolute;
  width: 180rpx;
  height: 140rpx;
  top: 22rpx;
}
.pk-room .head-left .head-bg{
  left: 42rpx;
}
.pk-room .head-right .head-bg{
  right: 42rpx;
}
.pk-room .head-left .head-main, .pk-room .head-right .head-main{
  position: absolute;
  width: 108rpx;
  height: 108rpx;
  top: 10rpx;
  border: 8rpx solid #fff;
  border-radius: 108rpx;
  background-color: #fff;
}
.pk-room .head-left .head-main{
  left: 70rpx;
}
.pk-room .head-right .head-main{
  right: 70rpx;
}
.pk-room .head-left .name, .pk-room .head-right .name{
    position: absolute;
    display: block;
    width: 180rpx;
    height: 36rpx;
    top: 176rpx;
    text-align: center;
    font-size: 26rpx;
    color: #bfbdff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-room .head-left .name{
  left: 43rpx;
}
.pk-room .head-right .name{
  right: 43rpx;
}
.pk-room .qa{
  position: relative;
  margin-top: 240rpx;
}
.pk-room .qa .qa-body .qa-type-bg{
  position: relative;
  display: block;
  width: 388rpx;
  height: 116rpx;
  margin: 0 auto;
}
.pk-room .qa .qa-body{
  position: relative;
  height: 308rpx;
  line-height: 308rpx;
}
.pk-room .qa .qa-body .qa-type-text{
  position: absolute;
  display: block;
  width: 388rpx;
  height: 100rpx;
  line-height: 116rpx;
  left: 181rpx;
  top: 0;
  text-align: center;
  font-size: 40rpx;
  color: #fff;
}
.pk-room .qa .qa-body .qa-q-num{
  display: block;
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  margin: 16rpx 0;
  font-size: 64rpx;
  color: #fff;
  letter-spacing: 1w0rpx;
  text-align: center;
}
.pk-room .qa .qa-body .qa-last{
  position: absolute;
  width: 500rpx;
  height: 80rpx;
  left: 125rpx;
  top: 230rpx;
}
.pk-room .qa .qa-body .qa-q{
  position: absolute;
  width: 100%;
  top: 50%;
  display: block;
  min-height: 52rpx;
  line-height: 52rpx;
  padding: 0 60rpx;
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  transform: translate(0, -50%);
  box-sizing: border-box;
}
.pk-room .qa .qa-content{
  height: 532rpx;
}
.pk-room .qa .qa-content > view{
  display: inline-block;
  height: 100%;
  vertical-align: top;
}
.pk-room .qa .qa-content .qa-content-left{
  width: 155rpx;
}
.pk-room .qa .qa-content .qa-content-left .grade, .pk-room .qa .qa-content .qa-content-right .grade{
  display: block;
  opacity: 0.6rpx;
  height: 56rpx;
  line-height: 56rpx;
  margin: 0 12rpx 14rpx 0;
  font-size: 40rpx;
  text-align: center;
  color: #bfbdff;
}
.pk-room .qa .qa-content .qa-content-right .grade{
  margin: 0 0 14rpx 12rpx;
}
.pk-room .qa .qa-content .qa-content-left .grade-bar,
.pk-room .qa .qa-content .qa-content-right .grade-bar{
  position: relative;
  width: 20rpx;
  height: 456rpx;
  margin: 0 60rpx 0;
  border: 4rpx solid #6855c9;
  border-radius: 14rpx;
}
.pk-room .qa .qa-content .qa-content-right .grade-bar{
  margin: 0 0 0 70rpx;
}
.pk-room .qa .qa-content .qa-content-left .grade-bar-inner,
.pk-room .qa .qa-content .qa-content-right .grade-bar-inner{
  position: absolute;
  width: 16rpx;
  top: 456rpx;
  bottom: 0;
  left: 2rpx;
  border-radius: 14rpx;
  background: #bfbdff;
}

.pk-room .qa .qa-content .qa-content-mid{
  width: 440rpx;
}
.pk-room .qa .qa-content .qa-content-mid .answer{
  width: 440rpx;
  height: 108rpx;
  opacity: 0;
  line-height: 108rpx;
  margin: 0 0 32rpx;
  background: linear-gradient(to bottom, #f7fcff, #e7f7ff);
  border-radius: 54rpx;
}
.pk-room .qa .qa-content .qa-content-mid .answer-show{
  opacity: 1;
}
.pk-room .qa .qa-content .qa-content-mid .answer-ed{
  background: #4a90e2;
}
.pk-room .qa .qa-content .qa-content-mid .answer-right{
  background: #35c77f;
}
.pk-room .qa .qa-content .qa-content-mid .answer-error{
  background: #f57581;
}
.pk-room .qa .qa-content .qa-content-mid .answer image{
  width: 30rpx;
  height: 30rpx;
  margin: 0 24rpx;
  vertical-align: middle;
}
.pk-room .qa .qa-content .qa-content-mid .answer text{
  display: inline-block;
  width: 284rpx;
  text-align: center;
  color: #333333;
  font-size: 34rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.pk-room .qa .qa-content .qa-content-mid .answer-ed text,
.pk-room .qa .qa-content .qa-content-mid .answer-right text,
.pk-room .qa .qa-content .qa-content-mid .answer-error text{
  color: #fff;
}
.pk-room .qa .qa-content .qa-content-right{
  width: 155rpx;
}
.pk-room .result .grade{
  height: 192rpx;
  margin-top: 147rpx;
  z-index: 1000;
}
.pk-room .result .grade-left, .pk-room .result .grade-right{
  position: absolute;
  width: 292rpx;
  height: 192rpx;
  border-radius: 0 200rpx 200rpx 0;
  background: #6a57ba;
}
.pk-room .result .grade-right{
  position: absolute;
  right: 0;
  width: 292rpx;
  border-radius: 200rpx 0 0 200rpx;
}
.pk-room .result .grade-win{
  width: 460rpx;
}
.pk-room .result .grade-left > text, .pk-room .result .grade-right > text{
  position: absolute;
  display: block;
  height: 80rpx;
  line-height: 240rpx;
  font-size: 56rpx;
  color: #fff;
}
.pk-room .result .grade-left > text text, .pk-room .result .grade-right > text text{
  font-size: 32rpx;
}
.pk-room .result .grade-left > text{
  left: 60rpx;
}
.pk-room .result .grade-right > text{
  right: 60rpx;
}
.pk-room .result .grade-win > text{
  font-size: 72rpx;
}
.pk-room .result{
  text-align: center;
}
.pk-room .result .publish{
  position: relative;
  width: 508rpx;
  margin: 196rpx auto 56rpx;
}
.pk-room .result .bg-result{
  width: 508rpx;
  height: 208rpx;
}
.pk-room .result .result-img{
  position: absolute;
  width: 308rpx;
  height: 268rpx;
  top: -135rpx;
  left: 100rpx;
}
.pk-room .result .brain{
  position: absolute;
  width: 316rpx;
  height: 92rpx;
  line-height: 92rpx;
  top: 110rpx;
  left: 96rpx;
  text-align: center;
  background-color: #4b3d93;
  border-radius: 16rpx;
}
.pk-room .result .brain > image{
  width: 52rpx;
  height: 52rpx;
  margin-right: 14rpx;
  vertical-align: middle;
}
.pk-room .result .brain > text{
  font-size: 38rpx;
  font-weight: bold;
  color: #fff;
  vertical-align: middle;
}
.pk-room .result .btn-result{
  width: 520rpx;
  margin: 0 auto;
  background: linear-gradient(to left, #625af7, #dd7fff);
}
.pk-room .result .btn-share{
  width: 520rpx;
  margin: 26rpx auto 20rpx; 
}
.pk-room .result .tip{
  display: block;
  line-height: 36rpx;
  font-size: 26rpx;
  color: #bfbdff;
}