applet/edition1.0.0/pages/liveBoard/index.wxss

/* pages/liveBoard/index.wxss */
page {
  background: #091C38;
}

.echartsDiv {
  background: transparent;
}

.liveBoard_top {
  height: 160rpx;
  width: 100%;
  display: flex;
  align-items: center;
  background: url("https://kx-bigdata.oss-cn-beijing.aliyuncs.com/Applet/liveBoardTop.png") no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  position: relative;
}

.liveBoard_top .liveBoardTop_gif {
  width: 160rpx;
  height: 36rpx;
  position: absolute;
  left: 13rpx;
  top: 44rpx;
}

.liveBoard_top .userImg {
  width: 97rpx;
  height: 97rpx;
  border-radius: 50%;
  margin-left: 200rpx;
  position: relative;
}

.liveBoard_top .userImg .user_img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.liveBoard_top .userImg .live_play {
  width: 30rpx;
  height: 20rpx;
  vertical-align: middle;
  display: inline-block;
}

.liveBoard_top .userImg .enable {
  background: rgba(255, 0, 0, 0.8);
  font-size: 14rpx;
  width: 100rpx;
  position: absolute;
  bottom: -6rpx;
  left: 0;
  right: 0;
  margin: auto;
  color: #ffffff;
  line-height: 26rpx;
  text-align: center;
  border-radius: 6rpx;
}

.liveBoard_top .userImg .enable2 {
  background: rgba(130, 130, 130, 0.8);
}

.liveBoard_top .userInfo {
  margin-left: 18rpx;
}

