Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script setup lang="ts">
import { useDark } from "@vueuse/core";
import { ref, watch } from "vue";
defineProps<{
link: string;
title: string;
}>();
const isDark = ref(useDark().value);
watch(useDark(), () => {
isDark.value = useDark().value;
});
</script>
<template>
<div
:class="[$style.header_container, { [$style.dark]: isDark }]"
class="header_container"
>
<a
:class="[$style.header_title, { [$style.dark]: isDark }]"
class="header_title"
:href="link"
>{{ title }}</a
>
</div>
</template>
<style module>
.header_container {
width: 160px;
cursor: pointer;
height: 100%;
}
.header_container.dark {
background-color: #555;
}
.header_container:hover {
background-color: #eee;
a {
color: #1c64f2;
}
}
.header_container.dark:hover {
background-color: #777;
a {
color: #169b16;
}
}
.header_title {
color: #000;
display: block;
height: 100%;
line-height: 100%;
padding: 18px 0 18px 0;
text-align: center;
font-size: 24px;
}
.header_title.dark {
color: #eee;
}
</style>
|