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>
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 { useData } from '../composables/index.js'
@ -11,7 +11,7 @@ onMounted(() => {
body.value = document.body
})
const { page, isDark } = useData()
const { page } = useData()
const mustHidden = computed(() => {
if (page.value.frontmatter.signDown !== true || page.value.frontmatter.pageLayout !== 'home' || !page.value.frontmatter.config) {
@ -30,26 +30,40 @@ const show = computed(() => {
else
return true
})
const is960 = useMediaQuery('(min-width: 960px)')
function onClick() {
document.documentElement.scrollTo({
top: document.documentElement.clientHeight - (is960.value ? 64 : 0),
behavior: 'smooth',
})
}
</script>
<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">
<g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
<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" />
<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" />
<svg
v-show="!mustHidden && show"
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
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>
</svg>
</template>
<style scoped>
@keyframes top-bot {
0%,
100% {
transform: translate(0, -15px);
@keyframes vp-sign-down {
0% {
opacity: 0.5;
transform: translate(-50%, -12px);
}
50% {
transform: translate(0, 0);
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
@ -57,24 +71,24 @@ const show = computed(() => {
position: absolute;
bottom: 8px;
left: 50%;
z-index: 100;
width: 26px;
height: 26px;
color: white;
opacity: 0.8;
z-index: 29;
width: 36px;
height: 36px;
color: #fff;
cursor: pointer;
transform: translate(-50%, 0);
animation: top-bot 3s infinite;
animation: vp-sign-down 1.75s infinite alternate ease-out;
}
.vp-sign-down-dark {
color: gray;
[data-theme="dark"] .vp-sign-down {
color: var(--vp-c-text-2);
}
@media (min-width: 768px) {
.vp-sign-down {
bottom: 10px;
width: 34px;
height: 34px;
width: 30px;
height: 30px;
}
}