春风项目四线(合箱线、总装线)
wujian
2024-01-31 238595017057e4bc67393915140507785f45b195
提交 | 用户 | 时间
fd2207 1 <template>
2   <div class="navbar">
3     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
4
5     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
6     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
7
8     <div class="right-menu">
9       <template v-if="device!=='mobile'">
10         <search id="header-search" class="right-menu-item" />
11
12         <screenfull id="screenfull" class="right-menu-item hover-effect" />
13
14         <el-tooltip content="布局大小" effect="dark" placement="bottom">
15           <size-select id="size-select" class="right-menu-item hover-effect" />
16         </el-tooltip>
17
18       </template>
19
20       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
21         <div class="avatar-wrapper">
22           <img :src="avatar" class="user-avatar">
23           <i class="el-icon-caret-bottom" />
24         </div>
25         <el-dropdown-menu slot="dropdown">
26           <router-link to="/user/profile">
27             <el-dropdown-item>个人中心</el-dropdown-item>
28           </router-link>
29           <el-dropdown-item @click.native="setting = true">
30             <span>布局设置</span>
31           </el-dropdown-item>
32           <el-dropdown-item divided @click.native="logout">
33             <span>退出登录</span>
34           </el-dropdown-item>
35         </el-dropdown-menu>
36       </el-dropdown>
37     </div>
38   </div>
39 </template>
40
41 <script>
42 import { mapGetters } from 'vuex'
43 import Breadcrumb from '@/components/Breadcrumb'
44 import TopNav from '@/components/TopNav'
45 import Hamburger from '@/components/Hamburger'
46 import Screenfull from '@/components/Screenfull'
47 import SizeSelect from '@/components/SizeSelect'
48 import Search from '@/components/HeaderSearch'
49 import RuoYiGit from '@/components/RuoYi/Git'
50 import RuoYiDoc from '@/components/RuoYi/Doc'
51
52 export default {
53   components: {
54     Breadcrumb,
55     TopNav,
56     Hamburger,
57     Screenfull,
58     SizeSelect,
59     Search,
60     RuoYiGit,
61     RuoYiDoc
62   },
63   computed: {
64     ...mapGetters([
65       'sidebar',
66       'avatar',
67       'device'
68     ]),
69     setting: {
70       get() {
71         return this.$store.state.settings.showSettings
72       },
73       set(val) {
74         this.$store.dispatch('settings/changeSetting', {
75           key: 'showSettings',
76           value: val
77         })
78       }
79     },
80     topNav: {
81       get() {
82         return this.$store.state.settings.topNav
83       }
84     }
85   },
86   methods: {
87     toggleSideBar() {
88       this.$store.dispatch('app/toggleSideBar')
89     },
90     async logout() {
91       this.$confirm('确定注销并退出系统吗?', '提示', {
92         confirmButtonText: '确定',
93         cancelButtonText: '取消',
94         type: 'warning'
95       }).then(() => {
96         this.$store.dispatch('LogOut').then(() => {
97           location.href = '/index';
98         })
99       }).catch(() => {});
100     }
101   }
102 }
103 </script>
104
105 <style lang="scss" scoped>
106 .navbar {
107   height: 50px;
108   overflow: hidden;
109   position: relative;
110   background: #fff;
111   box-shadow: 0 1px 4px rgba(0,21,41,.08);
112
113   .hamburger-container {
114     line-height: 46px;
115     height: 100%;
116     float: left;
117     cursor: pointer;
118     transition: background .3s;
119     -webkit-tap-highlight-color:transparent;
120
121     &:hover {
122       background: rgba(0, 0, 0, .025)
123     }
124   }
125
126   .breadcrumb-container {
127     float: left;
128   }
129
130   .topmenu-container {
131     position: absolute;
132     left: 50px;
133   }
134
135   .errLog-container {
136     display: inline-block;
137     vertical-align: top;
138   }
139
140   .right-menu {
141     float: right;
142     height: 100%;
143     line-height: 50px;
144
145     &:focus {
146       outline: none;
147     }
148
149     .right-menu-item {
150       display: inline-block;
151       padding: 0 8px;
152       height: 100%;
153       font-size: 18px;
154       color: #5a5e66;
155       vertical-align: text-bottom;
156
157       &.hover-effect {
158         cursor: pointer;
159         transition: background .3s;
160
161         &:hover {
162           background: rgba(0, 0, 0, .025)
163         }
164       }
165     }
166
167     .avatar-container {
168       margin-right: 30px;
169
170       .avatar-wrapper {
171         margin-top: 5px;
172         position: relative;
173
174         .user-avatar {
175           cursor: pointer;
176           width: 40px;
177           height: 40px;
178           border-radius: 10px;
179         }
180
181         .el-icon-caret-bottom {
182           cursor: pointer;
183           position: absolute;
184           right: -20px;
185           top: 25px;
186           font-size: 12px;
187         }
188       }
189     }
190   }
191 }
192 </style>