.member-head, .see-back, .live-list { background: #fff; text-align: left; } .member-head { display: flex; padding: 16rpx; margin-bottom: 16rpx; } .member-head .left { padding: 16rpx; display: flex; flex: 1; flex-direction: column; } .member-head .left .name-box, .member-head .left .describe { margin-bottom: 16rpx; display: flex; } .member-head .left .describe { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .member-head .left .name { font-size: 32rpx; font-weight: bold; display: inline-block; max-width: 304rpx; } .member-head .left .fans { color: #ff6e00; font-size: 24rpx; border-radius: 30rpx; border: solid 2rpx #ff6e00; padding: 6.4rpx 16rpx; margin-left: 16rpx; } .member-head .left .describe { font-size: 24rpx; color: #666; } .member-head .left .focus, .member-head .left .unfocus { width: 168rpx; line-height: 48rpx; color: #fff; background-color: #f60426; border-radius: 30.016rpx; text-align: center; font-size: 30rpx; font-weight: bold; } .member-head .left .unfocus { background-color: #666; } .member-head .right image { width: 202.016rpx; height: 202.016rpx; border-radius: 50%; } .live-list { padding: 16rpx 25.6rpx 0 25.6rpx; } .live-item { padding: 16rpx 0; border-bottom: 2rpx solid #eee; } .live-item .title { font-weight: bold; margin-bottom: 16rpx; } .live-item .red { border-radius: 30rpx; text-align: center; color: #fff; background-color: #f51534; font-size: 24rpx; padding: 4.8rpx 12.8rpx; margin-right: 16rpx; } .live-item .purple { border-radius: 30rpx; text-align: center; color: #fff; background-color: #8415f5; font-size: 24rpx; padding: 4.8rpx 12.8rpx; margin-right: 16rpx; } .live-item .gray { color: #999; font-size: 24rpx; } .live-item .red-word { font-size: 24rpx; color: #f51534; display: flex; } .live-item .red-word .button { flex: 0 0 128rpx; border: 2rpx solid #f51534; border-radius: 30rpx; text-align: center; } .living-box { background: #fff; margin: 0 25.6rpx; padding-bottom: 32rpx; } .tabs-nav { display: flex; align-items: center; justify-content: space-around; } .back-head { display: flex; font-size: 32rpx; font-weight: bold; padding: 16rpx 25.6rpx; border-bottom: 2px solid #fff; } .back-head .span { display: inline-block; align-self: center; } .back-head icon { color: #ff6e00; font-size: 60rpx; height: 60rpx; line-height: 60rpx; } .active-tabs { border-bottom: 2px solid #f51534; } .back-head .icon-extension_video { font-size: 48rpx; color: #018cfb; } .living-item { position: relative; margin: 0 auto 16rpx auto; } .living-item .bg { width: 700rpx; height: 320rpx; border-radius: 10.016rpx; } .living-item .top { position: absolute; top: 16rpx; left: 16rpx; color: #fff; display: flex; width: 96%; } .living-item .top .left { background-color: rgba(0, 0, 0, 0.4); padding: 4.8rpx 12.8rpx; border-radius: 20rpx 0rpx 20rpx 0rpx; font-size: 24rpx; } .living-item .top .time { flex: 1; text-align: right; line-height: 40rpx; padding: 4.8rpx 12.8rpx; } .living-item .bottom { width: 95%; position: absolute; bottom: 19.2rpx; left: 16rpx; font-weight: bold; font-size: 32rpx; color: #fff; } .video-list { background-color: #fbfbfb; } .video-list .banner { width: 100%; /* height: 320rpx; */ } .video-list .load { text-align: center; } .video-list .load image { width: 90rpx; } .video-list { margin: 16rpx; text-align: left; } .video-list .ul { vertical-align: top; display: inline-block; width: 49%; /* display: flex; */ /* flex-wrap: wrap; */ } .video-list .Mright { margin-right: 2%; } .video-list .li { position: relative; display: flex; flex-direction: column; background-color: #fff; overflow: hidden; border-radius: 12rpx; margin-bottom: 16rpx; } .video-list .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .video-list .play image { width: 100%; height: 100%; } .video-list .li:nth-child(odd) { /* margin-right: 16rpx; */ } .video-list .p { font-size: 28rpx; color: #333; font-weight: bold; padding: 10rpx 20rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .video-list .video-img { width: 100%; height: auto; } .video-list .video-img image { width: 100%; height: 100%; } .video-list .people { display: flex; padding: 10rpx; } .video-list .people .img { flex: 0 0 48rpx; width: 48rpx; height: 48rpx; border-radius: 50%; margin: 0 10rpx; } .video-list .people .img image { width: 100%; height: 100%; } .video-list .people .span { flex: 1; line-height: 48rpx; margin: 0 10rpx; font-size: 24rpx; color: #8c8c8c; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }