logpm/pages/index/index.vue

<template>
	<u-navbar 
	title="工作台"
	placeholder
	border=true
	leftIcon=''
	></u-navbar>
	<view class="mabox" v-for="item in tablist">
		<view class="boxtitl">
			{{item.name}}
		</view>
		<view class="minboxlist">
			<view @click="gopathpage(ite.router)" v-for="ite in item.minilist">
				<image mode="widthFix" :src="ite.icon"></image>
				<view>{{ite.name}}</view>
			</view>
		</view>
	</view>
	<!-- #ifdef APP -->
	<saomiao></saomiao>
	<saomiao1></saomiao1>
	<saomiao2></saomiao2>
	<saomiao3></saomiao3>
	<saomiao4></saomiao4>
	<!-- #endif -->
	<!-- <tiplist></tiplist> -->
	<!-- <Tabber checkstate='home'></Tabber> -->
</template>

<script lang="ts" setup>
	import { listtype } from '@/interfaces/home/index'
	// import Tabber from '@/compoment/Tabber/Tabber.vue'
	import { reactive , toRefs } from "vue";
	let details=reactive<listtype>({
		tablist:[
			// {
			// 	type:1,
			// 	name:'库内',
			// 	minilist:[
			// 		{
			// 			icon:'http://htys.oss-cn-chengdu.aliyuncs.com/htys/afb031efec7d2f8620ee68c71f87a80e.png',
			// 			name:'下架扫描',
			// 			router:'/pagesHome/pages/DownScan/DownScan',
			// 		},
			// 	]
			// },
			{
				type:1,
				name:'出库',
				minilist:[
					{
						icon:'http://htys.oss-cn-chengdu.aliyuncs.com/htys/afb031efec7d2f8620ee68c71f87a80e.png',
						name:'拣货扫描',
						router:'/pagesHome/pages/pickingScan/pickingScan',
					},
					{
						icon:'http://htys.oss-cn-chengdu.aliyuncs.com/htys/afb031efec7d2f8620ee68c71f87a80e.png',
						name:'自提扫描',
						router:'/pagesHome/pages/SelfPickupScan/SelfPickupScan',
					},
				]
			},
			{
				type:1,
				name:'配送',
				minilist:[
					{
						icon:'http://htys.oss-cn-chengdu.aliyuncs.com/htys/afb031efec7d2f8620ee68c71f87a80e.png',
						name:'装车扫描',
						router:'/pagesHome/pages/LoadingScan/LoadingScan',
					},
					{
						icon:'http://htys.oss-cn-chengdu.aliyuncs.com/htys/afb031efec7d2f8620ee68c71f87a80e.png',
						name:'签收扫描',
						router:'/pagesHome/pages/signinScan/signinScan',
					},
				]
			},
			{
				type:1,
				name:'离线上传',
				minilist:[
					{
						icon:'http://htys.oss-cn-chengdu.aliyuncs.com/htys/afb031efec7d2f8620ee68c71f87a80e.png',
						name:'离线上传',
						router:'/pagesHome/pages/OfflineUpload/OfflineUpload',
					},
				]
			},
		]
	})
	function gopathpage(path:string){
		uni.navigateTo({
			url:path
		})
	}
	const { tablist }=toRefs(details)
	
</script>

<style lang="scss">
	.mabox{
		display: flex;
		flex-direction: column;
		padding: 20upx 0;
		box-sizing: border-box;
		width: 686upx;
		margin: auto;
		background-color: #ffffff;
		margin-bottom: 20upx;
		margin-top: 10upx;
		border-radius: 10upx;
		box-shadow: 0rpx 2rpx 10rpx 0rpx #e2e2e380;
		.boxtitl{
			font-size: 34upx;
			font-weight: 500;
			margin-bottom: 10upx;
			// margin-left: 10upx;
			border-bottom: 1upx solid #EEEEEE;
			padding: 0upx 20upx;
			padding-bottom: 20upx;
			color: #092C4D;
		}
		.minboxlist{
			display: grid;
			grid-template-columns: 25% 25% 25% 25%;
			padding-top: 10upx;
			>view{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 10upx;
				>image{
					width: 60upx;
				}
				>view{
					font-size: 26upx;
				}
			}
		}
	}
</style>