Blame view

HHECS.Web/src/layout/components/Navbar.vue 4.12 KB
胡菁 authored
1
2
<template>
  <div class="navbar">
王硕 authored
3
4
5
6
7
    <hamburger
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />
胡菁 authored
8
9
10
11

    <breadcrumb class="breadcrumb-container" />

    <div class="right-menu">
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
      <screenfull id="screenfull" class="right-menu-item hover-effect" />

      <el-dropdown class="avatar-container" trigger="click" style="margin: 0 5px;">
        <div class="avatar-wrapper">
          <!-- <span style="margin-right: 10px;">选择语言</span> -->
          <span class="lang">
            <svg-icon icon-class="language" />
          </span>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>
              中文
            </el-dropdown-item>
            <el-dropdown-item>
              日文
            </el-dropdown-item>
          </router-link>
        </el-dropdown-menu>
      </el-dropdown>
胡菁 authored
33
34
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
王硕 authored
35
          <span style="margin-right: 10px">{{ name }}</span>
胡菁 authored
36
37
          <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
          <!-- <div icon="el-icon-user-solid" class="user-avatar"></div> -->
王硕 authored
38
          <i class="el-icon-user-solid user-avatar" />
胡菁 authored
39
          <i class="el-icon-caret-bottom" />
胡菁 authored
40
41
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
42
          <router-link to="/">
胡菁 authored
43
            <el-dropdown-item>
44
              <span>版本</span>
胡菁 authored
45
            </el-dropdown-item>
46
          </router-link>
胡菁 authored
47
          <el-dropdown-item divided @click.native="logout">
王硕 authored
48
            <span style="display: block">{{ $gl("logOut") }}</span>
胡菁 authored
49
50
51
52
53
54
55
56
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
57
58
59
60
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import { mapGetters } from 'vuex'
胡菁 authored
61
62
63
64

export default {
  components: {
    Breadcrumb,
王硕 authored
65
    Hamburger,
66
67
68
69
    Screenfull
  },
  data() {
    return {}
胡菁 authored
70
71
  },
  computed: {
72
    ...mapGetters(['sidebar', 'avatar', 'name'])
胡菁 authored
73
74
75
  },
  methods: {
    toggleSideBar() {
76
      this.$store.dispatch('app/toggleSideBar')
胡菁 authored
77
78
    },
    async logout() {
79
80
81
82
83
84
      window.$currentLang = 'zh'
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
胡菁 authored
85
86
87
88
89
90
91
92
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
王硕 authored
93
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
胡菁 authored
94
95
96
97
98
99

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
王硕 authored
100
101
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
胡菁 authored
102
103

    &:hover {
王硕 authored
104
      background: rgba(0, 0, 0, 0.025);
胡菁 authored
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .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;
127
    //   vertical-align: text-bottom;
胡菁 authored
128
129
130

      &.hover-effect {
        cursor: pointer;
王硕 authored
131
        transition: background 0.3s;
胡菁 authored
132
133

        &:hover {
王硕 authored
134
          background: rgba(0, 0, 0, 0.025);
胡菁 authored
135
136
137
138
139
140
141
142
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
胡菁 authored
143
        // margin-top: 5px;
胡菁 authored
144
        position: relative;
胡菁 authored
145
146
147
148
        display: flex;
        align-items: center;
        font-size: 14pt;
        font-weight: bold;
149
150
151
152
153
154
155
156
157
        span.lang{
         display: block;
          height: 100%;
          padding: 0 10px;
        }
        span.lang:hover{
            cursor: pointer;
            background: #f9f9f9;
        }
胡菁 authored
158
159
        .user-avatar {
          cursor: pointer;
胡菁 authored
160
161
          // width: 40px;
          // height: 40px;
胡菁 authored
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>