/
githubmirror
/
vue-element-admin
Обзор
Документация
Войти
/
githubmirror
/
vue-element-admin
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/layout/components/Sidebar/Logo.vue
82 строки
2 KB
花裤衩
[release] 4.0.0 (#1291)
01 апр 2019, 12:07
Не верифицирован
01 апр 2019, 12:07
b94e69b
Код
Авторство
О чём код?
<template> <div class="sidebar-logo-container" :class="{'collapse':collapse}"> <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">{{ 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">{{ title }} </h1> </router-link> </transition> </div> </template> <script> export default { name: 'SidebarLogo', props: { collapse: { type: Boolean, required: true } }, data() { return { title: 'Vue Element Admin', logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png' } } } </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: 32px; height: 32px; vertical-align: middle; margin-right: 12px; } & .sidebar-title { display: inline-block; margin: 0; color: #fff; font-weight: 600; line-height: 50px; font-size: 14px; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; vertical-align: middle; } } &.collapse { .sidebar-logo { margin-right: 0px; } } } </style>