<template>
	<view class="content">
		<view class="header">
			<view class="header-item">
				<text class="header-user">登录人员：{{userName}}</text>
			</view>
			<view class="header-item header-r">
				<button class="header-button" @click="toExit">退&nbsp;&nbsp;出</button>
			</view>
		</view>
		<view class="nav-wrap">
			<view class="nav-item"><text class="nav-text" @click="toJump('/pages/equipStatus/equipStatus')">设备状态修改</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).id : ''
			}
		},
		onLoad() {

		},
		methods: {
			toJump(path) {
				uni.navigateTo({
					url: path
				});
			},
			toExit () {
				this.$store.dispatch('delUserInfo', '')
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
}
.header{
	display: flex;
	width: 100%;
	height: 44px;
	background-color: #d7592f;
}
.header-item {
	width: calc(50% - 10px);
	padding: 0 10px;
}
.header-user {
	font-size: 16px;
	line-height: 44px;
	color: #ffffff;
}
.header-r{
	display: flex;
	justify-content: flex-end;
	align-items: center
}
/deep/ .header-r uni-button{
	margin-right: 0;
}
.header-button{
	width: 80px;
	height: 30px;
	font-size: 16px;
	color: #333333;
	line-height: 30px;
}
.nav-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: center;
	width: calc(100% - 40%);
	height: calc(100% - 44px);
	padding: 0 20%;
}
.nav-item{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30%;
	height: 100px;
	background-color: #acbec6;
	border-radius: 10px;
	margin: 7.5px 5% 7.5px 0;
}
.nav-item:nth-child(3n){
	margin-right: 0;
}
.nav-text{
	font-size: 22px;
	line-height: 30px;
	color: #ffffff;
	letter-spacing: 2px;
}
</style>
