<template>
	<view class="page">
		<navbar 
		title="工种"
		leftClick @leftClick="$utils.navigateBack" />
		
		<view class="content"
		>
			<view class="grid">
				<uv-grid :border="false"
				:col="5">
					<uv-grid-item 
					@click="$utils.navigateTo(`/pages_order/work/workList?typeId=${item.id}&title=${item.name}`)"
					v-for="(item,index) in jobTypeList"
					:key="index">
						<image class="grid-icon" :src="item.image" mode="aspectFill"></image>
						<text class="grid-text">{{item.name}}</text>
					</uv-grid-item>
				</uv-grid>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState([
				'userInfo', 
				'role', 
				'banner',
				'jobTypeList',
				'UserExtensionInfo',
			]),
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.page{
	.content{
		position: relative;
		margin: 30rpx;
		.grid{
			padding-bottom: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			// border-top-left-radius: 60rpx;
			// border-top-right-radius: 60rpx;
			// box-shadow: 0 -10rpx 10rpx 10rpx #00000013;
			.grid-icon{
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
				margin-top: 30rpx;
			}
			.grid-text{
				font-size: 24rpx;
				font-weight: 900;
			}
		}
		
	}
}
</style>
