feat: 添加首页公告栏

2025-03-13 23:31:44 +08:00
parent 618d72890a
commit 7a1bffd4b1
2 changed files with 67 additions and 0 deletions
--- a/docs/.vitepress/theme/components/Announcement.vue
+++ b/docs/.vitepress/theme/components/Announcement.vue
@@ -0,0 +1,63 @@
+<template>
+    <div v-if="isShow" class="announcement-container">
+        <h3 class="announcement-title">{{ title }}</h3>
+        <p class="announcement-content">{{ content }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 公告栏创意来自: https://lumen.theojs.cn/guide/announcement
+
+const isShow = ref<boolean>(true)
+
+const title = ref<string>(
+    'hahaha'
+)
+
+const content = ref<string>(
+    'hahaha'
+)
+</script>
+
+<style scoped>
+.announcement-container {
+    background-color: #f0f0f0;
+    border-radius: 10px;
+
+    /* 窄屏 */
+    text-align: left;
+
+    width: min(80%, 360px);
+
+    padding: 10px 15px;
+
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 32px;
+    margin-bottom: 15px;
+}
+
+@media (min-width: 960px) {
+    .announcement-container {
+        /* 宽屏 */
+        text-align: unset;
+
+        width: 280px;
+
+        padding: 15px 20px;
+
+        margin-left: unset;
+        margin-right: unset;
+        margin-top: unset;
+        margin-bottom: 15px;
+    }
+}
+
+.announcement-title {
+    font-weight: bold;
+}
+
+.announcement-content {}
+</style>