zhiyu_uni_duanju/pages/video/style/index.scss

.vip-center {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.vip-level-icon {
		margin-right: 10rpx;
		width: 80px;
		height: 30px;
	}

	.pay-box {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		padding: 0 20px;
		flex-wrap: wrap;
	}

	.top-lab {
		width: 40px;
		text-align: center;
		background-color: #ff5722;
		color: #fff;
		float: right;
		border-top: none;
		border-radius: 10px;
	}

	.pay-box-items {
		margin-top: 10px;
		width: 48%;
		flex-direction: column;
		border-radius: 10px;
		line-height: 25px;
		overflow: hidden;
	}

	.pay-box-items-txt {
		padding: 1rpx 13px;
	}

	.pay-box-items view text {
		line-height: 25px;
	}

	.pay-select {
		border: solid 1px #ff5722;
	}

	.select-text {
		background-color: #ff5722;
		color: #fff;
		height: 30px;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
	}

	.given-txt {
		height: 30px;
		border-top: solid 1rpx #9e9e9e1f;
	}

	.content {
		background: #000000;
	}

	.userInfo {
		position: absolute;
		z-index: 99;
		bottom: 30%;
		right: 10px;
		width: 100rpx;
		text-align: center;
		flex-direction: column;

	}

	.contentcd {
		background-color: rgba(255, 255, 255, .3);
		width: 720rpx;
		z-index: 99;
		position: absolute;
		bottom: 70rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 15rpx;
		border-radius: 8px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		color: #ffffff;
		margin: 0 auto;
	}

	.userName {
		color: #fff;
		font-size: 30rpx;
		color: #ffffff;
		margin: 0 6rpx;
	}

	.tsvideo {
		animation: showDivAni 2s 1;
	}

	@keyframes showDivAni {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
	
	
	.charge-wrapper {
		margin-top: 15px;
		width: 100%;
	
		.top {
			width: 100%;
			display: flex;
			align-items: center;
	
			.charge-title {
				font-size: 18px;
				font-weight: bold;
			}
	
			.charge-info {
				font-size: 15px;
				color: #868686;
				margin: 8px 0;
			}
	
			.charge-coin {
				display: flex;
				flex-direction: row;
	
				.ji {
					font-size: 18px;
				}
	
				.bi {
					font-size: 18px;
					color: $accent-color;
				}
			}
		}
	}
	
	.down {
		display: flex;
		flex-direction: row;
		width: 60px;
		height: 30px;
		line-height: 30px;
		margin-top: 5px;
		justify-content: center;
		align-items: center;
		align-content: center;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
	
		.down-text {
			font-size: 16px;
			color: #000;
		}
	
		.down-img {
			width: 35rpx;
			height: 35rpx;
			object-fit: contain;
		}
	}
	
	.ju-top {
	
		// background-color: ;
		.ju-top-title {
			font-size: 16px;
			font-weight: bold;
			color: #000;
			margin-top: 9px;
			height: 22px;
			margin-left: 20px;
			// width: '+ (windowWidth*0.6) +' px;
			overflow: hidden;
		}
	
		.ju-top-update {
			font-size: 12px;
			color: #000;
			margin-top: 9px;
			height: 22px;
			margin-left: 20px;
		}
	}
	
	.pop-my {
		background-color: #FFFFFF;
	}
	
	.scroll-my {
		height: fit-content;
	}
	
	.scroll-charge {
		height: 50vh;
	}
	
	.ju-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: start;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		// margin: 6rpx;
	
		.ju-content.active {
			background-color: #ff7f02;
		}
	
		.ju-content {
			flex-grow: 1;
			position: relative;
			border-radius: 12rpx;
			background-color: #f6f6f6;
			width: 31%;
			height: 25rpx;
			align-items: center;
			justify-content: center;
			padding: 45rpx 68rpx;
			margin: 6rpx;
	
			.lock-wrapper,
			.lock-wrapper-no {
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
				background-color: rgba(0, 0, 0, .3);
	
				.lock-img {
					position: absolute;
					left: 3rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 50rpx;
					height: 50rpx;
					margin-left: 20rpx;
				}
	
				.update-title {
					width: fit-content;
					height: fit-content;
					border-radius: 8rpx;
					font-size: 10px;
					padding: 6rpx;
					background-color: #868686;
					color: #fff;
				}
			}
	
			.lock-wrapper-no {
				background-color: #f6f6f6;
			}
	
			.title {
				font-size: 16px;
			}
		}
	}
	
	.utabs-top /deep/ .u-tabs {
		align-items: flex-start;
	}
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 80%;
		height: 130px;
		background-color: #fff;
		border-radius: 20px;
		.rect-text{
			font-size: 18px;
			font-weight: 500;
		}
		.rect-button{
			width: 70%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ff7f02;
			border-radius: 12px;
			.rect-button-text{
				color: #FFFFFF;
				font-size: 16px;
				font-weight: 600;
			}
		}
	}