春风项目四线(合箱线、总装线)
懒羊羊
2024-01-15 1558d8b4bb1f928a79b6c3c03ae1aa0f3c5b4a83
提交 | 用户 | 时间
fd2207 1 <template>
2   <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
3     <transition name="sidebarLogoFade">
4       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
5         <img v-if="logo" :src="logo" class="sidebar-logo" />
6         <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
7       </router-link>
8       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
9         <img v-if="logo" :src="logo" class="sidebar-logo" />
10         <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
11       </router-link>
12     </transition>
13   </div>
14 </template>
15
16 <script>
17 import logoImg from '@/assets/logo/logo.png'
18 import variables from '@/assets/styles/variables.scss'
19
20 export default {
21   name: 'SidebarLogo',
22   props: {
23     collapse: {
24       type: Boolean,
25       required: true
26     }
27   },
28   computed: {
29     variables() {
30       return variables;
31     },
32     sideTheme() {
33       return this.$store.state.settings.sideTheme
34     }
35   },
36   data() {
37     return {
38       title: process.env.VUE_APP_TITLE,
39       logo: logoImg
40     }
41   }
42 }
43 </script>
44
45 <style lang="scss" scoped>
46 .sidebarLogoFade-enter-active {
47   transition: opacity 1.5s;
48 }
49
50 .sidebarLogoFade-enter,
51 .sidebarLogoFade-leave-to {
52   opacity: 0;
53 }
54
55 .sidebar-logo-container {
56   position: relative;
57   width: 100%;
58   height: 50px;
59   line-height: 50px;
60   background: #2b2f3a;
61   text-align: center;
62   overflow: hidden;
63
64   & .sidebar-logo-link {
65     height: 100%;
66     width: 100%;
67
68     & .sidebar-logo {
69       width: 32px;
70       height: 32px;
71       vertical-align: middle;
72       margin-right: 12px;
73     }
74
75     & .sidebar-title {
76       display: inline-block;
77       margin: 0;
78       color: #fff;
79       font-weight: 600;
80       line-height: 50px;
81       font-size: 14px;
82       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
83       vertical-align: middle;
84     }
85   }
86
87   &.collapse {
88     .sidebar-logo {
89       margin-right: 0px;
90     }
91   }
92 }
93 </style>