|  |  | 
 |  |  |   <div class="common-header"> | 
 |  |  |     <div class="header"> | 
 |  |  |       <div class="logo"> | 
 |  |  |         <div>{{ title }}</div> | 
 |  |  |         <div class="title">{{ title }}</div> | 
 |  |  |         <div class="list"> | 
 |  |  |           <div class="item active"> | 
 |  |  |             <div>服务中心</div> | 
 |  |  |             <div class="linellae"></div> | 
 |  |  |           </div> | 
 |  |  |           <div class="item" @click="getHeaderNav('')">安防中心</div> | 
 |  |  |           <div class="item" @click="getHeaderNav('')">消防中心</div> | 
 |  |  |           <div class="item" @click="getHeaderNav('')">能管中心</div> | 
 |  |  |           <div class="item" @click="getHeaderNav('')">驾驶舱</div> | 
 |  |  |         </div> | 
 |  |  |         <!-- <div class="title-en">Diagnosis of Intelligent Manufacturing Integrated Service Platfrom</div> --> | 
 |  |  |       </div> | 
 |  |  |       <div class="user"> | 
 |  |  | 
 |  |  | import { mapState, mapMutations } from 'vuex' | 
 |  |  | import GlobalAlertWindow from './GlobalAlertWindow' | 
 |  |  | import { logout, updatePwd } from '@/api/system/common' | 
 |  |  | import { getAppHeaderNav } from '@/api' | 
 |  |  | export default { | 
 |  |  |   name: 'CommonHeader', | 
 |  |  |   components: { GlobalAlertWindow }, | 
 |  |  | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       title: process.env.VUE_APP_TITLE, | 
 |  |  |       headerNavData: {}, | 
 |  |  |       visible: { | 
 |  |  |         // 修改密码 | 
 |  |  |         changePwd: false | 
 |  |  | 
 |  |  |         this.$refs.changePwdDataForm.resetFields() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getHeaderNav(){ | 
 |  |  |       getAppHeaderNav({ | 
 |  |  |         type: '' | 
 |  |  |       }).then(res => { | 
 |  |  |         this.headerNavData = res | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     // 确定修改密码 | 
 |  |  |     confirmChangePwd() { | 
 |  |  |       if (this.isWorking.changePwd) { | 
 |  |  | 
 |  |  |             this.visible.changePwd = false | 
 |  |  |           }) | 
 |  |  |           .catch(e => { | 
 |  |  |             this.$tip.apiFailed(e) | 
 |  |  |            //  this.$tip.apiFailed(e) | 
 |  |  |           }) | 
 |  |  |           .finally(() => { | 
 |  |  |             this.isWorking.changePwd = false | 
 |  |  | 
 |  |  |           window.location.reload() | 
 |  |  |         }) | 
 |  |  |         .catch(e => { | 
 |  |  |           this.$tip.apiFailed(e) | 
 |  |  |           // this.$tip.apiFailed(e) | 
 |  |  |         }) | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | 
 |  |  | .common-header { | 
 |  |  |   background-color: #2080f7; | 
 |  |  | } | 
 |  |  | .list{ | 
 |  |  |   flex: 1; | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |   margin-left: 60px; | 
 |  |  |   .item{ | 
 |  |  |     margin-right: 40px; | 
 |  |  |     font-size: 16px; | 
 |  |  |     font-weight: 400; | 
 |  |  |     display: flex; | 
 |  |  |     flex-direction: column; | 
 |  |  |     align-items: center; | 
 |  |  |     justify-content: flex-start; | 
 |  |  |     height: 40px; | 
 |  |  |     cursor: pointer; | 
 |  |  |     .linellae{ | 
 |  |  |       width: 64px; | 
 |  |  |       height: 2px; | 
 |  |  |       background: #FFFFFF; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |   .active{ | 
 |  |  |     font-weight: 500; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | .header { | 
 |  |  |   overflow: hidden; | 
 |  |  |   // background: #fff; | 
 |  |  | 
 |  |  |   .logo { | 
 |  |  |     /* background: url("../../assets/images/top_ic_chilun@2x.png") no-repeat; */ | 
 |  |  |     box-sizing: border-box; | 
 |  |  |     min-width: 280px; | 
 |  |  |     min-width: 360px; | 
 |  |  |     height: 56px; | 
 |  |  |     padding: 10px 30px; | 
 |  |  |     // flex-shrink: 0; | 
 |  |  | 
 |  |  |     font-size: 22px; | 
 |  |  |     font-weight: 600; | 
 |  |  |     color: #fff; | 
 |  |  |     display: flex; | 
 |  |  |     align-items: center; | 
 |  |  |     .title{ | 
 |  |  |       width: 200px; | 
 |  |  |     } | 
 |  |  |     // display: inline; | 
 |  |  |     .title-en { | 
 |  |  |       font-size: 11px; | 
 |  |  | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |   .user { | 
 |  |  |     width: 712px; | 
 |  |  |     width: 212px; | 
 |  |  |     box-sizing: border-box; | 
 |  |  |     height: 56px; | 
 |  |  |     padding-right: 25px; |