提交 | 用户 | age
|
2a61f6
|
1 |
<template> |
L |
2 |
<div class="sidebar-logo-container" :class="{'collapse':collapse}"> |
|
3 |
<transition name="sidebarLogoFade"> |
|
4 |
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> |
d8f5a1
|
5 |
<img v-if="logo" :src="logo" class="sidebar-logo logo-center"> |
2a61f6
|
6 |
<h1 v-else class="sidebar-title">{{ title }} </h1> |
L |
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">{{ title }} </h1> |
|
11 |
</router-link> |
|
12 |
</transition> |
|
13 |
</div> |
|
14 |
</template> |
|
15 |
|
|
16 |
<script> |
|
17 |
export default { |
|
18 |
name: 'SidebarLogo', |
|
19 |
props: { |
|
20 |
collapse: { |
|
21 |
type: Boolean, |
|
22 |
required: true |
|
23 |
} |
|
24 |
}, |
|
25 |
data() { |
|
26 |
return { |
|
27 |
title: '”项目名称“', |
855cab
|
28 |
logo: '' |
2a61f6
|
29 |
} |
L |
30 |
} |
|
31 |
} |
|
32 |
</script> |
|
33 |
|
|
34 |
<style lang="scss" scoped> |
|
35 |
.sidebarLogoFade-enter-active { |
|
36 |
transition: opacity 1.5s; |
|
37 |
} |
|
38 |
|
|
39 |
.sidebarLogoFade-enter, |
|
40 |
.sidebarLogoFade-leave-to { |
|
41 |
opacity: 0; |
|
42 |
} |
|
43 |
|
|
44 |
.sidebar-logo-container { |
|
45 |
position: relative; |
|
46 |
width: 100%; |
|
47 |
height: 50px; |
|
48 |
line-height: 50px; |
|
49 |
background: #2b2f3a; |
|
50 |
text-align: center; |
|
51 |
overflow: hidden; |
|
52 |
|
|
53 |
& .sidebar-logo-link { |
|
54 |
height: 100%; |
|
55 |
width: 100%; |
|
56 |
|
|
57 |
& .sidebar-logo { |
|
58 |
width: 32px; |
|
59 |
height: 32px; |
|
60 |
vertical-align: middle; |
|
61 |
margin-right: 12px; |
|
62 |
} |
|
63 |
|
d8f5a1
|
64 |
& .logo-center { |
L |
65 |
margin-top: 50%; |
|
66 |
transform: translateY(-50%); |
|
67 |
} |
|
68 |
|
2a61f6
|
69 |
& .sidebar-title { |
L |
70 |
display: inline-block; |
|
71 |
margin: 0; |
|
72 |
color: #fff; |
|
73 |
font-weight: 600; |
|
74 |
line-height: 50px; |
|
75 |
font-size: 14px; |
|
76 |
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; |
|
77 |
vertical-align: middle; |
|
78 |
} |
|
79 |
} |
|
80 |
|
|
81 |
&.collapse { |
|
82 |
.sidebar-logo { |
|
83 |
margin-right: 0px; |
|
84 |
} |
|
85 |
} |
|
86 |
} |
|
87 |
</style> |