blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-09-07 02:19:49 +08:00
Code Issues Releases Wiki Activity

update css

Browse Source
This commit is contained in:
Pan 2019-03-25 14:21:54 +08:00
parent ddb0f14bef
commit a9ed60781d
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/layout/components/Sidebar/Logo.vue
View File

@ -1,12 +1,10 @@
<template>
<div class="sidebar-logo-container">
<transition name="sidebarLogoFade">
<router-link v-if="collapse" class="sidebar-logo-link" to="/">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img :src="logo" class="sidebar-logo">
</router-link>
</transition>
<transition name="sidebarLogoFade">
<router-link v-if="!collapse" to="/" class="sidebar-logo-link">
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img :src="logo" class="sidebar-logo">
<h1 class="sidebar-title">{{ title }} </h1>
</router-link>
@ -32,15 +30,17 @@ export default {
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
<style rel="stylesheet/scss" lang="scss" scoped>
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
}
.sidebar-logo-container {
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
@ -48,15 +48,18 @@ export default {
background: #2b2f3a;
text-align: center;
overflow: hidden;
& .sidebar-logo-link {
& .sidebar-logo-link {
height: 100%;
width: 100%;
& .sidebar-logo {
& .sidebar-logo {
width: 32px;
height: 32px;
vertical-align: middle;
}
& .sidebar-title {
& .sidebar-title {
display: inline-block;
margin: 0 0 0 12px;
color: #fff;