<!-- 零货拣货 -->
<template>
	<div class="zeroStockPicking">
		<!-- 主页 -->
		<ul v-if="current==0">
			<li @click="current=1">
				<img src="@/assets/suoqu.png" />
				<h2>任务索取</h2>
			</li>
			<li @click="current=2">
				<img src="@/assets/queren.png" />
				<h2>任务确认</h2>
			</li>
		</ul>
		
		<!-- 任务索取 -->
		<task-for v-if="current==1" :current.sync="current"></task-for>
		
		<!-- 任务确认 -->
		<task-confirm v-if="current==2" :current.sync="current"></task-confirm>
	</div>
</template>

<script>
	import taskFor      from  './taskFor';
	import taskConfirm  from  './taskConfirm/index.vue';
export default {
	components:{ taskFor,taskConfirm },
	data(){
		return {
			current:0,
		}
	},	//data
	methods: {
	},	//methods
	created(){
		console.log('当前步骤current',this.current);
		
	},
}
</script>

<style scoped lang="less">
.zeroStockPicking {
	> ul { display: flex; justify-content: center; padding-top: 200px; padding-left: 0;
		li { width: 360px; height: 220px; border: 1px solid #e6e6e6; border-radius: 4px; background: #FFFFFF;
			text-align: center; padding-top:35px; box-sizing:border-box;
			h2 { font-size: 24px; color:#333333; letter-spacing: 0; font-weight: bold; margin-top: 20px;font-family: PingFangSC-Medium; }
			&:first-child { margin-right: 205px;}
			&:hover { box-shadow: 0 2px 6px -8px rgba(0,0,0,0.08), 0 4px 8px 0 rgba(0,0,0,0.05), 0 10px 28px 16px rgba(0,0,0,0.03);
						border: none; cursor: pointer;
					/* img { transform: rotate(360deg) scale(1.2);  } */
					h2  { color:#2b80ff; }
					}
			 h2 { transition: all 0.3s;  }
			img { animation: my 5s infinite; }
		}
	}
	::v-deep {
		.p-table-edit .ant-table-body~.ant-table-placeholder { min-height: 150px; }
	}
	@keyframes my {
		0% { position: relative; top:20px; transform: scaleX(1.2); }
		25% { position: relative; top:0px;transform: scaleX(1); }
		50% { position: relative; top:-20px; transform: scale(0.8) rotate(360deg) ;}
		75% { position: relative; top: 0px; transform: scaleX(1);  }
		100% { position: relative; top: 20px; transform: scaleX(1.2);  }
		
	}
}
</style>
