province-uniapp-qinghai-gsq/queue-monitor/pages/home/home.vue

<template>
	<view class="content">
		<view class="top"></view>
		
		<view>
			<view class="row">
				<view class="item schedule" @click="schedule">
					<view>远程调度</view>
					<view class="en">Remote Scheduling</view>
				</view>
				<view class="item car" @click="carManager">
					<view>车辆信息管理</view>
					<view class="en">Warehouse Inspection</view>
				</view>
			</view>
			<view class="row">
				<view class="item live" @click="live">
					<view>实时联动</view>
					<view class="en">Real Time Linkage</view>
				</view>
				<view class="item monitor" @click="monitor">
					<view>车辆动态监测</view>
					<view class="en">Dynamic Monitoring</view>
				</view>
			</view>
		</view>
		
		<tabbar></tabbar>
	</view>
</template>

<script>
	import { HOME_INDEX, CAR_INDEX, MONITOR_INDEX, LIVE_INDEX } from '@/config/constants'
	import tabbar from '@/pages/components/tabbar.vue'
	export default {
		components: {tabbar},
		data() {
			return {
				
			}
		},
		methods: {
			userType() {
				return getApp().globalData.userType
			},
			monitor() {
				getApp().globalData.tabIndex = MONITOR_INDEX
				uni.navigateTo({
					url: '/pages/monitor/monitor'
				})
			},
			schedule() {
				uni.navigateTo({
					url: '/pages/schedule/schedule'
				})
			},
			carManager() {
				getApp().globalData.tabIndex = CAR_INDEX
				uni.navigateTo({
					url: '/pages/carManager/carManager'
				})
			},
			live() {
				getApp().globalData.tabIndex = LIVE_INDEX
				uni.navigateTo({
					url: '/pages/video/video'
				})
			}
		}
	}
</script>

<style lang="scss">
.top {
	background: url('@/static/top.jpg');
	background-size: 100% 100%;
	height: 30vh;
	display: flex;
	flex-direction: column;
}

.row {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex: 1;
	
	.item {
		width: 100%;
		height: 100px;
		margin: 10px 5px 5px 5px;
		font-size: px;
		box-sizing: border-box;
		padding: 25px 10px;
		
		.en {
			font-size: 10px;
		}
	}
	.schedule {
		background: url('@/static/schedule.png') no-repeat;
		background-size: 100% 100%;
		color: #3387bf;
	}
	.car {
		background: url('@/static/car.png') no-repeat;
		background-size: 100% 100%;
		color: #455cb8;
	}
	.live {
		background: url('@/static/live.png') no-repeat;
		background-size: 100% 100%;
		color: #e17f64;
	}
	.monitor {
		background: url('@/static/monitor.png') no-repeat;
		background-size: 100% 100%;
		color: #00c090;
	}
}
</style>