wxmini/pages/channelDetails/channelDetails.wxss

/* pages/channelDetails/channelDetails.wxss */
.headInfo{
  width: 100vw;
  height: 260rpx;
  background: rgba(0, 1, 3, 0.8);
  filter: blur(0px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.headInfo .channelInfo{
  width: calc(100vw - 64rpx);
  height: 160rpx;
  display: flex;
  align-items: center;
}
.headInfo .channelInfo .pic{
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
}
.headInfo .channelInfo .pic image{
  width: 160rpx;
  height: 160rpx;
  border-radius: 18rpx;
}
.headInfo .channelInfo .textInfo{
  height: 160rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.headInfo .channelInfo .textInfo text:first-child{
  font-size: 48rpx;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 66rrpx;
}
.headInfo .channelInfo .textInfo text:last-child{
  font-size: 30rpx;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 38rpx;
  text-shadow: 0px 4rpx 8rpx rgba(0,0,0,0.5);
  opacity: 0.8;
}
.headInfo>image{
  position: absolute;
}
.headInfo .bgPic_1{
  height: 48rpx;
  top: 30rpx;
  right: 30rpx;
}
.headInfo .bgPic_2{
  height: 172rpx;
  bottom: -6rpx;
  left: 94rpx;
}
.headInfo .bgPic_3{
  width: 100vw;
  bottom: 0rpx;
  left:0rpx;
}
.list{
  padding: 0 6rpx;
  overflow: auto;
}
.list .info{
  margin: 40rpx 26rpx 0;
  width: 192rpx;
  float: left;
}
.list .info image{
  height: 192rpx;
  width: 192rpx;
  border-radius: 18rpx;
}
.list .info text{
  width: 192rpx;
  height: 76rpx;
  font-size: 30rpx;
  font-weight: 400;
  color: #353535;
  line-height: 38rpx;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}