<template name="handfuc">
	<view>
		<scroll-view scroll-y class="page">
			<view class="cu-card case no-card padding-0">
				<view class="image">
					<image src="/static/FunctionBg.jpg" mode="widthFix"></image>
					<view class="title"> 
						<text style="float: left;margin-left:20px;font-size: 18px; color: #fff;">WMS手持操作终端</text>
					</view>
				</view>
			</view>
			<view class="nav-list margin-top">
				<navigator hover-class="none" 
				:url="'/pages/handfuc/' + item.name" class="nav-li" 
				navigateTo :class="'bg-'+item.color"
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" 
				 v-for="(item,index) in elements" :key="index">
					<view class="nav-title">{{item.title}}</view>
					<view class="nav-name">{{item.name}}</view>
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</navigator>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "handfuc",
		data() {
			return {
				elements: [
					{
						title: '单据组盘',
						name: 'bill',
						color: 'cyan',
						cuIcon: 'edit'
					},
					{
						title: '出库确认',
						name: 'outConfirm',
						color: 'brown',
						cuIcon: 'roundcheck'
					},
					
					// {
					// 	title: 'AGV搬运 ',
					// 	name: 'aGV',
					// 	color: 'orange',
					// 	cuIcon: 'fork'
					// },
					{
						title: '空托盘入库',
						name: 'palletIn',
						color: 'blue',
						cuIcon: 'pullright'
					},
					{
						title: '空托盘下架',
						name: 'palletOut',
						color: 'green',
						cuIcon: 'pullleft'
					},
					{
						title: '盘点确认',
						name: 'inventoryConfirm',
						color: 'red',
						cuIcon: 'roundcheck'
					},
					{
						title: '托盘解绑',
						name: 'palletDetailUnBind',
						color: 'red',
						cuIcon: 'roundcheck'
					}
				],
			};
		},
		onShow() {
			console.log("success")
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
	.title{
		line-height: 54px;
		position: absolute;
		bottom: 4px;
		left: 50%;
		margin-left: -47%;
		/* background-image: url(/static/title.png); */
		background-size: cover;
		width: 94%;
		height: 50px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

</style>
