fix: 项目布局修改

src/layout/components/Sidebar/index.vue

@@ -1,18 +1,20 @@
 <template>
-  <a-row>
-    <a-col>
-      <a-layout-sider
+
+  <a-layout-sider
         :trigger="null"
         v-model:collapsed="collapsed"
         collapsible
-        style="background: #fff; height: 95%;"
+        :style="{backgroundColor: bgColor, overflow: 'hidden'}"
         breakpoint="lg"
       >
+        <div class="logo" >
+          <img :src="logoPng" alt="">
+        </div>
         <a-menu
           v-model:selectedKeys="selectedKeys2"
           :openKeys="openKeys"
           mode="inline"
-          :style="{ height: '100%', borderRight: 0 }"
+          :style="{ borderRight: 0 }"
         >
           <sidebar-item
             :item="route"
@@ -21,19 +23,25 @@
             :base-path="route.path"
           />
         </a-menu>
-      </a-layout-sider>
-    </a-col>
-  </a-row>
+  </a-layout-sider>
+
 </template>
 
 <script lang="ts" setup >
 
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, computed } from 'vue'
 import { useAppRouter } from '@/store/router'
 import SidebarItem from './SidebarItem.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useEmitter } from '@/hooks'
 import { Emitter } from '@/enum'
+import { useDesignStore } from '@/store'
+
+const logoPng = require('@/assets/logo.png')
+
+const designStore = useDesignStore()
+
+const bgColor = computed(() => designStore.theme ? '#141414' : '#fff')
 
 const appRouter = useAppRouter()
 
@@ -64,4 +72,19 @@ onMounted(() => {
 /deep/ .ant-layout-sider-children {
   margin-top: -4px;
 }
+
+.logo {
+  width: 100%;
+  height: 64px;
+  margin: 20px 0px;
+  margin-top: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  img {
+    width: 150px;
+    height: 50px;
+  }
+}
 </style>

src/layout/layout.vue

@@ -1,18 +1,16 @@
 <template>
+  <!-- style="height: 100vh"  -->
     <a-layout class="a-layout" >
-      <Navbar />
-      <a-layout>
-      <SiderBar />
 
-      <a-layout style="padding: 0 24px 24px; margin-top: 20px;overflow: hidden;overflow-y: scroll;padding-bottom: 40px;">
-        <!-- <Breadcrumb /> -->
-        <RouterView></RouterView>
-          <!-- <a-layout-content
-          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
-          >
-          </a-layout-content> -->
-      </a-layout>
+      <SiderBar />
+      <!-- style="overflow: hidden;overflow-y: scroll; " -->
+      <a-layout >
+        <Navbar />
+        <span style="padding: 0 24px 24px;margin-top: 24px;overflow: hidden;overflow-y: scroll" >
+          <RouterView></RouterView>
+        </span>
       </a-layout>
+
   </a-layout>
 </template>
 
@@ -24,8 +22,8 @@ import SiderBar from './components/Sidebar/index.vue'
 <style>
 
 .a-layout {
-    width: 100vw;
-    height: 100vh;
+  /* width: 100vw; */
+  height: 100vh;
 }
 
 #components-layout-demo-top-side-2 .logo {

src/layout/navbar.vue

@@ -1,11 +1,6 @@
 <template>
   <a-layout-header class="header" :style="{backgroundColor: headerBgColor}">
-      <a-row style="width: 100%;"  >
-        <!-- <a-col :span="3" >
-          <div class="logo" >
-            <img :src="logoPng" alt="">
-          </div>
-        </a-col> -->
+      <a-row   >
         <a-col :span="18" >
         <a-menu
           mode="horizontal"
@@ -32,7 +27,6 @@
           </a-row>
         </a-col>
       </a-row>
-
   </a-layout-header>
 </template>
 
@@ -45,7 +39,7 @@ import { routes } from '@/router/index'
 import { IconTsx } from '@/components/MicroComponents/index'
 import { useDesignStore } from '@/store'
 
-const logoPng = require('@/assets/logo.jpg')
+const logoPng = require('@/assets/logo.png')
 
 const router = useRouter()
 
@@ -109,18 +103,10 @@ onMounted(() => {
 
 <style lang="less" scoped >
 .header {
-  position: relative;
-  z-index: 2;
-  background-color: #fff;
-}
-
-.logo {
-  width: 150px;
-  height: 50px;
-  img {
-    width: 100%;
-    height: 100%;
-  }
+  // width: 100%;
+  // position: absolute;
+  // z-index: 2;
+  // background-color: #fff;
 }
 
 .df-center {

src/layout/user.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup >
-const ava = require('@/assets/logo.jpg')
+const ava = require('@/assets/logo.png')
 </script>
 
 <style lang="less" scoped >

src/pages/Iot/sys/noticeway.vue

@@ -64,8 +64,6 @@ import { SysController } from '@/controller'
 import { onMounted, reactive } from 'vue'
 import { Form } from 'ant-design-vue'
 
-const logoPng = require('@/assets/logo.jpg')
-
 const state = reactive<{
   sys: Partial<IOT.API.SYS.Sys>,
   visible: boolean