c/docs/.vitepress/theme/components/Notice.vue
2024-10-08 11:44:30 +08:00

152 lines
2.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div v-if="visible" class="notice-background" style="display: block"></div>
<div v-if="visible" class="notice">
<h3 class="notice-title">🛎️本站公告({{ countdown }} 秒)</h3>
<div class="notice-describe">
<p>🔔本次更新C 语言预处理器!!!</p>
</div>
<div class="notice-footer">
<div class="notice-btn" @click="closetz">知道了,退下吧</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vitepress";
const visible = ref(false); // 初始化公告为隐藏
const route = useRoute(); // 使用 vitepress 提供的 useRoute
const countdown = ref(10); // 倒计时初始为10秒
// 检查当前页面是否需要显示公告
function checkRoute() {
// 假设我们只在 '/special-page' 页面显示公告
if (route.path.endsWith("/notes/")) {
visible.value = true;
startCountdown(); // 开始倒计时
} else {
visible.value = false;
}
}
// 关闭公告的函数
function closetz() {
visible.value = false;
}
// 倒计时函数
function startCountdown() {
const timer = setInterval(() => {
countdown.value--;
if (countdown.value <= 0) {
clearInterval(timer);
closetz();
}
}, 1000);
}
// 在组件挂载时检查路由
onMounted(() => {
checkRoute();
});
// 监听路由变化,当路径变化时重新检查
watch(
() => route.path,
() => {
checkRoute();
}
);
</script>
<style scoped>
.notice-img {
z-index: 9999;
}
/* 全屏遮罩层 */
.notice-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 99;
pointer-events: none;
}
/* 通知 */
.notice {
z-index: 999;
padding: 25px;
background: #fff;
width: 446px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 18px;
box-sizing: border-box;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05), 0 1.5rem 2.2rem rgba(0, 0, 0, 0.1);
}
@media (max-width: 640px) {
.notice {
width: 82%;
padding: 25px;
}
}
.notice-title {
text-align: center;
color: #3c3c3c;
font-size: 20px;
font-weight: 900;
}
.notice-describe p {
color: #3c3c3c;
padding: 10px 0;
font-size: 15px;
}
.notice-describe p strong {
color: #3c3c3c;
}
.notice-describe p a {
color: #eb0e0e;
}
.notice-domain {
background: #f3f5f7;
text-align: center;
border-radius: 10px;
}
/* 通知底部 */
.notice-footer {
padding: 20px 0 0;
text-align: center;
}
.notice-btn {
text-align: center;
cursor: pointer;
border-radius: 50px;
font-weight: 700;
padding: 0 30px;
color: #fff;
background: linear-gradient(to right, #1e69f5 0%, #093ce5 100%);
box-shadow: 0 10px 12px -4px rgb(0 0 0 / 40%);
line-height: 40px;
font-size: 14px;
display: inline-block;
text-wrap: nowrap;
}
</style>