From 4a66aaadad325109d3d7d65f9ef657db23feae94 Mon Sep 17 00:00:00 2001 From: jxxghp Date: Tue, 7 Apr 2026 13:18:27 +0800 Subject: [PATCH] rollback footer --- src/layouts/components/Footer.vue | 162 +++--------------------------- 1 file changed, 15 insertions(+), 147 deletions(-) diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue index 7e5d0f9d..ee1fece8 100644 --- a/src/layouts/components/Footer.vue +++ b/src/layouts/components/Footer.vue @@ -171,7 +171,7 @@ const showDynamicButton = computed(() => {
- +
@@ -217,8 +217,8 @@ const showDynamicButton = computed(() => { @@ -260,120 +260,23 @@ const showDynamicButton = computed(() => { // 按钮卡片之间的间距 > .v-card + .v-card { - margin-inline-start: 4px; + margin-inline-start: 2px; // 减少间距 } } .footer-nav-card { position: relative; overflow: hidden; + backdrop-filter: blur(24px); + background-color: rgba(var(--v-theme-surface), 0.6); pointer-events: auto; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); - will-change: transform, max-width, opacity; - - // ===== iOS 26 Liquid Glass 效果 ===== - - // 强力毛玻璃背景模糊 - backdrop-filter: blur(40px) saturate(1.8) brightness(1.05); - -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05); - - // 半透明玻璃底色 - 浅色模式 - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.45) 0%, - rgba(255, 255, 255, 0.25) 40%, - rgba(255, 255, 255, 0.3) 100% - ); - - // 多层内发光边框 - 模拟玻璃边缘折射 - border: 0.5px solid rgba(255, 255, 255, 0.5) !important; - box-shadow: - // 外层柔和投影 - 0 8px 32px rgba(0, 0, 0, 0.08), - 0 2px 12px rgba(0, 0, 0, 0.04), - // 内发光 - 上边缘高光 - inset 0 1px 1px rgba(255, 255, 255, 0.6), - // 内发光 - 整体光泽 - inset 0 0 20px rgba(255, 255, 255, 0.1); - - // 顶部光泽反射条 - &::before { - content: ''; - position: absolute; - inset-block-start: 0; - inset-inline-start: 10%; - z-index: 1; - border-radius: 0 0 50% 50%; - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.5) 0%, - rgba(255, 255, 255, 0) 100% - ); - block-size: 40%; - inline-size: 80%; - pointer-events: none; - } - - // 底部微光 - &::after { - content: ''; - position: absolute; - inset-block-end: 0; - inset-inline-start: 5%; - z-index: 1; - border-radius: 50% 50% 0 0; - background: linear-gradient( - 0deg, - rgba(255, 255, 255, 0.08) 0%, - rgba(255, 255, 255, 0) 100% - ); - block-size: 30%; - inline-size: 90%; - pointer-events: none; - } - - // ===== 暗色模式适配 ===== - .v-theme--dark & { - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.12) 0%, - rgba(255, 255, 255, 0.05) 40%, - rgba(255, 255, 255, 0.08) 100% - ); - border: 0.5px solid rgba(255, 255, 255, 0.15) !important; - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.3), - 0 2px 12px rgba(0, 0, 0, 0.2), - inset 0 1px 1px rgba(255, 255, 255, 0.15), - inset 0 0 20px rgba(255, 255, 255, 0.03); - - &::before { - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.12) 0%, - rgba(255, 255, 255, 0) 100% - ); - } - - &::after { - background: linear-gradient( - 0deg, - rgba(255, 255, 255, 0.03) 0%, - rgba(255, 255, 255, 0) 100% - ); - } - } + will-change: transform, max-inline-size, opacity; // 透明主题下的特殊样式 .v-theme--transparent & { - backdrop-filter: blur(40px) saturate(1.8) brightness(1.05); - -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05); - background: linear-gradient( - 135deg, - rgba(255, 255, 255, 0.2) 0%, - rgba(255, 255, 255, 0.08) 40%, - rgba(255, 255, 255, 0.12) 100% - ); + backdrop-filter: blur(var(--transparent-blur-heavy, 16px)); + background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5)); } .v-btn-toggle { @@ -384,7 +287,6 @@ const showDynamicButton = computed(() => { .footer-card-content { position: relative; - z-index: 2; padding-block: 4px; padding-inline: 6px; } @@ -407,46 +309,12 @@ const showDynamicButton = computed(() => { justify-content: center; background-color: transparent; block-size: 48px; - transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); &.v-btn--active { background-color: transparent; box-shadow: none; } - // 选中态 - 液态玻璃胶囊高亮 - &.footer-nav-btn-active { - &::before { - content: ''; - position: absolute; - inset: 4px 2px; - z-index: -1; - border: 0.5px solid rgba(255, 255, 255, 0.35); - border-radius: 16px; - background: linear-gradient( - 180deg, - rgba(var(--v-theme-primary), 0.18) 0%, - rgba(var(--v-theme-primary), 0.08) 100% - ); - box-shadow: - 0 2px 8px rgba(var(--v-theme-primary), 0.15), - inset 0 1px 1px rgba(255, 255, 255, 0.3); - transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); - } - - .v-theme--dark &::before { - border-color: rgba(255, 255, 255, 0.12); - background: linear-gradient( - 180deg, - rgba(var(--v-theme-primary), 0.25) 0%, - rgba(var(--v-theme-primary), 0.1) 100% - ); - box-shadow: - 0 2px 8px rgba(var(--v-theme-primary), 0.2), - inset 0 1px 1px rgba(255, 255, 255, 0.1); - } - } - .btn-content { display: flex; flex-direction: column; @@ -467,8 +335,8 @@ const showDynamicButton = computed(() => { .dynamic-btn-card { block-size: auto; inline-size: auto; + max-inline-size: 60px; min-block-size: 0; - max-width: 60px; .footer-card-content { padding: 3px; @@ -493,17 +361,17 @@ const showDynamicButton = computed(() => { // 底部导航动画 .footer-nav-enter-active, .footer-nav-leave-active { - transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); overflow: hidden; + transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .footer-nav-enter-from, .footer-nav-leave-to { - opacity: 0; - max-width: 0 !important; - margin-inline-start: 0 !important; - border-width: 0 !important; padding: 0 !important; + border-width: 0 !important; + margin-inline-start: 0 !important; + max-inline-size: 0 !important; + opacity: 0; transform: translateX(20px); }