/* 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; }