patrol-maintain-mobile/pages/index/index.vue

<template>
	<view class="wrap">
		<u-row gutter="16" justify="space-between">
			<u-col span="12">
				<view class="demo-layout bg-blue" style="text-align: left;padding-left: 20rpx;">当前登录人：张三</view>
			</u-col>
		</u-row>
		<u-row gutter="16">

			<u-col span="6">
				<view class="demo-layout bg-purple-light">
					<text class="iconfont icon-guanxianxuncha"></text>
					<text class="navtxt">雨管巡查</text>
				</view>
			</u-col>
			<u-col span="6">
				<view class="demo-layout bg-purple">
					<text class="iconfont icon-guanxianyanghu"></text>
					<text class="navtxt">雨管养护</text>
				</view>
			</u-col>
		</u-row>
		<u-row gutter="16">


			<u-col span="12">
				<view class="demo-layout bg-purple-light">
					<text class="iconfont icon-zaixianjiance"></text>
					<text class="navtxt">日常监督巡查</text>
				</view>
			</u-col>
		</u-row>
		<u-row gutter="16" justify="space-between">
			<u-col span="8">
				<view class="demo-layout bg-purple" @click="toview(1)">
					<text class="iconfont icon-caidanguanli"></text>
					<text class="navtxt">通用巡查</text>
				</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout bg-purple-light" @click="toview(2)">
					<text class="iconfont icon-yonghugerenzhongxin"></text>
					<text class="navtxt">我的</text>
				</view>
			</u-col>
		</u-row>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: ''
			}
		},
		onLoad() {

		},
		methods: {
			toview(type) {
				let url = "/packageA/pages/generalPatrol/generalPatrol";
				if (type == 2) {
					url = "/pages/mine/mine"
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		border-radius: 8rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		padding: 20rpx 0rpx;
	}

	.navtxt {
		margin-top: 20rpx;
		color: #000000;
	}

	.iconfont {
		color: #338de3;
		font-size: 64rpx;

	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-blue {
		background: #338de3;
		color: #fff;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>