simple321vip
154 lines
3.3 KiB
Vue
154 lines
3.3 KiB
Vue
<template>
|
|
<div class="homeWrap">
|
|
<el-container class="main_container">
|
|
<el-aside width="180px">
|
|
<SideBar></SideBar>
|
|
</el-aside>
|
|
<el-container style="margin-left: 180px;">
|
|
<el-header>
|
|
<NavBar></NavBar>
|
|
</el-header>
|
|
<el-main>
|
|
<MainApp></MainApp>
|
|
</el-main>
|
|
<el-footer>
|
|
<div class="footer-left">
|
|
<span>{{ SITE_NAME }} {{ COPYRIGHT_TEXT }}</span>
|
|
<span class="separator">|</span>
|
|
<span class="icp-link" @click="openSiteQuery">{{ ICP_NUMBER }}</span>
|
|
</div>
|
|
<div class="footer-right">
|
|
<el-avatar :size="24" class="github-icon" @click="openGithub"
|
|
src="https://github.githubassets.com/favicons/favicon.svg" />
|
|
</div>
|
|
</el-footer>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import MainApp from '../layout/MainApp.vue'
|
|
import NavBar from "../layout/NavBar.vue"
|
|
import SideBar from "../layout/SideBar.vue"
|
|
import { settingsStore } from "@/store/modules/settings"
|
|
import { SITE_NAME, COPYRIGHT_TEXT, ICP_NUMBER, ICP_QUERY_URL } from "@/const/site"
|
|
|
|
// -- IMPORT --
|
|
const useSettingsStore = settingsStore()
|
|
|
|
// -- REACTIVE OBJECT --
|
|
|
|
// -- REF OBJECT --
|
|
|
|
// -- EVENT DEFINITION
|
|
const iniPage = () => {
|
|
const screenWidth = document.body.clientWidth
|
|
if (screenWidth < 1000) {
|
|
useSettingsStore.settings.isMobile = true
|
|
// isSider.value = false
|
|
// isCollaps.value = true
|
|
} else if (screenWidth >= 1000 && screenWidth < 1200) {
|
|
useSettingsStore.settings.isMobile = false
|
|
// isSider.value = false
|
|
// isCollaps.value = true
|
|
} else {
|
|
useSettingsStore.settings.isMobile = false
|
|
// isSider.value = true
|
|
// isCollaps.value = false
|
|
}
|
|
}
|
|
|
|
const openGithub = () => {
|
|
let href = 'https://github.com/simple321vip'
|
|
window.open(href, '_blank')
|
|
}
|
|
|
|
const openSiteQuery = () => {
|
|
window.open(ICP_QUERY_URL, '_blank')
|
|
}
|
|
|
|
/**
|
|
* AUTO INVOKE FUNCTION
|
|
*/
|
|
iniPage()
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-header {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.5px;
|
|
border-bottom-color: rgba(151, 151, 151, 0.3);
|
|
}
|
|
|
|
.el-main {
|
|
/* 让 main 区占满 header 与 footer 之间的剩余空间，
|
|
内容多了 main 内部滚动，footer 永远钉在 layout 底部 */
|
|
padding: 16px;
|
|
flex: 1;
|
|
min-height: 0; /* flex item 默认 min-height: auto 会阻止收缩 */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.el-aside {
|
|
margin-left: -10px;
|
|
background: #191a23;
|
|
position: fixed;
|
|
}
|
|
|
|
.el-footer {
|
|
/* flex: 0 0 auto 让 footer 保持自身高度（不撑开、不收缩） */
|
|
flex: 0 0 auto;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 24px;
|
|
border-top: 1px solid rgba(151, 151, 151, 0.2);
|
|
font-size: 16px;
|
|
color: #666;
|
|
}
|
|
|
|
.footer-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.footer-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.separator {
|
|
color: #ccc;
|
|
}
|
|
|
|
.icp-link {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.icp-link:hover {
|
|
color: #409eff;
|
|
}
|
|
|
|
.github-icon {
|
|
/* 跟 footer 文字 baseline 对齐 */
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.main_container {
|
|
height: 100%;
|
|
}
|
|
|
|
.homeWrap {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|