86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<template>
|
|
<div class="animate">
|
|
<Background />
|
|
<main>
|
|
<div class="container">
|
|
<MainLeft />
|
|
<MainRight v-show="!store.boxOpenState" />
|
|
<Box v-show="store.boxOpenState" />
|
|
<!-- {{ store.getInnerWidth }} -->
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, onBeforeUnmount } from "vue";
|
|
import MainLeft from "@/views/Main/Left.vue";
|
|
import MainRight from "@/views/Main/Right.vue";
|
|
import Background from "@/components/Background/index.vue";
|
|
import Footer from "@/components/Footer/index.vue";
|
|
import Box from "@/views/Box/index.vue";
|
|
import cursorInit from "@/utils/cursor.js";
|
|
import { mainStore } from "@/store";
|
|
const store = mainStore();
|
|
|
|
// 页面宽度
|
|
const getWidth = () => {
|
|
store.setInnerWidth(window.innerWidth);
|
|
};
|
|
|
|
onMounted(() => {
|
|
// 自定义鼠标
|
|
cursorInit();
|
|
// 加载完成事件
|
|
window.addEventListener("load", () => {
|
|
console.log("加载完成");
|
|
console.clear();
|
|
// 去除加载标记
|
|
document.getElementsByTagName("body")[0].className = "";
|
|
// 给加载动画添加结束标记
|
|
let loadingBox = document.getElementById("loading-box");
|
|
loadingBox.classList.add("loaded");
|
|
});
|
|
|
|
// 监听当前页面宽度
|
|
getWidth();
|
|
window.addEventListener("resize", getWidth());
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("resize", getWidth());
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
main {
|
|
.container {
|
|
margin: 0 auto;
|
|
padding: 0 0.75rem;
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
// 加载动画层
|
|
.animate {
|
|
transform: scale(1);
|
|
transition: all ease 1.25s;
|
|
opacity: 1;
|
|
filter: blur(0);
|
|
}
|
|
|
|
.loading {
|
|
.animate {
|
|
transform: scale(1.2);
|
|
transition: all ease 1.25s;
|
|
opacity: 0;
|
|
filter: blur(10px);
|
|
}
|
|
}
|
|
</style> |