feat:更新主页面

This commit is contained in:
2025-11-01 10:24:50 +08:00
parent cddc4f598c
commit e5969003a0
4 changed files with 64 additions and 95 deletions

View File

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

BIN
src/assets/mobile.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

BIN
src/assets/pc.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

View File

@@ -32,7 +32,7 @@ html, body {
#app { #app {
height: 100%; height: 100%;
background-color: lightgray; background-color: #C7C2C9;
} }
html { 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;
}
}