diff --git a/src/assets/font/custom.woff2 b/src/assets/font/custom.woff2
index 6c364e7..cca851d 100644
Binary files a/src/assets/font/custom.woff2 and b/src/assets/font/custom.woff2 differ
diff --git a/src/components/Archive/BlogArchive.vue b/src/components/Archive/BlogArchive.vue
deleted file mode 100644
index fe13a31..0000000
--- a/src/components/Archive/BlogArchive.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="blog-archive blog-section card-item">
-    <h4 class="module-title">文章归档</h4>
-
-    <el-date-picker
-        v-model="currentYear"
-        type="year" placeholder="请选择年份"
-        style="width: 100px"
-        @change="changeDateEvent"
-    />
-
-    <span class="total">共计{{ blogStore.blogList.length }}篇文章</span>
-
-    <el-timeline class="time-line">
-      <el-timeline-item v-for="(value, index) in blogStore.blogList" :key="index">
-        <div class="item">
-          <span class="date">{{ value.createTime }}</span>
-          <span class="title" @click="viewBlogClick(index)">{{ value.title }}</span>
-        </div>
-      </el-timeline-item>
-    </el-timeline>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useBlogStore } from '@/store/blog.ts'
-import { useRouter } from 'vue-router'
-import { onMounted, ref } from 'vue'
-
-const blogStore = useBlogStore()
-const router = useRouter()
-const currentYear = ref(new Date())
-
-onMounted(() => {
-  blogStore.queryBlogByCondition({
-    year: (new Date()).getFullYear()
-  })
-})
-
-/**
- * 选择年份事件
- * @param value 年份
- */
-const changeDateEvent = async (value: Date) => {
-  await blogStore.queryBlogByCondition({
-    year: value.getFullYear()
-  })
-}
-
-/**
- * 点击查看博客按钮
- * @param index 索引
- */
-const viewBlogClick = async (index: number) => {
-  const blogId = blogStore.blogList[index].id
-  await router.push({ name: 'DetailId', params: { id: blogId } })
-}
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/blog/blog.archive.module.scss";
-</style>
diff --git a/src/components/Category/BlogCategory.vue b/src/components/Category/BlogCategory.vue
deleted file mode 100644
index c441ff7..0000000
--- a/src/components/Category/BlogCategory.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="blog-category blog-section card-item">
-    <h4 class="module-title">文章分类</h4>
-
-    <span class="total">目前共计{{ blogStore.blogCategoryList.length }}个分类</span>
-
-    <div class="category-list">
-      <div v-for="(item, index) in blogStore.blogCategoryList"
-           :key="index" class="item" @click="viewBlogCategoryClick(item.name)">
-        <span class="label">{{ item.name }}</span>
-        <span class="value">{{ `(${item.count})` }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useBlogStore } from '@/store/blog.ts'
-import { useRouter } from 'vue-router'
-import { onMounted } from 'vue'
-
-const blogStore = useBlogStore()
-const router = useRouter()
-
-onMounted(() => {
-  blogStore.queryBlogCategory()
-})
-
-/**
- * 点击查看博客分类信息
- * @param name 类别名称
- */
-const viewBlogCategoryClick = async (name: string) => {
-  await router.push({ name: 'CategoryName', params: { name } })
-}
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/blog/blog.category.module.scss";
-</style>
diff --git a/src/components/Category/BlogCategoryDetail.vue b/src/components/Category/BlogCategoryDetail.vue
deleted file mode 100644
index 4fedcc7..0000000
--- a/src/components/Category/BlogCategoryDetail.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div class="blog-category-detail blog-section card-item">
-    <span class="name">{{ route.params?.name }}</span>
-
-    <div class="category-detail-list">
-      <div v-for="(item, index) in blogStore.blogList"
-           :key="index" class="item" @click="viewBlogClick(index)">
-        <span class="number">{{ index+1 }}</span>
-        <span class="date">{{ item?.createTime }}</span>
-        <span class="title">{{ item.title }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useBlogStore } from '@/store/blog.ts'
-import { useRouter } from 'vue-router'
-import { useRoute } from 'vue-router'
-import { onMounted } from 'vue'
-
-const blogStore = useBlogStore()
-const router = useRouter()
-const route = useRoute()
-
-onMounted(async () => {
-  const categoryName = route.params.name as string
-  await blogStore.queryBlogByCondition({
-    category: categoryName
-  })
-})
-
-const viewBlogClick = async (index: number) => {
-  const blogId = blogStore.blogList[index].id
-  await router.push({ name: 'DetailId', params: { id: blogId } })
-}
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/blog/blog.category.detail.module.scss";
-</style>
diff --git a/src/components/Comment/BlogComment.vue b/src/components/Comment/BlogComment.vue
deleted file mode 100644
index 8ae963c..0000000
--- a/src/components/Comment/BlogComment.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div class="blog-comment card-item">
-    <div class="comment-total">
-      <span>共 {{ blogStore.blogNestedCommentList.length }} 条评论</span>
-    </div>
-
-    <div class="comment-list">
-      <blog-comment-item v-for="(item, index) in blogStore.blogNestedCommentList" :key="index"
-                         :comment="item.comment" :replyList="item.replies"/>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import BlogCommentItem from '@/components/Comment/BlogCommentItem.vue'
-import { useBlogStore } from '@/store/blog'
-
-const blogStore = useBlogStore()
-</script>
-
-<style lang="scss">
-.blog-comment {
-  width: 100%;
-  padding: 10px;
-
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-</style>
diff --git a/src/components/Comment/BlogCommentEdit.vue b/src/components/Comment/BlogCommentEdit.vue
deleted file mode 100644
index ef79107..0000000
--- a/src/components/Comment/BlogCommentEdit.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <div class="blog-comment-edit card-item">
-    <div class="comment-title">
-      <el-input v-model="blogComment.name"
-                :maxlength="10" show-word-limit
-                placeholder="请输入昵称"/>
-      <el-input v-model="blogComment.website"
-                :maxlength="50" show-word-limit
-                placeholder="请输入个人博客网站"/>
-    </div>
-
-    <el-input v-model="blogComment.content"
-              placeholder="有什么想和我说的呢" :maxlength="500"
-              :rows="7" show-word-limit type="textarea"
-    />
-
-    <div class="comment-button">
-      <el-popover ref="emojiPopoverRef" placement="top" :width="300" trigger="hover">
-        <template #default>
-          <div class="emoji-panel">
-            <EmojiPicker :native="true" @select="onSelectEmoji" />
-          </div>
-        </template>
-        <template #reference>
-          <el-button circle>
-            <i class="fa-regular fa-face-smile"></i>
-          </el-button>
-        </template>
-      </el-popover>
-
-      <el-button type="primary"
-                 :disabled="blogComment.content.length === 0"
-                 @click="sendCommentClick"
-                 class="send-button">发送</el-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import EmojiPicker from 'vue3-emoji-picker'
-import 'vue3-emoji-picker/css'
-import { defineProps, ref, onMounted } from 'vue'
-import { useBlogStore } from '@/store/blog.ts'
-import { deepCopyObject } from 'vue3-common/utils/dataUtil'
-import { IBlogComment } from '@/types/blog.ts'
-
-const blogStore = useBlogStore()
-const emojiPopoverRef = ref()
-
-const props = defineProps({
-  parentId: {
-    required: true,
-    type: Number,
-    default: 0
-  }
-})
-
-const blogComment = ref<IBlogComment>({
-  id: 0,
-  blogId: 0,
-  name: '',
-  website: '',
-  content: '',
-  ipAddress: '',
-  userAgent: '',
-  parentId: 0,
-  isApproved: true,
-  createTime: ''
-})
-
-onMounted(() => {
-  blogComment.value = deepCopyObject(blogStore.getEmptyBlogComment())
-})
-
-const onSelectEmoji = (emoji) => {
-  if (blogComment.value.content.length <= 498) {
-    blogComment.value.content += emoji.i
-  }
-
-  emojiPopoverRef.value.hide()
-}
-
-const sendCommentClick = async () => {
-  blogComment.value.parentId = props.parentId
-  blogComment.value.blogId = blogStore.currentBlogId
-
-  if (!blogComment.value.name) {
-    blogComment.value.name = 'Anonymous'
-  }
-
-  await blogStore.addBlogComment(blogComment.value)
-  blogComment.value = deepCopyObject(blogStore.getEmptyBlogComment())
-  blogStore.isShowBlogCommentEdit = false
-}
-</script>
-
-<style lang="scss">
-.blog-comment-edit {
-  width: 100%;
-  padding: 10px;
-
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .comment-title {
-    display: flex;
-    justify-content: space-between;
-    gap: 10px;
-  }
-
-  .comment-button {
-    width: 100%;
-    display: flex;
-
-    .send-button {
-      margin-left: auto;
-    }
-  }
-}
-</style>
diff --git a/src/components/Comment/BlogCommentItem.vue b/src/components/Comment/BlogCommentItem.vue
deleted file mode 100644
index 4ad73dd..0000000
--- a/src/components/Comment/BlogCommentItem.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div class="blog-comment-card">
-    <el-avatar :src="`https://api.dicebear.com/6.x/adventurer/svg?seed=${props.comment.name}`"
-               :size="50" alt="未加载"/>
-
-    <div class="blog-comment-content">
-      <div class="basic-info">
-        <span>{{ props.comment.name }}</span>
-        <span class="content">{{ getBrowser(props.comment.userAgent) }}</span>
-        <span class="content">{{ getOsInfo(props.comment.userAgent) }}</span>
-      </div>
-
-      <div class="sub-info">
-        <span class="content">{{ props.comment.createTime }}</span>
-        <el-button v-if="!blogComment.isShowEdit"
-                   type="primary" text @click="replyClick">回复</el-button>
-        <el-button v-else type="primary"
-                   text @click="cancelClick">取消</el-button>
-      </div>
-
-      <p>{{ props.comment.content }}</p>
-
-      <blog-comment-edit v-if="blogComment.isShowEdit"
-                         :parent-id="props.comment.id"/>
-
-      <div class="reply-list">
-        <div class="blog-comment-card" v-for="(item, index) in props.replyList" :key="index">
-          <el-avatar :src="`https://api.dicebear.com/6.x/adventurer/svg?seed=${item.name}`"
-                     :size="50" alt="未加载"/>
-
-          <div class="blog-comment-content">
-            <div class="basic-info">
-              <span>{{ item.name }}</span>
-              <span class="content">{{ getBrowser(props.comment.userAgent) }}</span>
-              <span class="content">{{ getOsInfo(props.comment.userAgent) }}</span>
-            </div>
-
-            <div class="sub-info">
-              <span class="content">{{ item.createTime }}</span>
-            </div>
-            <p>{{ item.content }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
-import 'vue3-emoji-picker/css'
-import { defineProps, PropType, reactive } from 'vue'
-import { IBlogComment } from '@/types/blog'
-import { useBlogStore } from '@/store/blog.ts'
-import { UAParser } from 'ua-parser-js'
-
-const blogStore = useBlogStore()
-
-const props = defineProps({
-  comment: {
-    required: true,
-    type: Object as PropType<IBlogComment>
-  },
-  replyList: {
-    required: true,
-    type: Object as PropType<IBlogComment[]>
-  }
-})
-
-const blogComment = reactive({
-  isShowEdit: false
-})
-
-const replyClick = () => {
-  blogStore.currentBlogComment = blogStore.getEmptyBlogComment()
-  blogComment.isShowEdit = true
-}
-
-const cancelClick = () => {
-  blogComment.isShowEdit = false
-}
-
-const getOsInfo = (userAgent: string) => {
-  const uaParse = new UAParser(userAgent)
-  return `${uaParse.getOS().name} ${uaParse.getOS().version}`
-}
-
-const getBrowser = (userAgent: string) => {
-  const uaParse = new UAParser(userAgent)
-  return `${uaParse.getBrowser().name} ${uaParse.getBrowser().version}`
-}
-</script>
-
-<style lang="scss">
-.blog-comment-card {
-  width: 100%;
-  padding: 10px;
-
-  display: grid;
-  grid-template-columns: 60px 1fr;
-  gap: 5px;
-
-  .blog-comment-content {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-
-    .basic-info {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      font-size: small;
-    }
-
-    .sub-info {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .content {
-      font-size: small;
-      color: #666666;
-    }
-  }
-}
-</style>
diff --git a/src/components/Content/BlogDetail.vue b/src/components/Content/BlogDetail.vue
deleted file mode 100644
index d92644a..0000000
--- a/src/components/Content/BlogDetail.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div class="blog-detail blog-section card-item" id="blog-section">
-    <div class="blog-title">
-      <span class="title">{{ blogStore.currentBlog.title }}</span>
-      <blog-label :basic-blog="getBasicBlog(blogStore.currentBlog)"/>
-    </div>
-
-    <div class="blog-md card-item">
-      <MdPreview editorId="blog-id"
-                 v-model="blogStore.currentBlog.content"
-                 :theme="appStore.isDark ? 'dark' : 'light'"/>
-    </div>
-
-    <div class="blog-copyright">
-      <span>
-        <strong>本文作者: </strong> Cxx
-      </span>
-      <span>
-        <strong>本文链接: </strong>
-        <a href="https://www.microsoft.com/">{{ currentUrl.href }}</a>
-      </span>
-      <span>
-        <strong>版权声明: </strong>
-        本博客所有文章除特别声明外，均采用
-        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">©BY-NC-SA</a>
-        许可协议。转载请注明出处！
-      </span>
-    </div>
-
-    <div class="blog-ending">
-      <span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
-    </div>
-
-    <blog-comment-edit :parent-id="0"/>
-
-    <blog-comment />
-  </div>
-</template>
-
-<script setup lang="ts">
-import BlogLabel from '@/components/Content/BlogLabel.vue'
-import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
-import BlogComment from '@/components/Comment/BlogComment.vue'
-import { MdPreview } from 'md-editor-v3'
-import 'md-editor-v3/lib/style.css'
-import { useBlogStore } from '@/store/blog.ts'
-import { useAppStore } from '@/store/app'
-import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
-import { useRoute } from 'vue-router'
-import { onMounted } from 'vue'
-
-const blogStore = useBlogStore()
-const appStore = useAppStore()
-const route = useRoute()
-
-const currentUrl = new URL(window.location.href)
-
-onMounted(async () => {
-  const blogId = route.params.id as number
-  blogStore.currentBlogId = blogId
-  await blogStore.queryBlogById(blogId)
-})
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/blog/blog.detail.module.scss";
-</style>
diff --git a/src/components/Content/BlogLabel.vue b/src/components/Content/BlogLabel.vue
deleted file mode 100644
index 5258ce0..0000000
--- a/src/components/Content/BlogLabel.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div class="label-list">
-    <div class="container">
-      <div class="top-value item" v-if="props.basicBlog?.topValue > 1">
-        <i class="fa-solid fa-thumbtack"></i>
-      </div>
-
-      <div v-if="props.basicBlog?.topValue > 1" class="item">|</div>
-
-      <div class="great item" v-if="props.basicBlog?.isGreat">
-        <i class="fa-regular fa-newspaper"></i>
-      </div>
-
-      <div v-if="props.basicBlog?.isGreat" class="item">|</div>
-
-      <div class="item">
-        <i class="fa-regular fa-calendar"></i>
-        <span class="date">{{ formatDate(props.basicBlog.createTime) }}</span>
-      </div>
-
-      <div class="item">|</div>
-
-      <div class="item">
-        <i class="fa-regular fa-calendar-check"></i>
-        <span class="date">{{ formatDate(props.basicBlog.createTime) }}</span>
-      </div>
-
-      <div class="item">|</div>
-
-      <div class="item">
-        <i class="fa-regular fa-folder"></i>
-        <span class="category" @click="viewBlogCategoryClick">
-          {{ props.basicBlog.category }}
-        </span>
-      </div>
-
-      <div class="item">|</div>
-
-      <div class="item">
-        <i class="fa-solid fa-eye"></i>
-        <span>{{ props.basicBlog.visitCount }} 次</span>
-      </div>
-    </div>
-
-    <div class="container">
-      <div class="item">
-        <i class="fa-regular fa-file-word"></i>
-        <span>{{ props.basicBlog.wordCount }} 字</span>
-      </div>
-
-      <div class="item">|</div>
-
-      <div class="item">
-        <i class="fa-regular fa-clock"></i>
-        <span>{{ props.basicBlog.readDuration.toFixed(0) }} 分钟</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineProps, PropType } from 'vue'
-import { IBasicBlog } from '@/types/blog.ts'
-import { useBlogStore } from '@/store/blog.ts'
-import { useRouter } from 'vue-router'
-import { formatDate } from 'vue3-common/utils/dateUtil'
-
-const blogStore = useBlogStore()
-const router = useRouter()
-
-const props = defineProps({
-  basicBlog: {
-    required: true,
-    type: Object as PropType<IBasicBlog>
-  }
-})
-
-/**
- * 点击查看博客分类按钮
- */
-const viewBlogCategoryClick = async () => {
-  const category = props.basicBlog?.category as string
-  await blogStore.queryBlogByCondition({
-    category
-  })
-  await router.push({ name: 'CategoriesBlog', params: { name: category } })
-}
-</script>
-
-<style scoped lang="scss">
-@use "@/styles/blog/blog.label.module.scss";
-</style>
diff --git a/src/components/Content/BlogOverview.vue b/src/components/Content/BlogOverview.vue
deleted file mode 100644
index 0ce4876..0000000
--- a/src/components/Content/BlogOverview.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="blog-content-list blog-section card-item">
-    <div v-if="blogStore.blogList.length === 0"
-         class="blog-content blog-content-empty" >
-    </div>
-
-    <div class="blog-content blog-content-summary"
-         v-for="(item, index) in blogStore.blogList" :key="index">
-      <span class="title">{{ item.title }}</span>
-
-      <blog-label :basic-blog="getBasicBlog(item)"/>
-
-      <p class="content">
-        {{ item.summary }}
-      </p>
-
-      <el-button type="primary" @click="readBlogClick(index)">阅读全文 »</el-button>
-      <hr/>
-    </div>
-
-    <el-pagination
-        v-model:current-page="blogStore.pageInfo.currentPage"
-        :page-size="blogStore.pageInfo.pageSize"
-        :total="blogStore.pageInfo.totalSize"
-        layout="total, prev, pager, next"
-        @current-change="changePageClick"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import BlogLabel from '@/components/Content/BlogLabel.vue'
-import { useRouter } from 'vue-router'
-import { onMounted } from 'vue'
-import { useBlogStore } from '@/store/blog.ts'
-import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
-
-const router = useRouter()
-const blogStore = useBlogStore()
-
-onMounted(async () => {
-  await blogStore.queryBlog()
-})
-
-/**
- * 点击阅读博客按钮
- * @param index 索引
- */
-const readBlogClick = async (index: number) => {
-  const blogId = blogStore.blogList[index].id
-  await router.push({ name: 'DetailId', params: { id: blogId } })
-}
-
-/**
- * 点击切换博客页数按钮
- * @param page 页码
- */
-const changePageClick = async (page: number) => {
-  blogStore.pageInfo.currentPage = page
-  await blogStore.queryBlog()
-}
-</script>
-
-<style lang="scss">
-@use "@/styles/blog/blog.overview.module.scss";
-</style>
diff --git a/src/styles/app.loading.module.scss b/src/styles/app.loading.module.scss
deleted file mode 100644
index acc3ea0..0000000
--- a/src/styles/app.loading.module.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-#app-loading {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: #f8f9fa;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-
-  /* 立方体的容器（让方块水平排列） */
-  .cube-container {
-    display: flex;
-    gap: 15px; /* 方块之间的间距 */
-  }
-
-  /* 立体小方块 */
-  .cube {
-    width: 40px;
-    height: 40px;
-    background: linear-gradient(145deg, #3498db, #2980b9); /* 渐变颜色 */
-    border-radius: 5px;
-    position: relative;
-    animation: jump 1.2s infinite ease-in-out;
-  }
-
-  /* 给不同的方块加不同颜色 */
-  .cube1 { background: linear-gradient(145deg, #e74c3c, #c0392b); animation-delay: 0s; }
-  .cube2 { background: linear-gradient(145deg, #f1c40f, #d4ac0d); animation-delay: 0.2s; }
-  .cube3 { background: linear-gradient(145deg, #2ecc71, #27ae60); animation-delay: 0.4s; }
-
-  /* 方块跳跃动画 */
-  @keyframes jump {
-    0%, 100% {
-      transform: translateY(0);
-      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
-    }
-    50% {
-      transform: translateY(-30px);
-      box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.3);
-    }
-  }
-
-  /* 加载文字 */
-  .loading-text {
-    margin-top: 20px;
-    font-size: 18px;
-    color: #555;
-    font-weight: bold;
-    letter-spacing: 2px;
-    animation: fade 1.5s infinite ease-in-out;
-  }
-
-  /* 文字淡入淡出动画 */
-  @keyframes fade {
-    0%, 100% { opacity: 0.2; }
-    50% { opacity: 1; }
-  }
-}
diff --git a/src/styles/blog/blog.archive.module.scss b/src/styles/blog/blog.archive.module.scss
deleted file mode 100644
index cf4726f..0000000
--- a/src/styles/blog/blog.archive.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-.blog-archive {
-  display: flex;
-  flex-direction: column;
-  gap: 3vh;
-  padding: 10vh 2vw;
-
-  ::v-deep(.el-date-editor) {
-    align-self: center;
-  }
-
-  .total {
-    align-self: center;
-    font-size: blog.$normal-font-size;
-    color: blog.$normal-text-color;
-  }
-
-  .time-line {
-    height: 100%;
-    padding: 10px;
-    overflow: auto;
-
-    .item {
-      height: 5vh;
-
-      .date {
-        color: blog.$normal-text-color;
-        margin-right: 5px;
-      }
-
-      .title {
-        font-size: blog.$normal-font-size;
-        color: blog.$normal-text-color;
-        cursor: pointer;
-        text-decoration: underline;
-        text-underline-offset: 0.2rem;
-      }
-
-      .title:hover {
-        color: var(--color-text);
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .blog-archive {
-    padding: 20px 10px;
-  }
-}
diff --git a/src/styles/blog/blog.category.detail.module.scss b/src/styles/blog/blog.category.detail.module.scss
deleted file mode 100644
index e7cfb8f..0000000
--- a/src/styles/blog/blog.category.detail.module.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-.blog-category-detail {
-  padding: 10vh 2vw;
-
-  display: flex;
-  flex-direction: column;
-  gap: 3vh;
-
-  .name {
-    font-weight: bold;
-    text-align: center;
-    font-size: blog.$large-font-size;
-  }
-
-  .category-detail-list {
-    height: 100%;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 2vh;
-
-    .item {
-      display: grid;
-      grid-template-columns: 40px 200px 1fr;
-      justify-items: center;
-      align-items: center;
-      gap: 10px;
-      cursor: pointer;
-      color: blog.$normal-text-color;
-
-      padding-bottom: 0.5vh;
-      border: none;
-      border-bottom: 1px dashed blog.$gray-text-color;
-
-      .number, .date {
-        text-align: center;
-      }
-
-      .title {
-        justify-self: start;
-      }
-
-      span {
-        padding: 0.2vw;
-      }
-    }
-
-    .item:hover {
-      color: var(--color-text);
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .blog-category-detail {
-    padding: 20px 10px;
-  }
-}
diff --git a/src/styles/blog/blog.category.module.scss b/src/styles/blog/blog.category.module.scss
deleted file mode 100644
index 710f5ea..0000000
--- a/src/styles/blog/blog.category.module.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-.blog-category {
-  display: flex;
-  flex-direction: column;
-  gap: 3vh;
-  padding: 10vh 2vw;
-
-  .total {
-    text-align: center;
-    font-size: blog.$normal-font-size;
-    color: blog.$normal-text-color;
-  }
-
-  .category-list {
-    height: 100%;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    overflow: auto;
-
-    .item {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      padding-bottom: 5px;
-      border-bottom: 1px dashed blog.$gray-text-color;
-      color: blog.$normal-text-color;
-
-      i {
-        font-size:28px;
-        color: #0f8bc7;
-      }
-
-      .content {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-
-        .label {
-          cursor: pointer;
-          color: blog.$normal-text-color;
-          font-size: blog.$normal-font-size;
-        }
-
-        .label:hover {
-          color: blog.$hover-text-color;
-        }
-
-        .value {
-          font-size: blog.$normal-font-size;
-          color: blog.$gray-text-color;
-        }
-      }
-    }
-
-    .item:hover {
-      color: var(--color-text);
-      cursor: pointer;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .blog-category {
-    padding: 20px 10px;
-  }
-}
diff --git a/src/styles/blog/blog.detail.module.scss b/src/styles/blog/blog.detail.module.scss
deleted file mode 100644
index 3b8c66b..0000000
--- a/src/styles/blog/blog.detail.module.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-.blog-detail {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 2vh;
-  padding: 10vh 2vw 3vh 2vw;
-
-  .blog-md {
-    height: 100%;
-    width: 100%;
-    padding: 10px;
-    overflow: auto;
-
-    .md-editor {
-      height: 100%;
-    }
-  }
-}
-
-.blog-title {
-  width: 100%;
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-  align-items: center;
-  gap: 1vh;
-
-  .title {
-    background-color: blog.$theme-color;
-    padding: 5px;
-    border: 2px solid blog.$theme-color;
-    border-radius: 10px;
-    text-align: center;
-    font-size: blog.$blog-title-font-size;
-    font-family: "华文楷体", serif;
-  }
-}
-
-.blog-copyright {
-  width: 100%;
-  background-color: var(--color-copyright-bg);
-
-  padding: 10px;
-  border-left: 3px solid #FD2C17;
-  font-size:  blog.$small-font-size;
-
-  display: flex;
-  flex-direction: column;
-  gap: 1vh;
-
-  strong {
-    margin-right: 0.2vw;
-  }
-}
-
-.blog-ending {
-  span {
-    color: #CFCFCF;
-  }
-}
-
-.blog-detail-mobile {
-  padding: 10px;
-
-  display: flex;
-  flex-direction: column;
-  gap: 2vh;
-}
diff --git a/src/styles/blog/blog.footbar.module.scss b/src/styles/blog/blog.footbar.module.scss
deleted file mode 100644
index 856461d..0000000
--- a/src/styles/blog/blog.footbar.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-.blog-site-footer {
-  padding: 10px 0;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-
-  span {
-    font-size: blog.$small-font-size;
-  }
-}
diff --git a/src/styles/blog/blog.label.module.scss b/src/styles/blog/blog.label.module.scss
deleted file mode 100644
index bdb1270..0000000
--- a/src/styles/blog/blog.label.module.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-.label-list {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 1vh;
-
-  margin-bottom: 1vh;
-
-  .container {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-
-    .item {
-      font-size: blog.$small-font-size;
-      color: blog.$gray-text-color;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-
-      span {
-        font-size: blog.$small-font-size;
-        font-family: "Times New Roman", serif;
-      }
-    }
-  }
-
-  .top-value {
-    color: #7d26cd !important;
-  }
-
-  .great {
-    color: #FFFFFF !important;
-    background-color: #7d26cd;
-    padding: 2px;
-  }
-
-  .date {
-    text-decoration: underline dotted;
-    text-underline-offset: 0.2em;
-  }
-
-  .category {
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
-    color: blog.$normal-text-color;
-    cursor: pointer;
-  }
-
-  .category:hover {
-    color: blog.$hover-text-color;
-  }
-}
diff --git a/src/styles/blog/blog.module.scss b/src/styles/blog/blog.module.scss
deleted file mode 100644
index 9d30e96..0000000
--- a/src/styles/blog/blog.module.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-.blog-container {
-  // height: 100%;
-  background-color: var(--color-bg);
-  padding: 0 5vw;
-
-  display: grid;
-  grid-template-columns: minmax(13vw, 200px) 1fr;
-  column-gap: 2vw;
-
-  aside {
-    display: grid;
-    grid-template-rows: 40vh 60vh;
-    row-gap: 2vh;
-    z-index: 2;
-
-    .blog-summary {
-      // 滚动到顶部固定
-      position: sticky;
-      top: 0;
-    }
-  }
-
-  section {
-    z-index: 2;
-
-    display: flex;
-    flex-direction: column;
-    gap: 2vh;
-
-    .blog-section {
-      // height: 100%;
-      min-height: 100vh;
-      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),
-                  0 3px 1px -2px rgba(0,0,0,0.06),
-                  0 1px 5px 0 rgba(0,0,0,0.12),
-                  0 -1px 0.5px 0 rgba(0,0,0,0.09);
-
-      .module-title {
-        background-color: blog.$theme-color;
-        padding: 5px;
-        border: 2px solid blog.$theme-color;
-        border-radius: 10px;
-        text-align: center;
-        font-size: blog.$large-font-size;
-        font-family: "华文楷体", serif;
-      }
-    }
-  }
-
-  .card-item {
-    background-color: var(--color-card-bg);
-    border: 1px solid var(--color-border-bg);
-    border-radius: blog.$border-radius;
-    // box-shadow: 3px 3px 3px #CFCFCF;
-  }
-}
-
-
diff --git a/src/styles/blog/blog.overview.module.scss b/src/styles/blog/blog.overview.module.scss
deleted file mode 100644
index 7759d56..0000000
--- a/src/styles/blog/blog.overview.module.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-$blog-content-list-item-height: 38vh;
-$blog-content-title-font-size: 1.6rem;
-$hr-color: #CFCFCF;
-
-.blog-content-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5vh;
-  padding: 10vh 2vw 2vh 2vw;
-  position: relative;
-
-  .blog-content {
-    width: 100%;
-    height: $blog-content-list-item-height;
-    padding: 4vh 1vw;
-
-    border: 1px solid blog.$border-color;
-    border-radius: 15px;
-    box-shadow: 0 0 5px blog.$border-color;
-  }
-
-  .blog-content-empty {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .blog-content-summary {
-    display: grid;
-    grid-template-rows: 1fr 1fr 8vh 1fr 1fr;
-    justify-items: center;
-    align-items: center;
-    gap: 2vh;
-
-    .title {
-      font-size: $blog-content-title-font-size;
-      font-family: "华文楷体", serif;
-      font-weight: bolder;
-      position: relative;
-    }
-
-    // 自动展开下划线
-    .title:after {
-      content: "";
-      width: 0;
-      height: 2px;
-      background: blog.$theme-color;
-      // 初始位置在底部中间
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      // 动画时间
-      transition: all .8s;
-    }
-
-    // 悬浮式展开到100%
-    .title:hover::after {
-      width: 100%;
-      left: 0;
-    }
-
-    .content {
-      font-size: blog.$normal-font-size;
-      line-height: 150%;
-    }
-
-    hr {
-      width: 10%;
-      height: 1px;
-      background-color: $hr-color;
-      border: none;
-    }
-
-    span, p {
-      font-family: '华为行楷',serif;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .blog-content-list {
-    padding: 10px;
-  }
-}
diff --git a/src/styles/blog/blog.sidebar.module.scss b/src/styles/blog/blog.sidebar.module.scss
deleted file mode 100644
index 657968b..0000000
--- a/src/styles/blog/blog.sidebar.module.scss
+++ /dev/null
@@ -1,281 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-$title-font-color: #FFFFFF;
-$title-font-size: 1.8rem;
-$sub-title-font-size: 1rem;
-
-.blog-aside {
-  .top-container {
-    width: 100%;
-    display: grid;
-    grid-template-rows: 2fr 3fr;
-
-    .title-container {
-      background-color: blog.$theme-color;
-      border-top-left-radius: 15px;
-      border-top-right-radius: 15px;
-
-      display: grid;
-      grid-template-rows: 1fr 1fr;
-      justify-items: center;
-      align-items: center;
-
-      padding: 10px;
-
-      .title {
-        color: $title-font-color;
-        font-size: $title-font-size;
-      }
-
-      .sub-title {
-        font-family: "华文楷体", serif;
-        font-size: $sub-title-font-size;
-        text-align: center;
-        line-height: 150%;
-      }
-    }
-
-    .blog-menu-container {
-      align-self: center;
-      height: 90%;
-      display: grid;
-      grid-template-rows: repeat(4, 1fr);
-      align-items: center;
-
-      .el-menu-item {
-        height: 5vh;
-        gap: 0.5vw;
-        font-size: blog.$normal-font-size;
-
-        .menu-title {
-
-        }
-
-        .value {
-          position: absolute;
-          right: 10%;
-          line-height: 2vh;
-
-          background-color: blog.$normal-bg-color;
-          padding: 2px;
-          border: solid 1px blog.$normal-bg-color;
-          border-radius: 15px;
-
-          color: var(--color-bg);
-          font-size: blog.$small-font-size;
-          font-family: "Times New Roman",serif;
-        }
-      }
-    }
-
-    .el-menu {
-      border: none;
-    }
-  }
-
-  .blog-summary {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1vh;
-
-    .blog-summary-tab {
-      margin-top: 1vh;
-      height: 5vh;
-      display: flex;
-      align-items: center;
-      gap: 1vw;
-
-      span {
-        font-size: blog.$small-font-size;
-      }
-
-      span:hover {
-        color: #FC6423;
-        cursor: pointer;
-      }
-
-      .tab-active {
-        color: #FC6423;
-        text-decoration: underline;
-        text-underline-offset: 0.5em;
-      }
-    }
-
-    .blog-brief {
-      height: 100%;
-      width: 100%;
-      display: grid;
-      grid-template-rows: 150px 50px 50px 1fr;
-      justify-items: center;
-      align-items: center;
-      gap: 1vh;
-
-      .avatar {
-        padding: 1vh 1vw;
-        display: grid;
-        grid-template-rows: 100px 1fr;
-        justify-items: center;
-        align-items: center;
-        gap: 1vh;
-
-        img {
-          width: 100px;
-          height: 100px;
-          border-radius: 50%;
-          transition: all 2.0s;
-          cursor: pointer;
-        }
-
-        img:hover {
-          transform: rotate(360deg);
-        }
-
-        span {
-          font-weight: bold;
-        }
-      }
-
-      .info {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        justify-items: center;
-        align-items: center;
-        gap: 1vw;
-
-        .item {
-          display: grid;
-          grid-template-rows: 1fr 1fr;
-          justify-items: center;
-          align-items: center;
-          gap: 5px;
-          cursor: pointer;
-
-          .name {
-            color: blog.$gray-text-color;
-          }
-
-          .name:hover {
-            color: var(--color-text);
-          }
-        }
-      }
-
-      .social {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        cursor: pointer;
-
-        .item {
-          width: 100%;
-          padding: 5px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          gap: 5px;
-          color: blog.$normal-text-color;
-          font-size: blog.$small-font-size;
-
-          .name {
-            font-size: blog.$small-font-size;
-          }
-        }
-
-        .item:hover {
-          background-color: var(--color-card-bg);
-          color: var(--color-text);
-        }
-      }
-
-      .latest-blog {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1vh;
-
-        .title {
-          span {
-            margin-left: 5px;
-            font-weight: bold;
-          }
-        }
-
-        .blog-list {
-          width: 100%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          gap: 1.5vh;
-          cursor: pointer;
-
-          span {
-            text-align: center;
-            text-decoration: underline;
-            text-underline-offset: 0.1em;
-            font-size: blog.$small-font-size;
-            color: blog.$normal-text-color;
-
-            width: 80%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          span:hover {
-            color: var(--color-text);
-          }
-        }
-      }
-
-      .blog-time {
-        width: 10vw;
-        height: 100%;
-      }
-
-      span {
-        font-size: blog.$normal-font-size;
-      }
-    }
-
-    .md-editor-catalog {
-      height: 100%;
-      width: 100%;
-      overflow: auto;
-
-      span {
-        word-break: break-all;
-        white-space: normal;
-        font-size: blog.$smaller-font-size;
-        color: #666666;
-      }
-    }
-
-    .scroll-container {
-      padding: 2px 0;
-      width: 100%;
-      border-color: blog.$border-color;
-      border-bottom-left-radius: blog.$border-radius;
-      border-bottom-right-radius: blog.$border-radius;
-      background-color: var(--color-scroll-card-bg);
-
-      text-align: center;
-
-      .fa-arrow-up {
-        color: blog.$theme-color;
-        margin-right: 0.2vw;
-      }
-
-      span {
-        font-size: blog.$small-font-size;
-        color: #A19FA0;
-      }
-    }
-
-    .scroll-container:hover {
-      cursor: pointer;
-    }
-  }
-}
diff --git a/src/styles/blog/blog.tools.module.scss b/src/styles/blog/blog.tools.module.scss
deleted file mode 100644
index 73e949b..0000000
--- a/src/styles/blog/blog.tools.module.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-@use "blog.variable.module.scss" as blog;
-
-.blog-tools {
-  position: absolute;
-
-  .book-mark-link {
-    border-bottom: none;
-    display: block;
-    position: fixed;
-    top: -2px;
-    left: 20px;
-    color: #222;
-    font-size: 26px;
-    transition: .3s;
-    z-index: 2;
-  }
-
-  .github-corner {
-    border-bottom: none;
-    display: block;
-    position: fixed;
-    top: 0;
-    right: 0;
-    color: #222;
-    font-size: 26px;
-    transition: .3s;
-    z-index: 2;
-  }
-
-  .github-corner:hover .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
-  }
-
-  @keyframes octocat-wave {
-    0%, 100% {
-      transform: rotate(0)
-    }
-    20%, 60% {
-      transform: rotate(-25deg)
-    }
-    40%, 80% {
-      transform: rotate(10deg)
-    }
-  }
-
-  @media (max-width: 500px) {
-    .github-corner:hover .octo-arm {
-      animation: none
-    }
-    .github-corner .octo-arm {
-      animation: octocat-wave 560ms ease-in-out
-    }
-  }
-
-  #particles {
-    position: absolute;
-    z-index: 0;
-  }
-
-  .heart {
-    position: fixed;
-    opacity: 1;
-    scale: 1;
-    width: 10px;
-    height: 10px;
-    background: red;
-    transform: rotate(45deg);
-    z-index: 2;
-  }
-
-  .heart:after, .heart:before {
-    content: "";
-    width: inherit;
-    height: inherit;
-    background: inherit;
-    border-radius: 50%;
-    position: absolute;
-  }
-
-  .heart:after {
-    top: -5px;
-  }
-
-  .heart:before {
-    left: -5px;
-  }
-
-  @keyframes move {
-    100% {
-      transform: translateY(-20px) rotate(45deg);
-      opacity: 0;
-    }
-  }
-
-  .blog-progress {
-    /* Positioning */
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 3px;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: none;
-    background-color: transparent;
-    color: blog.$theme-color;
-    z-index: 3;
-  }
-
-  .blog-progress::-webkit-progress-bar {
-    background-color: transparent;
-  }
-
-  .blog-progress::-webkit-progress-value {
-    background-color: blog.$theme-color;
-  }
-
-  .blog-progress::-moz-progress-bar {
-    background-color: blog.$theme-color;
-  }
-
-  .theme-button {
-    position: fixed;
-    top: -2px;
-    left: 50px;
-    z-index: 10;
-  }
-}
diff --git a/src/styles/blog/blog.variable.module.scss b/src/styles/blog/blog.variable.module.scss
deleted file mode 100644
index 383b7f5..0000000
--- a/src/styles/blog/blog.variable.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-$bg-color: #EEEEEE;
-$card-bg-color: #FFFFFF;
-
-// 主题颜色
-$theme-color: #009FA8;
-// 正常文本颜色
-$normal-text-color: #555555;
-// 悬浮文本颜色
-$hover-text-color: #000000;
-// 灰色文本颜色
-$gray-text-color: #9C9C9C;
-
-$normal-bg-color: #CCCCCC;
-$hover-bg-color: #F9F9F9;
-
-$blog-title-font-size: 1.6rem;
-$large-font-size: 1.3rem;
-$normal-font-size: 1rem;
-$small-font-size: 0.9rem;
-$smaller-font-size: 0.8rem;
-
-$border-color: #EEEEEE;
-$border-radius: 15px;
diff --git a/src/styles/home.layout.module.scss b/src/styles/home.layout.module.scss
deleted file mode 100644
index ba35023..0000000
--- a/src/styles/home.layout.module.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-@use "home.variable.module" as home;
-
-.layout-home {
-  display: flex;
-  flex-direction: column;
-
-  .layout-navbar {
-    background-color: home.$navbar-bg-color;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-
-    display: grid;
-    grid-template-columns: 1fr 70% 1fr;
-    align-items: center;
-
-    .title-container {
-
-    }
-
-    .right-container {
-      margin-right: 10px;
-      justify-self: flex-end;
-
-      display: flex;
-      justify-content: center;
-      gap: 1vw;
-
-      .el-avatar:hover {
-        cursor: pointer;
-      }
-    }
-
-    .layout-menu {
-      .el-menu {
-        display: flex;
-        justify-content: center;
-        background-color: home.$navbar-bg-color !important;
-        overflow: auto;
-        border-bottom: none !important;
-
-        .el-menu-item, .el-sub-menu__title {
-          height: home.$navbar-height;
-          font-family: "华文楷体", serif;
-          font-size: 1rem;
-        }
-
-        .el-icon, span {
-          color: #FFFFFF;
-        }
-      }
-    }
-  }
-
-  .layout-main {
-    height: calc(100vh - #{home.$navbar-height});
-    overflow: auto;
-    background-color: home.$body-bg-color;
-    padding: 10px;
-  }
-
-  .layout-main::-webkit-scrollbar {
-    display: none;
-  }
-
-  .common-view {
-    height: 100%;
-
-    .body-container {
-      height: 100%;
-      display: grid;
-      grid-template-columns: 1fr minmax(400px, 30%);
-      gap: 1vw;
-
-      .left-container {
-        display: flex;
-        flex-direction: column;
-        gap: 1vh;
-
-        .common-statistics {
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-          justify-items: center;
-          gap: 1vw;
-        }
-      }
-
-      .right-container {
-        display: flex;
-        flex-direction: column;
-        gap: 1vh;
-
-        .common-query {
-          align-self: center;
-
-          display: flex;
-          gap: 10px;
-        }
-      }
-
-      .add-new {
-        position: absolute;
-        right: 1%;
-        bottom: 2%;
-
-        width: 50px;
-        height: 50px;
-
-        font-size: 1.8rem;
-        box-shadow: 0 4px 10px #CFCFCF;
-      }
-    }
-
-    @media (max-width: 1200px) {
-      .body-container {
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-  }
-
-  .plan-view {
-    .body-container {
-      grid-template-columns: 1fr minmax(350px, 30%);
-    }
-  }
-
-  .common-section {
-    height: 100%;
-    overflow: auto;
-  }
-
-  .card-item {
-    background-color: #FFFFFF;
-    border: 1px solid #FFFFFF;
-    border-radius: 15px;
-    box-shadow: 3px 3px 3px #CFCFCF;
-  }
-
-  .record-card-item {
-    background-color: var(--color-record-card-bg);
-    border: 1px solid var(--color-record-card-bg);
-    border-radius: 10px;
-    // box-shadow: 3px 3px 3px #CFCFCF;
-  }
-
-  .el-switch {
-    .el-switch__core {
-      height: 32px;
-      width: 80px;
-    }
-  }
-}
-
-.el-menu--popup-container {
-  .el-menu--popup {
-    min-width: 8vw;
-  }
-
-  .el-menu-item.is-active {
-    background-color: home.$menu-active-color !important;
-  }
-}
diff --git a/src/styles/home.variable.module.scss b/src/styles/home.variable.module.scss
deleted file mode 100644
index 1af7066..0000000
--- a/src/styles/home.variable.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-$theme-color: #009FA8;
-
-$navbar-bg-color: #138BBF;
-$body-bg-color: #F5F5F5;
-$footer-bg-color: #F5F5DC;
-$menu-active-color: #009FA8;
-
-$navbar-height: 60px;
-$foot-height: 50px;
-$common-padding: 10px;
-
-$query-height: 60px;
-
-$main-top-padding: 2vh;
-$main-left-padding: 0.5vw;
diff --git a/src/styles/home/bill.mobile.module.scss b/src/styles/home/bill.mobile.module.scss
deleted file mode 100644
index 6aad67e..0000000
--- a/src/styles/home/bill.mobile.module.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-.mobile-bill-view {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .el-date-editor {
-    align-self: center;
-  }
-
-  .bill-chart {
-    display: grid;
-    grid-template-rows: repeat(4, 1fr);
-    gap: 10px;
-
-    .chart-container {
-      display: grid;
-      grid-template-rows: 40px 1fr;
-
-      .content {
-        padding: 0 5px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid #009FA8;
-
-        .title {
-          font-size: 1em;
-          font-weight: bold;
-        }
-      }
-
-      .chart {
-        height: 300px;
-        width: 100%;
-      }
-
-      .rank-chart {
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-
-        .rank-item {
-          padding: 10px;
-          display: grid;
-          grid-template-columns: 20px 1fr 80px;
-          align-items: center;
-
-          .rank-amount {
-            justify-self: flex-end;
-          }
-        }
-
-        .rank-item:nth-child(1) {
-          color: #d4af37;
-          font-weight: bold;
-        }
-
-        .rank-item:nth-child(2) {
-          color: #a8a8a8;
-        }
-
-        .rank-item:nth-child(3) {
-          color: #b87333;
-        }
-      }
-    }
-  }
-
-  .el-switch {
-    .el-switch__core {
-      height: 32px;
-      width: 80px;
-    }
-  }
-
-  .bill-setting {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    .button-container {
-      align-self: center;
-
-      display: flex;
-      gap: 10px;
-    }
-  }
-}
diff --git a/src/styles/home/bill.module.scss b/src/styles/home/bill.module.scss
deleted file mode 100644
index 1f439a4..0000000
--- a/src/styles/home/bill.module.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.bill-view {
-  .bill-chart {
-    flex-grow: 1;
-
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 2vh;
-
-    .chart-container {
-      display: grid;
-      grid-template-rows: 40px 1fr;
-
-      .content {
-        padding: 0 5px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid #009FA8;
-
-        .title {
-          font-size: 1em;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-
-  @media (max-width: 1200px) {
-    .bill-chart {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr;
-      gap: 2vh;
-
-      .chart-container {
-        .chart {
-          min-width: 300px;
-          min-height: 250px;
-        }
-      }
-    }
-  }
-
-  .bill-dialog {
-    width: 950px;
-  }
-}
diff --git a/src/styles/home/food.mobile.module.scss b/src/styles/home/food.mobile.module.scss
deleted file mode 100644
index 80d3406..0000000
--- a/src/styles/home/food.mobile.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.mobile-food-view {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .food-list {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    //align-items: center;
-    gap: 1vh;
-
-    .list {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-  }
-}
diff --git a/src/styles/home/food.module.scss b/src/styles/home/food.module.scss
deleted file mode 100644
index e3c2ab4..0000000
--- a/src/styles/home/food.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.food-view {
-  .food-list {
-    background-color: #F5F5F5;
-    flex-grow: 1;
-
-    overflow: auto;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    //align-items: center;
-    gap: 1vh;
-
-    padding: 10px;
-
-    .list {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      column-gap: 2vw;
-      row-gap: 2vh;
-    }
-
-    @media (min-width: 1280px) and (max-width: 1500px) {
-      .list {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-
-    @media (max-width: 1280px) {
-      .list {
-        grid-template-columns: repeat(1, 1fr);
-      }
-    }
-
-    .el-pagination {
-      align-self: center;
-    }
-  }
-}
diff --git a/src/styles/home/life.detail.module.scss b/src/styles/home/life.detail.module.scss
deleted file mode 100644
index 4ddded4..0000000
--- a/src/styles/home/life.detail.module.scss
+++ /dev/null
@@ -1,232 +0,0 @@
-.life-detail {
-  position: relative;
-  display: grid;
-  grid-template-rows: 40px 1fr;
-  align-items: center;
-
-  .title {
-    text-align: center;
-    font-weight: bold;
-    font-size: 1.4rem;
-  }
-
-  section {
-    .info-container, .record-container {
-      .info-item {
-        padding: 1vh 1vw;
-        display: flex;
-        flex-direction: column;
-        gap: 1vh;
-
-        .title-info {
-          display: flex;
-          align-items: center;
-          gap: 5px;
-
-          svg {
-            height: 1.4em;
-            width: 1.4em;
-          }
-
-          .sub-title {
-            font-size: large;
-            font-weight: bold;
-          }
-        }
-
-        .info {
-          margin-left: 2vw;
-        }
-      }
-    }
-
-    .info-container {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-
-      .food-basic-info {
-        display: flex;
-        gap: 1vh;
-      }
-
-      .travel-basic-info {
-        display: flex;
-        flex-direction: column;
-        gap: 1vh;
-
-        .basic-item {
-          display: flex;
-          flex-direction: column;
-          gap: 1vh;
-
-          .basic-title {
-            font-weight: bold;
-          }
-
-          .basic-content {
-            margin-left: 1vw;
-            display: flex;
-            gap: 1vh;
-          }
-        }
-      }
-
-      .material-info {
-        display: flex;
-        flex-direction: column;
-        gap: 1vh;
-
-        .material-item {
-          display: flex;
-          flex-direction: column;
-          gap: 1vh;
-
-          .material-title {
-            font-weight: bold;
-          }
-
-          .material-content {
-            margin-left: 1vw;
-            display: flex;
-            gap: 1vh;
-          }
-        }
-      }
-
-      .step-info {
-        margin-left: 1vw;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        gap: 1vh;
-        min-height: 28vh;
-
-        .step-container {
-          display: grid;
-          grid-template-columns: 50px 1fr;
-          gap: 1vw;
-
-          .step-body {
-            display: flex;
-            flex-direction: column;
-            gap: 1vh;
-
-            .step-content {
-              font-weight: bold;
-            }
-
-            .step-image {
-              height: 100%;
-              width: 100%;
-
-              max-height: 300px;
-              max-width: 300px;
-            }
-          }
-        }
-
-      }
-
-      .others-info {
-        margin-left: 1vw;
-        display: flex;
-        gap: 1vw;
-
-        .others-title {
-          font-weight: bold;
-        }
-      }
-
-      .guide-info {
-        display: flex;
-        flex-direction: column;
-        gap: 1vh;
-
-        .guide-item {
-          display: flex;
-          flex-direction: column;
-          gap: 1vh;
-
-          .guide-title {
-            font-weight: bold;
-          }
-
-          .guide-content {
-            min-height: 6vh;
-            margin-left: 1vw;
-            display: flex;
-            gap: 1vh;
-          }
-        }
-      }
-    }
-
-    .info-container .info-item:last-child {
-      flex-grow: 1;
-    }
-
-    .record-container {
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-      gap: 2vh;
-
-      .record-info {
-        .el-timeline {
-          .el-timeline-item__wrapper {
-            .el-timeline-item__timestamp {
-              color: #000000;
-              font-weight: bold;
-            }
-          }
-        }
-
-        .record-card {
-          .el-card__body {
-            display: grid;
-            grid-template-rows: 20px 250px;
-            gap: 10px;
-
-            .record-content {
-              font-weight: bold;
-            }
-
-            .el-carousel {
-              .el-carousel__container {
-                height: 100%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .back-button {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .life-detail {
-    section {
-      height: calc(100vh - 40px - 40px - 4vh);
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 10px;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .life-detail {
-    section {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-  }
-}
diff --git a/src/styles/home/life.record.module.scss b/src/styles/home/life.record.module.scss
deleted file mode 100644
index fd6a75a..0000000
--- a/src/styles/home/life.record.module.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-$card-image-height: 200px;
-
-.life-record-card {
-  display: grid;
-  grid-template-rows: minmax($card-image-height, 26vh) 1fr;
-
-  .el-carousel {
-    border-top-left-radius: 15px;
-    border-top-right-radius: 15px;
-
-    .el-carousel__container {
-      height: 100%;
-    }
-
-    .el-image {
-      width: 100%;
-      height: 100%;
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
-  .record-info {
-    border-top: 1px solid var(--el-color-primary);
-    padding: 1vh;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .top-container, .bottom-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .info-list {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .el-rate {
-          height: auto;
-        }
-
-        .info-item {
-          display: flex;
-          align-items: center;
-          gap: 3px;
-
-          .title {
-            font-size: 1.2rem;
-            font-weight: bold;
-          }
-        }
-
-        .category-item {
-          color: #0d9488;
-        }
-
-        .location-item {
-          color: #0d9488;
-        }
-
-        .amount-item {
-          font-size: 1.2rem;
-          color: #CFB53B;
-        }
-
-        .fa-solid.fa-location-dot {
-          color: #008000;
-        }
-
-        .fa-solid.fa-flag {
-          color: #0000FF;
-        }
-
-        .fa-regular.fa-calendar-check {
-          color: #FF0000;
-        }
-      }
-    }
-
-    .bottom-container {
-      font-size: small;
-      color: #9C9C9C;
-    }
-  }
-}
diff --git a/src/styles/home/plan.mobile.module.scss b/src/styles/home/plan.mobile.module.scss
deleted file mode 100644
index 4b2c22b..0000000
--- a/src/styles/home/plan.mobile.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.mobile-plan-view {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  #planCalendar {
-    .fc-view {
-      height: calc(100vh - 210px);
-
-      .fc-timegrid-body {
-        // 单元格高度
-        tr {
-          height: 3.5vh;
-        }
-      }
-    }
-  }
-
-  .plan-list {
-    .el-scrollbar {
-      .el-scrollbar__view {
-        display: flex;
-        flex-direction: column;
-        gap: 2vh;
-      }
-    }
-  }
-}
diff --git a/src/styles/home/plan.module.scss b/src/styles/home/plan.module.scss
deleted file mode 100644
index d1603cc..0000000
--- a/src/styles/home/plan.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.plan-view {
-  .plan-list {
-    height: calc(100vh - 120px);
-
-    .el-scrollbar {
-      .el-scrollbar__view {
-        display: flex;
-        flex-direction: column;
-        gap: 2vh;
-      }
-    }
-  }
-}
diff --git a/src/styles/home/travel.mobile.module.scss b/src/styles/home/travel.mobile.module.scss
deleted file mode 100644
index b5702e0..0000000
--- a/src/styles/home/travel.mobile.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.mobile-travel-view {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .travel-list {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    //align-items: center;
-    gap: 1vh;
-
-    .list {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-  }
-}
diff --git a/src/styles/home/travel.module.scss b/src/styles/home/travel.module.scss
deleted file mode 100644
index 75ef085..0000000
--- a/src/styles/home/travel.module.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.travel-view {
-  .travel-spot-list {
-    background-color: #F5F5F5;
-    flex-grow: 1;
-
-    overflow: auto;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    //align-items: center;
-    gap: 1vh;
-
-    padding: 10px;
-
-    .list {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      column-gap: 4vw;
-      row-gap: 2vh;
-    }
-
-    @media (max-width: 1280px) {
-      .list {
-        grid-template-columns: repeat(1, 1fr);
-      }
-    }
-
-    .el-pagination {
-      align-self: center;
-    }
-  }
-}
diff --git a/src/styles/index.module.scss b/src/styles/index.module.scss
index 545e50a..88faf77 100644
--- a/src/styles/index.module.scss
+++ b/src/styles/index.module.scss
@@ -1 +1 @@
-body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: CustomFont, sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  height: 100%;
}

html {
  font-size: 16px;
}

span, input {
  font-family: 'CustomFont', serif;
}

// 明亮主题变量
:root {
  // 基础颜色
  --color-bg: #F5F5F5;
  --color-card-bg: #FFFFFF;
  --color-record-card-bg: #F5F5DC;
  --color-border-bg: #FFFFFF;
  --color-text: #000000;
}

// 暗黑主题变量
.dark {
  --color-bg: #000000;
  --color-card-bg: #000000;
  --color-record-card-bg: #4C4D4F;
  --color-border-bg: #4C4D4F;
  --color-text: #FFFFFF;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
.dark::view-transition-old(root) {
  z-index: 9999;
}

@media (max-width: 1280px) {
  html {
    font-size: 13px;
  }
}

@font-face {
  font-family: 'CustomFont';
  src: url('@/assets/font/custom.woff2') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@import "//at.alicdn.com/t/c/font_4793264_6bh098pu52x.css";
\ No newline at end of file
+body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: 'CustomFont', serif
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  height: 100%;
}

html {
  font-size: 16px;
}

span, input {
  font-family: 'CustomFont', serif;
}

// 明亮主题变量
:root {
  // 基础颜色
  --color-bg: #F5F5F5;
  --color-card-bg: #FFFFFF;
  --color-record-card-bg: #F5F5DC;
  --color-border-bg: #FFFFFF;
  --color-text: #000000;
}

// 暗黑主题变量
.dark {
  --color-bg: #000000;
  --color-card-bg: #000000;
  --color-record-card-bg: #4C4D4F;
  --color-border-bg: #4C4D4F;
  --color-text: #FFFFFF;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
.dark::view-transition-old(root) {
  z-index: 9999;
}

@media (max-width: 1280px) {
  html {
    font-size: 13px;
  }
}

@font-face {
  font-family: 'CustomFont';
  src: url('@/assets/font/custom.woff2') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@import "//at.alicdn.com/t/c/font_4793264_6bh098pu52x.css";
\ No newline at end of file
diff --git a/src/styles/mobile.home.layout.module.scss b/src/styles/mobile.home.layout.module.scss
deleted file mode 100644
index a339e99..0000000
--- a/src/styles/mobile.home.layout.module.scss
+++ /dev/null
@@ -1,154 +0,0 @@
-@use "home.variable.module" as home;
-
-$titleBar-height: 40px;
-$tabBar-height: 70px;
-
-.layout-mobile-home {
-  height: 100%;
-
-  .common-mobile-view {
-    height: calc(100vh - $tabBar-height - $titleBar-height);
-    overflow: auto;
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    padding: 10px;
-  }
-
-  .common-query {
-    align-self: center;
-
-    display: flex;
-    gap: 10px;
-  }
-
-  .mobile-common-query {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    .query-item {
-      overflow-x: auto;
-      white-space: nowrap;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-
-  .common-statistics {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    justify-items: center;
-    gap: 10px;
-  }
-
-  .title-bar {
-    background-color: var(--el-color-primary);
-    height: $titleBar-height;
-    padding: 0 10px;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    justify-items: center;
-    align-items: center;
-
-    .left-container {
-      justify-self: flex-start;
-      color: #FFFFFF;
-
-      .logo-container {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-
-        .logo {
-          width: 20px;
-          height: 20px;
-        }
-      }
-    }
-
-    .title-container {
-      color: #FFFFFF;
-      font-weight: bold;
-      font-size: 1.2rem;
-    }
-
-    .right-container {
-      justify-self: flex-end;
-
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-  }
-
-  .tab-bar {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    height: $tabBar-height;
-    display: flex;
-    justify-content: space-around;
-    background-color: var(--color-card-bg);
-    color: var(--color-text);
-    box-shadow: 0 -1px 2px var(--color-border-bg);
-    padding: 10px 0;
-
-    .item {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      gap: 5px;
-
-      i {
-        font-size: 24px;
-      }
-    }
-
-    .router-link-active {
-      color: var(--el-color-primary);
-    }
-  }
-
-  .add-new {
-    position: absolute;
-    right: 2%;
-    bottom: 9%;
-
-    font-size: 1.8rem;
-  }
-
-  .vc-container {
-    width: 100%;
-
-    .vc-day {
-      min-height: 40px;
-    }
-
-    .vc-day-box-center-bottom {
-      height: 105%;
-      display: flex;
-    }
-  }
-
-  .common-section {
-    height: 100%;
-    overflow: auto;
-  }
-
-  .card-item {
-    background-color: var(--color-card-bg);
-    border: 1px solid var(--color-border-bg);
-    border-radius: 10px;
-    // box-shadow: 3px 3px 3px #CFCFCF;
-  }
-
-  .record-card-item {
-    background-color: var(--color-record-card-bg);
-    border: 1px solid var(--color-record-card-bg);
-    border-radius: 10px;
-    // box-shadow: 3px 3px 3px #CFCFCF;
-  }
-}