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: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: 72rpx;
					height: 72rpx;	
					
					text{
						font-size: 72rpx;
					}
					image{
						width: 100%;
						height: 100%;
					}
				}
				.addTxt{
					margin-top: 20rpx;
					font-weight: 600;
					color:white;
				}
			}
		}
			.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;
							}
							
							
						}
						.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{
		// position: relative;
		.preloader_1 {
			position: absolute;
			margin-right: 65px;
			top:50%;
			width: 100%;
			left:35%;
			transform: translateX(0%);
			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;
			}
		}
		
		.tip{
			position: absolute;
			bottom: 25%;
		    width: 100%;
		    text-align: center;
		}
		.progress{
			margin-top:150%;
			// position: absolute;
			// z-index: 9;
			// bottom: 35%;
			// left: 10%;
		}
	}