【类 型】:factor
【原 因】:导航标题 控制终端 后台管理 切换不明显 【过 程】:现价三个点图标 配合动画 【影 响】: # 类型 包含: # feat:新功能(feature) # fix:修补bug # docs:文档(documentation) # style: 格式(不影响代码运行的变动) # refactor:重构(即不是新增功能,也不是修改bug的代码变动) # test:增加测试 # chore:构建过程或辅助工具的变动
This commit is contained in:
parent
d988e385b7
commit
9e32694cf9
@ -5,9 +5,13 @@
|
|||||||
<div v-if="isCollapse" key="isCollapse" class="sidebar-logo-link" @click="isTap = !isTap">
|
<div v-if="isCollapse" key="isCollapse" class="sidebar-logo-link" @click="isTap = !isTap">
|
||||||
<img :src="isTap ? require('@/assets/logo.svg') : require('@/assets/appletLogo.svg')" class="sidebar-logo">
|
<img :src="isTap ? require('@/assets/logo.svg') : require('@/assets/appletLogo.svg')" class="sidebar-logo">
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 展开状态下 -->
|
||||||
<div v-else key="expand" class="sidebar-logo-link" @click="isTap = !isTap">
|
<div v-else key="expand" class="sidebar-logo-link" @click="isTap = !isTap">
|
||||||
<img :src="isTap ? require('@/assets/logo.svg') : require('@/assets/appletLogo.svg')" class="sidebar-logo">
|
<img :src="isTap ? require('@/assets/logo.svg') : require('@/assets/appletLogo.svg')" class="sidebar-logo">
|
||||||
<h1 class="sidebar-title">{{ title }}</h1>
|
<div class="sidebar-title-wrap">
|
||||||
|
<h1 class="sidebar-title">{{ title }}</h1>
|
||||||
|
<i class="el-icon-more arrow-icon" :class="{ rotate: !isTap }"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- end logo -->
|
<!-- end logo -->
|
||||||
@ -250,5 +254,43 @@ h1 {
|
|||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-logo-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 12px;
|
||||||
|
height: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-title-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
color: $black-color;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-icon.rotate {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user