style(biji-qianduan): 优化移动端侧边栏样式和动画
- 移除 .home-page.is-mobile .sidebar 的 transform属性,使用 overflow:hidden 避免内容溢出 -调整 .home-page.is-mobile .sidebar:not(.is-collapsed) 的样式,移除 transform - 修改 SidebarMenu 组件的 transition 属性,应用到 width 上
This commit is contained in:
@@ -6,14 +6,13 @@
|
|||||||
.home-page.is-mobile .sidebar {
|
.home-page.is-mobile .sidebar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
transition: transform 0.3s ease;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transform: translateX(-100%);
|
|
||||||
background-color: #fff; /* 确保侧边栏有背景色 */
|
background-color: #fff; /* 确保侧边栏有背景色 */
|
||||||
|
overflow: hidden; /* 避免内容在折叠过程中溢出 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-page.is-mobile .sidebar:not(.is-collapsed) {
|
.home-page.is-mobile .sidebar:not(.is-collapsed) {
|
||||||
transform: translateX(0);
|
/* No transform needed, width is controlled by component */
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-page.is-mobile .content {
|
.home-page.is-mobile .content {
|
||||||
|
|||||||
@@ -164,7 +164,7 @@ const renderMenu = (item) => {
|
|||||||
background-color: rgba(255, 255, 255, 0.8);
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
border-right: 1px solid rgba(0, 0, 0, 0.05);
|
border-right: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
transition: width var(--transition-duration) ease;
|
transition: width 0.3s ease; /* Apply transition to width */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user