From b36153dd435246a0c84e21352f44f8dca12b18d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=BE=E8=82=83?= <15833576927@163.com>
Date: Fri, 17 May 2024 17:31:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=86=E9=9A=94=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E3=80=81=E4=BC=98=E5=8C=96=E5=B7=A6=E4=BE=A7=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=B1=82=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Hamburger/index.vue    |  3 +--
 src/components/LeftDrawer/index.vue   |  9 ++++++++-
 src/components/titleDivider/index.vue | 24 ++++++++++++++++++++++++
 src/layout/components/Navbar.vue      |  2 +-
 src/main.js                           |  2 ++
 5 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 src/components/titleDivider/index.vue

diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 8800639..602fa78 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -3,7 +3,7 @@
     <i-menu-unfold-one class="hamburger"
                        :class="{'is-active':isActive}" theme="outline" size="22" :fill="fill"/>
     <div>
-      <left-drawer v-model="showDrawer" :width="drawerWidth">
+      <left-drawer v-model="showDrawer" z-index="195">
         <div>
           <div class="classify"  style="margin: 0 0 10px 0;">
             <i-chart-line theme="outline" size="24" fill="#338572"/>
@@ -68,7 +68,6 @@ const emit = defineEmits(['toggleClick'])
 const showDrawer = ref(false)
 const permissionStore = usePermissionStore()
 const appStore = useAppStore()
-const drawerWidth= computed(()=>appStore.device === 'mobile'?'100%':'30%')
 const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
 const menuList = ref([
   {
diff --git a/src/components/LeftDrawer/index.vue b/src/components/LeftDrawer/index.vue
index af5144d..784d83e 100644
--- a/src/components/LeftDrawer/index.vue
+++ b/src/components/LeftDrawer/index.vue
@@ -1,4 +1,6 @@
 <script setup>
+import useAppStore from "@/store/modules/app.js";
+const appStore = useAppStore()
 let props = defineProps({
   // 宽度  百分比或者number类型的像素
   width: {
@@ -8,8 +10,13 @@ let props = defineProps({
   },
   title: {
     String
+  },
+  zIndex: {
+    type: Number,
+    default: 165
   }
 });
+const drawerWidth= computed(()=>appStore.device === 'mobile'?'100%':props.width)
 const showDrawer = defineModel({type: Boolean})
 const close = () => {
   showDrawer.value = false
@@ -17,7 +24,7 @@ const close = () => {
 </script>
 
 <template>
-  <el-drawer :size="width" v-model="showDrawer" direction="ltr" append-to-body class="drawer" modal-class="drawer-modal" :z-index="165"
+  <el-drawer :size="drawerWidth" v-model="showDrawer" direction="ltr" append-to-body class="drawer" modal-class="drawer-modal" :z-index="zIndex"
              :with-header="false">
     <div>
       <div v-if="!!title" class="drawer-title">
diff --git a/src/components/titleDivider/index.vue b/src/components/titleDivider/index.vue
new file mode 100644
index 0000000..7ac7bfe
--- /dev/null
+++ b/src/components/titleDivider/index.vue
@@ -0,0 +1,24 @@
+<script setup>
+import useSettingsStore from "@/store/modules/settings.js";
+
+let props = defineProps({
+  title:String
+})
+const settingsStore = useSettingsStore()
+const theme = computed(() => settingsStore.theme)
+</script>
+
+<template>
+<div class="title">
+  {{title}}
+</div>
+</template>
+
+<style scoped lang="scss">
+.title{
+  padding-left: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  border-left: 5px solid v-bind(theme);
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index f1d5012..aa28116 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -124,7 +124,7 @@ function setLayout() {
 
 <style lang='scss' scoped>
 .navbar {
-  z-index: 170;
+  z-index: 200;
   height: 50px;
   overflow: hidden;
   position: relative;
diff --git a/src/main.js b/src/main.js
index d21a741..8fb9136 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,7 @@ import RightToolbar from '@/components/RightToolbar'
 import Editor from "@/components/Editor"
 // drawer弹窗组件
 import LeftDrawer from "@/components/LeftDrawer"
+import titleDivider from "@/components/titleDivider"
 // 文件上传组件
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
@@ -85,6 +86,7 @@ app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 app.component('LeftDrawer', LeftDrawer)
+app.component('titleDivider', titleDivider)
 app.component(ElCollapseTransition.name, ElCollapseTransition)
 app.use(VueAMap)
 app.use(router)