parking_operation/pages/index/index.vue

<template>
	<view class="content">
		<view class="content-header">
			<view>智慧停车运营系统</view>
		</view>
		<view class="content-main">
			<view class="content-main-item" @click="jumpPage('pages/orderRecords/orderRecords')">
				<view class="t1">
					<u-icon name="./../../static/images/order-icon.png" color="#fff" size="65"></u-icon>
				</view>
				<view class="name">订单记录</view>
			</view>
			<view class="content-main-item" @click="jumpPage('pages/operationOverview/operationOverview')">
				<view class="t2">
					<u-icon name="./../../static/images/running-icon.png" color="#fff" size="65"></u-icon>
				</view>
				<view class="name">运营概况</view>
			</view>
			<view class="content-main-item" @click="jumpPage('pages/patrolManagement/patrolManagement')">
				<view class="t3">
					<u-icon name="./../../static/images/mana-icon.png" color="#fff" size="65"></u-icon>
				</view>
				<view class="name">巡检管理</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onShow() {
			uni.getStorage({
				key: 'Token',
				success: function(res) {
					console.log(res.data);
				},
				error: function(err) {
					console.log(err)
				},
				complete: (e) => {
					console.log(e)
					if (e.data) {
						
					} else {
						uni.$u.route({
							url: 'pages/login/login'
						})
					}
				}
			});
		},
		methods: {
			jumpPage(url) {
				uni.$u.route({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		&-header {
			height: 400rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 64rpx;
			background: url('../../static/images/parking-info-bg.png') no-repeat center center;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
		}

		&-main {
			padding: 0 54rpx;
			margin-top: -60rpx;

			&-item {
				padding: 50rpx 40rpx;
				border-radius: 20rpx;
				box-shadow: 0px 1px 30rpx 0px rgba(0, 0, 0, 0.1);
				background-color: #fff;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;

				view {
					&:first-child {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.name {
					margin-left: 30rpx;
				}

				// .t1 {
				// 	background-color: #436EFD;
				// }
				// .t2 {
				// 	background-color: #62D4A6;
				// }
				// .t3 {
				// 	background-color: #9376F5;
				// }
			}
		}
	}
</style>