220 lines
6.5 KiB
Vue
220 lines
6.5 KiB
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="img" :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 class="login_out">
|
||
<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://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/avatar.png';
|
||
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;position: relative;
|
||
.img{
|
||
height: 100%;width: 100%;
|
||
}
|
||
}
|
||
.person_logo::before{
|
||
content: '';position: absolute;right: 2px;bottom: 1px;z-index: 10;border: 1px solid $uni-bg-color-default; background: $uni-bg-color-whith;width: 10px;height: 10px;border-radius: 50%;
|
||
}
|
||
.person_logo::after{
|
||
content: '';position: absolute;right: 4px;bottom: 3px;z-index: 20;background: $uni-bg-color-success;width: 8px;height: 8px;border-radius: 50%;
|
||
}
|
||
|
||
.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{
|
||
padding-bottom: 100px;
|
||
.con_backlog{padding: 14px 10px;background: $uni-bg-color-primary;border-radius: 8px;margin-bottom: 12px;
|
||
.backlog_data{
|
||
display: flex;flex-wrap:wrap;margin-top:7px;
|
||
.backlog_module{
|
||
width: calc(33.33% - 12px);height: 76px;display: flex;justify-content: center;flex-direction: column;align-items: center;border-radius: 8px;
|
||
background: $uni-color-info;margin: 5px 6px;
|
||
box-sizing: border-box;
|
||
}
|
||
.backlogicon{width: 32px;height: 32px;}
|
||
.backlogname{
|
||
font-size: $uni-font-size-sm;
|
||
padding-top: 5px;
|
||
}
|
||
}
|
||
}
|
||
.con_account{
|
||
border-radius: 8px;
|
||
background: $uni-bg-color-primary;
|
||
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: $uni-bg-color-primary;
|
||
padding: 0 14px;
|
||
margin-bottom: 12px;
|
||
.con_module{display: flex;height: 49px;align-items: center;border-bottom: 1px solid $uni-border-color-primary;}
|
||
}
|
||
.con_set{
|
||
border-radius: 8px;
|
||
background: $uni-bg-color-primary;
|
||
display: flex;
|
||
height: 48px;
|
||
align-items: center;
|
||
padding: 0 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.login_out{
|
||
border-radius: 8px;
|
||
background: $uni-bg-color-primary;
|
||
display: flex;
|
||
height: 48px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 14px;
|
||
color: $uni-text-color-danger;
|
||
}
|
||
}
|
||
}
|
||
</style> |