feat:增加食光集

src/App.vue

@@ -5,7 +5,7 @@
     </div>
 
     <div class="app-center">
-      <el-card class="app-card" style="background-color: #0555a8;"
+      <el-card class="app-card" style="background-color: #11616B;"
                @click="blogClick">
         <i class="fa-solid fa-book-open"></i>
         <div>
@@ -13,7 +13,15 @@
         </div>
       </el-card>
 
-      <el-card class="app-card" style="background-color: darkcyan;"
+      <el-card class="app-card" style="background-color: #08979D;"
+               @click="blogAdminClick">
+        <i class="fa-solid fa-gear"></i>
+        <div>
+          <span>博客Admin</span>
+        </div>
+      </el-card>
+
+      <el-card class="app-card" style="background-color: #c93c05;"
                @click="sweetHutClick">
         <i class="fa-solid fa-house"></i>
         <div>
@@ -21,15 +29,15 @@
         </div>
       </el-card>
 
-      <el-card class="app-card" style="background-color: blueviolet;"
-               @click="blogAdminClick">
-        <i class="fa-solid fa-gear"></i>
+      <el-card class="app-card" style="background-color: #0ba140;"
+               @click="foodHubClick">
+        <i class="fa-solid fa-bowl-food"></i>
         <div>
-          <span>博客管理系统</span>
+          <span>食光集</span>
         </div>
       </el-card>
 
-      <el-card class="app-card" style="background-color: sandybrown;"
+      <el-card class="app-card" style="background-color: #926851;"
                @click="resumeClick">
         <i class="fa-solid fa-newspaper"></i>
         <div>
@@ -67,6 +75,15 @@ const sweetHutClick = () => {
   window.open(`${window.location.origin}/sweet-hut/`, '_blank');
 }
 
+const foodHubClick = () => {
+  if (!isMobile()) {
+    ElMessage.info('暂不支持PC端访问')
+    return
+  }
+
+  window.open(`${window.location.origin}/food-hub/`, '_blank');
+}
+
 const blogAdminClick = () => {
   if (isMobile()) {
     ElMessage.info('暂不支持移动端访问')
@@ -104,7 +121,7 @@ const resumeClick = () => {
     margin-top: 100px;
 
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 25px;
 
     .app-card {
@@ -113,8 +130,8 @@ const resumeClick = () => {
       font-size: 1.3rem;
 
       .el-card__body {
-        display: flex;
-        justify-content: center;
+        display: grid;
+        grid-template-columns: 25px 1fr;
         align-items: center;
         gap: 10px;
       }
@@ -125,13 +142,19 @@ const resumeClick = () => {
     }
   }
 
+  @media (max-width: 768px) {
+    .app-center {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
   .footer-content {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
 
-    color: #6B7280;
+    color: #2B2B2C;
     padding: 10px;
     text-align: center;
     box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);

src/style.css

@@ -2,7 +2,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: '华文楷体', 'Times New Roman', sans-serif;
 }
 
 *,
@@ -32,6 +32,7 @@ html, body {
 
 #app {
   height: 100%;
+  background-color: lightgray;
 }
 
 html {