mirror of
https://github.com/certd/certd.git
synced 2026-04-03 14:10:54 +08:00
37 lines
740 B
Vue
37 lines
740 B
Vue
<script setup>
|
|
import DefaultTheme from "vitepress/theme";
|
|
import { onMounted } from "vue";
|
|
import { useRouter } from "vitepress";
|
|
import mediumZoom from "medium-zoom";
|
|
|
|
const { Layout } = DefaultTheme;
|
|
const router = useRouter();
|
|
|
|
// Setup medium zoom with the desired options
|
|
const setupMediumZoom = () => {
|
|
mediumZoom("[data-zoomable]", {
|
|
background: "transparent",
|
|
});
|
|
};
|
|
|
|
// Apply medium zoom on load
|
|
onMounted(setupMediumZoom);
|
|
|
|
// Subscribe to route changes to re-apply medium zoom effect
|
|
router.onAfterRouteChanged = setupMediumZoom;
|
|
</script>
|
|
|
|
<template>
|
|
<Layout />
|
|
</template>
|
|
|
|
<style>
|
|
.medium-zoom-overlay {
|
|
backdrop-filter: blur(5rem);
|
|
}
|
|
|
|
.medium-zoom-overlay,
|
|
.medium-zoom-image--opened {
|
|
z-index: 999;
|
|
}
|
|
</style> |