优化

src/views/publicService/components/navBar.vue

@@ -26,11 +26,29 @@
             </div>
 
             <div v-if="showRightSection" class="header-right"> </div>
+
+            <el-dropdown
+                trigger="hover"
+                class="avatar-container right-menu-item hover-effect"
+            >
+                <div class="avatar-wrapper">
+                    <img :src="avatar" class="user-avatar" />
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="handleLogoClick">
+                        后台管理
+                    </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'
 export default {
     name: 'NavBar',
     props: {
@@ -63,6 +81,20 @@ export default {
             default: '',
         },
     },
+
+    computed: {
+        ...mapGetters(['avatar']),
+        setting: {
+            get() {
+                return this.$store.state.settings.showSettings
+            },
+        },
+        topNav: {
+            get() {
+                return this.$store.state.settings.topNav
+            },
+        },
+    },
     data() {
         return {
             activeNav: 'ProductCenter', // 默认选中产品中心
@@ -117,11 +149,28 @@ export default {
         handleLogoClick() {
             this.$router.push('/')
         },
+
+        logout() {
+            this.$confirm('确定注销并退出系统吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(() => {
+                    this.$store.dispatch('LogOut').then(() => {
+                        location.href =
+                            process.env.VUE_APP_ENV === 'production'
+                                ? '/pubSerPlatform/index'
+                                : '/index'
+                    })
+                })
+                .catch(() => {})
+        },
     },
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .header_new {
     background-image: url('../../../assets/images/productCenter/topbg.png');
     color: white;
@@ -253,4 +302,36 @@ export default {
         width: 150px;
     }
 }
+
+.avatar-container {
+    margin-right: 0px;
+    padding-right: 0px;
+
+    .avatar-wrapper {
+        margin-top: 10px;
+        position: relative;
+
+        .user-avatar {
+            cursor: pointer;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+        }
+
+        .user-nickname {
+            position: relative;
+            bottom: 10px;
+            font-size: 14px;
+            font-weight: bold;
+        }
+
+        .el-icon-caret-bottom {
+            cursor: pointer;
+            position: absolute;
+            right: -20px;
+            top: 25px;
+            font-size: 12px;
+        }
+    }
+}
 </style>