fanyunAi/pages/digitalMen/generate/index.scss

page {
		// background: #f2f2f2;
	}
	.pos{
		height: 45px;
	}

	view {
		box-sizing: border-box;
	}
	.u-textarea{
		min-height:400rpx;
	}
	.container{
		// padding-bottom:130rpx;
		.context{
			padding: 40rpx;
			padding-left: 0;
			padding-right: 0;
			padding-bottom: 0;
			.top{
				display: flex;
				justify-content: center;
			.videoBox1{
								width: 380rpx;
								aspect-ratio: 9/16;
								position: relative;
								.img16{
									width: 100%;
									height: 100%;
									position: absolute;
									z-index: 1;
								}
								.role{
									position: absolute;
									z-index: 2;
									height: 100%;
									width:100%;
									margin-left: 50%;
									transform: translateX(-50%);
									display: flex;
									align-items: flex-end;
									justify-content: center;
									image{
										width: 60%;
										height: 50%;
									}
								}
							}
							.videoBox2{
								height: 380rpx;
								aspect-ratio: 16/9;
								position: relative;
								.img16{
									width: 100%;
									height: 100%;
									position: absolute;
									z-index: 1;
								}
								.role{
									position: absolute;
									z-index: 9;
									height: 100%;
									width: 50%;
									margin-left: 50%;
									transform: translateX(-50%);
									display: flex;
									align-items: flex-end;
									image{
										width: 100%;
										height:80%;
									}
								}
							}
			}
			
			.centerMenuBar{
				display: flex;
				justify-content: space-between;
				height: 92rpx;
				background: linear-gradient(270deg, #207CF7 0%, #549DFF 100%);
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				margin-top: 30rpx;
				padding-left: 40rpx;
				padding-right: 40rpx;
				color: white;
				.barItem{
					display: flex;
					align-items: center;
					.left{
						width: 64rpx;
						height: 64rpx;
						// margin-right: 10rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.right{
						
					}
				}
			}
			.btnBox{
			padding: 0 40rpx;
			position: fixed;
			bottom: 0rpx;
			background: #fff;
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			border-top: 1px solid #ccc;
				.btn{
					background: #207CF7;
					color: #fff;
					width: 45%;
					height: 94rpx;
					border-radius: 15rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
				}
				.draft{
					background: #fff;
					border:2rpx solid  #207CF7;
					color: #207CF7;
				}
			}
		}
		
	}
	::v-deep .u-popup__content{
		border-radius: 15rpx;
	}
	
	.contentBox2{
		.toolBar{
			height: 100rpx;
			display: flex;
			align-items: center;
			border-radius: 15rpx 15rpx 0 0;
			.cancel{
				width: 10%;
				height: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 35rpx;
					height: 35rpx;
				}
			}
			.center{
				width: 80%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.confirm{
				width: 10%;
				height: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 40rpx;
					height: 35rpx;
				}
			}
			
		}
		.toolBar2{
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content:flex-end;
			border-radius: 15rpx 15rpx 0 0;
			.closeBtn{
				width: 44rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #999;
				margin-right: 30rpx;
				color: white;
				border-radius: 50%;
				// image{
				// 	width: 40rpx;
				// 	height: 35rpx;
				// }
			}
		}
		.content{
			.videoRatioBox{
				display: flex;
				justify-content: space-between;
				padding: 20rpx 60rpx;
				padding-bottom: 50rpx;
				.item{
					background: #ccc;
					width: 45%;
					height: 154rpx;
					border-radius: 10rpx;
					display: flex;
					
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.top{
						margin-bottom: 10rpx;
					}
					.bottom{	
					}
				}
			}
			
			.slider{
				margin-top: 0;
				width: 85%;
				margin-left: 50%;
				transform: translateX(-50%);
			}
			.sliderValue{
				text-align: center;
			}
			
			
			// 声音
			.filterBox{
				display: flex;
				.tabList{
					width: 90%;
					overflow-x: scroll;
					white-space: nowrap;
					padding: 0 20rpx;
					.item1{
						padding: 10rpx 30rpx;
						display: inline-block;
						margin-right: 20rpx;
						border-radius: 10rpx;
						background:#ccc ;
					}
					.tabActive{
						background:#207CF7;
						color: white;
					}

				}
				.filterBtn{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 10%;
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
				
			}
				
			.filterConList2{
				padding: 0 20rpx;
				.pictureBox{
					padding-top: 30rpx;
					padding-bottom: 50rpx;
					display: flex;
					flex-wrap: wrap;
					.sel{
						border:6rpx solid #207CF7;
						padding: 5rpx;
					}
					image{
						width: 128rpx;
						height: 176rpx;
						margin:10rpx  25rpx;
					}
					.color{
						width: 128rpx;
						height: 176rpx;
						margin:10rpx  30rpx;
					}
				}
				
				}
			
			.filterConList{
				display: flex;
				padding-top: 30rpx;
				flex-wrap: wrap;
				min-height: 500rpx;
				max-height: 500rpx;
				overflow-y: scroll;
				.item{
					width: 128rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 0 25rpx;
					margin-bottom: 20rpx;
						image{
							width: 128rpx;
							height: 128rpx;
							border-radius: 50%;
						}
						.name{
							margin-top: 10rpx;
							
						}
				}
				.sel{
					border:6rpx solid #207CF7;
					padding: 5rpx;
				}
			}
			
			
			.scenList{
				// background: #207CF7;
				display: flex;
				flex-wrap: wrap;
				padding:0 40rpx;
				margin-bottom: 20rpx;
				.item{
					background: #ccc;
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
				}
			}
			.sexList{
				// background: #207CF7;
				display: flex;
				flex-wrap: wrap;
				padding:0 40rpx;
				margin-bottom: 20rpx;
				.item{
					background: #ccc;
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
				}
			}
			.ageList{
				display: flex;
				flex-wrap: wrap;
				padding:0 40rpx;
				margin-bottom: 20rpx;
				.item{
					background: #ccc;
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
				}
			}
			.active{
				background: #207CF7!important;
				color:white;
			}
			
			.filterBtn2{
				color: white;
				background: #207CF7;
				height: 94rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 15rpx;
				margin-bottom: 50rpx;
				width: 670rpx;
				margin-left: 50%;
				transform: translateX(-50%);
			}

		}
	}
	
	.contentBox{
	
		.toolBar{
			height: 100rpx;
			display: flex;
			align-items: center;
			border-radius: 15rpx 15rpx 0 0;
			.cancel{
				width: 10%;
				height: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 35rpx;
					height: 35rpx;
				}
			}
			.center{
				width: 80%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.confirm{
				width: 10%;
				height: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 40rpx;
					height: 35rpx;
				}
			}
			
		}
		.toolBar2{
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content:flex-end;
			border-radius: 15rpx 15rpx 0 0;
			.closeBtn{
				width: 44rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #999;
				margin-right: 30rpx;
				color: white;
				border-radius: 50%;
				// image{
				// 	width: 40rpx;
				// 	height: 35rpx;
				// }
			}
		}
		.content{
			.videoRatioBox{
				display: flex;
				justify-content: space-between;
				padding: 20rpx 60rpx;
				padding-bottom: 50rpx;
				.item{
					background: #ccc;
					width: 45%;
					height: 154rpx;
					border-radius: 10rpx;
					display: flex;
					
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.top{
						margin-bottom: 10rpx;
					}
					.bottom{	
					}
				}
			}
			
			.slider{
				margin-top: 20%;
				width: 85%;
				margin-left: 50%;
				transform: translateX(-50%);
			}
			.sliderValue{
				text-align: center;
			}
			
			
			// 声音
			.filterBox{
				display: flex;
				.tabList{
					width: 90%;
					overflow-x: scroll;
					white-space: nowrap;
					padding: 0 20rpx;
					.item1{
						padding: 10rpx 30rpx;
						display: inline-block;
						margin-right: 20rpx;
						border-radius: 10rpx;
						background:#ccc ;
					}
					.tabActive{
						background:#207CF7 ;
						color: white;
					}
	
				}
				.filterBtn{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 10%;
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
				
			}
				
			.filterConList2{	
				
				.pictureBox{
					padding-top: 30rpx;
					padding-bottom: 50rpx;
					display: flex;
					flex-wrap: wrap;
					.sel{
						border:6rpx solid #207CF7;
						padding: 5rpx;
					}
					image{
						width: 128rpx;
						height: 176rpx;
						margin:10rpx  30rpx;
					}
					.color{
						width: 128rpx;
						height: 176rpx;
						margin:10rpx  30rpx;
					}
				}
				
				}
				
				// 声音弹框样式
			
			.filterConList{
				display: flex;
				padding-top: 30rpx;
				flex-wrap: wrap;
			
				.item{
					width: 25%;
					display: flex;
					// flex-direction: column;
					// justify-content: center;
					// align-items: center;
					margin: 0 30rpx;
					margin-left: 30rpx;
					margin-bottom: 20rpx;
					.avtarBox{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						image{
							width: 128rpx;
							height: 128rpx;
							border-radius: 50%;
						}
						.name{
							margin-top: 10rpx;
						}
					}
					.playBox{
						color:orange;
						display: flex;
						align-items:flex-end;
						// width:250rpx;
						// background: red;
					}
				}
				.sel{
					border:6rpx solid #207CF7;
					padding: 5rpx;
				}
			}
			
			
			.scenList{
				// background: #207CF7;
				display: flex;
				flex-wrap: wrap;
				padding:0 40rpx;
				margin-bottom: 20rpx;
				.item{
					background: #ccc;
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
				}
			}
			.sexList{
				// background: #207CF7;
				display: flex;
				flex-wrap: wrap;
				padding:0 40rpx;
				margin-bottom: 20rpx;
				.item{
					background: #ccc;
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
				}
			}
			.ageList{
				display: flex;
				flex-wrap: wrap;
				padding:0 40rpx;
				margin-bottom: 20rpx;
				.item{
					background: #ccc;
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
				}
			}
			.active{
				background: #207CF7!important;
				color:white;
			}
			
			.filterBtn2{
				color: white;
				background: #207CF7;
				height: 94rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 15rpx;
				margin-bottom: 50rpx;
				width: 670rpx;
				margin-left: 50%;
				transform: translateX(-50%);
			}
	
		}
	}
	
	::v-deep uni-slider .uni-slider-handle-wrapper{
		height: 15rpx;
	}
	::v-deep .tn-custom-nav-bar__bar--fixed{
		z-index:999!important;
	}

	
	
	.robotNameBox{
		padding: 20rpx 10rpx;
		.name{
			margin-bottom: 10rpx;
			margin-top: 20rpx;
		}
	}
	
	::v-deep .is-focused{
		border-color: #207CF7!important;
	}
	
	.selCon{
		margin-top: 30rpx;
		padding-left: 30rpx;
		
		display: flex;
		justify-content: space-around;
		.item{
			display: flex;
			align-items: center;
		
			.label{
				color:#999
			}
			.con{
				display: flex;
				align-items: center;
				padding-top: 5rpx;
				
				// font-weight: 600;
			}
			.conImg{
				width:50rpx;
				height:50rpx;
				margin-left: 20rpx;
				
				border-radius: 50%;
			}
		}
	}
	
	
	
	.nameDes{
		margin-top:  10rpx;
		font-size: 24rpx;
		color: #999;
		text-align: center;
		width: 132rpx;
		
		height: 65rpx;
		text-overflow: ellipsis;
		 display: -webkit-box;     /* 弹性盒旧式语法 */
		  -webkit-box-orient: vertical;    /* 经过个人实测，vertical或horizontal都没问题，只是必须设置该属性 */
		  -webkit-line-clamp: 2;    /* 限制两行 */
		  overflow: hidden;
	}
	
	.selTxt{
		color:#207CF7 !important;
		font-weight: 600;
	}
	
	
	
	.audioList{
		.audioListBox{
			display: flex;
			
			.con{
				word-break: break-all;
				word-wrap: break-word;
				width: 90%;
			}
			.rightIcon{
				margin-left: 10rpx;
			}
		}
	}
	
	
	// 自定义背景图
	.defBox{
		display: flex;
		width: 100%;
		// height: 100%;
		// align-items: center;
		padding-top: 50rpx;
		.type1{
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.referImg{
				display: flex;
				// flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 50%;
				// .ig1{
					
				// }
				// .ig2{
				// 	width: 100rpx;
				// }
			}
			
			
			.des{
				line-height: 40rpx;
				.lab{
					font-weight: 600;
					font-size:40rpx;
				}
			}
			.btn{
				margin-top: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80%;
				height:100rpx;
				background: #207CF7;
				color: white;
				border-radius: 15rpx;
			}
		}
	}
	
	.bgBox{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	
	.audioOrTxtChange{
		display: flex;
		padding-left: 20rpx;
		.item{
			height: 50rpx;
			margin-right: 20rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.item1{
			border: 1rpx solid #207CF7;
			border-radius: 10rpx;
			color:#207CF7;
			background: #207CF7;
			color: white;
		}
		.item2{
			border: 1rpx solid #999;
			border-radius: 10rpx;
			color:#999;
			background: #999;
			color: white;
		}
	}
	
	
	.uploadVideoBtn{
		margin-top: 50rpx;
		margin-bottom: 10rpx;
		width: 70%;
		border:1rpx solid #207CF7;
		
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 15rpx;
		color: #207CF7;
		margin-left: 50%;
		
		transform: translateX(-50%);
	}