wxsapp/SuperBrain/pages/home/home.wxss

@import "../../modal/dialogBrainLack.wxss";
@import "../../modal/dialogGeneral.wxss";
@import "../../modal/dialogRoom.wxss";
/* pages/home/home.wxss */
page{
  height: 100%;
  background-color: #fbf7ef;
}
.head{
  position: relative;
  margin: 0 20rpx;
  background: linear-gradient(to top, #715bea, #9859f5);
  border-radius: 8rpx;
}
.head-img{
  display: inline-block;
  width: 88rpx;
  height: 88rpx;
  margin: 40rpx 20rpx 46rpx 32rpx;
  border-radius: 104rpx;
  border: 8rpx solid #fff;
  background-color: #fff;
  vertical-align: top;
}
.head-info{
  display: inline-block;
  width: 500rpx;
  vertical-align: top;
}
.head-text{
  display: block;
  margin: 50rpx 0 0;
  width: 340rpx;
  height: 44rpx;
  line-height: 44rpx;
  color: #fff;
  font-size: 32rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.head-rank{
  display: inline-block;
  width: 120rpx;
  line-height: 40rpx;
  color: #fff;
  font-size: 26rpx;
}
.head-rule{
  line-height: 40rpx;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.6);
}
.head-rule-icon{
  display: inline-block;
  width:0; 
  height:0;
  margin-left: 10rpx;
  border-width: 9rpx;
  border-style: solid;
  border-color: transparent  transparent  transparent  rgba(255, 255, 255, 0.6);
}
.head-rank-logo{
  position: absolute;
  width: 186rpx;
  height: 146rpx;
  top: 0;
  right: 36rpx;
}
.head-rank-logo > image{
  width: 186rpx;
  height: 146rpx;
}
.head-rank-logo > text{
  position: absolute;
  display: block;
  width: 186rpx;
  top: 72rpx;
  text-align: center;
  color: #f6cfff;
  font-size: 22rpx;
}
.head-details{
  display: inline-block;
  height: 40rpx;
  margin-bottom: 28rpx;
  border-radius: 22rpx;
  background-color: rgba(0, 0, 0, 0.12);
}
.head-details-pk{
  width: 180rpx;
  margin-left: 36rpx;
  margin-right: 50rpx;
}
.head-details-brain{
  width: 180rpx;
  margin-right: 52rpx;
}
.head-details-balance{
  width: 180rpx;
}
.head-details .icon{
  width: 40rpx;
  height: 40rpx;
  margin-left: -4rpx;
}
.head-details > image.btn{
  float: right;
  width: 40rpx;
  height: 40rpx;
}
.head-details > text{
  display: inline-block;
  height: 40rpx;
  line-height: 40rpx;
  margin-left: 10rpx;
  font-size: 24rpx;
  font-family: 'Trebuchet MS', Tahoma, sans-serif;
  color: #e1dbf5;
  vertical-align: top;
}
.head-details > button{
  float: right;
  width: 60rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding: 0;
  font-size: 20rpx;
  color: #d89866;
  background: transparent;
  border: 1px solid #e1a978;
  border-radius: 20rpx;
}
/* rank style */
.rank{
  margin: 20rpx 20rpx 0;
}
.rank view{
  display: inline-block;
}
.rank-game{
  position: relative;
  float: left;
  width: 340rpx;
  height: 400rpx;
  margin-right: 20rpx;
}
.rank-game > image{
  width: 340rpx;
  height: 400rpx;
}
.rank-game > text{
  position: absolute;
  display: inline-block;
  top: 24rpx;
  right: 18rpx;
  font-size: 32rpx;
  font-family: 'Trebuchet MS', Tahoma, sans-serif;
  color: #fff;
}
.rank-game > view.season{
  position: absolute;
  left: 20rpx;
  top: 86rpx;
  height: 46rpx;
  padding: 0;
  background-color: #fff;
  border-radius: 23rpx;
}
.rank-game view.season > image{
  width: 42rpx;
  height: 42rpx;
  margin: 2rpx;
  border-radius: 42rpx;
  background-color: #d8d8d8;
}
.rank-game view.season > text{
  display: inline-block;
  line-height: 46rpx;
  margin-right: 10rpx;
  font-size: 26rpx;
  color: #535353;
  vertical-align: top;
}
.rank-game view.season > text text.red{
  color: #f01c46;
}
.rank-game view.dis{
  position: absolute;
  width: 340rpx;
  height: 400rpx;
  left: 0;
  top: 0;
  border-radius: 8rpx;
  background: rgba(0, 0, 0, 0.3)
}
.rank-friend, .rank-add{
  position: relative;
  width: 350rpx;
  height: 190rpx;
  border-radius: 8rpx;
}
.rank-friend > button{
  position: absolute;
  width: 350rpx;
  height: 190rpx;
  left: 0;
  top: 0;
  padding: 0;
  background: transparent;
  border-radius: 8rpx;
}
.rank-friend > image{
  width: 350rpx;
  height: 190rpx;
}
.rank-friend view.dis, .rank-add view.dis{
  position: absolute;
  width: 350rpx;
  height: 190rpx;
  left: 0;
  top: 0;
  border-radius: 8rpx;
  background: rgba(0, 0, 0, 0.4)
}
.rank-add view.dis{
  opacity: 0;
}
.rank-add{
  position: relative;
  margin-top: 10rpx;
  background:linear-gradient(#7160e7, #5b7bf2);
}
.rank-add > image{
  width: 350rpx;
  height: 190rpx;
}
.rank-add > image.add-img{
  position: absolute;
  width: 32rpx;
  height: 32rpx;
  top: 92rpx;
  left: 20rpx;
  border-radius: 36rpx;
  vertical-align: middle;
}
.rank-add > text{
  font-size: 22rpx;
  color: #fff;
}
.rank-add > text.plan{
  position: absolute;
  display: inline-block;
  height: 32rpx;
  line-height: 32rpx;
  top: 92rpx;
  left: 60rpx;
}
.rank-add > text.time{
  position: absolute;
  width: 152rpx;
  height: 32rpx;
  left: 20rpx;
  top: 138rpx;
  line-height: 32rpx;
  text-align: center;
  background-color: #c181f9;
  border-radius: 16rpx;
}
.rank-add button{
  position: absolute;
  opacity: 0;
  width: 350rpx;
  height: 190rpx;
  top: 0;
  left: 0;
}
/* room style */
.room{
  padding-bottom: 46rpx; 
  text-align: center;
}
.room-title{
  display: block;
  padding-top: 22rpx;
  text-align: center;
  font-size: 30rpx;
  color: #a57c46;
  font-weight: bold;
}
.room-sub-title{
  display: inline-block;
  height: 44rpx;
  line-height: 44rpx;
  margin-top: 14rpx;
  padding: 0 32rpx;
  border-radius: 22rpx;
  font-size: 24rpx;
  color: #a57c46;
  background-color: #fff;
}
.room-body{
  text-align: left;
}
.room-game{
  position: relative;
  display: inline-block;
  width: 208rpx;
  height: 208rpx;
  margin-left: 31.5rpx;
  margin-top: 36rpx;
  text-align: center;
}
.room-game .room-bg{
  width: 208rpx;
  height: 208rpx;
}
.room-game .room-logo{
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  top: -5rpx;
  left: 58rpx;
  border: 8rpx solid #fff;
  border-radius: 50rpx;
  background-color: #fff;
}
.room-game .room-game-name{
  position: absolute;
  display: inline-block;
  width: 140rpx;
  height: 38rpx;
  left: 34rpx;
  top: 75rpx;
  line-height: 38rpx;
  font-size: 22rpx;
  background-color: #fe8516;
  color: #fff;
  border-radius: 20rpx;
}
.room-game .room-game-money{
  position: absolute;
  display: block;
  width: 100%;
  height: 56rpx;
  left: 0;
  top: 114rpx;
  line-height: 56rpx;
  font-size: 38rpx;
  font-weight: bold;
  text-align: center;
  color: #f8713e;
}
.room-game .room-game-money .room-game-money-unit{
  font-size: 22rpx;
  font-weight: normal;
}
.room-game .room-game-down-time, .room-game .room-game-now, .room-game .room-game-fill, .room-game .room-game-open-sub-title{
  position: absolute;
  display: block;
  width: 100%;
  height: 28rpx;
  left: 0;
  top: 164rpx;
  font-size: 20rpx;
}
.room-game text.room-game-down-time{
  line-height: 28rpx;
  color: #535353;
}
.room-game .room-game-fill{
  color: #f8713e;
}
.room-game .room-game-now{
  top: 162rpx;
}
.room-game .room-game-now > image{
  width: 24rpx;
  height: 24rpx;
  margin-right: 5rpx;
  vertical-align: middle;
}
.room-game .room-game-now > text{
  display: inline-block;
  color: #fb444c;
  vertical-align: middle;
}
.room-game .room-game-open-title{
  position: absolute;
  display: block;
  width: 100%;
  height: 56rpx;
  left: 0;
  top: 118rpx;
  line-height: 56rpx;
  font-size: 26rpx;
  text-align: center;
  font-weight: bold;
  color: #f8713e;
}
.room-game .room-game-open-sub-title{
  top: 165rpx;
  line-height: 28rpx;
  font-size: 22rpx;
  color: #535353;
}
.h-service-btn{
  position: fixed;
  width: 208rpx;
  height: 108rpx;
  padding: 0;
  margin: 0;
  border: 0;
  right: 0;
  bottom: 60rpx;
  background: transparent;
}
.h-service-btn::after{
  border: 0;
}
.h-service-img{
  width: 208rpx;
  height: 108rpx;
}

/* dialog style */
.dialog-body-login, .dialog-body-rank{
  width: 600rpx;
  margin: 0 75rpx;
}
.dialog-body-login > image, .dialog-body-rank > image{
  width: 600rpx;
  height: 380rpx;
  border-radius: 40rpx 40rpx 0 0;
}
.dialog-body-login > view, .dialog-body-rank > view{
  margin-top: -20rpx;
  padding: 40rpx 0 54rpx;
  background-color: #fff;
  border-radius: 0 0 40rpx 40rpx;
}
.dialog-body-login > view text.title, .dialog-body-rank > view text.title{
  display: block;
  line-height: 50rpx;
  margin-bottom: 10rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #262626;
}
.dialog-body-rank > view text.title{
  line-height: 48rpx;
  font-size: 32rpx;
  font-weight: normal;
}
.dialog-body-login > view text.sub-title{
  display: block;
  line-height: 44rpx;
  font-size: 32rpx;
  margin: 0 40rpx;
  color: #535353;
  text-align: center;
}
.dialog-body-login > view button, .dialog-body-rank > view button{
  width: 360rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin-top: 32rpx;
  border-radius: 52rpx;
  border: 0;
  color: #fff;
  background: linear-gradient(to right, #dd7fff, #625af7);
}
.dialog-body-login > view button::after, .dialog-body-rank > view button::after{
  border: 0;
}
.dialog-body-rank > view button{
  background: #fff;
  color: #773ce5;
  border: 1rpx solid rgba(140, 90, 235, 0.8);
}