111 lines
2.0 KiB
Vue
111 lines
2.0 KiB
Vue
<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">退 出</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>
|