digitalMen/pages/robot/index.scss

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

	view {
		box-sizing: border-box;
	}
	.container{
		padding-bottom:85rpx;
		.context{
			padding: 40rpx;
		}
		.createPro{
			border-radius: 15rpx;
			height: 306rpx;
			// aspect-ratio: 7/3;
			background: #999;
			display: flex;
			align-items: center;
			justify-content: center;
			.centerAdd{
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				.addIcon{
					width: 72rpx;
					height: 72rpx;	
					
					text{
						font-size: 72rpx;
					}
					image{
						width: 100%;
						height: 100%;
					}
				}
				.addTxt{
					margin-top: 20rpx;
					// color:#26b3a0 ;
					font-weight: 600;
				}
			}
		}
			.draft{
				margin-top: 30rpx;
				.draftLabel{
					font-weight: 600;
					margin-bottom: 30rpx;
				}
				.draftList{
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					justify-content: space-between;
					.itemBox{
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 30rpx;
						.top{
							width: 95%;
							border-radius: 15rpx;
							position: relative;
							aspect-ratio: 9/16;
							background: #ccc;
							z-index: 1;
							image{
								width: 100%;
								height:100%;
								border-radius: 15rpx;
							}
							
							.preloader_1 {
								position: absolute;
								margin-right: 65px;
								top:50%;
								width: 100%;
							
								left:50%;
								transform: translateX(-5%);
								background: red;
								width: 100%;
								z-index: 9;
							}
							
							.preloader_1 view {
								display: block;
								bottom: 0px;
								width: 9px;
								height: 5px;
								background: #9b59b6;
								position: absolute;
								animation: preloader_1 1.5s infinite ease-in-out;
							}
							
							.preloader_1 view:nth-child(2) {
								left: 11px;
								animation-delay: .2s;
							}
							
							.preloader_1 view:nth-child(3) {
								left: 22px;
								animation-delay: .4s;
							}
							
							.preloader_1 view:nth-child(4) {
								left: 33px;
								animation-delay: .6s;
							}
							
							.preloader_1 view:nth-child(5) {
								left: 44px;
								animation-delay: .8s;
							}
							
							@keyframes preloader_1 {
								0% {
									height: 5px;
									transform: translateY(0px);
									background: #9b59b6;
								}
							
								25% {
									height: 30px;
									transform: translateY(15px);
									background: #3498db;
								}
							
								50% {
									height: 5px;
									transform: translateY(0px);
									background: #9b59b6;
								}
							
								100% {
									height: 5px;
									transform: translateY(0px);
									background: #9b59b6;
								}
							}
						}
						.bottom{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 15rpx;
							// width: 320rpx;
							width: 95%;
							padding-right: 25rpx;
							.left{
								
							}
							.delIcon{
								width: 32rpx;
								height: 32rpx;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
	}

	.tipBox{
		.tip{
			position: absolute;
			bottom: 25%;
		width: 100%;
		text-align: center;
		}
	}