digitalMen/pages/robot/generate/index1.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;
					display: flex;
					align-items: bottom;
					.img16{
						width: 100%;
						height: 100%;
					background-size: 100% 100%;
					background-repeat:no-repeat;
					.role{
						position:relative;
						z-index: 9;
						width: 50%;
						height: 100%;
						margin-left: 50%;
						transform: translateX(-50%);
					}
					}
				}
				.videoBox2{
					height: 380rpx;
					aspect-ratio: 16/9;
					.img16{
						width: 100%;
						height: 100%;
						background-size: 100% 100%;
						.role{
							position:relative;
							z-index: 9;
							width: 50%;
							height: 100%;
							margin-left: 50%;
							transform: translateX(-50%);
						}
					}	
				}
			}
			
			.centerMenuBar{
				display: flex;
				justify-content: space-between;
				height: 96rpx;
				background: linear-gradient(to right,#06C68E,#02BCCD);
				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: #26b3a0;
					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  #26b3a0;
					color: #26b3a0;
				}
			}
		}
		
	}
	::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:#26b3a0 ;
						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 #26b3a0;
						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;
				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 30rpx;
					margin-bottom: 20rpx;
					image{
						width: 128rpx;
						height: 128rpx;
						border-radius: 50%;
					}
					.name{
						margin-top: 10rpx;
					}
				}
				.sel{
					border:6rpx solid #26b3a0;
					padding: 5rpx;
				}
			}
			
			
			.scenList{
				// background: #26b3a0;
				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: #26b3a0;
				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: #26b3a0!important;
				color:white;
			}
			
			.filterBtn2{
				color: white;
				background: #26b3a0;
				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:#26b3a0 ;
						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 #26b3a0;
						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: 128rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 0 30rpx;
					margin-bottom: 20rpx;
					image{
						width: 128rpx;
						height: 128rpx;
						border-radius: 50%;
					}
					.name{
						margin-top: 10rpx;
					}
				}
				.sel{
					border:6rpx solid #26b3a0;
					padding: 5rpx;
				}
			}
			
			
			.scenList{
				// background: #26b3a0;
				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: #26b3a0;
				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: #26b3a0!important;
				color:white;
			}
			
			.filterBtn2{
				color: white;
				background: #26b3a0;
				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: #26b3a0!important;
	}
	
	.selCon{
		margin-top: 30rpx;
		padding-left: 30rpx;
		
		display: flex;
		justify-content: space-around;
		.item{
			display: flex;
			align-items: center;
		
			.label{
			}
			.con{
				display: flex;
				align-items: center;
				padding-top: 5rpx;
			}
			.conImg{
				width:50rpx;
				height:50rpx;
				margin-left: 20rpx;
			}
		}
	}
	
	
	
	.nameDes{
		margin-top:  10rpx;
		font-size: 24rpx;
		color: #999;
		text-align: center;
		
		height: 65rpx;
		text-overflow: ellipsis;
		 display: -webkit-box;     /* 弹性盒旧式语法 */
		  -webkit-box-orient: vertical;    /* 经过个人实测，vertical或horizontal都没问题，只是必须设置该属性 */
		  -webkit-line-clamp: 2;    /* 限制两行 */
		  overflow: hidden;
	}
	
	.selTxt{
		color:#26b3a0 !important;
		font-weight: 600;
	}
	
	
	
	.audioList{
		.audioListBox{
			display: flex;
			
			.con{
				word-break: break-all;
				word-wrap: break-word;
				width: 90%;
			}
			.rightIcon{
				margin-left: 10rpx;
			}
		}
	}