内容提交

whychdw

2024-12-18 45b4ff5c0b824d2e5b51a6af3c44076d05f0214d

 src/layout/components/Navbar.vue

@@ -1,15 +1,12 @@
<template>
  <div class="navbar">
    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
      @toggleClick="toggleSidebar" />

    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

    <div class="sys-name-wrapper">
      <div class="sys-icon">
        <svg-icon icon-class="lock-hdw"></svg-icon>
      </div>
      <div class="sys-name">{{ title }}</div>
    </div>
    <div class="right-menu">
      <template v-if="device !== 'mobile'">
        <screenfull id="screenfull" class="right-menu-item hover-effect" />
      </template>

      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" alt="" />
@@ -35,18 +32,19 @@
<script>
import { mapState } from 'pinia';
import store from '@/store';
import Breadcrumb from '@/components/Breadcrumb';
import Hamburger from '@/components/Hamburger';
import Screenfull from '@/components/Screenfull';
import { defineComponent } from 'vue';
import { CaretBottom } from '@element-plus/icons-vue';
import SvgIcon from '@/components/SvgIcon/index.vue';

export default defineComponent({
  components: {
    Breadcrumb,
    Hamburger,
    Screenfull,
    SvgIcon,
    CaretBottom
  },
  data() {
    return {
      title: '鸿蒙智能电子锁管理平台'
    };
  },
  computed: {
    ...mapState(store.app, [
@@ -71,12 +69,28 @@

<style lang="scss" scoped>
.navbar {
  height: 50px;
  height: 64px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

  .sys-name-wrapper {
    display: inline-block;
    line-height: 64px;
    color: var(--light-color);
    font-size: 24px;
    width: 894px;
    .sys-icon {
      display: inline-block;
      font-weight: 700;
      margin-left: 16px;
      margin-right: 8px;
    }
    .sys-name {
      font-weight: 700;
      display: inline-block;
    }
  }
  .hamburger-container {
    line-height: 46px;
    height: 100%;
@@ -102,7 +116,7 @@
  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;
    line-height: 64px;

    &:focus {
      outline: none;
@@ -112,7 +126,7 @@
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      line-height: 50px;
      line-height: 64px;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;
@@ -131,7 +145,7 @@
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        margin-top: 10px;
        position: relative;
        height: 45px;