H5_module/martial/content/index.css

/* index.css */
page{background: #f5f5f5;padding: 30rpx 0;box-sizing: border-box;}
.top-fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: #f5f5f5;
	z-index: 99;
}

.back {
	width: 30rpx;
	padding-left: 30rpx;
}

.back image {
	width: 18rpx;
	height: 32rpx;
	margin: auto;
}

.add-pop {
	width: 259rpx;
	height: 90rpx;
	background: #4C4C4C;
	border-radius: 9rpx 9rpx 9rpx 9rpx;
	opacity: 1;
	position: absolute;
	right: 10rpx;
	top: 60rpx;
	z-index: 98;
}

.add-pop-before {
	position: relative;
}

.add-pop::before {
	content: '';
	position: absolute;
	top: -22rpx;
	right: 28rpx;
	border-left: 12rpx solid transparent;
	border-right: 12rpx solid transparent;
	border-top: 12rpx solid transparent;
	border-bottom: 12rpx solid #4C4C4C;
}

.add-pop-li {
	padding: 20rpx 30rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: #FFFFFF;
}

.add-pop-li image {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
}
.ceng {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: #000000;
	opacity: 0;
	z-index: 98;
}

.title{font-size: 40rpx;color: #333;font-weight: bold;line-height: 60rpx;padding: 0 30rpx;}
.det-sta{padding: 0 30rpx;margin-top: 20rpx;font-size: 24rpx;line-height: 40rpx;}
.sort{font-size: 24rpx;color: #2A82FD;font-weight: 400;}
.sort-line{width: 1rpx;background-color: #EAEAEA;height: 21rpx;margin: 0 10rpx;}
.sitename{color: var(--mina);margin-right: 15rpx;}
.time{color: #999;}
.time text{font-size: 28rpx;color: #333;margin-right: 23rpx;}
.content{font-size: 34rpx;color: #333;padding: 30rpx;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;font-size: 28rpx;color: #666;}
.zan{margin-right: 20rpx;}
.zan image{width: 30rpx;height: 30rpx;margin-right: 15rpx;}
.zan.active{color: #108FFF;}
.share{font-size: 28rpx;color: #666;}
.share image{width: 30rpx;height: 30rpx;margin-right: 15rpx;}
.box{padding: 40rpx 30rpx 0;border-top: 20rpx solid #f9f9f9;}
.pro{
	background: #F7F8FA;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	padding: 20rpx 20rpx;
	margin: 30rpx 30rpx 20rpx;
	position: relative;
}
.pro .li{
	align-items: flex-start;
}
.proimg{
	width: 136rpx;
	height: 136rpx;
	margin-right: 20rpx;
	border-radius: 10rpx;
}
.proname{
	font-size: 26rpx;
	color: #333;
	line-height: 42rpx;
	height: 84rpx;
	margin-top: 10rpx;
}
.proprice{
	color: #ee4c53;
	font-size: 24rpx;
}
.ope{
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
}
.ope-btn{
	width: 94rpx;
	height: 46rpx;
	background: #F34F05;
	border-radius: 28rpx 28rpx 28rpx 28rpx;
	opacity: 1;
	justify-content: center;
	font-size: 24rpx;
	color: #FFFFFF;
}
.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;}
.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;}

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

.share-top image{width: 35rpx;height: 35rpx;}


.bottom-fixed{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 118rpx;
	z-index: 50;
	box-shadow: 0rpx 0rpx 15rpx 1rpx rgba(0,0,0,0.16);
}
.bottom-fixed-left{
	width: 161rpx;
	text-align: center;
	background-color: #fff;
	height: 118rpx;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #999999;
}
.bottom-fixed-btn{height: 118rpx;background: var(--main);font-size: 36rpx;color: #fff;text-align: center;line-height: 84rpx;justify-content: center;}

.guwen{margin: 80rpx 30rpx 0;box-shadow: 0 0 51rpx 0 rgba(152,137,136,0.2);border-radius: 20rpx;position: relative;padding: 34rpx 33rpx 34rpx 40rpx;}
.guwen-img{position: absolute;top: -24rpx;left: 0;width: 230rpx;height: 48rpx;}
.guwen-tit{font-size: 24rpx;color: #000;font-weight: bold;margin-bottom: 25rpx;}
.guwen-user{width: 120rpx;height: 120rpx;border-radius: 50%;margin-right: 20rpx;}
.guwen-name{font-size: 36rpx;color: #000;font-weight: bold;}
.guwen-tag{display: inline-block;height: 27rpx;border: 2rpx solid #2CCA73;border-radius: 14rpx;font-size: 16rpx;color: #06B252;font-weight: normal;padding: 0 9rpx;line-height: 27rpx;margin-top: 8rpx;}
.guwen-mobile{font-size: 28rpx;color: #000;font-weight: bold;margin-top: 10rpx;}
.guwen-ewm{font-size: 20rpx;color: #999;}
.guwen-ewm image{width: 135rpx;height: 135rpx;margin: 0 auto 10rpx;}
.guwen-edit{position: absolute;top: 0;right: 0;height: 40rpx;padding: 0 10rpx;background: var(--mina);border-radius: 0 20rpx 0 20rpx;font-size: 20rpx;color: #fff;z-index: 1;}
.guwen-edit image{width: 22rpx;height: 23rpx;margin-right: 7rpx;}


.bottom-info{
	padding: 0 30rpx;
}
.bottom-info-browse{
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
}
.bottom-info-logo{
	width: 62rpx;
	height: 62rpx;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	opacity: 1;
	margin-right: 10rpx;
}
.bottom-info-option{
	font-size: 24rpx;
	font-weight: 400;
	color: #5B698F;
	text-align: center;
}

.share-pop{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.6);z-index: 100;}
.share-pop image{width: 575rpx;height: 359rpx;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}