feat:更新主页面

src/App.vue

@@ -4,80 +4,57 @@
       <h3>Cxx0822</h3>
     </div>
 
-    <div class="app-center">
-      <el-card class="app-card" style="background-color: #11616B;"
-               @click="blogClick">
+    <el-dropdown split-button type="primary" class="app-center">
+      应用中心
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="blogClick">
             <i class="fa-solid fa-book-open"></i>
-        <div>
             <span>博客网站</span>
-        </div>
-      </el-card>
+          </el-dropdown-item>
 
-      <el-card class="app-card" style="background-color: #08979D;"
-               @click="blogAdminClick">
+          <el-dropdown-item @click="blogAdminClick">
             <i class="fa-solid fa-gear"></i>
-        <div>
             <span>博客Admin</span>
-        </div>
-      </el-card>
+          </el-dropdown-item>
 
-      <el-card class="app-card" style="background-color: #c93c05;"
-               @click="sweetHutClick">
+          <el-dropdown-item @click="sweetHutClick">
             <i class="fa-solid fa-house"></i>
-        <div>
             <span>Sweet Hut</span>
-        </div>
-      </el-card>
+          </el-dropdown-item>
 
-      <el-card class="app-card" style="background-color: #0ba140;"
-               @click="foodHubClick">
+          <el-dropdown-item @click="foodHubClick">
             <i class="fa-solid fa-bowl-food"></i>
-        <div>
             <span>食光集</span>
-        </div>
-      </el-card>
+          </el-dropdown-item>
 
-      <el-card class="app-card" style="background-color: #c10fc7;"
-               @click="giteaClick">
+          <el-dropdown-item @click="giteaClick">
             <i class="fa-brands fa-git-alt"></i>
-        <div>
             <span>Gitea</span>
-        </div>
-      </el-card>
+          </el-dropdown-item>
 
-      <el-card class="app-card" style="background-color: #c7930f;"
-               @click="calibreClick">
+          <el-dropdown-item @click="calibreClick">
             <i class="fa-solid fa-swatchbook"></i>
-        <div>
             <span>电子书库</span>
-        </div>
-      </el-card>
+          </el-dropdown-item>
 
-      <el-card class="app-card" style="background-color: #17599a;"
-               @click="readestClick">
+          <el-dropdown-item @click="readestClick">
             <i class="fa-solid fa-book-open-reader"></i>
-        <div>
             <span>电子书阅读</span>
-        </div>
-      </el-card>
+          </el-dropdown-item>
 
-      <el-card class="app-card" style="background-color: #ecba0d;"
-               @click="drawioClick">
+          <el-dropdown-item @click="drawioClick">
             <i class="fa-solid fa-diagram-project"></i>
-        <div>
             <span>流程图</span>
-        </div>
-      </el-card>
+          </el-dropdown-item>
 
-      <el-card class="app-card" style="background-color: #926851;"
-               @click="resumeClick">
+          <el-dropdown-item @click="resumeClick">
             <i class="fa-solid fa-newspaper"></i>
-        <div>
             <span>个人简历</span>
-        </div>
-      </el-card>
-
-    </div>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
 
     <div class="footer-content">
       <p>© Cxx0822 | V1.0.0
@@ -160,6 +137,7 @@ const refreshClick = () => {
 .nginx-proxy {
   height: 100%;
   padding: 10px;
+  position: relative;
 
   display: flex;
   flex-direction: column;
@@ -176,34 +154,9 @@ const refreshClick = () => {
   }
 
   .app-center {
-    margin-top: 100px;
-
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 25px;
-
-    .app-card {
-      max-width: 250px;
-      color: white;
-      font-size: 1.3rem;
-
-      .el-card__body {
-        display: grid;
-        grid-template-columns: 25px 1fr;
-        align-items: center;
-        gap: 10px;
-      }
-    }
-
-    .app-card:hover {
-      cursor: pointer;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .app-center {
-      grid-template-columns: repeat(2, 1fr);
-    }
+    position: absolute;
+    top: 2%;
+    right: 3%;
   }
 
   .footer-content {

src/style.css

@@ -32,7 +32,7 @@ html, body {
 
 #app {
   height: 100%;
-  background-color: lightgray;
+  background-color: #C7C2C9;
 }
 
 html {
@@ -45,3 +45,19 @@ html {
   }
 }
 
+#app {
+  background-image: url("assets/pc.jpeg");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 768px) {
+  #app {
+    background-image: url("assets/mobile.jpeg");
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+