<template>
|
<div class="navbar navbar-yw">
|
<div style="display: flex;align-items: center">
|
<img class="logo" src="@/assets/images/logo.png" alt=""/>
|
<img class="logo-txt" src="@/assets/images/top-title.png" alt=""/>
|
</div>
|
<div class="right-menu">
|
<div class="menu-item" @click="dataV">
|
<img class="icon" src="@/assets/images/icon-datav.png" alt="数据看板" title="数据看板">
|
</div>
|
<div class="user">
|
<img class="avatar" :src="userInfo&&userInfo.avatar?ftpUrl+userInfo.avatar:require('@/assets/images/40b2.jpeg')" alt="">
|
<div>
|
<el-dropdown>
|
<div class="user-name">{{ name }}<i class="el-icon-arrow-down"/></div>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item>
|
<div @click="$router.push('/userInfo')">个人信息</div>
|
</el-dropdown-item>
|
<!-- <el-dropdown-item>修改密码</el-dropdown-item>-->
|
<el-dropdown-item>
|
<div @click="logout">退出</div>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<div v-if="userInfo && userInfo.userName" class="user-role">{{ userInfo.userName }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {mapGetters} from 'vuex'
|
import {getDownUrl} from "@/utils/base";
|
|
export default {
|
data() {
|
return {
|
ftpUrl: getDownUrl(),
|
userName: '未知',
|
}
|
},
|
computed: {
|
...mapGetters([
|
'userInfo',
|
'sidebar',
|
'name',
|
'avatar',
|
'device',
|
'dir'
|
])
|
},
|
methods: {
|
openNotification(){
|
this.$emit('openNotification')
|
},
|
logout() {
|
this.$confirm('确定退出?', '', {
|
confirmButtonText: '确定',
|
cancelButtonText: '返回',
|
type: 'warning'
|
}).then(() => {
|
this.$store.dispatch('user/logout').then(() => {
|
location.reload()
|
})
|
}).catch(() => {
|
})
|
},
|
dataV() {
|
// window.open("https://datav.aliyuncs.com/share/87597dbd720965d4a2e901d683a0805c");
|
const {href} = this.$router.resolve({
|
path: '/dataV'
|
})
|
window.open(href, '_blank')
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.navbar-yw{
|
background-image: url("~@/assets/images/top-bg.png");
|
background-size: auto 70px;
|
background-position: right center;
|
background-color: #203d6d;
|
}
|
.navbar {
|
height: 70px;
|
position: relative;
|
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 40px;
|
z-index: 100;
|
.logo{
|
width: 39px;
|
height: 39px;
|
margin-right: 10px;
|
}
|
.logo-txt {
|
width: 352px;
|
height: 43px;
|
}
|
.phone-call {
|
margin-left: 50px;
|
width: 325px;
|
height: 44px;
|
border-radius: 30px;
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
transition: all 0.3s;
|
|
&-left {
|
cursor: pointer;
|
flex-shrink: 0;
|
width: 73px;
|
height: 36px;
|
border-right: 1px solid #eee;
|
text-align: center;
|
line-height: 36px;
|
font-size: 14px;
|
color: #000;
|
}
|
|
&-right {
|
flex-shrink: 0;
|
width: 251px;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
position: relative;
|
&-phone {
|
font-size: 14px;
|
color: #000;
|
margin-bottom: 5px;
|
}
|
|
&-tip {
|
font-size: 12px;
|
color: #999;
|
}
|
|
&-btn {
|
cursor: pointer;
|
margin-left: 10px;
|
margin-right: 4px;
|
width: 67px;
|
height: 38px;
|
border-radius: 26px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 32px;
|
height: 32px;
|
}
|
}
|
}
|
}
|
|
.phone-red {
|
background-color: #f3595a;
|
}
|
|
.phone-green {
|
background-color: #67C23A;
|
}
|
.phone-normal{
|
background-color: #dbdbdb;
|
}
|
.phone {
|
-webkit-animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
|
animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
|
-webkit-transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
-webkit-backface-visibility: hidden;
|
backface-visibility: hidden;
|
-webkit-perspective: 300px;
|
perspective: 300px;
|
}
|
|
@keyframes vibrate {
|
0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18% {
|
-webkit-transform: translate3d(-3px, 0, 0);
|
transform: translate3d(-3px, 0, 0);
|
}
|
1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19% {
|
-webkit-transform: translate3d(3px, 0, 0);
|
transform: translate3d(3px, 0, 0);
|
}
|
20%, 100% {
|
-webkit-transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
}
|
}
|
|
.connect {
|
display: flex;
|
align-items: center;
|
margin-left: 10px;
|
position: relative;
|
}
|
// 转接浮窗
|
|
.right-menu {
|
display: flex;
|
align-items: center;
|
}
|
|
.menu-item {
|
cursor: pointer;
|
width: 32px;
|
height: 32px;
|
position: relative;
|
margin:0 15px;
|
}
|
|
.user {
|
margin-left: 24px;
|
display: flex;
|
align-items: center;
|
.avatar {
|
width: 44px;
|
height: 44px;
|
border-radius: 50%;
|
margin-right: 10px;
|
}
|
|
.user-name {
|
cursor: pointer;
|
color: #FFFFFF;
|
font-size: 14px;
|
}
|
|
.user-role {
|
margin-top: 4px;
|
font-size: 12px;
|
color: rgba(255, 255, 255, 0.8);
|
}
|
}
|
}
|
|
.ewm-show:hover .ewm-box {
|
display: block;
|
}
|
|
.ewm-box {
|
display: none;
|
position: absolute;
|
bottom: -110px;
|
left: 50%;
|
margin-left: -50px;
|
z-index: 100001;
|
}
|
|
.ewm-f-box {
|
position: relative;
|
background-color: #FFFFFF;
|
}
|
|
.ewm-f-box::after {
|
position: absolute;
|
left: 50%;
|
top: -8px;
|
margin-left: -5px;
|
display: block;
|
content: '';
|
width: 0;
|
height: 0;
|
border-left: 8px solid transparent;
|
border-right: 8px solid transparent;
|
border-bottom: 8px solid #fff;
|
}
|
|
.navbar .menu-item .ewm-img {
|
width: 100px;
|
}
|
// 拨打电话弹窗
|
.phone-hover{
|
width: 300px;
|
position: absolute;
|
left:60%;
|
top: 50px;
|
background-color: #FFFFFF;
|
border-radius: 4px;
|
padding:12px;
|
box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
|
z-index: 101;
|
}
|
// 转接
|
.zj-hover{
|
left:0;
|
}
|
.zj-list{
|
min-height: 300px;
|
max-height: 300px;
|
overflow-y: scroll;
|
}
|
.zj-list::-webkit-scrollbar, {
|
width: 4px;
|
}
|
|
.zj-list::-webkit-scrollbar-thumb, {
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
}
|
.zj-item{
|
padding:16px;
|
border-bottom: 1px solid #f5f5f5;
|
}
|
.zj-item:hover{
|
background-color: #f5f5f5;
|
cursor: pointer;
|
}
|
.color-11A{
|
color:#11AD6F;
|
}
|
.color-F35{
|
color:#F3595A;
|
}
|
.com-head{
|
width: 38px;
|
height: 38px;
|
margin-right: 5px;
|
}
|
.icon-zj{
|
width: 22px;
|
height: 22px;
|
}
|
>>> .el-form--label-top .el-form-item__label{
|
padding:0!important;
|
}
|
.m-b-5{
|
margin-bottom: 5px;
|
}
|
</style>
|
