Homepage-imsyy/src/App.vue

202 lines
4.9 KiB
Vue
Raw Normal View History

2023-01-15 05:22:30 +00:00
<template>
<!-- 加载 -->
<Loading />
<!-- 壁纸 -->
<Background @loadComplete="loadComplete" />
<!-- 主界面 -->
<Transition name="fade" mode="out-in">
<main id="main" v-if="store.imgLoadStatus">
2023-01-15 05:22:30 +00:00
<div class="container" v-show="!store.backgroundShow">
<section class="all" v-show="!store.setOpenState">
2023-01-15 05:22:30 +00:00
<MainLeft />
<MainRight v-show="!store.boxOpenState" />
<Box v-show="store.boxOpenState" />
</section>
<section
class="more"
v-show="store.setOpenState"
@click="store.setOpenState = false"
>
<MoreSet />
</section>
</div>
<!-- 移动端菜单按钮 -->
<Icon
class="menu"
size="24"
@click="store.mobileOpenState = !store.mobileOpenState"
>
<component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
</Icon>
<!-- 页脚 -->
<Transition name="fade" mode="out-in">
<Footer v-show="!store.backgroundShow && !store.setOpenState" />
</Transition>
2023-01-15 05:22:30 +00:00
</main>
</Transition>
2023-01-15 05:22:30 +00:00
</template>
<script setup>
import { helloInit, checkDays } from "@/utils/getTime.js";
import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
2023-01-15 05:22:30 +00:00
import { mainStore } from "@/store";
import { Icon } from "@vicons/utils";
import Loading from "@/components/Loading.vue";
2023-01-15 05:22:30 +00:00
import MainLeft from "@/views/Main/Left.vue";
import MainRight from "@/views/Main/Right.vue";
import Background from "@/components/Background.vue";
import Footer from "@/components/Footer.vue";
2023-01-15 05:22:30 +00:00
import Box from "@/views/Box/index.vue";
import MoreSet from "@/views/MoreSet/index.vue";
import cursorInit from "@/utils/cursor.js";
import config from "@/../package.json";
const store = mainStore();
// 页面宽度
const getWidth = () => {
store.setInnerWidth(window.innerWidth);
};
// 加载完成事件
const loadComplete = () => {
nextTick(() => {
// 欢迎提示
helloInit();
// 默哀模式
checkDays();
2023-01-15 05:22:30 +00:00
});
};
// 监听宽度变化
watch(
() => store.innerWidth,
(value) => {
if (value < 990) {
store.boxOpenState = false;
}
}
);
onMounted(() => {
// 自定义鼠标
cursorInit();
2023-01-15 05:22:30 +00:00
// 屏蔽右键
document.oncontextmenu = () => {
ElMessage({
message: "为了浏览体验,本站禁用右键",
grouping: true,
duration: 2000,
});
return false;
};
// 鼠标中键事件
window.addEventListener("mousedown", (event) => {
if (event.button == 1) {
store.backgroundShow = !store.backgroundShow;
2023-07-03 09:51:58 +00:00
ElMessage({
message: `${store.backgroundShow ? "开启" : "退出"}壁纸展示状态`,
grouping: true,
});
2023-01-15 05:22:30 +00:00
}
});
// 监听当前页面宽度
getWidth();
window.addEventListener("resize", getWidth);
// 控制台输出
2023-07-03 09:51:58 +00:00
const styleTitle1 =
"font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
const styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
const styleContent = "color: rgb(30,152,255);";
const title1 = "無名の主页";
const title2 = `
2023-01-15 05:22:30 +00:00
_____ __ __ _______ ____ __
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
2023-07-03 09:51:58 +00:00
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
| | | |\\/| |\\___ \\ \\ / \\ /
_| |_| | | |____) | | | | |
2023-01-15 05:22:30 +00:00
|_____|_| |_|_____/ |_| |_|`;
2023-07-03 09:51:58 +00:00
const content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
2023-01-15 05:22:30 +00:00
console.info(
`%c${title1} %c${title2} %c${content}`,
styleTitle1,
styleTitle2,
styleContent
);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", getWidth);
});
</script>
<style lang="scss" scoped>
#main {
2023-08-17 03:54:26 +00:00
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1.2);
transition: transform 0.3s;
animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
forwards;
animation-delay: 0.5s;
2023-01-15 05:22:30 +00:00
.container {
width: 100%;
height: 100vh;
margin: 0 auto;
.all {
2023-01-15 05:22:30 +00:00
width: 100%;
height: 100%;
padding: 0 0.75rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.more {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00000080;
backdrop-filter: blur(20px);
z-index: 2;
animation: fade 0.5s;
}
@media (max-width: 1200px) {
padding: 0 2vw;
2023-01-15 05:22:30 +00:00
}
}
.menu {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 84%;
left: calc(50% - 28px);
width: 56px;
height: 34px;
background: rgb(0 0 0 / 20%);
backdrop-filter: blur(10px);
border-radius: 6px;
transition: transform 0.3s;
animation: fade 0.5s;
2023-01-15 05:22:30 +00:00
&:active {
transform: scale(0.95);
}
.i-icon {
transform: translateY(2px);
}
@media (min-width: 720px) {
display: none;
}
}
}
</style>