.liveBoard_top .userInfo .userName {
  width: 280rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveBoard_top .userInfo .live_time {
  font-size: 13rpx;
  line-height: 18rpx;
  margin-top: 12rpx;
}

.goodsInfo {
  width: 710rpx;
  height: 200rpx;
  background: #194686;
  box-shadow: inset 0px 0px 28rpx 0px #2894de;
  border-radius: 8rpx;
  border: 6rpx solid #1e64da;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 18rpx auto;
}

.goodsInfo .info {
  text-align: center;
}

.goodsInfo .info text {
  color: #51B8FF;
  font-size: 52rpx;
  line-height: 74rpx;
}

.goodsInfo .info view {
  color: #FFFFFF;
  font-size: 28rpx;
  line-height: 40rpx;
  margin-top: 10rpx;
}

.goodsList {
  width: 710rpx;
  background: #194686;
  box-shadow: inset 0px 0px 28rpx 0px #2894de;
  border-radius: 8rpx;
  border: 6rpx solid #1e64da;
  margin: auto;
  padding: 40rpx 0;
}

.goodsList .goodsList_table {
  color: #ffffff;
  width: 660rpx;
  margin: auto;
  padding-top: 50rpx;
}

.goodsList .goodsList_table .table_title {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.goodsList .goodsList_table .table_title .goodsNameDiv_title {
  font-size: 28rpx;
  line-height: 40rpx;
  vertical-align: middle;
}

.goodsList .goodsList_table .table_title .goodsNameDiv_title::before {
  content: '';
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  background: #f4d229;
  border-radius: 4rpx;
  margin-right: 12rpx;
  vertical-align: middle;
}

.goodsList .goodsList_table .table_title .sellCountDiv, .goodsList .goodsList_table .table_title .sellMoneyDiv {
  font-size: 28rpx;
  line-height: 40rpx;
}

.goodsList .goodsList_table .sellCountDiv, .goodsList .goodsList_table .sellMoneyDiv {
  width: 120rpx;
  text-align: center;
}

.goodsList .goodsList_table .goodsNameDiv {
  width: 300rpx;
}

.goodsList .goodsList_table .table_tr {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #225AAA;
  margin: 20rpx auto;
}

.goodsList .goodsList_table .table_tr .goodsNameDiv {
  display: flex;
  align-items: center;
}

.goodsList .goodsList_table .table_tr .goodsNameDiv .goodsImg {
  width: 60rpx;
  height: 60rpx;
  border-radius: 10rpx;
  margin: 0 16rpx;
}

.goodsList .goodsList_table .table_tr .goodsNameDiv .goodsNameInfo .goodsName {
  font-size: 26rpx;
  line-height: 36rpx;
  width: 200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goodsList .goodsList_table .table_tr .goodsNameDiv .goodsNameInfo .price {
  font-size: 24rpx;
  line-height: 34rpx;
}

.goodsList .goodsList_table .table_tr .sellCountDiv, .goodsList .goodsList_table .table_tr .sellMoneyDiv {
  font-size: 26rpx;
  line-height: 36rpx;
}

.goodsList .goodsList_table .listMore {
  font-size: 24rpx;
  line-height: 34rpx;
  text-align: center;
  margin-top: 48rpx;
}

.goodsList .goodsList_table .listMore text {
  color: #4AC6FF;
}

.noHaveData {
  color: #f4f4f4;
  font-size: 20rpx;
  line-height: 40rpx;
  padding: 40rpx 0;
  text-align: center;
}

.block1 {
  width: 710rpx;
  margin: 20rpx auto;
  background: #0a2751;
  box-shadow: inset 0px 0px 28rpx 0px #178bda;
  border-radius: 8rpx;
  border: 6rpx solid #1e64da;
}

.block1 .data {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 74rpx 0;
}

.block1 .data .dataInfo {
  display: flex;
  align-items: center;
}

.block1 .data .dataInfo image {
  width: 54rpx;
  height: 54rpx;
}

.block1 .data .dataInfo .info {
  margin-left: 12rpx;
}

.block1 .data .dataInfo .info text {
  font-size: 33rpx;
  line-height: 48rpx;
  color: #83FFF4;
}

.block1 .data .dataInfo .info view {
  font-size: 19rpx;
  line-height: 26rpx;
  color: #648BC1;
}

.block2 {
  background: #194686;
  box-shadow: inset 0px 0px 28px 0px #2894de;
}

.goodsListDiv {
  height: 460rpx;
  overflow-y: auto;
}

.barrage_table {
  width: 656rpx;
  color: #ffffff;
  margin: auto;
}

.barrage_table .contentDiv {
  height: 460rpx;
  overflow-y: auto;
  position: relative;
}

.barrage_table .barrage_title {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.barrage_table .barrage_title .barrage_top_title {
  font-size: 28rpx;
  line-height: 40rpx;
  vertical-align: middle;
}

.barrage_table .barrage_title .barrage_top_title::before {
  content: '';
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  background: #f4d229;
  border-radius: 4rpx;
  margin-right: 12rpx;
  vertical-align: middle;
}

.barrage_table .barrage_title .barrage_content {
  font-size: 28rpx;
  line-height: 40rpx;
  padding-right: 10rpx;
  text-align: center;
  width: 50%;
}

.barrage_table .content_tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #071e3f;
  height: 80rpx;
  margin: 20rpx 0;
}

.barrage_table .content_tr .barrage_name, .barrage_table .content_tr .barrage_content {
  width: 50%;
}

.barrage_table .content_tr .barrage_name {
  font-size: 26rpx;
  line-height: 36rpx;
  width: 98%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 30rpx;
}

.barrage_table .content_tr .barrage_content {
  text-align: center;
  font-size: 19rpx;
  line-height: 26rpx;
  width: 98%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 10rpx;
}

.block2 .barrage_table .content_tr {
  background: #225AAA;
}

.liveEcharts {
  width: 710rpx;
  margin: auto;
  margin-bottom: 20rpx;
  background: #194686;
  box-shadow: inset 0px 0px 28rpx 0px #2894de;
  border-radius: 8rpx;
  border: 6rpx solid #1e64da;
}

.liveEcharts .echarts_title {
  font-size: 28rpx;
  line-height: 40rpx;
  vertical-align: middle;
  padding-top: 70rpx;
  padding-left: 40rpx;
  color: #ffffff;
}

.liveEcharts .echarts_title::before {
  content: '';
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  background: #f4d229;
  border-radius: 4rpx;
  margin-right: 12rpx;
  vertical-align: middle;
}

.liveEcharts .operation {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 80%;
  margin: auto;
  text-align: center;
  margin-top: 60rpx;
  margin-bottom: 30rpx;
}

.liveEcharts .operation view {
  width: 92rpx;
  height: 43rpx;
  border-radius: 21rpx;
  border: 1rpx solid #29f4f1;
  font-size: 14rpx;
  line-height: 45rpx;
  color: #29F4F1;
}

.liveEcharts .operation .active {
  background: #157991;
  color: #ffffff;
}

.otherShadow {
  background: #0a2751;
  box-shadow: inset 0px 0px 28px 0px #178bda;
}