Kisechan/Mainpage
1
0
Fork 0
mirror of https://github.com/Kisechan/Mainpage.git synced 2025-07-09 22:57:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

重构手机端样式

Browse Source
This commit is contained in:
Kisechan
2025-03-20 21:42:15 +08:00
parent 2494169c61
commit bd88e4d87a
2 changed files with 151 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/NavBar.vue
View File

@ -7,35 +7,77 @@
<!-- 右侧导航选项 --> <!-- 右侧导航选项 -->
<div class="menu-items"> <div class="menu-items">
<el-menu-item @click="openLink('/')"> <!-- 手机端汉堡菜单 -->
<i class="fa-solid fa-house"></i> <el-menu-item class="mobile-menu-icon" @click="toggleMobileMenu">
首页 <i class="fa-solid fa-bars"></i>
</el-menu-item> </el-menu-item>
<el-menu-item @click="goToBlog">
<i class="fa-solid fa-blog"></i> <!-- 桌面端导航项 -->
博客 <div class="desktop-menu">
</el-menu-item> <el-menu-item @click="openLink('/')">
<el-menu-item @click="openLink('/links')"> <i class="fa-solid fa-house"></i>
<i class="fa-solid fa-link"></i> 首页
友链 </el-menu-item>
</el-menu-item> <el-menu-item @click="goToBlog">
<el-menu-item @click="openLink('/tools')"> <i class="fa-solid fa-blog"></i>
<i class="fa-solid fa-screwdriver-wrench"></i> 博客
工具 </el-menu-item>
</el-menu-item> <el-menu-item @click="openLink('/links')">
<el-menu-item @click="toggleDarkMode"> <i class="fa-solid fa-link"></i>
<div class="flip-container"> 友链
<div :class="['flipper', isDarkMode ? 'flip' : '']"> </el-menu-item>
<el-icon class="front"> <el-menu-item @click="openLink('/tools')">
<Sunny /> <i class="fa-solid fa-screwdriver-wrench"></i>
</el-icon> 工具
<el-icon class="back"> </el-menu-item>
<Moon /> <el-menu-item @click="toggleDarkMode">
</el-icon> <div class="flip-container">
<div :class="['flipper', isDarkMode ? 'flip' : '']">
<el-icon class="front">
<Sunny />
</el-icon>
<el-icon class="back">
<Moon />
</el-icon>
</div>
</div> </div>
</div> </el-menu-item>
</el-menu-item> </div>
</div> </div>
<!-- 手机端抽屉菜单 -->
<el-drawer v-model="isMobileMenuOpen" direction="ltr" size="80%">
<el-menu>
<el-menu-item @click="openLink('/')">
<i class="fa-solid fa-house"></i>
首页
</el-menu-item>
<el-menu-item @click="goToBlog">
<i class="fa-solid fa-blog"></i>
博客
</el-menu-item>
<el-menu-item @click="openLink('/links')">
<i class="fa-solid fa-link"></i>
友链
</el-menu-item>
<el-menu-item @click="openLink('/tools')">
<i class="fa-solid fa-screwdriver-wrench"></i>
工具
</el-menu-item>
<el-menu-item @click="toggleDarkMode">
<div class="flip-container">
<div :class="['flipper', isDarkMode ? 'flip' : '']">
<el-icon class="front">
<Sunny />
</el-icon>
<el-icon class="back">
<Moon />
</el-icon>
</div>
</div>
</el-menu-item>
</el-menu>
</el-drawer>
</el-menu> </el-menu>
</template> </template>
@ -46,6 +88,7 @@ import { Sunny, Moon } from "@element-plus/icons-vue";
const router = useRouter(); const router = useRouter();
const isDarkMode = ref(false); const isDarkMode = ref(false);
const isMobileMenuOpen = ref(false);
// 打开外部链接 // 打开外部链接
const goToBlog = () => { const goToBlog = () => {
@ -54,16 +97,22 @@ const goToBlog = () => {
// 打开内部链接（当前页面） // 打开内部链接（当前页面）
const openLink = (path) => { const openLink = (path) => {
console.log("Navigating to:", path); // 调试信息
router.push(path); router.push(path);
isMobileMenuOpen.value = false; // 关闭手机端菜单
}; };
// 切换暗黑模式
const toggleDarkMode = () => { const toggleDarkMode = () => {
isDarkMode.value = !isDarkMode.value; isDarkMode.value = !isDarkMode.value;
document.documentElement.classList.toggle("dark", isDarkMode.value); document.documentElement.classList.toggle("dark", isDarkMode.value);
localStorage.setItem("darkMode", isDarkMode.value); localStorage.setItem("darkMode", isDarkMode.value);
}; };
// 切换手机端菜单
const toggleMobileMenu = () => {
isMobileMenuOpen.value = !isMobileMenuOpen.value;
};
// 初始化时读取 localStorage 中的模式选择 // 初始化时读取 localStorage 中的模式选择
const initializeDarkMode = () => { const initializeDarkMode = () => {
const savedMode = localStorage.getItem("darkMode"); const savedMode = localStorage.getItem("darkMode");
@ -86,17 +135,7 @@ initializeDarkMode();
.menu-items { .menu-items {
display: flex; display: flex;
justify-content: center; align-items: center;
}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
margin-right: auto;
}
.el-menu-item {
font-size: 16px;
gap: 6px;
cursor: pointer; /* 添加手型光标 */
} }
.website-name { .website-name {
@ -104,8 +143,17 @@ initializeDarkMode();
} }
.el-menu-item { .el-menu-item {
outline: none !important; font-size: 16px;
background-color: transparent !important; gap: 6px;
cursor: pointer;
}
.mobile-menu-icon {
display: none; /* 默认隐藏手机端菜单图标 */
}
.desktop-menu {
display: flex;
} }
.flip-container { .flip-container {
@ -139,4 +187,15 @@ initializeDarkMode();
.back { .back {
transform: rotateY(180deg); transform: rotateY(180deg);
} }
</style>
/* 手机端样式 */
@media (max-width: 768px) {
.mobile-menu-icon {
display: block; /* 显示手机端菜单图标 */
}
.desktop-menu {
display: none; /* 隐藏桌面端导航项 */
}
}
</style>

104
src/views/HomeView.vue
View File

@ -3,7 +3,7 @@
<el-main> <el-main>
<el-row :gutter="20"> <el-row :gutter="20">
<!-- 左侧正文 --> <!-- 左侧正文 -->
<el-col :span="16"> <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
<el-card> <el-card>
<p>某校 SE 专业学生，前 CChOer 。</p> <p>某校 SE 专业学生，前 CChOer 。</p>
<p>什么都会一点。</p> <p>什么都会一点。</p>
@ -20,13 +20,11 @@
<div class="rss-feed-container"> <div class="rss-feed-container">
<h3><i class="fa-solid fa-box-archive"></i>Latest Blog Posts</h3> <h3><i class="fa-solid fa-box-archive"></i>Latest Blog Posts</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col v-for="item in feedItems" :key="item.link" :span="24"> <el-col v-for="item in feedItems" :key="item.link" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card class="blog-card" shadow="hover"> <el-card class="blog-card" shadow="hover">
<div class="blog-header"> <div class="blog-header">
<i class="fa-solid fa-newspaper"></i> <i class="fa-solid fa-newspaper"></i>
<a :href="item.link" target="_self" class="blog-title">{{ <a :href="item.link" target="_self" class="blog-title">{{ item.title }}</a>
item.title
}}</a>
</div> </div>
<div class="blog-meta"> <div class="blog-meta">
<i class="fa-solid fa-clock-rotate-left"></i> <i class="fa-solid fa-clock-rotate-left"></i>
@ -51,16 +49,8 @@
</el-row> </el-row>
</div> </div>
<div class="read-more-container"> <div class="read-more-container">
<el-tooltip <el-tooltip content="前往博客查看更多文章" placement="top" class="read-more-tooltip">
content="前往博客查看更多文章" <el-card class="read-more-card" shadow="hover" @click="goToBlog">
placement="top"
class="read-more-tooltip"
>
<el-card
class="read-more-card"
shadow="hover"
@click="goToBlog"
>
<div class="read-more-content"> <div class="read-more-content">
<span>Read More</span> <span>Read More</span>
<i class="fa-brands fa-readme"></i> <i class="fa-brands fa-readme"></i>
@ -72,7 +62,7 @@
</el-col> </el-col>
<!-- 右侧作者信息 --> <!-- 右侧作者信息 -->
<el-col class="right-column" :span="8"> <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-column">
<div class="author-info"> <div class="author-info">
<el-avatar :size="120" :src="avatarUrl" /> <el-avatar :size="120" :src="avatarUrl" />
<h2>Hello</h2> <h2>Hello</h2>
@ -97,22 +87,14 @@
</div> </div>
<div class="footer-content"> <div class="footer-content">
<p> <p>
<a href="https://icp.gov.moe/?keyword=20251453" target="_self" <a href="https://icp.gov.moe/?keyword=20251453" target="_self">萌ICP备20251453号</a>
>萌ICP备20251453号</a
>
</p> </p>
<p> <p>
&copy; 2025 By &copy; 2025 By
<a <a href="https://github.com/Kisechan" target="_self" rel="nofollow noopener"><strong>Kisechan</strong></a>
href="https://github.com/Kisechan"
target="_self"
rel="nofollow noopener"
><strong>Kisechan</strong></a
>
</p> </p>
<p style="font-size: 0.75em"> <p style="font-size: 0.75em">
Made With <a href="https://cn.vuejs.org/">Vue3</a> & Made With <a href="https://cn.vuejs.org/">Vue3</a> & <a href="https://element-plus.org/zh-CN/">Element Plus</a>
<a href="https://element-plus.org/zh-CN/">Element Plus</a>
</p> </p>
</div> </div>
</el-col> </el-col>
@ -127,10 +109,10 @@ import { ref, onMounted, onUnmounted } from "vue";
const isLoaded = ref(false); const isLoaded = ref(false);
const feedItems = ref([]); const feedItems = ref([]);
const githubCalendarInstance = ref(null); // 提升到组件作用域 const githubCalendarInstance = ref(null);
const loadGitHubCalendar = async () => { const loadGitHubCalendar = async () => {
await new Promise((resolve) => setTimeout(resolve, 100)); // 延迟 100ms await new Promise((resolve) => setTimeout(resolve, 100));
const calendarElement = document.getElementById("github-graph"); const calendarElement = document.getElementById("github-graph");
if (!calendarElement) { if (!calendarElement) {
console.error("Element #github-graph not found"); console.error("Element #github-graph not found");
@ -138,25 +120,21 @@ const loadGitHubCalendar = async () => {
} }
const GitHubCalendar = await import("github-calendar"); const GitHubCalendar = await import("github-calendar");
githubCalendarInstance.value = GitHubCalendar.default( githubCalendarInstance.value = GitHubCalendar.default(calendarElement, "Kisechan", {
calendarElement, responsive: true,
"Kisechan", tooltips: true,
{ global_stats: false,
responsive: true, });
tooltips: true,
global_stats: false,
}
);
isLoaded.value = true; isLoaded.value = true;
}; };
const cleanupGitHubCalendar = () => { const cleanupGitHubCalendar = () => {
const calendarElement = document.getElementById("github-graph"); const calendarElement = document.getElementById("github-graph");
if (calendarElement) { if (calendarElement) {
calendarElement.innerHTML = ""; // 清空日历内容 calendarElement.innerHTML = "";
} }
if (githubCalendarInstance.value) { if (githubCalendarInstance.value) {
githubCalendarInstance.value = null; // 清理实例 githubCalendarInstance.value = null;
} }
}; };
@ -178,7 +156,7 @@ const fetchRSSFeed = async () => {
category.getAttribute("term") category.getAttribute("term")
), ),
})) }))
.slice(0, 6); // 只取前 6 篇文章 .slice(0, 6);
} catch (error) { } catch (error) {
console.error("Error fetching RSS Feed:", error); console.error("Error fetching RSS Feed:", error);
} }
@ -317,17 +295,17 @@ onUnmounted(() => {
.read-more-container { .read-more-container {
display: flex; display: flex;
justify-content: flex-end; /* 靠右排版 */ justify-content: flex-end;
} }
.read-more-card { .read-more-card {
display: flex; /* 使用 flexbox */ display: flex;
align-items: center; /* 垂直居中 */ align-items: center;
justify-content: center; /* 水平居中 */ justify-content: center;
cursor: pointer; cursor: pointer;
width: 135px; /* 调整宽度 */ width: 135px;
height: 35px; /* 调整高度 */ height: 35px;
padding: 6px; /* 调整内边距 */ padding: 6px;
text-align: center; text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
@ -339,11 +317,11 @@ onUnmounted(() => {
} }
.read-more-content { .read-more-content {
display: flex; /* 使用 flexbox */ display: flex;
align-items: center; /* 垂直居中 */ align-items: center;
justify-content: center; /* 水平居中 */ justify-content: center;
gap: 2px; gap: 2px;
font-size: 0.85em; /* 调整字体大小 */ font-size: 0.85em;
color: #409eff; color: #409eff;
} }
@ -361,4 +339,24 @@ h3 {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
</style>
/* 手机端样式 */
@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;
}
}
</style>