From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 27 五月 2025 17:52:03 +0800
Subject: [PATCH] 页面样式修改
---
src/layout/components/Sidebar/Logo.vue | 99 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 99 insertions(+), 0 deletions(-)
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
new file mode 100644
index 0000000..b2f1595
--- /dev/null
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -0,0 +1,99 @@
+<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>
+</template>
+
+<script setup>
+import logo from '@/assets/logo/logo.png'
+import useSettingsStore from '@/store/modules/settings'
+import variables from '@/assets/styles/variables.module.scss'
+
+defineProps({
+ collapse: {
+ type: Boolean,
+ required: true
+ }
+})
+
+const title = import.meta.env.VITE_APP_TITLE
+const settingsStore = useSettingsStore()
+const sideTheme = computed(() => settingsStore.sideTheme)
+
+// 鑾峰彇Logo鑳屾櫙鑹�
+const getLogoBackground = computed(() => {
+ 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
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/variables.module.scss';
+
+.sidebarLogoFade-enter-active {
+ transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+ 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;
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3