wxsapp/SuperBrain/pages/room/room.wxss

/* pages/room/room.wxss */
Page {
  height: 100%;
  width: 100%;
  background-color: #413668;
}

scroll-view {
  height: 100%;
}

/* head */

.head-l-0, .head-l-1, .head-l-2, .head-l-3, .head-l-4, .head-s-0, .head-s-1, .head-s-2, .head-s-3, .head-s-4 {
  align-items: center; 
  display: flex;
  height: 48rpx; 
  width: 100%;
}

.head-l-1, .head-l-2, .head-l-3, .head-l-4 {
  margin-top: 30rpx;
}

.take-part {
  position: absolute;
  right: 20rpx;
  font-size: 24rpx;
  color: white;
  line-height: 48rpx;
  text-align: right;
}

.take-part-view {
  display: flex;
  margin-left: 20rpx;
  margin-right: auto;
  flex-direction: row;
  width: 100%; 
}

.take-part-avatar {
  /* margin-top: -48rpx; */
  background: #413668;
  display: flex;
  border-radius: 24rpx; 
  width: 48rpx;
  height: 48rpx;
  margin-right: 28rpx;
}

.sponsor-icon {
  width: 88rpx;
  height: 80rpx;
  margin-left: auto; 
}

/* before */

/* sponsor */

.sponsor {
  display: flex;
  flex-direction: column;
  margin: -320rpx 20rpx auto;
  height: 316rpx;
  /* background: linear-gradient(#262421, #32302C); */
  border-radius: 32rpx;
  overflow:hidden;
}

.sponsor-bg {
  display: flex;
  margin: 82rpx 20rpx 0rpx;
  width: 710rpx;
  height: 320rpx;
  border-radius: 32rpx;
}

.sponsor-title {
  margin-top: 60rpx;
  font-size: 48rpx;
  text-align: center;
  color: #bfbdff;
}

.sponsor-name {
  margin-top: 4rpx;
  font-size: 40rpx;
  text-align: center;
  color: #bfbdff;
  font-weight: bold;
}

/* avatar */

.avatar-bg {
  position: absolute;
  left: 50%;
  margin-left: -94rpx;
  top: 70rpx;
  width: 188rpx;
  height: 188rpx;
  border-radius: 94rpx;
  background-color: #312950;
}

.avatar-middle {
  position: absolute;
  left: 12rpx;
  top: 12rpx;
  width: 164rpx;
  height: 164rpx;
  border-radius: 82rpx;
  background-color: white;
}

.avatar {
  position: absolute;
  left: 18rpx;
  top: 18rpx;
  width: 152rpx;
  height: 152rpx;
  border-radius: 76rpx;
  background-color: white;
}

/* answer */

.answer {
  flex-direction: column; 
  min-height: 720rpx;  
  background-color: white;
  border-radius: 20rpx;
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  top: 466rpx;
  bottom: 0rpx;
  margin-bottom: 20rpx;
}

.answer-bonus-bg {
  display: flex; 
  width: 100%; 
  height: 100rpx;
}

.answer-bonus-text-bg {
  flex-direction: row; 
  display: flex;
  align-items: center;
  background-color: #8176de;
  border-radius: 12rpx;
  height: 100rpx;
  margin:-50rpx auto 0px;
}

.answer-bonus-big {
  display: flex;
  font-size: 52rpx;
  color: white;
  font-weight: bold;
}

.answer-bonus-small {
  margin-top: 13rpx;
  display: flex;
  font-size: 28rpx;
  color: white;
}

.answer-count-down-bg {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  top: 50rpx;
  bottom: 244rpx;
}

.answer-count-down-view {
  position: absolute; 
  top: 50%;
  margin-top: -85rpx;
  width: 100%;
  height: 170rpx;
}

.answer-count-down-title {
  text-align: center;
  font-size: 24rpx;
  color: #8176de;
}

