logo修改

src/layout/components/Asider/index.vue

@@ -4,7 +4,7 @@
     :style="appStore.menuDark ? appStore.themeCSSVar : undefined"
   >
     <a-layout-sider
-      class="menu" collapsible breakpoint="xl" hide-trigger :width="300"
+      class="menu" collapsible breakpoint="xl" hide-trigger :width="250"
       :collapsed="appStore.menuCollapse" @collapse="handleCollapse"
     >
       <Logo :collapsed="appStore.menuCollapse"></Logo>

src/layout/components/Logo.vue

@@ -1,8 +1,12 @@
 <template>
   <section class="system-logo" :class="{ collapsed: props.collapsed }" @click="toHome">
-    <img v-if="logo" class="logo" :src="logo" alt="logo" />
+    <row>
-    <img v-else class="logo" src="/logo.svg" alt="logo" />
+      <img v-if="logo" class="logo" :src="logo" alt="logo" />
-    <span class="system-name gi_line_1">{{ title }}</span>
+      <img v-else class="logo" src="/logo.svg" alt="logo" />
+    </row>
+    <row>
+      <span class="system-name gi_line_1">{{ title }}</span>
+    </row>
   </section>
 </template>
 
@@ -14,8 +18,10 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const appStore = useAppStore()
 // const title = computed(() => appStore.getTitle())
-const title = "武汉迪特聚能有限公司管理平台"
+const title = "数智平台"
-const logo = computed(() => appStore.getLogo())
+const logo = "/logo.png"
+//computed(() => appStore.getLogo())
+
 
 interface Props {
   collapsed?: boolean
@@ -29,50 +35,46 @@ const toHome = () => {
 
 <style scoped lang="scss">
 .system-logo {
-  height: 56px;
+  height: 64px; // 增加高度，给上下排列留空间
-  padding: 0 12px;
+  padding: 8px 12px;
-  color: var(--color-text-1);
-  font-size: 16px;
-  line-height: 1;
   display: flex;
-  font-weight: 600;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  flex-shrink: 0;
   cursor: pointer;
   user-select: none;
   box-sizing: border-box;
 
   &.collapsed {
+    height: 56px;
+    flex-direction: row;
     padding: 0;
-    display: flex;
     justify-content: center;
-    align-items: center;
+
     .system-name {
       display: none;
     }
-  }
 
-  .logo {
+    .logo {
-    width: 32px;
+      margin-bottom: 0;
-    height: 32px;
-    border-radius: 6px;
-    transition: all 0.2s;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .system-name {
-    padding-left: 6px;
-    white-space: nowrap;
-    transition: color 0.3s;
-    line-height: 1.5;
-    display: inline-flex;
-    align-items: center;
-
-    &:hover {
-      color: $color-theme !important;
-      cursor: pointer;
     }
   }
 }
+
+.logo {
+  height: 32px;
+  width: auto;
+  max-width: 140px; // 根据你 logo 实际宽度调整
+  object-fit: contain;
+  margin-bottom: 4px;
+}
+
+.system-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  text-align: center;
+  line-height: 1.2;
+  white-space: nowrap;
+}
 </style>