'init'

src/layout/components/Sidebar/Logo.vue

@@ -0,0 +1,126 @@
+<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/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;
+		},
+	},
+	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: 32px;
+			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>