.answer-count-down {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.answer-count-down-n {
  font-size: 120rpx;
  color: #8176de;
  font-weight: 300; 
  margin-left: auto;
}

.answer-count-down-u {
  font-size: 24rpx;
  color: #8176de;
  margin-top: 100rpx;
  margin-right: auto;
}

.answer-bottom-view {
  display: flex;
  flex-direction: column;
  position: absolute; 
  width: 100%;
  height: 244rpx;
  bottom: 0px;
}

.answer-bottom-button-bg {
  display: flex;
  flex-direction: column;
  color: white;
  text-align: center; 
  line-height: 92rpx;
  margin: 0px 64rpx;
  height: 92rpx;
  border-radius: 46rpx;
  background: linear-gradient(to left, #625AF7, #DD7FFF);
  box-shadow: 0rpx 4rpx 10rpx #D2B3FF;
}

.answer-bottom-button {
  width: 100%;
  height: 92rpx;
  margin-top: -92rpx;
}

.answer-bottom-tips-f, .answer-bottom-tips-s {
  font-size: 26rpx;
  color: #999999;
  text-align: center;
}

.answer-bottom-tips-f {
  margin-top: 26rpx;
}

.answer-bottom-tips-s {
  margin-top: 8rpx;
}

/* after */

/* sponsor */

.sponsor-begin {
  display: flex;
  flex-direction: column;
  margin: 62rpx 20rpx 0rpx;
  height: 152rpx;
  background: linear-gradient(#30284f, #413668);
  border-radius: 32rpx;
  overflow:hidden;
}

.sponsor-begin-name {
  margin-top: -8rpx;
  font-size: 32rpx;
  text-align: center;
  color: #bfbdff;
}

/* avatar */

.avatar-begin-bg {
  position: absolute;
  left: 50%;
  margin-left: -54rpx;
  top: 58rpx;
  width: 108rpx;
  height: 108rpx;
  border-radius: 54rpx;
  background-color: #322a52;
}

.avatar-begin-middle {
  position: absolute;
  left: 8rpx;
  top: 8rpx;
  width: 92rpx;
  height: 92rpx;
  border-radius: 46rpx;
  background-color: white;
}

.avatar-begin {
  position: absolute;
  left: 12rpx;
  top: 12rpx;
  width: 84rpx;
  height: 84rpx;
  border-radius: 42rpx;
  background-color: white;
}

/* answer */

.answer-begin {
  display: flex;
  flex-direction: column; 
  min-height: 906rpx;  
  background-color: white;
  border-radius: 20rpx;
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  top: 282rpx;
  bottom: 0rpx;
  margin-bottom: 20rpx;
}

.answer-begin-bonus-bg {
  display: flex; 
  width: 100%; 
  height: 68rpx;
}

.answer-begin-bonus-text-bg {
  flex-direction: row; 
  display: flex;
  align-items: center;
  background-color: #8176de;
  border-radius: 12rpx;
  height: 68rpx;
  margin:-34rpx auto 0px;
}

.answer-begin-bonus-big {
  display: flex;
  font-size: 44rpx;
  color: white;
  font-weight: bold; 
}

.answer-begin-bonus-small {
  margin-top: 10rpx;
  display: flex;
  font-size: 24rpx;
  color: white;
  /* font-weight: lighter */
}

 .answer-begin-question-type-bg {
  display: flex;
  margin: -4rpx auto 0px;
  width: 388rpx;
  height: 116rpx;
} 

.answer-begin-question-type {
  color: white;
  font-size: 40rpx;
  text-align: center;
  margin-top: -96rpx;
}

.answer-begin-num, .answer-begin-last {
  color: #8176de;
  font-size: 64rpx;
  text-align: center;
  margin-top: 54rpx;
}

.answer-begin-num {
  letter-spacing: 10rpx; 
}

.answer-begin-double-score {
  display: flex;
  margin: 24rpx auto 0px;
  width: 500rpx;
  height: 80rpx;

}

.answer-num {
  font-size: 32rpx;
  color: #666666;
  text-align: center;
  margin-top: -10rpx;
}

.answer-begin-count-down-bg {
  margin-top: 18rpx;
  display: flex;
  flex-direction: row;
}

.answer-begin-count-down {
  background-color: #ECF9FF;
  margin: 0px auto;
  border-radius: 31rpx;
  display: flex;
  flex-direction: row;
}

.answer-begin-count-down-text {
  color: #00afff;
  font-size: 36rpx;
  text-align: center;
  line-height: 62rpx;
  height: 62rpx;
  margin: 0px 20rpx;
}

.answer-question-bg {
  display: flex;
  flex-direction: column;
  height: 186rpx;
  width: 100%;
  margin-top: -186rpx;
}

.answer-question {
  line-height: 46rpx;  
  text-align: center;   
  font-size: 34rpx;
  margin-top: auto;
  margin-bottom: auto;
  color: #333333;
}

.answer-options-bg {
  display: flex;
  flex-direction: column; 
  margin-left: 34rpx;
  margin-right: 34rpx;
  margin-top: 186rpx;
  height: 190rpx;
  /* background-color: blueviolet; */
  
}

.answer-options-row-top, .answer-options-row-bottom {
  display: flex;
  flex-direction: row; 
  height: 80rpx;
  width: 100%;
}

.answer-options-row-bottom {
  margin-top: 30rpx;
}

.answer-options-left-w, .answer-options-right-w, .answer-options-left-t, .answer-options-right-t, .answer-options-left-f, .answer-options-right-f, .answer-options-left-q, .answer-options-right-q,
.answer-options-left-s, .answer-options-right-s {
  display: flex;
  flex-direction: column;
  width: 46%;
  height: 100%;
  border-radius: 40rpx;
}

.answer-options-left-w, .answer-options-right-w {
  background: linear-gradient( #F7FCFF, #E7F7FF);
  box-shadow: 0rpx 4rpx 4rpx #D3F2FF;
}

.answer-options-left-s, .answer-options-right-s {
  background: linear-gradient(to right, #3edcff, #3fbaff);
  box-shadow: 0rpx 4rpx 4rpx #D3F2FF;
}

.answer-options-right-w, .answer-options-right-s,.answer-options-right-t, .answer-options-right-f  {
  margin-left: auto;
}

.answer-options-left-t, .answer-options-right-t {
  background: linear-gradient(to right, #81C43F, #1EC41F);
  box-shadow: 0rpx 4rpx 8rpx #A5E293;
}

.answer-options-left-f, .answer-options-right-f {
  background: linear-gradient(to right, #FF856C, #FF4F89);
  box-shadow: 0rpx 4rpx 8rpx #FFAFB8;
}

.answer-options-left-q, .answer-options-right-q {
  background-color: #F2F2F2;
}

.answer-options-right-q {
  margin-left: auto;
}

.answer-options-w, .answer-options-t, .answer-options-f, .answer-options-q, .answer-options-s {
  font-size: 28rpx;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

.answer-options-w {
  color: #262626;
}

.answer-options-t, .answer-options-f {
  color: white;
  font-weight: bold;
}

answer-options-s, {
  color: white;
}

.answer-options-q {
  color: #878787;
}

/* result */

.result-ranking {
  font-size: 36rpx;
  font-weight: bold;
  color: #262626;
  text-align: center;
  margin-top: 30rpx;
}

.result-middle-bg {
  width: 100%;
  height: 228rpx;
  display: flex;
  flex-direction: column;
}

.result-bonus-bg {
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
  width: 100%;
}

.result-bonus {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
}

.result-bonus-big {
  color: #FC454C;
  font-size: 68rpx;
  font-weight: bold; 
}

.result-bonus-small {
  margin-top: 35rpx;
  color: #FC454C;
  font-size: 32rpx;
  font-weight: bold;
}

.result-tips {
  font-size: 26rpx;
  color: #535353;
  margin-top: 20rpx;
  text-align: center;
  /* font-weight: lighter; */
}

.result-false-img {
  width: 100%;
  height: 198rpx;
  margin-top: auto;
  margin-bottom: 0px;
}

.result-share {
  display: flex;
  flex-direction: column;
  font-size: 34rpx;
  color: white;
  text-align: center;
  line-height: 92rpx;
  margin-left: 96rpx;
  margin-right: 96rpx;
  height: 92rpx;
  border-radius: 46rpx;
  background: linear-gradient(to left, #625AF7, #DD7FFF);
  box-shadow: 0rpx 4rpx 8rpx #D2B3FF;
}

.result-share-button {
  width: 100%;
  height: 92rpx;
  margin-top: -92rpx;
}

.result-share-tips {
  font-size: 24rpx;
  color: #783CE6;
  text-align: center;
  line-height: 72rpx;
  margin-top: 28rpx;
  background-color: #F0F0FE;
}

.result-share-bg {
  position: absolute;
  top: 0rpx;   
  left: 50%;
  margin-left: -355rpx;
  width: 710rpx;
  height: 662rpx; 
}

.result-share-double-bg, .result-share-add-bg {
  position: absolute;
  top: 211rpx;
  left: 65rpx;
  width: 580rpx;
  height: 240rpx;
}

.result-share-double {
  position: absolute;
  text-align: center;
  font-weight: bold;
  width: 100%;
  top: 305rpx;
  font-size: 108rpx;
  background: linear-gradient(to right, #FFB259, #FC5F62);
  -webkit-background-clip: text;
  color: transparent;
}

.result-add-cell-bg {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 100%;
  top: 290rpx;
}

.result-add-cell {
  margin-left: auto;
  font-size: 108rpx;
  font-weight: bold;
  background: linear-gradient(to right, #FFB259, #FC5F62);
  -webkit-background-clip: text;
  color: transparent;
}

.result-add-cell-unit {
  margin-top: 48rpx;
  margin-right: 180rpx;
  font-size: 60rpx;
  color: #FC5F62;
}

/* ranking */

.ranking-bg {
  /* position: absolute; */
  margin-left: 24rpx;
  margin-right: 24rpx;
  margin-bottom: 14rpx;
  margin-top: auto;
  /* left: 24rpx;
  right: 24rpx;
  bottom: 14rpx;
  height: auto; */
  display: flex;
  flex-direction: column;
}

.ranking-row {
  display: flex;
  flex-direction: row; 
  width: 100%;
  height: 44rpx;
  margin-bottom: 16rpx;
}

.ranking {
  width: 311rpx;
  height: 44rpx;
  border-color: #E5E5E5;
  border-style: solid;
  border-width: 1rpx;
  border-radius: 23rpx;
  display: flex;
  flex-direction: row; 
  box-sizing: border-box;
  /* background-color: red; */
}

.ranking-avatar {
  margin-left: -1px;  
  margin-top: -1rpx;  
  width: 44rpx;
  height: 44rpx;
  border-radius: 22rpx;
  /* background-color: red;  */
}

.ranking-num {
  font-size: 28rpx;
  font-weight: 300; 
  margin-left: 8rpx;
  line-height: 44rpx;
  color: #6D6D6D;
}

.ranking-name {
  font-size: 22rpx;
  overflow: hidden;  
  width: 110rpx;
  font-weight: 300; 
  margin-left: 10rpx;
  line-height: 44rpx;
  height: 44rpx;
  color: #878787;
}

.ranking-count {
  margin-left: auto;
  margin-right: 12rpx; 
  font-size: 22rpx;
  font-weight: 300; 
  line-height: 44rpx;
  right: 12rpx; 
  text-align: right;
  color: #F9723F;
}

.ranking-self-view {
  position: absolute;
  width: 662rpx;
  height: 44rpx;
  /* right: 36rpx; */
  bottom: 30rpx;
  display: flex;
  flex-direction: row;
}

.ranking-self-bg {
  /* position: absolute; */
  width: 311rpx;
  height: 44rpx;
  /* border-color: white; 
  border-style: solid;
  border-width: 1rpx;
  padding-left: 1rpx; 
  padding-right: 1rpx; */
  /* margin-left:47%;   */
  /* right: 36rpx;
  bottom: 30rpx; */
  /* margin-left: auto; */
  margin-left: auto;
  margin-right: 0px;
  /* margin-right: auto; */
  border-radius: 22rpx;
  display: flex;
  flex-direction: row;
  background: linear-gradient(to right, #3edcff, #3fbaff);
  box-shadow: 0rpx 4rpx 8rpx #c3ecfe;
}

.ranking-self {
  margin-bottom: auto;
  margin-top: auto;
  margin-left: 1px;   
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background-color: white;
  font-size: 24rpx;
  line-height: 40rpx;
  text-align: center;
  color: #17abf1;
}

/* animation */
.animation-l, .animation-s {
  position: absolute;
  top: 382rpx; 
  left: 50%;
  margin-left: -355rpx;
  width: 710rpx;
  height: 662rpx;
}

.animation-l {
  top: 530rpx; 
}
/* 遮罩 */
.animation-answer-bg {
  position: absolute;
  /* top: 382rpx;  */
  left: 50%;
  margin-left: -355rpx;
  width: 710rpx;
  height: 662rpx; 
  opacity: 0; 
  /* background-color: red;  */
}
/* 光 */
.animation-answer-right-bg {
  position: absolute;
  top: 104rpx; 
  width: 100%;
  height: 352rpx;
  display: flex;
  flex-direction: row;
}

.animation-answer {
  margin: auto auto auto;
  width: 0px;
  height: 0px;
  /* background-color: red; */
}

.animation-answer-star-bg {
  position: absolute;
  top: 214rpx;
  width: 100%;
  height: 204rpx;
  display: flex;
  flex-direction: row;
}

.animation-answer-hook {
  position: absolute;
  width: 112rpx;
  height: 88rpx;
  top: 240rpx;
  left: 50%;
  margin-left: -56rpx;
  opacity: 0; 
}

.animation-answer-count {
  position: absolute;
  width: 100%;
  color: white;
  font-size: 36rpx;
  text-align: center;
  top: 328rpx;
  opacity: 0; 
}

.animation-answer-false-bg-l, .animation-answer-false-bg-s {
  position: absolute;
  left: 50%;
  margin-left: -355rpx;
  top: 382rpx;
  width: 710rpx;
  height: 662rpx;
}

.animation-answer-false-bg-l {
  top: 530rpx; 
}

.animation-answer-false-l, .animation-answer-false-s {
  position: absolute;
  left: 50%;
  margin-left: -175rpx;
  top: 500rpx; 
  width: 350rpx;
  height: 350rpx;
}

.animation-answer-false-l {
  top: 650rpx; 
}