mes_mobile/pages/person/person.vue

<template>
	<view class="person_page ">
		<view class="person_top">
			<view class="person_data">
				<!-- <view class="person_logo"> -->
					<!-- <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"> -->
					  <image class="person_logo" :src="avatarUrl"></image>
					<!-- </button> -->
				<!-- </view> -->
				<view class="person_name">
					<view class="name">
						<text class="font15">肖银奎</text>
						<image  src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/chaojihuiyuan.png" mode=""></image>
					</view>
					<view class="account font12">
						登录账号：ykxiao
					</view>
				</view>
			</view>
		</view>
		<view class="person_content">			
			<view class="con_backlog">
				<view class="font14">
					待办事项
				</view>
				<view class="backlog_data">
					<view class="backlog_module">
						<view class="t-icon t-icon-shengchangongdan backlogicon"></view>
						<view class="backlogname">工单审批</view>
					</view>
					<view class="backlog_module">
						<view class="t-icon t-icon-shengchangongdan backlogicon"></view>
						<view class="backlogname">流程审批</view>
					</view>
					<view class="backlog_module" @click="toAlarm">
						<view class="t-icon t-icon-shengchangongdan backlogicon"></view>
						<view class="backlogname">设备报警</view>
					</view>
					<view class="backlog_module">
						<view class="t-icon t-icon-shengchangongdan backlogicon"></view>
						<view class="backlogname">权限审批</view>
					</view>
					<view class="backlog_module" @click="toSafetyAccidents()">
						<view class="t-icon t-icon-shengchangongdan backlogicon"></view>
						<view class="backlogname">安全事故</view>
					</view>
				</view>
			</view>
			<view class="con_account" @click="toAccountCenter()">
				<view class="t-icon t-icon-zhanghaozhongxin personicon"></view>
				<view class="font14">账户中心</view>
			</view>
			<view class="con_data">
				<view class="con_module" @click="toMessage">
					<view class="t-icon t-icon-xiaoxitongzhi-gerenzhongxin personicon"></view>
					<view class="font13">消息管理</view>
					<view class=""></view>
				</view>
			<!-- 	<view class="con_module">
					<view class="t-icon t-icon-shenpizhida personicon"></view>
					<view class="font13">审批直达</view>
					<view class=""></view>
				</view> -->
				<view class="con_module" @click="toMyAuthority()">
					<view class="t-icon t-icon-wodequanxian personicon"></view>
					<view class="font13">我的权限</view>
					<view class=""></view>
				</view>
				<view class="con_module noborbot" @click="toFaceAuthentication()">
					<view class="t-icon t-icon-renlianrenzheng personicon"></view>
					<view class="font13">人脸认证</view>
					<view class=""></view>
				</view>
			</view>
			<view class="con_set">
				<view class="t-icon t-icon-xitongshezhi-gerenzhongxin personicon"></view>
				<view class="font13">系统设置</view>
			</view>
		</view>
		<tab-bar :current-page="2"></tab-bar>
	</view>
</template>

<script>
	import tabBar from "@/components/customTabBar/index";
	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
	export default {
		components:{
			tabBar
		},

		data() {
			return {
				avatarUrl:defaultAvatarUrl,
			}
		},
		methods: {
			//跳转设备报警
			toAlarm(){
				uni.navigateTo({
					url:'/pages/person/alarm'
				})
			},
			toSafetyAccidents(){
				uni.navigateTo({
					url:'/pages/person/safetyAccidents'
				})
			},
			//跳转账户中心页
			toAccountCenter(){
				uni.navigateTo({
					url: '/pages/person/accountCenter'
				  })
			},
			//跳转人脸认证页
			toFaceAuthentication(){
				uni.navigateTo({
					url:'/pages/person/faceAuthentication'
				})
			},
			toMyAuthority(){
				uni.navigateTo({
					url:'/pages/person/myAuthority'
				})
			},
			//跳转消息页
			toMessage(){
				uni.navigateTo({
					url: '/pages/index/message'
				})
			},
		}
	}
</script>

<style  scoped lang="scss">
.person_page{ padding: 14px;
	.person_top{margin-bottom:33px ;
		.person_data{display: flex;align-items: center;
			.person_logo{border-radius: 50%;width: 54px;height: 54px;margin:0 6px 0 4px;}	
		
			.person_name{
				.name{display: flex;align-items: center;margin-bottom: 2px;
					image{width: 50px;height: 16px;margin-left: 4px;}
				}
				.account{margin-top: 2px;}
			}
		}
	}
	.person_content{
		.con_backlog{padding: 14px 10px 14px 15px;background: #1C2755;border-radius: 8px;margin-bottom: 12px;
			.backlog_data{display: flex;    flex-wrap: wrap;margin-top: 7px;
				.backlog_module{width: 93px;height: 76px;display: flex;justify-content: center;flex-direction: column;align-items: center;border-radius: 8px;
				background: #6576B7;margin: 5px 6px;}
				.backlogicon{width: 32px;height: 32px;}
				.backlogname{
					font-size: $uni-font-size-sm;
					padding-top: 5px;}
			}
		}
		.con_account{
			border-radius: 8px;
			background: #1C2755;
			display: flex;
			height: 52px;
			align-items: center;
			padding: 0 14px;
			margin-bottom: 10px;
			
		}
		.personicon{width: 24px;height: 24px;margin-right: 15px;}
		.con_data{border-radius: 8px;
			background: #1C2755;
			padding: 0 14px;
			margin-bottom: 12px;
			.con_module{display: flex;height: 49px;align-items: center;border-bottom: 1px solid #2D3A6F;}
		}
		.con_set{border-radius: 8px;
			background: #1C2755;
			display: flex;
			height: 48px;
			align-items: center;
			padding: 0 14px;
			}
	}
}
</style>