mirror of
https://github.com/Kisechan/Mainpage.git
synced 2025-07-09 14:47:18 +00:00
重构手机端样式
This commit is contained in:
@ -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>
|
@ -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>
|
||||||
© 2025 By
|
© 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>
|
Reference in New Issue
Block a user