【类 型】:factor

【原  因】:导航标题 控制终端 后台管理 切换不明显
【过  程】:现价三个点图标 配合动画
【影  响】:

# 类型 包含:
# feat:新功能(feature)
# fix:修补bug
# docs:文档(documentation)
# style: 格式(不影响代码运行的变动)
# refactor:重构(即不是新增功能,也不是修改bug的代码变动)
# test:增加测试
# chore:构建过程或辅助工具的变动
This commit is contained in:
szdot 2025-06-25 04:56:17 +08:00
parent d988e385b7
commit 9e32694cf9

View File

@ -5,9 +5,13 @@
<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">
</div>
<!-- 展开状态下 -->
<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">
<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>
<!-- end logo -->
@ -250,5 +254,43 @@ h1 {
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>