@@ 1,29 1,49 @@
<template>
<div id="app">
- <div id="nav"><router-link to="/">Home</router-link></div>
+ <Header />
<router-view />
+ <Footer />
</div>
</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
+
+@Component({
+ components: {
+ Header,
+ Footer,
+ },
+})
+export default class App extends Vue {}
+</script>
+
<style lang="scss">
#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
+ font-family: Segoe UI, Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
-}
+ color: #fff;
+ white-space: pre-line;
-#nav {
- padding: 30px;
+ display: flex;
+ flex-direction: column;
- a {
- font-weight: bold;
- color: #2c3e50;
+ position: absolute;
+ inset: 0;
- &.router-link-exact-active {
- color: #42b983;
- }
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+ url("../src/assets/images/maps/de_inferno.jpg");
+
+ background-repeat: no-repeat;
+
+ background-size: cover;
+
+ a {
+ color: inherit;
+ text-decoration: none !important;
}
}
</style>
@@ 0,0 1,18 @@
<template>
<div class="footer">Footer</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {},
})
export default class Footer extends Vue {}
</script>
<style lang="scss" scoped>
.footer {
background-color: #000;
}
</style>
@@ 0,0 1,18 @@
<template>
<div class="header"><router-link to="/">Header</router-link></div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {},
})
export default class Header extends Vue {}
</script>
<style lang="scss" scoped>
.header {
background-color: #000;
}
</style>