|
@@ -0,0 +1,235 @@
|
|
|
+<template>
|
|
|
+ <div class="navbar">
|
|
|
+ <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
|
|
+
|
|
|
+ <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
|
|
|
+ <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
|
|
|
+
|
|
|
+ <div class="right-menu">
|
|
|
+
|
|
|
+ <template v-if="device!=='mobile'">
|
|
|
+ <span class="date" >{{date}}</span>
|
|
|
+ <search id="header-search" class="right-menu-item" />
|
|
|
+
|
|
|
+ <screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
|
+
|
|
|
+ <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
|
+ <size-select id="size-select" class="right-menu-item hover-effect" />
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
|
|
+ <div class="avatar-wrapper">
|
|
|
+ {{$store.state.user.nickName}}
|
|
|
+ <!-- <img :src="avatar" class="user-avatar"> -->
|
|
|
+ </div>
|
|
|
+ <div class="logout" @click="logout">
|
|
|
+ <span>安全退出</span>
|
|
|
+ </div>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <!-- <router-link to="/user/profile">
|
|
|
+ <el-dropdown-item>个人中心</el-dropdown-item>
|
|
|
+ </router-link> -->
|
|
|
+ <!-- <el-dropdown-item @click.native="setting = true">
|
|
|
+ <span>布局设置</span>
|
|
|
+ </el-dropdown-item> -->
|
|
|
+ <!-- <el-dropdown-item divided @click.native="logout">
|
|
|
+ <span>安全退出</span>
|
|
|
+ </el-dropdown-item> -->
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import Breadcrumb from '@/components/Breadcrumb'
|
|
|
+import TopNav from '@/components/TopNav'
|
|
|
+import Hamburger from '@/components/Hamburger'
|
|
|
+import Screenfull from '@/components/Screenfull'
|
|
|
+import SizeSelect from '@/components/SizeSelect'
|
|
|
+import Search from '@/components/HeaderSearch'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ date: new Date(),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Breadcrumb,
|
|
|
+ TopNav,
|
|
|
+ Hamburger,
|
|
|
+ Screenfull,
|
|
|
+ SizeSelect,
|
|
|
+ Search,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters([
|
|
|
+ 'sidebar',
|
|
|
+ 'avatar',
|
|
|
+ 'device'
|
|
|
+ ]),
|
|
|
+ setting: {
|
|
|
+ get() {
|
|
|
+ return this.$store.state.settings.showSettings
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ this.$store.dispatch('settings/changeSetting', {
|
|
|
+ key: 'showSettings',
|
|
|
+ value: val
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ topNav: {
|
|
|
+ get() {
|
|
|
+ return this.$store.state.settings.topNav
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ let that= this;
|
|
|
+ this.timer = setInterval(function() {
|
|
|
+ let myDate = new Date()
|
|
|
+ let year = myDate.getFullYear() + '年'
|
|
|
+ let month = myDate.getMonth() + 1 +'月'
|
|
|
+ let day = myDate.getDate() +'日'
|
|
|
+ let hours = myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours();
|
|
|
+ let minutes = myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() : myDate.getMinutes();
|
|
|
+ let seconds = myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds();
|
|
|
+ let sfb = hours + ':' + minutes + ':' + seconds
|
|
|
+ that.date = year + month + day + ' ' + sfb
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ //销毁时清除计时器
|
|
|
+ // beforeDestroy: function () {
|
|
|
+ // if (this.timer) {
|
|
|
+ // clearInterval(this.timer)
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ methods: {
|
|
|
+ toggleSideBar() {
|
|
|
+ this.$store.dispatch('app/toggleSideBar')
|
|
|
+ },
|
|
|
+ async logout() {
|
|
|
+
|
|
|
+ this.$confirm('确定注销并退出系统吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$store.dispatch('LogOut').then(() => {
|
|
|
+ location.href = '/vuedx/';
|
|
|
+ })
|
|
|
+ }).catch(() => {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.navbar {
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
|
|
+
|
|
|
+ .hamburger-container {
|
|
|
+ line-height: 46px;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background .3s;
|
|
|
+ -webkit-tap-highlight-color:transparent;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, .025)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .breadcrumb-container {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topmenu-container {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .errLog-container {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-menu {
|
|
|
+ float: right;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 50px;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-menu-item {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 8px;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #5a5e66;
|
|
|
+ vertical-align: text-bottom;
|
|
|
+
|
|
|
+ &.hover-effect {
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background .3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, .025)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-container {
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ .avatar-wrapper {
|
|
|
+ margin-top: 0px;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ cursor: default;
|
|
|
+ .user-avatar {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-caret-bottom {
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ right: -20px;
|
|
|
+ top: 25px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logout{
|
|
|
+ margin: 0px 0 0 20px;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.date{
|
|
|
+ width:250px;
|
|
|
+ margin-right: 20px;
|
|
|
+ vertical-align: top;
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|