blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-09-08 20:27:19 +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> <template>
<div class="sidebar-logo-container"> <div class="sidebar-logo-container">
<transition name="sidebarLogoFade"> <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"> <img :src="logo" class="sidebar-logo">
</router-link> </router-link>
</transition> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<transition name="sidebarLogoFade">
<router-link v-if="!collapse" to="/" class="sidebar-logo-link">
<img :src="logo" class="sidebar-logo"> <img :src="logo" class="sidebar-logo">
<h1 class="sidebar-title">{{ title }} </h1> <h1 class="sidebar-title">{{ title }} </h1>
</router-link> </router-link>
@ -32,15 +30,17 @@ export default {
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.sidebarLogoFade-enter-active { .sidebarLogoFade-enter-active {
transition: opacity 1.5s; transition: opacity 1.5s;
} }
.sidebarLogoFade-enter,
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to { .sidebarLogoFade-leave-to {
opacity: 0; opacity: 0;
} }
.sidebar-logo-container {
.sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 50px; height: 50px;
@ -48,15 +48,18 @@ export default {
background: #2b2f3a; background: #2b2f3a;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
& .sidebar-logo-link {
& .sidebar-logo-link {
height: 100%; height: 100%;
width: 100%; width: 100%;
& .sidebar-logo {
& .sidebar-logo {
width: 32px; width: 32px;
height: 32px; height: 32px;
vertical-align: middle; vertical-align: middle;
} }
& .sidebar-title {
& .sidebar-title {
display: inline-block; display: inline-block;
margin: 0 0 0 12px; margin: 0 0 0 12px;
color: #fff; color: #fff;