wxsapp/SuperBrain/pages/roomRecord/roomRecord.wxss

Page {
  height: 100%;
  width: 100%;
  background-color: #f9f9fb;
  /* background: linear-gradient(#e26a53, #f9f9fb); */
}

scroll-view {
  height: 100%;
}

.head-bg {
  margin-left: -452rpx;
  margin-top: -1394rpx;
  width: 1654rpx;
  height: 1654rpx;
  border-radius: 827rpx;
  background-color: #e26a53;
}

.self-bg {
  margin-top: -194rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 20rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 0rpx 4rpx 8rpx rgba(214, 214, 214, 0.5);
}

.self-avatar {
  margin-left: 279rpx;
  margin-top: -60rpx;
  width: 120rpx;
  height: 120rpx;
  border-width: 6rpx;
  border-color: white;
  border-style: solid;
  border-radius: 66rpx;
  background-color: white;
}

.self-title {
  font-size: 36rpx;
  color: #262626;
  font-weight: bold;
  text-align: center;
  margin-top: 34rpx;
}
.self-bonus-bg {
  display: flex;
  flex-direction: row;
  margin-top: 14rpx;
  width: 100%;
}

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

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

.self-bonus-small {
  margin-top: 35rpx;
  color: #fc444c;
  font-size: 32rpx;
  /* font-weight: bold; */
}

.self-bonus-tips {
  font-size: 26rpx;
  color: #535353;
  text-align: center;
  margin-top: 14rpx;
  margin-bottom: 56rpx;
}

.self-get-tips {
  width: 522rpx;
  height: 44rpx;
  border-radius: 22rpx;
  line-height: 44rpx;
  color: #6d6d6d;
  font-size: 24rpx;
  background-color: #f7f7f7;
  text-align: center;
  margin: 20rpx auto 66rpx;
}

.list-header {
  margin-top: 30rpx;
  background-color: white;
  width: 100%;
  height: 92rpx;
  display: flex;
  flex-direction: column;
}

.list-header-title {
  margin-left: 40rpx;
  height: 92rpx;
  line-height: 92rpx;
  color: #878787;
  font-size: 26rpx;
}

.list-header-line {
  margin-left: 40rpx;
  margin-top: -0.5px;
  height: 0.5px;
  background-color: #e5e5e5;
}

.list-tips-view {
  margin-left: 40rpx;
  height: 128rpx;
  font-size: 24rpx;
  color: #878787;
  line-height: 128rpx;
}

.list-bottom-view {
  width: 100%;
  height: 104rpx;
}

.row-bg {
  background-color: white;
  width: 100%;
  height: 120rpx;
  display: flex;
  flex-direction: row;
}

.row-num-text {
  width: 80rpx;
  color: #adbdcd;
  font-size: 36rpx;
  margin-left: 50rpx;
  line-height: 120rpx;
}

.row-num-img {
  width: 36rpx;
  height: 120rpx;
  /* background-color: red; */
  position: absolute;
  left: 40rpx;
}

.row-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-top: 20rpx;
  /* margin-left: 58rpx; */
  /* background-color: blue; */
}

.row-name-bg {
  margin-left: 24rpx;
  margin-right: auto;
  height: 120rpx;
  display: flex;
  flex-direction: column;
}

.row-name {
  font-size: 32rpx;
  width: 250rpx;
  overflow: hidden;
  color: #262626;
  margin-top: 20rpx;
}

.row-count {
  font-size: 26rpx;
  color: #878787;
  margin-bottom: 20rpx;
}

.row-bonus {
  font-size: 30rpx;
  color: #262626;
  margin-top: 22rpx;
  margin-right: 36rpx;
  margin-left: auto;
}

.bottom-view {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: white;
  height: 104rpx;
  display: flex;
  flex-direction: row;
}

.bottom-button-left-view {
  width: 375rpx;
  color: #8c5aeb;
  font-weight: bold;
  font-size: 34rpx;
  text-align: center;
  height: 104rpx;
  line-height: 104rpx;
}

.bottom-button-right-view {
  display: flex;
  flex-direction: column;
  width: 375rpx;
  background: linear-gradient(to left, #625af7, #dd7fff);
  color: white;
  font-weight: bold;
  font-size: 34rpx;
  text-align: center;
  height: 104rpx;
  line-height: 104rpx;
}

.bottom-button-right {
  width: 100%;
  height: 104rpx;
  margin-top: -104rpx;
}