diff --git a/src/components/CommonAside.vue b/src/components/CommonAside.vue index c7f7e90..e212853 100644 --- a/src/components/CommonAside.vue +++ b/src/components/CommonAside.vue @@ -1,5 +1,5 @@ + +
+ + + +
@@ -386,6 +416,10 @@ onUnmounted(() => { } } +.common-aside.mobile-open { + box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35), 2px 0 12px rgba(0, 0, 0, 0.18); +} + .loading-spinner { display: flex; align-items: center; @@ -422,7 +456,7 @@ h3 { // 菜单样式 :deep(.el-menu) { border-right: none; - height: calc(100% - 80px); + height: calc(100% - 128px); padding: 16px 8px; background: transparent; @@ -519,14 +553,48 @@ h3 { } } +.aside-toggle-bottom { + position: absolute; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + padding: 12px 8px 14px; + background: linear-gradient(to top, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)); +} + +.aside-toggle-btn { + width: 100%; + max-width: 180px; + background-color: rgba(255, 255, 255, 0.18); + border-color: rgba(255, 255, 255, 0.3); + color: #fff; +} + +.aside-toggle-btn:hover { + background-color: rgba(255, 255, 255, 0.28); + border-color: rgba(255, 255, 255, 0.45); + color: #fff; +} + // 响应式设计 @media (max-width: 768px) { .common-aside { - width: 100% !important; + position: fixed; + left: 0; + top: 0; + bottom: 0; + z-index: 1200; + max-width: 80vw; } :deep(.el-menu) { padding: 12px 4px; } + + .aside-toggle-bottom { + padding: 10px 8px 12px; + } } diff --git a/src/components/CommonHeader.vue b/src/components/CommonHeader.vue index a5aa63d..593a55f 100644 --- a/src/components/CommonHeader.vue +++ b/src/components/CommonHeader.vue @@ -1,8 +1,8 @@