You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<template>
|
|
<div class="app">
|
|
<div class="background">
|
|
<img src="../assets/background.jpg" alt="">
|
|
</div>
|
|
<section class="layout" data-theme="dark">
|
|
<header>
|
|
<div class="bg-dark-opacity1 shadow">
|
|
<site-header class="container" />
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<BannerWrapperNetwork v-if="!$page.frontmatter?.disableAnimation" class="background opacity-25" />
|
|
<div v-if="$page.frontmatter?.sidebar" class="container">
|
|
<div class="row">
|
|
<div class="col-xl-4 p-4">
|
|
<div class="card toc">
|
|
<div class="card-header">
|
|
<router-link :to="`/${$page.path.split('/')[1]}/`"><b>/{{ $page.path.split('/')[1] }}/</b></router-link>
|
|
</div>
|
|
<div class="card-body">
|
|
<FolderList :path="`/${$page.path.split('/')[1]}/`" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Content class="col-xl-8 p-4" />
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="container">
|
|
<Content class="p-4" />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer py-3">
|
|
<site-footer class="container" />
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SiteHeader from "./SiteHeader";
|
|
import SiteFooter from "./SiteFooter";
|
|
import FolderList from "../components/FolderList";
|
|
|
|
import "bootstrap-icons/font/bootstrap-icons.scss";
|
|
import "./main.scss";
|
|
|
|
import "@vuepress/theme-default/styles/code.styl";
|
|
import BannerWrapperNetwork from "../components/BannerWrapperNetwork";
|
|
|
|
export default {
|
|
components: {BannerWrapperNetwork, SiteFooter, SiteHeader, FolderList },
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.layout {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
}
|
|
header {
|
|
position: fixed;
|
|
z-index: 10;
|
|
width: 100%;
|
|
font-size: 1.2rem;
|
|
}
|
|
main.content {
|
|
padding: 5rem 0 2rem 0;
|
|
.toc {
|
|
position: sticky;
|
|
top: 5rem;
|
|
}
|
|
.container {
|
|
position: relative;
|
|
}
|
|
}
|
|
.background {
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
</style>
|