From 1b555a0ab0527478cdf2b0c31c0ea8aea70f8adc Mon Sep 17 00:00:00 2001
From: yxh <172933527@qq.com>
Date: 星期四, 15 六月 2023 10:52:39 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master' into yxh01
---
src/layout/components/Sidebar/Logo.vue | 128 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 128 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..7245441
--- /dev/null
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -0,0 +1,128 @@
+<template>
+ <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" />
+ <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: 50px;
+ line-height: 50px;
+ background: #2b2f3a;
+ text-align: center;
+ overflow: hidden;
+
+ & .sidebar-logo-link {
+ height: 100%;
+ width: 100%;
+
+ & .sidebar-logo {
+ width: 42px;
+ height: 42px;
+ vertical-align: middle;
+ margin-right: 12px;
+ }
+
+ & .sidebar-title {
+ display: inline-block;
+ margin: 0;
+ color: #fff;
+ font-weight: 600;
+ line-height: 50px;
+ font-size: 16px;
+ font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+ vertical-align: middle;
+ }
+ }
+
+ &.collapse {
+ .sidebar-logo {
+ margin-right: 0px;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3