reset style and add some date

public/markdowns/Git.md

@@ -7,6 +7,7 @@ categories:
   - Git
 description: Git快速入门教程
 abbrlink: a97adaa0
+date: 2023-8-13
 ---
 
 # 1、Git概述

public/markdowns/Redis入门.md

@@ -7,6 +7,7 @@ categories:
   - Redis
 description: Redis的快速入门教程
 abbrlink: 6a343b7f
+date: 2023-8-13
 ---
 
 # Redis入门

public/markdowns/Redis基础篇.md

@@ -6,6 +6,7 @@ categories:
   - Redis
 description: Redis基础篇
 abbrlink: 4604f75b
+date: 2023-8-27
 ---
 # 初识Redis
 

public/markdowns/Redis实战篇.md

@@ -6,6 +6,7 @@ categories:
   - Redis
 description: Redis实战篇
 abbrlink: 4604f75b
+date: 2023-8-28
 ---
 
 # 短信登录

public/markdowns/SpringBoot2基础篇.md

@@ -6,6 +6,7 @@ categories:
   - SpringBoot
 description: SpringBoot2基础篇
 abbrlink: bd45f405
+date: 2023-9-07
 ---
 # 小技巧（隐藏指定文件/文件夹）
 

public/markdowns/SpringBoot2高级篇.md

@@ -6,6 +6,7 @@ categories:
   - SpringBoot
 description: SpringBoot2高级篇
 abbrlink: '28014337'
+date: 2023-9-10
 ---
 # 运维篇
 

public/markdowns/SpringBoot3.md

@@ -6,4 +6,5 @@ categories:
   - SpringBoot
 description: SpringBoot3
 abbrlink: 55656a4d
+date: 2023-09-04
 ---

public/markdowns/Vue.md

@@ -6,6 +6,7 @@ categories:
   - 前端
 description: Vue2
 abbrlink: 4d45ebbb
+date: 2023-09-19
 ---
 # Vue核心
 

public/markdowns/瑞吉外卖.md

@@ -8,6 +8,7 @@ categories:
   - 瑞吉外卖
 description: SpringBoot+vue实现的瑞吉外卖项目
 abbrlink: a1e1aa91
+date: 2023-08-13
 ---
 
 

public/markdowns/瑞吉外卖优化.md

@@ -8,6 +8,7 @@ categories:
   - 瑞吉外卖优化
 description: 瑞吉外卖的优化
 abbrlink: ea7374cf
+date: 2023-08-13
 ---
 
 # 缓存优化

src/components/Main.vue

@@ -1,21 +1,11 @@
 <template>
-  <div id="main">
-    <div class="file-list-container">
-      <h2>Markdown 文件列表</h2>
-      <ul>
-        <li
-          v-for="file in markdownFiles"
-          :key="file.name"
-          @click="loadMarkdownFile(file.name)"
-          class="file-item"
-        >
-          {{ file.title }} - {{ file.daysAgo }} 天前
-        </li>
-      </ul>
-    </div>
-    <div class="content-container">
-      <div v-html="markdownContent" class="markdown-content"></div>
-    </div>
+  <div>
+    <ul>
+      <li v-for="file in markdownFiles" :key="file.name">
+        {{ file.title }}
+        {{ file.daysAgo }}
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -71,7 +61,6 @@ export default {
           `${baseUrl}markdowns/${encodeURIComponent(fileName)}`
         );
         const data = await response.text();
-
         // 使用正则表达式去除 Markdown 开头的元数据部分
         const contentWithoutMetadata = data
           .replace(/---[\s\S]*?---/, "")
@@ -81,27 +70,6 @@ export default {
 
         // 使用 nextTick 确保在 DOM 更新后执行
         await nextTick();
-
-        // 获取类名为 markdown-content 的元素
-        const imgsContainer = document.querySelector(".markdown-content");
-
-        // 获取该元素下的所有 img 标签，包括嵌套在 p 标签中的 img
-        const imgList = imgsContainer.querySelectorAll("img");
-
-        // 遍历每个 img 标签并设置其宽度
-        imgList.forEach((img) => {
-          img.onload = () => {
-            // 检查 img 的宽度是否大于其父元素的宽度
-            if (img.offsetWidth > img.parentElement.offsetWidth) {
-              img.style.width = "100%"; // 如果大于，设置为100%
-            }
-          };
-
-          // 如果图片已经加载（例如缓存的情况），也要立即设置宽度
-          if (img.complete) {
-            img.onload(); // 手动触发 onload 事件
-          }
-        });
       } catch (error) {
         console.error("Error loading markdown file:", error);
       }
@@ -121,113 +89,4 @@ export default {
 </script>
 
 <style scoped>
-/* 背景样式 */
-body {
-  background-color: #f5f5dc; /* 米色背景 */
-  font-family: "SimSun", "KaiTi", serif; /* 古风字体 */
-}
-
-/* 全局容器 */
-#main {
-  display: flex;
-  flex-direction: row; /* PC端默认横向布局 */
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-  overflow: hidden;
-  justify-content: center; /* 中心对齐 */
-}
-
-/* 文件列表容器 */
-.file-list-container {
-  flex: 1;
-  margin-right: 20px;
-  text-align: center; /* 文字居中 */
-}
-
-/* 文件列表样式 */
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-.file-item {
-  cursor: pointer;
-  padding: 10px;
-  background-color: #e8e8e8; /* 灰色背景 */
-  margin-bottom: 10px;
-  border-radius: 8px;
-  transition: background-color 0.3s, transform 0.3s;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
-}
-
-.file-item:hover {
-  background-color: #d0d0d0; /* 鼠标悬停变色 */
-  transform: scale(1.02);
-}
-
-.file-item:active {
-  background-color: #b0b0b0;
-}
-
-/* Markdown 内容展示 */
-.content-container {
-  flex: 3;
-  padding: 20px;
-  background-color: #fff; /* 白色背景 */
-  border-radius: 10px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
-  overflow: hidden; /* 去除滚动条 */
-}
-
-/* Markdown 内容样式 */
-.markdown-content {
-  font-size: 16px;
-  line-height: 1.6;
-}
-
-/* 限制图片大小 */
-.markdown-content img {
-  max-width: 100%; /* 最大宽度为100% */
-  height: auto; /* 自动调整高度，保持比例 */
-  display: block; /* 确保图片是块级元素，以避免下方空隙 */
-}
-
-/* PC 端适配 */
-@media (min-width: 768px) {
-  .file-list-container {
-    width: 30%; /* 文件列表宽度 */
-  }
-
-  .content-container {
-    width: 70%; /* 内容区宽度 */
-  }
-}
-
-/* 移动端适配 */
-@media (max-width: 767px) {
-  #main {
-    flex-direction: column; /* 移动端使用纵向布局 */
-    padding: 10px;
-  }
-
-  .file-list-container {
-    width: 100%; /* 文件列表宽度 */
-    margin-bottom: 20px;
-  }
-
-  .content-container {
-    width: 100%; /* 内容区宽度 */
-    padding: 15px;
-  }
-
-  .file-item {
-    font-size: 18px; /* 增大文件项字体 */
-  }
-
-  .markdown-content {
-    font-size: 14px; /* 减小Markdown内容字体 */
-  }
-}
 </style>