H5_module/martial/video/index.css

/* index.css */
page{background: #fff;}

.top-fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: #F8F8F8;
	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;
}

.content{background: #fff;padding: 25rpx;}
.tit{font-size: 36rpx;color: #000;font-weight: bold;}
.tit text{font-size: 22rpx;color: #999;font-weight: normal;}
.copy{width: 133rpx;height: 48rpx;border: 1rpx solid var(--main);font-size: 24rpx;color: var(--main);text-align: center;line-height: 48rpx;border-radius: 25rpx;font-weight: normal;}
.con{margin-top: 30rpx;font-size: 30rpx;color: #000;margin-bottom: 24rpx;white-space: pre-wrap;line-height: 46rpx;}
.imgbox{margin-top: 30rpx;flex-wrap: wrap;}
.imgs{width: 210rpx;height: 210rpx;margin: 0 12rpx 12rpx 0;position: relative;}
.imgbox .imgs:nth-child(3n){margin-right: 0;}
.img{width: 100%;height: 100%;}
.gou{position: absolute;top: 10rpx;right: 10rpx;width: 36rpx;height: 36rpx;}

.content-item-bottom{
	justify-content: space-between;
	margin-top: 20rpx;
}
.content-item-bottom-sort{
	font-size: 24rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #2A82FD;
}
.content-item-bottom-line{
	width: 1rpx;
	height: 21rpx;
	opacity: 1;
	background-color: #EAEAEA;
	margin: 0 10rpx;
}
.content-item-bottom-time{
	font-size: 24rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #999999;
}

.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;}


/* 跳转小程序提示弹窗 */
.ceng2{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);z-index: 99;}
.code-pop{
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width: 574rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	z-index: 100;
	font-size: 32rpx;
	/* background: linear-gradient(180deg, #85CFFF 0%, #FFFFFF 40%); */
}
.code-bg{
	width: 164rpx;
	height: 106rpx;
	margin:101rpx auto 27rpx;
}
.code-title{
	padding:0rpx 30rpx 0;
	text-align: center;
	font-weight: 500;
	font-size: 40rpx;
}
.code-text{
	padding:20rpx 30rpx 69rpx;
	text-align: center;
	font-weight: 400;
	color: #999;
	line-height: 44rpx;
	font-size: 24rpx;
}
.code-content image{
	width: 365rpx;
	height: 365rpx;
	margin: 50rpx auto;
}
.code-btn{
	padding:0 25rpx;
	text-align: center;
	font-size: 28rpx;
}
.pop-scroll{
	max-height: 750rpx;
	overflow: scroll;
	padding: 30rpx;
}
.pop-scroll::-webkit-scrollbar {
	display: none;
}
.code-tx{
	margin: 0 30rpx 40rpx;
	font-size: 28rpx;
	justify-content: center;
	align-items: center;
	color: #999999;
	line-height: 44rpx;
}
.code-tx image{
	width: 29rpx;
	height: 29rpx;
	margin-right: 10rpx;
	margin-top: 6rpx;
}
.code-btn-qr{
	width: 371rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #2A82FD;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	opacity: 1;
	font-size: 28rpx;
	font-weight: bold;
	color: #FFFFFF;
	margin:auto;
	margin-bottom:20rpx;
}
.code-btn-qx{
	width: 371rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #fff;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	opacity: 1;
	font-size: 28rpx;
	font-weight: 400;
	color: #999;
	margin:auto;
	margin-bottom:20rpx;
}

.video{
	width: 100%;
	height: 750rpx;
	position: relative;
}
.video video{
	width: 100%;
	height: 100%;
}
.video image{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
}
.video .video-play{
	width: 109rpx;
	height: 126rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: unset;
}

.pro{
	background: #F7F8FA;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	padding: 10rpx;
	margin: 30rpx auto 20rpx;
}
.proimg{
	width: 78rpx;
	height: 78rpx;
	margin-right: 10rpx;
}
.proname{
	font-size: 26rpx;
	color: #1A1F30;
}
.ope-btn{
	width: 140rpx;
	height: 56rpx;
	background: #F34F05;
	border-radius: 28rpx 28rpx 28rpx 28rpx;
	opacity: 1;
	justify-content: center;
	font-size: 24rpx;
	color: #FFFFFF;
}

.bottom-info{
	padding: 30rpx 30rpx;
	background-color: #fff;
}
.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%);}