From a88eab39f6b2f5c33913d51fac4e885c052ed4a1 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 21 八月 2025 14:39:00 +0800
Subject: [PATCH] 整体样式修改
---
src/layout/components/Sidebar/Logo.vue | 123 ++++++++++++++++++++--------------------
1 files changed, 61 insertions(+), 62 deletions(-)
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index b2f1595..11bcd8c 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,16 +1,16 @@
<template>
- <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
- <transition name="sidebarLogoFade">
- <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
- <img v-if="logo" :src="logo" class="sidebar-logo" />
- <h1 v-else class="sidebar-title">{{ title }}</h1>
- </router-link>
- <router-link v-else key="expand" class="sidebar-logo-link" to="/">
- <img v-if="logo" :src="logo" class="sidebar-logo" />
- <h1 class="sidebar-title">{{ title }}</h1>
- </router-link>
- </transition>
- </div>
+ <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
+ <transition name="sidebarLogoFade">
+ <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+ <img v-if="logo" :src="logo" class="sidebar-logo" />
+ <h1 v-else class="sidebar-title">{{ title }}</h1>
+ </router-link>
+ <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+ <img v-if="logo" :src="logo" class="sidebar-logo" />
+ <h1 class="sidebar-title">{{ title }}</h1>
+ </router-link>
+ </transition>
+ </div>
</template>
<script setup>
@@ -19,10 +19,10 @@
import variables from '@/assets/styles/variables.module.scss'
defineProps({
- collapse: {
- type: Boolean,
- required: true
- }
+ collapse: {
+ type: Boolean,
+ required: true
+ }
})
const title = import.meta.env.VITE_APP_TITLE
@@ -31,18 +31,18 @@
// 鑾峰彇Logo鑳屾櫙鑹�
const getLogoBackground = computed(() => {
- if (settingsStore.isDark) {
- return 'var(--sidebar-bg)'
- }
- return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
+ if (settingsStore.isDark) {
+ return 'var(--sidebar-bg)'
+ }
+ return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
})
// 鑾峰彇Logo鏂囧瓧棰滆壊
const getLogoTextColor = computed(() => {
- if (settingsStore.isDark) {
- return 'var(--sidebar-text)'
- }
- return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText
+ if (settingsStore.isDark) {
+ return 'var(--sidebar-text)'
+ }
+ return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText
})
</script>
@@ -50,50 +50,49 @@
@import '@/assets/styles/variables.module.scss';
.sidebarLogoFade-enter-active {
- transition: opacity 1.5s;
+ transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
- opacity: 0;
+ opacity: 0;
}
.sidebar-logo-container {
- position: relative;
- width: 100%;
- height: 50px;
- line-height: 50px;
- background: v-bind(getLogoBackground);
- text-align: center;
- overflow: hidden;
-
- & .sidebar-logo-link {
- height: 100%;
- width: 100%;
-
- & .sidebar-logo {
- width: 32px;
- height: 32px;
- vertical-align: middle;
- margin-right: 12px;
- }
-
- & .sidebar-title {
- display: inline-block;
- margin: 0;
- color: v-bind(getLogoTextColor);
- font-weight: 600;
- line-height: 50px;
- font-size: 14px;
- font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
- vertical-align: middle;
- }
- }
-
- &.collapse {
- .sidebar-logo {
- margin-right: 0px;
- }
- }
+ position: relative;
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ background: v-bind(getLogoBackground);
+ text-align: center;
+ overflow: hidden;
+
+ & .sidebar-logo-link {
+ height: 100%;
+ width: 100%;
+
+ & .sidebar-logo {
+ height: 32px;
+ vertical-align: middle;
+ margin-right: 12px;
+ }
+
+ & .sidebar-title {
+ display: inline-block;
+ margin: 0;
+ color: v-bind(getLogoTextColor);
+ font-weight: 600;
+ line-height: 50px;
+ font-size: 14px;
+ font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+ vertical-align: middle;
+ }
+ }
+
+ &.collapse {
+ .sidebar-logo {
+ margin-right: 0px;
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3