mirror of
https://github.com/jiangrui1994/CloudSaver.git
synced 2026-01-11 15:48:47 +08:00
94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<template>
|
|
<div v-loading="resourcStore.loading" class="home" element-loading-background="rgba(0,0,0,0.6)">
|
|
<el-container>
|
|
<el-aside width="200px"><aside-menu /></el-aside>
|
|
<el-container class="home-main">
|
|
<el-header :class="{ 'home-header': true, 'search-bar-active': !store.scrollTop }">
|
|
<search-bar />
|
|
</el-header>
|
|
<el-main class="home-main-main">
|
|
<router-view />
|
|
</el-main>
|
|
<!-- <el-aside class="home-aside"></el-aside> -->
|
|
</el-container>
|
|
</el-container>
|
|
<el-backtop :bottom="100">
|
|
<div
|
|
style="
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: var(--el-bg-color-overlay);
|
|
box-shadow: var(--el-box-shadow-lighter);
|
|
text-align: center;
|
|
line-height: 40px;
|
|
color: #1989fa;
|
|
"
|
|
>
|
|
UP
|
|
</div>
|
|
</el-backtop>
|
|
</div>
|
|
<!-- <login v-else /> -->
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useResourceStore } from "@/stores/resource";
|
|
import { useStore } from "@/stores/index";
|
|
import { useUserSettingStore } from "@/stores/userSetting";
|
|
import { onUnmounted } from "vue";
|
|
import AsideMenu from "@/components/AsideMenu.vue";
|
|
import SearchBar from "@/components/SearchBar.vue";
|
|
|
|
const resourcStore = useResourceStore();
|
|
const store = useStore();
|
|
const settingStore = useUserSettingStore();
|
|
settingStore.getSettings();
|
|
const handleScroll = () => {
|
|
const scrollTop = window.scrollY;
|
|
if (scrollTop > 50) {
|
|
store.scrollTop && store.setScrollTop(false);
|
|
} else {
|
|
!store.scrollTop && store.setScrollTop(true);
|
|
}
|
|
};
|
|
window.addEventListener("scroll", handleScroll);
|
|
onUnmounted(() => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.home {
|
|
// padding: 20px;
|
|
min-width: 1000px;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
.home-header {
|
|
height: auto;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
// padding: 0;
|
|
background-color: rgba(231, 235, 239, 0.7) !important;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border-radius: 0 0 5px 5px;
|
|
// background-color: var(--theme-other_background);
|
|
// box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3);
|
|
// border-radius: 20px;
|
|
}
|
|
.home-main {
|
|
width: 1000px;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
}
|
|
.home-main-main {
|
|
padding: 10px 15px;
|
|
}
|
|
.home-aside {
|
|
width: 300px;
|
|
}
|
|
</style>
|