github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2025-09-25 22:36:23 +00:00
Code Issues Projects Releases Wiki Activity

[UPDATE]更新动画

Browse Source
This commit is contained in:
OrangeM21
2020-03-22 16:09:00 +08:00
parent e5e44f03db
commit 6e90f8de23
2 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,9 +45,9 @@ export default {
.sidebar-logo-container { .sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 50px; height: 70px;
line-height: 50px; line-height: 60px;
background: #2b2f3a; // background: #2b2f3a;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;

56
src/layout/components/Sidebar/Organization.vue
View File

@@ -1,15 +1,17 @@
<template> <template>
<div v-if="!isCollapse && orglist.length>1" style="display: block; background-color: transparent; padding: 14px 20px 14px 20px"> <transition name="sidebarLogoFade">
<el-dropdown size="medium"> <div v-if="!isCollapse && orglist.length>1" style="display: block; background-color: transparent; padding: 14px 20px 14px 20px">
<span class="el-dropdown-link" style="color: rgb(167, 177, 194);"> <el-dropdown size="medium">
<i class="fa fa-bookmark" style="width: 14px;margin-right: 12px; " /> <span class="el-dropdown-link" style="color: rgb(167, 177, 194);">
{{ currentorg.name }}<i class="el-icon-arrow-down el-icon--right" /> <i class="fa fa-bookmark" style="width: 14px;margin-right: 12px; " />
</span> {{ currentorg.name }}<i class="el-icon-arrow-down el-icon--right" />
<el-dropdown-menu slot="dropdown"> </span>
<el-dropdown-item v-for="(option) in orglist" :key="option.id" @click.native="changeOrg(option.name, option.id)">{{ option.name }}</el-dropdown-item> <el-dropdown-menu slot="dropdown">
</el-dropdown-menu> <el-dropdown-item v-for="(option) in orglist" :key="option.id" @click.native="changeOrg(option.name, option.id)">{{ option.name }}</el-dropdown-item>
</el-dropdown> </el-dropdown-menu>
</div> </el-dropdown>
</div>
</transition>
</template> </template>
<script> <script>
@@ -41,19 +43,27 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-dropdown-menu{ .sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
}
.el-dropdown-menu{
width: 200px; width: 200px;
} }
.el-dropdown-menu >>> .popper__arrow{ .el-dropdown-menu >>> .popper__arrow{
display: none; display: none;
} }
.el-dropdown{ .el-dropdown{
width: 100%; width: 100%;
} }
.el-icon-arrow-down{ .el-icon-arrow-down{
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0px; right: 0px;
margin-top: -7px; margin-top: -7px;
} }
</style> </style>