跟新

src/layout/index.vue

@@ -1,29 +1,35 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
     <!--    <sidebar v-if="!sidebar.hide" class="sidebar-container" />-->
     <!--    <div class="z-24 absolute w-500px bg-green top-85px left-0">-->
-    <el-drawer class="w-30vw!" v-model="useAppStore().newMenuShow" :direction="'ltr'"
-               style="background-color:rgb(255,255,255);opacity: 80%;">
+    <el-drawer class="w-30vw! menu-style" v-model="useAppStore().newMenuShow" :direction="'ltr'"
+      style="background-color:rgba(28, 121, 244,.9)">
       <template #title>
-        <div class="flex flex-justify-end">菜单</div>
+        <div class="flex-justify-end color-white fw-bold text-20px">菜单</div>
       </template>
       <template #default>
         <div class="flex justify-between">
-          <div>全局导航</div>
+          <div class="color-white">全局导航</div>
           <div class="flex flex-justify-end">
             <el-input placeholder="请输入菜单名称" v-model="seachMenu" clearable>
               <template #append>
-                <el-button @click="handleSearchMenu" :icon="Search"/>
+                <el-button @click="handleSearchMenu" :icon="Search" />
               </template>
             </el-input>
           </div>
         </div>
-        <div v-for="(item,index) in newMenuCard" :key="index">
-          <el-divider content-position="left" class="text-24px">{{ item.meta.title }}</el-divider>
+
+        <div v-for="(item, index) in newMenuCard" :key="index">
+
+          <el-divider class="left-0 mt-20px" content-position="left" border-style="double" style="">
+            <div class="color-white text-16px lh-relaxed font-bold">{{ item.meta.title }}</div>
+          </el-divider>
+
           <el-row>
-            <el-col :lg="4" :md="6" :sm="8" class="text-12px" v-for="(q,w) in item?.children" :key="w">
-              <el-button @click="toLink(q,item.path)">
+            <el-col :lg="4" :md="6" :sm="8" class="m-10px" v-for="(q, w) in item?.children" :key="w">
+              <el-button @click="toLink(q, item.path)" class="color-white text-14px"
+                style="background-color: rgba(83, 152, 242, 0.6);">
                 {{ q.meta.title }}
               </el-button>
             </el-col>
@@ -33,24 +39,24 @@
     </el-drawer>
     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar @setLayout="setLayout"/>
-        <tags-view v-if="needTagsView"/>
+        <navbar @setLayout="setLayout" />
+        <tags-view v-if="needTagsView" />
       </div>
-      <app-main/>
-      <settings ref="settingRef"/>
+      <app-main />
+      <settings ref="settingRef" />
     </div>
   </div>
 </template>
 
 <script setup>
-import {useWindowSize} from '@vueuse/core'
-import {AppMain, Navbar, Settings, TagsView} from './components'
+import { useWindowSize } from '@vueuse/core'
+import { AppMain, Navbar, Settings, TagsView } from './components'
 
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from "@/store/modules/permission.js";
-import {useRouter} from "vue-router";
-import {Search} from "@element-plus/icons-vue";
+import { useRouter } from "vue-router";
+import { Search } from "@element-plus/icons-vue";
 
 const settingsStore = useSettingsStore()
 const theme = computed(() => settingsStore.theme);
@@ -102,26 +108,26 @@ const classObj = computed(() => ({
   mobile: device.value === 'mobile'
 }))
 
-const {width, height} = useWindowSize();
+const { width, height } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watch(() => device.value, () => {
   if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({withoutAnimation: false})
+    useAppStore().closeSideBar({ withoutAnimation: false })
   }
 })
 
 watchEffect(() => {
   if (width.value - 1 < WIDTH) {
     useAppStore().toggleDevice('mobile')
-    useAppStore().closeSideBar({withoutAnimation: true})
+    useAppStore().closeSideBar({ withoutAnimation: true })
   } else {
     useAppStore().toggleDevice('desktop')
   }
 })
 
 function handleClickOutside() {
-  useAppStore().closeSideBar({withoutAnimation: false})
+  useAppStore().closeSideBar({ withoutAnimation: false })
 }
 
 const settingRef = ref(null);
@@ -166,6 +172,18 @@ function setLayout() {
   transition: width 0.28s;
 }
 
+:deep(.el-drawer__header) {
+  margin-bottom: 0;
+  color: white;
+}
+
+
+:deep(.el-divider__text) {
+  left: 0;
+  background-color: rgb(28, 121, 244);
+  border-radius: 10px;
+}
+
 .hideSidebar .fixed-header {
   width: calc(100% - 54px);
 }

src/views/device/manhole/index.vue

@@ -62,7 +62,7 @@ const handleSelect = (key) => {
 
     <!-- Main Content -->
     <div class="flex-1 overflow-auto">
-      <div class="bg-white p-4 shadow-sm flex justify-between items-center">
+      <!-- <div class="bg-white p-4 shadow-sm flex justify-between items-center">
         <div class="text-lg font-medium">
           {{ currentComponent === 'DeviceManagement' ? '设备管理' : '报警管理' }}
         </div>
@@ -73,7 +73,7 @@ const handleSelect = (key) => {
           <el-avatar size="small" src="https://placeholder.svg?height=32&width=32" />
           <span>管理员</span>
         </div>
-      </div>
+      </div> -->
 
       <div class="p-6">
         <component :is="currentComponent"></component>