renshou/topic/content/content.css

/* content.css */
page{background: #fff;padding: 30rpx 0;box-sizing: border-box;}
.title{font-size: 40rpx;color: #282828;font-weight: bold;line-height: 60rpx;padding: 0 30rpx;}
.det-sta{padding: 0 30rpx;margin-top: 20rpx;font-size: 24rpx;}
.sitename{color: var(--mina);}
.time{color: #999;margin-left: 15rpx;}
.time text{font-size: 28rpx;color: #333;margin-right: 23rpx;}
.content{font-size: 34rpx;color: #333;padding: 30rpx 0;line-height: 1.7;}
.con-vheight{max-height: 120vh;position: relative;overflow: hidden;}
.con-vheight::after{content: '';display: block;position: absolute;left: 0;right: 0;bottom: 0;height: 15vh;background: linear-gradient(rgba(255, 255, 255, 0), #fff);z-index: 5;}
.content video{width: 100%;height: 400rpx;object-fit:fill; margin-bottom: 20rpx;}
.content image{width: 100%;margin: 30rpx auto;}
._p{padding: 0 30rpx;}
.view-more{width: 230rpx;height: 70rpx;font-size: 30rpx;color: #999;margin: 30rpx auto 0;text-align: center;line-height: 70rpx;}
.bot{padding: 40rpx 35rpx 0;}
.sbanner{overflow: hidden;position: relative;}
.sbanner .swiper,.sbanner .swiper image{width: 100%;height: 160rpx;border-radius: 12rpx;overflow: hidden;}
.dots{position: absolute;left: 0;right: 0;bottom: 20rpx;align-items: center;justify-content: center;}
.dot{background: rgba(0,0,0,.5);width: 12rpx;height: 12rpx;border-radius: 6rpx;margin: 0 4rpx;}
.dot.active{width: 30rpx;background: #fff;}
.tits{font-size: 36rpx;color: #333;font-weight: bold;margin: 30rpx 0 0;}
.zxlist .li{padding: 40rpx 0;border-bottom: 1rpx solid #EBEBEB;}
.zximg{width: 230rpx;height: 150rpx;border-radius: 12rpx;margin-right: 23rpx;}
.zxtit{font-size: 30rpx;color: #333;line-height: 41rpx;height: 82rpx;}
.datas{font-size: 24rpx;color: #999;margin-top: 30rpx;}
.adContainer{margin: 30rpx 0 0;border-radius: 10rpx;overflow: hidden;}
.operate{padding: 30rpx 30rpx 50rpx;justify-content: space-between;font-size: 24rpx;color: #999;}
.zan image{width: 30rpx;height: 30rpx;margin-right: 15rpx;}
.zan.active{color: #108FFF;}
.share{font-size: 24rpx;color: #999;}
.share image{width: 30rpx;height: 30rpx;margin-right: 15rpx;}
.box{padding: 40rpx 30rpx 0;border-top: 20rpx solid #f9f9f9;}
.tit{font-size: 32rpx;color: #333;font-weight: bold;align-items: center;position: relative;padding-left: 18rpx;}
.tit::before{
	position: absolute;
	content: '';
	width: 8rpx;
	height: 36rpx;
	background: #27D699;
	border-radius: 50rpx 50rpx 50rpx 50rpx;
	opacity: 1;
	left: 0;
}
.pro{padding-bottom: 10rpx;}
.pro .li{padding: 30rpx 0;border-bottom: 1rpx solid #e5e5e5;}
.pro .li:last-child{border-bottom: none;}
.proimg{box-sizing: border-box;width: 210rpx;height: 210rpx;border-radius: 10rpx;margin-right: 20rpx;border: 2rpx solid #E5E5E5;}
.proname{font-size: 28rpx;color: #333;overflow : hidden;line-height: 36rpx;height: 72rpx;}
.infos {font-size: 24rpx;color: #999;margin: 10rpx 0 20rpx;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.Ninfos{padding: 16rpx 0;}
.ope{justify-content: space-between;align-items: center;}
.price{font-size: 25rpx;color: #FE0419;align-items: center;}
.price text{font-size: 36rpx;font-weight: bold;}
.price text.del{font-size: 24rpx !important;color: #999;text-decoration: line-through;margin-left: 15rpx;font-weight: normal !important;}
.price .vip{margin-left: 12rpx;color: var(--vip);border: 1rpx solid;padding: 0 8rpx 2rpx 8rpx;border-radius: 5px;}
.price .vip text{font-size: 24rpx;font-weight: normal;}
.btn{width: 150rpx;height: 50rpx;background: linear-gradient(90deg, rgba(254, 147, 76, 1) 0%, rgba(253, 58, 49, 1) 100%);font-size: 24rpx;color: #fff;text-align: center;line-height: 50rpx;border-radius: 25rpx;}
.rec .li{padding: 30rpx 0;border-bottom: 1rpx solid #EDEDED;align-items: center;}
.rec .li:last-child{border-bottom: none;}
.rec-tit{font-size: 34rpx;color: #333;font-weight: bold;line-height: 48rpx;height: 96rpx;margin-bottom: 25rpx;}
.author{font-size: 28rpx;color: #999;margin-right: 24rpx;}
.author image{width: 32rpx;height: 32rpx;border-radius: 2rpx;margin-right: 10rpx;}
.rec-time{font-size: 28rpx;color: #999;}
.rec-img{width: 218rpx;height: 152rpx;margin-left: 55rpx;border-radius: 10rpx;}

/* 广告 */
.banner{height: 200rpx;position: relative;padding: 30rpx;border-top: 20rpx solid #f9f9f9;}
.swiper{width: 100%;height: 200rpx;border-radius: 10rpx;}
.swiper image{width: 100%;height: 100%;border-radius: 10rpx;}
.dots{position: absolute;left: 50%;transform: translateX(-50%);bottom: 50rpx;z-index: 3;justify-content: center;}
.dot{width: 46rpx;height: 4rpx;background: rgba(255,255,255,.5);margin: 0 3rpx;}
.dot.active{background: #fff;}

.video{margin: 20rpx 30rpx 0;position: relative;}
.video video{width: 100%;height: 397rpx;border-radius: 15rpx;display: block;}
.video-play{position: absolute;top: 0;left: 0;right: 0;bottom: 0;justify-content: center;background: rgba(0,0,0,.5);border-radius: 15rpx;}
.video-play image{width: 82rpx;height: 82rpx;}
.imgbox{flex-wrap: wrap;margin-top: 20rpx;padding: 0 30rpx;}
.imgbox image{width: 222rpx;height: 222rpx;border-radius: 16rpx;margin: 0 12rpx 12rpx 0;}
.imgbox image:nth-child(3n){margin-right: 0;}

.end-note{
	font-size: 24rpx;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
	margin:50rpx 30rpx 55rpx;
}