From bd88e4d87af8d17448d35e872e8a6c4b8331001f Mon Sep 17 00:00:00 2001 From: Kisechan Date: Thu, 20 Mar 2025 21:42:15 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=89=8B=E6=9C=BA=E7=AB=AF?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/NavBar.vue | 141 +++++++++++++++++++++++++++----------- src/views/HomeView.vue | 104 ++++++++++++++-------------- 2 files changed, 151 insertions(+), 94 deletions(-) diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 0014e4d..8b7c547 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -7,35 +7,77 @@
- - - 首页 + + + - - - 博客 - - - - 友链 - - - - 工具 - - -
-
- - - - - - + + +
+ + + 首页 + + + + 博客 + + + + 友链 + + + + 工具 + + +
+
+ + + + + + +
-
- + +
+ + + + + + + 首页 + + + + 博客 + + + + 友链 + + + + 工具 + + +
+
+ + + + + + +
+
+ + + @@ -46,6 +88,7 @@ import { Sunny, Moon } from "@element-plus/icons-vue"; const router = useRouter(); const isDarkMode = ref(false); +const isMobileMenuOpen = ref(false); // 打开外部链接 const goToBlog = () => { @@ -54,16 +97,22 @@ const goToBlog = () => { // 打开内部链接（当前页面） const openLink = (path) => { - console.log("Navigating to:", path); // 调试信息 router.push(path); + isMobileMenuOpen.value = false; // 关闭手机端菜单 }; +// 切换暗黑模式 const toggleDarkMode = () => { isDarkMode.value = !isDarkMode.value; document.documentElement.classList.toggle("dark", isDarkMode.value); localStorage.setItem("darkMode", isDarkMode.value); }; +// 切换手机端菜单 +const toggleMobileMenu = () => { + isMobileMenuOpen.value = !isMobileMenuOpen.value; +}; + // 初始化时读取 localStorage 中的模式选择 const initializeDarkMode = () => { const savedMode = localStorage.getItem("darkMode"); @@ -86,17 +135,7 @@ initializeDarkMode(); .menu-items { display: flex; - justify-content: center; -} - -.el-menu--horizontal > .el-menu-item:nth-child(1) { - margin-right: auto; -} - -.el-menu-item { - font-size: 16px; - gap: 6px; - cursor: pointer; /* 添加手型光标 */ + align-items: center; } .website-name { @@ -104,8 +143,17 @@ initializeDarkMode(); } .el-menu-item { - outline: none !important; - background-color: transparent !important; + font-size: 16px; + gap: 6px; + cursor: pointer; +} + +.mobile-menu-icon { + display: none; /* 默认隐藏手机端菜单图标 */ +} + +.desktop-menu { + display: flex; } .flip-container { @@ -139,4 +187,15 @@ initializeDarkMode(); .back { transform: rotateY(180deg); } - + +/* 手机端样式 */ +@media (max-width: 768px) { + .mobile-menu-icon { + display: block; /* 显示手机端菜单图标 */ + } + + .desktop-menu { + display: none; /* 隐藏桌面端导航项 */ + } +} + \ No newline at end of file diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index f909c44..588c92a 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -3,7 +3,7 @@ - +

某校 SE 专业学生，前 CChOer 。

什么都会一点。

@@ -20,13 +20,11 @@

Latest Blog Posts

- +
- {{ - item.title - }} + {{ item.title }}
@@ -51,16 +49,8 @@
- - + +
Read More @@ -72,7 +62,7 @@ - +

Hello

@@ -97,22 +87,14 @@

- 萌ICP备20251453号 + 萌ICP备20251453号

© 2025 By - Kisechan + Kisechan

- Made With Vue3 & - Element Plus + Made With Vue3 & Element Plus

@@ -127,10 +109,10 @@ import { ref, onMounted, onUnmounted } from "vue"; const isLoaded = ref(false); const feedItems = ref([]); -const githubCalendarInstance = ref(null); // 提升到组件作用域 +const githubCalendarInstance = ref(null); const loadGitHubCalendar = async () => { - await new Promise((resolve) => setTimeout(resolve, 100)); // 延迟 100ms + await new Promise((resolve) => setTimeout(resolve, 100)); const calendarElement = document.getElementById("github-graph"); if (!calendarElement) { console.error("Element #github-graph not found"); @@ -138,25 +120,21 @@ const loadGitHubCalendar = async () => { } const GitHubCalendar = await import("github-calendar"); - githubCalendarInstance.value = GitHubCalendar.default( - calendarElement, - "Kisechan", - { - responsive: true, - tooltips: true, - global_stats: false, - } - ); + githubCalendarInstance.value = GitHubCalendar.default(calendarElement, "Kisechan", { + responsive: true, + tooltips: true, + global_stats: false, + }); isLoaded.value = true; }; const cleanupGitHubCalendar = () => { const calendarElement = document.getElementById("github-graph"); if (calendarElement) { - calendarElement.innerHTML = ""; // 清空日历内容 + calendarElement.innerHTML = ""; } if (githubCalendarInstance.value) { - githubCalendarInstance.value = null; // 清理实例 + githubCalendarInstance.value = null; } }; @@ -178,7 +156,7 @@ const fetchRSSFeed = async () => { category.getAttribute("term") ), })) - .slice(0, 6); // 只取前 6 篇文章 + .slice(0, 6); } catch (error) { console.error("Error fetching RSS Feed:", error); } @@ -317,17 +295,17 @@ onUnmounted(() => { .read-more-container { display: flex; - justify-content: flex-end; /* 靠右排版 */ + justify-content: flex-end; } .read-more-card { - display: flex; /* 使用 flexbox */ - align-items: center; /* 垂直居中 */ - justify-content: center; /* 水平居中 */ + display: flex; + align-items: center; + justify-content: center; cursor: pointer; - width: 135px; /* 调整宽度 */ - height: 35px; /* 调整高度 */ - padding: 6px; /* 调整内边距 */ + width: 135px; + height: 35px; + padding: 6px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } @@ -339,11 +317,11 @@ onUnmounted(() => { } .read-more-content { - display: flex; /* 使用 flexbox */ - align-items: center; /* 垂直居中 */ - justify-content: center; /* 水平居中 */ + display: flex; + align-items: center; + justify-content: center; gap: 2px; - font-size: 0.85em; /* 调整字体大小 */ + font-size: 0.85em; color: #409eff; } @@ -361,4 +339,24 @@ h3 { align-items: center; gap: 10px; } - + +/* 手机端样式 */ +@media (max-width: 768px) { + .home-container { + padding: 10px; + } + + .github-calendar-container, + .rss-feed-container { + margin: 10px; + } + + .blog-card { + margin-bottom: 10px; + } + + .read-more-container { + justify-content: center; + } +} + \ No newline at end of file