wangyu
9055d34484
- Login: split-screen design with blue gradient branding panel - Dashboard: replace RuoYi default page with bid system stats & quick actions - Logo: add object-fit contain for full logo display - Avatar: replace with blue/gray person silhouette
47 lines
2.3 KiB
Vue
47 lines
2.3 KiB
Vue
<template>
|
|
<div class="sidebar-logo-container" :class="{ collapse: collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' && navType !== 3 ? 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" />
|
|
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ 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" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
|
|
</router-link>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import logoImg from "@/assets/logo/logo.png"
|
|
import variables from "@/assets/styles/variables.scss"
|
|
|
|
export default {
|
|
name: "SidebarLogo",
|
|
props: { collapse: { type: Boolean, required: true } },
|
|
computed: {
|
|
variables() { return variables },
|
|
sideTheme() { return this.$store.state.settings.sideTheme },
|
|
navType() { return this.$store.state.settings.navType }
|
|
},
|
|
data() { return { title: process.env.VUE_APP_TITLE, logo: logoImg } }
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sidebarLogoFade-enter-active { transition: opacity 1.5s; }
|
|
.sidebarLogoFade-enter, .sidebarLogoFade-leave-to { opacity: 0; }
|
|
.sidebar-logo-container {
|
|
position: relative; height: 50px; line-height: 50px;
|
|
background: #2b2f3a; text-align: center; overflow: hidden;
|
|
.sidebar-logo-link {
|
|
height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none;
|
|
.sidebar-logo { width: 34px; height: 34px; object-fit: contain; margin-right: 10px; flex-shrink: 0; }
|
|
.sidebar-title { display: inline-block; margin: 0; color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
}
|
|
}
|
|
.sidebar-logo-container.collapse .sidebar-logo-link { justify-content: center; }
|
|
.sidebar-logo-container.collapse .sidebar-logo { margin-right: 0 !important; }
|
|
</style>
|