diff --git a/src/components/Header.vue b/src/components/Header.vue index 5acee38..4ffde32 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -1,17 +1,105 @@ diff --git a/src/components/less/page.less b/src/components/less/page.less index 61d5b8b..2f512e2 100644 --- a/src/components/less/page.less +++ b/src/components/less/page.less @@ -56,26 +56,39 @@ left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.45); - z-index: 999; + background: rgba(0, 0, 0, 0.6); + z-index: 99998; + animation: fadeIn 0.2s ease; } .zui-drawer { position: fixed; top: 0; right: 0; - width: 70%; - max-width: 300px; - height: 100%; + width: 75%; + max-width: 280px; + height: 100vh; background: #fff; - box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06); - z-index: 1000; - padding: 16px; + box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2); + z-index: 99999; + padding: 20px; + animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1); + overflow-y: auto; +} +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} +@keyframes slideInRight { + from { transform: translateX(100%); } + to { transform: translateX(0); } } .zui-drawer__header { - font-size: 16px; + font-size: 18px; font-weight: bold; - margin-bottom: 12px; - color: #333; + margin-bottom: 20px; + padding-bottom: 12px; + border-bottom: 2px solid #35A3BA; + color: #1f2a37; } .zui-drawer__list { list-style: none; @@ -83,12 +96,23 @@ padding: 0; } .zui-drawer__list li { - padding: 12px 8px; + padding: 14px 12px; border-bottom: 1px solid #f0f0f0; + font-size: 15px; + color: #1f2a37; + transition: all 0.2s ease; + border-radius: 6px; + margin-bottom: 4px; } .zui-drawer__list li:hover { - background: #f6f8fa; + background: linear-gradient(135deg, #35A3BA 0%, #0ea5b7 100%); + color: #fff; cursor: pointer; + transform: translateX(-2px); + border-bottom: 1px solid transparent; +} +.zui-drawer__list li:active { + transform: scale(0.98); } @media (max-width: 600px) { .zui-page { diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index 573967b..bd952c0 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -1,31 +1,12 @@