From 45b4ff5c0b824d2e5b51a6af3c44076d05f0214d Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期三, 18 十二月 2024 13:21:28 +0800
Subject: [PATCH] 内容提交
---
src/layout/components/Navbar.vue | 54 ++++++++++++++++++++++++++++++++++--------------------
1 files changed, 34 insertions(+), 20 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index ebb000f..8840490 100644
--- a/src/layout/components/Navbar.vue
+++ b/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;
--
Gitblit v1.9.1