wms-axl/src/layout/components/Sidebar/Logo.vue

<template>
	<div
		class="sidebar-logo-container"
		:class="{ collapse: collapse }"
		:style="{
			backgroundColor:
				sideTheme === 'theme-dark' ? '#1f2d3d' : variables.menuLightBackground,
		}">
		<!-- 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" />
				<h1
					v-else
					class="sidebar-title"
					:style="{
						color:
							sideTheme === 'theme-dark'
								? 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'
								? variables.logoTitleColor
								: variables.logoLightTitleColor,
					}">
					{{ title }}
				</h1>
			</router-link>
		</transition>
	</div>
</template>

<script>
import logoImg from '@/assets/loge_ys1.svg';
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;
		},
	},
	data() {
		return {
			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;
	width: 100%;
	height: 56px;
	line-height: 56px;
	background: #1445cc;
	text-align: center;
	overflow: hidden;

	& .sidebar-logo-link {
		height: 100%;
		width: 100%;

		& .sidebar-logo {
			width: 45px;
			height: 40px;
			vertical-align: middle;
			margin-right: 12px;
		}

		& .sidebar-title {
			display: inline-block;
			margin: 0;
			color: #fff;
			font-weight: 600;
			line-height: 50px;
			font-size: 18px;
			letter-spacing: 1px;
			font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
			vertical-align: middle;
		}
	}

	&.collapse {
		.sidebar-logo {
			margin-right: 0px;
		}
	}
}
</style>