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="file-text-fill" color="#fff" size="33"></u-icon>
				</view>
				<view class="name">订单记录</view>
			</view>
			<view class="content-main-item" @click="jumpPage('pages/operationOverview/operationOverview')">
				<view class="t2"></view>
				<view class="name">运营概况</view>
			</view>
			<view class="content-main-item" @click="jumpPage('pages/patrolManagement/patrolManagement')">
				<view class="t3"></view>
				<view class="name">巡检管理</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		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>