diff --git a/app.vue b/app.vue index b58f6a3..322fdeb 100644 --- a/app.vue +++ b/app.vue @@ -9,7 +9,7 @@ const appConfig = useAppConfig(); const path = computed(() => { return useRoute().path; }); -const sProgress = ref(1); +const sProgress = ref(path.value === "/commercial" ? 0 : 1); const scrollPanel = useTemplateRef("scrollPanel"); const header = useTemplateRef("header"); const sX = ref(0); @@ -32,6 +32,10 @@ const handleScrollOrResize = () => { const scrollTop = (scrollPanel.value as unknown as { lastScrollTop: number }) .lastScrollTop; const clientHeight = scrollPanel.value?.$el.clientHeight; + if (path.value === "/commercial") { + sProgress.value = 0; + return; + } if (path.value === "/") { sProgress.value = 1 - @@ -247,6 +251,7 @@ const copyGroupNumber = async () => { ref="header" tabindex="0" class="fixed w-full h-15 z-10 px-4 sm:px-8 lg:px-12 translate-y-[calc(var(--s-progress)*4*var(--spacing))] sm:translate-y-[calc(var(--s-progress)*8*var(--spacing))] lg:translate-y-[calc(var(--s-progress)*12*var(--spacing))] before:translate-x-[calc(var(--s-progress)*4*var(--spacing))] sm:before:translate-x-[calc(var(--s-progress)*8*var(--spacing))] lg:before:translate-x-[calc(var(--s-progress)*12*var(--spacing))] before:w-[calc(100%-var(--s-progress)*8*var(--spacing))] sm:before:w-[calc(100%-var(--s-progress)*16*var(--spacing))] lg:before:w-[calc(100%-var(--s-progress)*24*var(--spacing))] sm:h-auto focus-within:h-auto before:h-15 focus-within:before:h-93.5 sm:before:h-full focus-within:sm:before:h-full overflow-hidden focus-within:overflow-visible transition-discrete group" + :class="{ 'commercial-header': path === '/commercial' }" :style="{ '--s-progress': sProgress }" @click="if (!header?.matches(':focus-within')) header?.focus();" @focus="handleHeaderFocus" @@ -469,6 +474,14 @@ header { delay: 0s, 0.3s; } + &.commercial-header { + transition: none; + + &::before { + transition: none; + } + } + &::before { content: ""; position: absolute; diff --git a/content/download/faq.md b/content/download/faq.md index 66d8db4..114aa76 100644 --- a/content/download/faq.md +++ b/content/download/faq.md @@ -18,7 +18,7 @@ ```bash cd ~/Downloads - sudo apt install ./spark-store-*.deb + sudo apt install ./spark-store*.deb ``` 即可完成星火商店的安装。 diff --git a/pages/commercial.vue b/pages/commercial.vue index 9f733a6..f355027 100644 --- a/pages/commercial.vue +++ b/pages/commercial.vue @@ -1217,6 +1217,8 @@ section { display: grid; grid-template-columns: minmax(18rem, 0.72fr) minmax(28rem, 1.28fr); align-items: center; + min-width: 0; + min-height: 0; gap: 2rem; padding: 2.25rem; overflow: hidden; @@ -1225,6 +1227,8 @@ section { .governance-detail-copy { display: flex; flex-direction: column; + min-width: 0; + min-height: 0; gap: 1.35rem; } @@ -1623,9 +1627,49 @@ section { } .governance-detail { + grid-template-columns: minmax(16rem, 0.8fr) minmax(24rem, 1.2fr); min-height: 0; - padding-block: 1.25rem; + gap: 1rem; + padding: 1rem 1.25rem; + } + + .governance-detail-copy { + max-height: 100%; + gap: 0.65rem; + padding-right: 0.4rem; overflow-y: auto; + overscroll-behavior: contain; + } + + .governance-detail-copy h3 { + font-size: clamp(1.5rem, 2.4vw, 2rem); + margin-top: 0; + } + + .governance-detail-copy > div > p { + font-size: 0.9rem; + } + + .governance-hint { + font-size: 0.78rem; + line-height: 1.45; + } + + .governance-features { + gap: 0.5rem; + } + + .governance-features li { + gap: 0.1rem; + } + + .governance-features strong { + font-size: 0.88rem; + } + + .governance-features span { + font-size: 0.75rem; + line-height: 1.4; } } diff --git a/pages/download.vue b/pages/download.vue index 946721d..b94e9c8 100644 --- a/pages/download.vue +++ b/pages/download.vue @@ -184,10 +184,10 @@ const { data: faqContent } = await useAsyncData("/download/faq", () => {

- APM 包管理器 + 了解 APM 包管理器

- Fedora Arch Linux + 星火跨平台兼容容器