From 55ff4ad6155248a7c2f391fd4fe75682a311dac0 Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期四, 24 七月 2025 16:54:26 +0800 Subject: [PATCH] refactor(svg): 优化 SVG相关组件功能 --- zhitan-vue/src/layout/components/Sidebar/Logo.vue | 67 ++++++++++++++++++--------------- 1 files changed, 36 insertions(+), 31 deletions(-) diff --git a/zhitan-vue/src/layout/components/Sidebar/Logo.vue b/zhitan-vue/src/layout/components/Sidebar/Logo.vue index 86a54a6..36ee63f 100644 --- a/zhitan-vue/src/layout/components/Sidebar/Logo.vue +++ b/zhitan-vue/src/layout/components/Sidebar/Logo.vue @@ -1,6 +1,9 @@ <template> - <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" - :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> + <div + class="sidebar-logo-container" + :class="{ collapse: collapse }" + :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }" + > <!-- <transition name="sidebarLogoFade"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <img v-if="logo" :src="logo" class="sidebar-logo" /> @@ -11,33 +14,35 @@ <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1> </router-link> </transition> --> - <!-- <div class="logo"> - <img v-if=" sideTheme === 'theme-dark'" :src="logo" class="sidebar-logo" /> - <img v-else :src="logo2" class="sidebar-logo" /> - </div> --> + <div class="logo" v-if="systemInfo && systemInfo.leftLogo"> + <img v-if="sideTheme === 'theme-dark'" :src="systemInfo.leftLogo" class="sidebar-logo" /> + <img v-else :src="systemInfo.leftLogo" class="sidebar-logo" /> + </div> - <div class="name" v-if="!collapse" :style="{color: sideTheme === 'theme-dark' ? '#fff' : '#487FEE'}">{{ title }}</div> + <div class="name" v-if="!collapse" :style="{ color: sideTheme === 'theme-dark' ? '#fff' : '#333' }"> + {{ title }} + </div> </div> </template> <script setup> -// import Cookies from 'js-cookie' -import variables from '@/assets/styles/variables.module.scss' -import logo from '@/assets/logo/logo-2.png' -import logo2 from '@/assets/logo/logo-3.png' -import useSettingsStore from '@/store/modules/settings' -import { color } from 'echarts'; -// const systemInfo = JSON.parse(sessionStorage.getItem('SystemInfo')) +import Cookies from "js-cookie" +import variables from "@/assets/styles/variables.module.scss" +import logo from "@/assets/logo/logo-2.png" +import logo2 from "@/assets/logo/logo-3.png" +import useSettingsStore from "@/store/modules/settings" +import { color } from "echarts" +const systemInfo = JSON.parse(Cookies.get("SystemInfo")) defineProps({ collapse: { type: Boolean, - required: true - } + required: true, + }, }) -const title = import.meta.env.VITE_APP_TITLE; -const settingsStore = useSettingsStore(); -const sideTheme = computed(() => settingsStore.sideTheme); +const title = systemInfo.systemName || import.meta.env.VITE_APP_TITLE +const settingsStore = useSettingsStore() +const sideTheme = computed(() => settingsStore.sideTheme) </script> <style lang="scss" scoped> @@ -53,31 +58,31 @@ .sidebar-logo-container { position: relative; width: 100%; - height: 50px; - line-height: 50px; - background: #2b2f3a; + height: 70px; + line-height: 70px; + background: #1a235d; text-align: center; overflow: hidden; display: flex; + justify-content: center; align-items: center; - margin-top: 24px; - margin-bottom: 15px; + // margin-top: 24px; + // margin-bottom: 15px; .logo { - width: 87px; - height: 30px; - margin-left: 13px; + width: 40px; + height: 40px; + margin-left: 10px; .sidebar-logo { width: 100%; height: 100%; } } .name { - width: 100%; - margin-top: 2px; + // width: 210px; margin-left: 6px; font-family: OPPOSans, OPPOSans; font-weight: bold; - font-size: 24px; + font-size: 20px; color: #ffffff; } @@ -133,4 +138,4 @@ } } } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3