136 lines
2.5 KiB
Vue
136 lines
2.5 KiB
Vue
<template>
|
|
<div class="nginx-proxy">
|
|
<div class="title">
|
|
<h3>Cxx0822</h3>
|
|
</div>
|
|
|
|
<div class="app-center">
|
|
<el-card class="app-card" style="background-color: #0555a8;"
|
|
@click="blogClick">
|
|
<i class="fa-solid fa-book-open"></i>
|
|
<div>
|
|
<span>博客网站</span>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="app-card" style="background-color: darkcyan;"
|
|
@click="sweetHutClick">
|
|
<i class="fa-solid fa-house"></i>
|
|
<div>
|
|
<span>Sweet Hut</span>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="app-card" style="background-color: blueviolet;"
|
|
@click="adminClick">
|
|
<i class="fa-solid fa-gear"></i>
|
|
<div>
|
|
<span>管理系统</span>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="app-card" style="background-color: sandybrown;"
|
|
@click="resumeClick">
|
|
<i class="fa-solid fa-newspaper"></i>
|
|
<div>
|
|
<span>个人简历</span>
|
|
</div>
|
|
</el-card>
|
|
|
|
</div>
|
|
|
|
<div class="footer-content">
|
|
<p>© Cxx0822 | V1.0.0</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { isMobile } from "./utils"
|
|
import { ElMessage } from "element-plus"
|
|
|
|
const blogClick = () => {
|
|
window.open(`${window.location.origin}/blog/`, '_blank');
|
|
}
|
|
|
|
const sweetHutClick = () => {
|
|
if (!isMobile()) {
|
|
ElMessage.info('暂不支持PC端访问')
|
|
return
|
|
}
|
|
|
|
// window.open('edge-demo', '_blank');
|
|
}
|
|
|
|
const adminClick = () => {
|
|
if (isMobile()) {
|
|
ElMessage.info('暂不支持移动端访问')
|
|
return
|
|
}
|
|
|
|
// window.open('edge-readme', '_blank');
|
|
}
|
|
|
|
const resumeClick = () => {
|
|
ElMessage.info('敬请期待')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nginx-proxy {
|
|
height: 100%;
|
|
padding: 10px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5px;
|
|
|
|
.title {
|
|
text-align: center;
|
|
|
|
h3 {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.app-center {
|
|
margin-top: 100px;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 25px;
|
|
|
|
.app-card {
|
|
max-width: 250px;
|
|
color: white;
|
|
font-size: 1.3rem;
|
|
|
|
.el-card__body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
|
|
.app-card:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.footer-content {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
color: #6B7280;
|
|
padding: 10px;
|
|
text-align: center;
|
|
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
</style>
|