gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: tweak

Browse Source
This commit is contained in:
pengzhanbo 2025-09-20 15:59:52 +08:00
parent 5cbf0ddfcf
commit 9357b21af1
1 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
theme/src/client/components/VPSignDown.vue
View File

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ThemeHomeConfig } from 'theme/src/shared/index.js' import type { ThemeHomeConfig } from 'theme/src/shared/index.js'
import { useElementSize, useWindowSize } from '@vueuse/core' import { useElementSize, useMediaQuery, useWindowSize } from '@vueuse/core'
import { computed, onMounted, shallowRef } from 'vue' import { computed, onMounted, shallowRef } from 'vue'
import { useData } from '../composables/index.js' import { useData } from '../composables/index.js'
@ -11,7 +11,7 @@ onMounted(() => {
body.value = document.body body.value = document.body
}) })
const { page, isDark } = useData() const { page } = useData()
const mustHidden = computed(() => { const mustHidden = computed(() => {
if (page.value.frontmatter.signDown !== true || page.value.frontmatter.pageLayout !== 'home' || !page.value.frontmatter.config) { if (page.value.frontmatter.signDown !== true || page.value.frontmatter.pageLayout !== 'home' || !page.value.frontmatter.config) {
@ -30,26 +30,40 @@ const show = computed(() => {
else else
return true return true
}) })
const is960 = useMediaQuery('(min-width: 960px)')
function onClick() {
document.documentElement.scrollTo({
top: document.documentElement.clientHeight - (is960.value ? 64 : 0),
behavior: 'smooth',
})
}
</script> </script>
<template> <template>
<svg v-show="!mustHidden && show" aria-label="sign down" class="vp-sign-down" :class="{ 'vp-sign-down-dark': isDark }" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg
<g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"> v-show="!mustHidden && show"
<path d="M16.884 5.348a1.25 1.25 0 0 1 0 1.768L12 12L7.116 7.116a1.25 1.25 0 0 1 1.768-1.768L12 8.464l3.116-3.116a1.25 1.25 0 0 1 1.768 0" /> xmlns="http://www.w3.org/2000/svg" width="24" height="24"
<path d="M16.884 12.366a1.25 1.25 0 0 1 0 1.768L12 19.018l-4.884-4.884a1.25 1.25 0 0 1 1.768-1.768L12 15.482l3.116-3.116a1.25 1.25 0 0 1 1.768 0" /> viewBox="0 0 24 24" aria-label="sign down" class="vp-sign-down" aria-hidden="true"
@click="onClick"
>
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5">
<path d="m19 11l-7 6l-7-6" />
<path d="m19 5l-7 6l-7-6" opacity="0.6" />
</g> </g>
</svg> </svg>
</template> </template>
<style scoped> <style scoped>
@keyframes top-bot { @keyframes vp-sign-down {
0%, 0% {
100% { opacity: 0.5;
transform: translate(0, -15px); transform: translate(-50%, -12px);
} }
50% { 100% {
transform: translate(0, 0); opacity: 1;
transform: translate(-50%, 0);
} }
} }
@ -57,24 +71,24 @@ const show = computed(() => {
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
left: 50%; left: 50%;
z-index: 100; z-index: 29;
width: 26px; width: 36px;
height: 26px; height: 36px;
color: white; color: #fff;
opacity: 0.8; cursor: pointer;
transform: translate(-50%, 0); transform: translate(-50%, 0);
animation: top-bot 3s infinite; animation: vp-sign-down 1.75s infinite alternate ease-out;
} }
.vp-sign-down-dark { [data-theme="dark"] .vp-sign-down {
color: gray; color: var(--vp-c-text-2);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.vp-sign-down { .vp-sign-down {
bottom: 10px; bottom: 10px;
width: 34px; width: 30px;
height: 34px; height: 30px;
} }
} }