fanyunAi/pages/digitalMen/index.scss

page {
		// background: #f2f2f2;
	}
	
.leadBg{
		position: absolute;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, .69);
		// padding-left: 38rpx;
		// padding-right: 38rpx;
		
		display: flex;
		justify-content: center;
		.leadBox1{
			// margin-bottom: 138rpx;
			width: 646rpx;
			height: 842rpx;
			// background-image: url(@/static/szr_lead.png);
			background-size: cover;
			margin-top: 280rpx;
			position: relative;
			
			.nextBtn{
				width: 350rpx;
				height: 140rpx;
				// background: red;
				
				position: absolute;
				right: 0;
				bottom: 0rpx;
			}
		}
		.leadBox2{
			width: 634rpx;
			// width: 100%;
			height: 1226rpx;
			// background-image: url(@/static/index_lead2.png);
			background-size: cover;
			// margin-top: 400rpx;
			// position: relative;
			
			margin-left: -60rpx;
			position: absolute;
			
			bottom: 0;
			
			.nextBtn{
				width: 350rpx;
				height: 140rpx;
				// background: green;
				position: absolute;
				right: 0;
				bottom:330rpx;
			}
		}
	}	
	
	
	
	

	.pos{
		height: 45px;
	}
.pos2{
		height: 40px;
	}
	view {
		box-sizing: border-box;
	}
	.container{
		padding-bottom:85rpx;
		.context{
			// padding: 40rpx;
			
			// padding-left: 30rpx;
			// padding-right: 30rpx;
		}
		.addPd{
			padding-left: 10rpx;
			padding-right: 10rpx;
			margin-bottom: 26rpx;
			.createPro{
				border-radius: 15rpx;
				height: 336rpx;
				// aspect-ratio: 7/3;
				background:url('@/static/images/createBg.png') no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.centerAdd{
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					.addIcon{
						width: 64rpx;
						height: 64rpx;	
						
						text{
							font-size: 72rpx;
						}
						image{
							width: 100%;
							height: 100%;
						}
					}
					.addTxt{
						margin-top: 24rpx;
						font-size: 32rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 800;
						color: #FFFFFF;
					}
				}
			}
		}
		.swiperBox{
			height: 352rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16);
			// opacity: 0.07;
			// filter: blur(4px);
			
			padding-top: 48rpx;
			padding-left: 24rpx;
			.draftLabel{
				font-size: 32rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				color: #333333;
				margin-bottom: 24rpx;
				
				display: flex;
				align-items: center;
				.labelIcon{
					width: 32rpx;
					height: 30rpx;
					margin-right: 10rpx;
					margin-top: 5rpx;
				}
			}
			.swiperCard{
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				overflow-y: hidden;
				overflow-x: scroll;
				white-space: nowrap;
				.itemBox{
					width: 330rpx;
					height: 184rpx;
					// height: 210rpx;
				
					border-radius: 20rpx;
					// background-size: cover;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					flex-shrink: 0;
					margin-right: 30rpx;
					display: flex;
					justify-content: center;
					
					position: relative;
					.role{
						width:70%;
						height: 100%;
					}
					
					.barBox{
						box-sizing: border-box;
						position: absolute;
						bottom: 0;
						left: 0;
						width: 330rpx;
						height: 40rpx;
						background: rgba(0,0,0,0.22);
						border-radius:0 0 20rpx 20rpx;
						
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-left: 16rpx;
						padding-right: 16rpx;
						
						.name{
							font-size: 24rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: 500;
							color: #333333;
							color:white;
							
							width: 90%;
							overflow:hidden; 
							white-space: nowrap; 
							text-overflow: ellipsis;
						}
						text{
							
						}
					}
				}
			}
		
			.dotBox{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				
				padding-left: 16rpx;
				.i1{
					width: 26rpx;
					height: 6rpx;
					background: #207CF4;
					border-radius: 8rpx;
					margin-right: 5rpx;
				}
				.i2,.i3,.i4,.i5{
					width: 12rpx;
					height: 6rpx;
					background: #E9EDF3;
					border-radius: 3rpx;
					margin-right: 5rpx;
				}
			}
		}
		
			.draft{
				
				margin-top: 30rpx;
				.draftLabel{
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					color: #333333;
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
			.labelIcon{
				width: 32rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-top: 5rpx;
			}
				
				}
				.addpd2{
					
				}
				.draftList1{
					
					overflow: hidden;
					margin-left: 20rpx;
					.isLoginList{
						float: left;
						.item{
								padding: 7rpx 16rpx;
								margin-right: 30rpx;
								border-radius: 50rpx;
								background-color: #F4F4F4;
								font-family: PingFang-SC, PingFang-SC
						}
					}
		
				}
				.draftList{
					 display: flex;
					 margin-top: 20rpx;
					// justify-content:space-between;
					// flex-wrap: wrap;
					// background: red;
					
					// .itemBox:nth-of-type(1n){
					// 	margin-right: 5rpx;
					// }
					flex-wrap: wrap;
					// background-color: fuchsia;
					overflow: hidden;
					// margin-left: 20rpx;
					// .isLoginList{
					// 	float: left;
					
					// 	// .item{
					// 	// 		padding: 7rpx 16rpx;
					// 	// 		margin-right: 30rpx;
					// 	// 		border-radius: 50rpx;
					// 	// 		background-color: #F4F4F4;
					// 	// 		font-family: PingFang-SC, PingFang-SC
					// 	// }
					// }
					.itemBox{
						width: 50%;
						// background-color: red;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 30rpx;
						
						.top{
							height: 184rpx;
							width: 92%;
							border-radius: 15rpx;
							position: relative;
							aspect-ratio: 9/16;
							background: #ccc;
							z-index: 1;
							
							// background: red;
							image{
								width: 100%;
								height:100%;
								border-radius: 15rpx;
							}	
							
						}
						.bottom{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 15rpx;
							// width: 320rpx;
							width: 95%;
							padding-right: 15rpx;
							padding-left: 10rpx;
							
							
							.left{
								font-size: 24rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								-webkit-line-clamp: 2;
							}
							.delIcon{
								// width: 32rpx;
								// height: 32rpx;
								// image{
								// 	width: 100%;
								// 	height: 100%;
								// }
							}
						}
					}
				}
				
			}
	}

	.tipBox{
		// position: relative;
		
		.preloader_1 {
			position: absolute;
			margin-right: 130rpx;
			top:40%;
			z-index: 9;
		}
		.loadingBox{
			width: 110rpx;
			height: 10rpx;
			left:50%;
			transform: translateX(-50%);
		}
		
		.preloader_1 view {
			display: block;
			bottom: 0rpx;
			width: 18rpx;
			height: 10rpx;
			background: #9b59b6;
			position: absolute;
			animation: preloader_1 1.5s infinite ease-in-out;
		}
		
		.preloader_1 view:nth-child(2) {
			left: 22rpx;
			animation-delay: .2s;
		}
		
		.preloader_1 view:nth-child(3) {
			left: 44rpx;
			animation-delay: .4s;
		}
		
		.preloader_1 view:nth-child(4) {
			left: 66rpx;
			animation-delay: .6s;
		}
		
		.preloader_1 view:nth-child(5) {
			left:88rpx;
			animation-delay: .8s;
		}
		
		@keyframes preloader_1 {
			0% {
				height: 2rpx;
				transform: translateY(0rpx);
				background: #9b59b6;
			}
		
			25% {
				height: 30px;
				transform: translateY(30rpx);
				background: #3498db;
			}
		
			50% {
				height: 5px;
				transform: translateY(0rpx);
				background: #9b59b6;
			}
		
			100% {
				height: 5px;
				transform: translateY(0rpx);
				background: #9b59b6;
			}
		}
		
		.tip{
			position: absolute;
			bottom: 15%;
		    width: 100%;
		    text-align: center;
			font-size: 24rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			color: #237FED;
		}
		.progress{
			margin-top:150%;
			// position: absolute;
			// z-index: 9;
			// bottom: 35%;
			// left: 10%;
		}
	}