Add Footer component

This commit is contained in:
2020-12-04 23:06:15 +01:00
parent d51e8d3f0d
commit f39a9a44a7
2 changed files with 42 additions and 1 deletions

View File

@@ -4,15 +4,18 @@
<main> <main>
<router-view /> <router-view />
</main> </main>
<Footer />
</div> </div>
</template> </template>
<script> <script>
import Footer from "@/components/Footer";
import Header from "@/components/Header"; import Header from "@/components/Header";
export default { export default {
name: "App", name: "App",
components: { components: {
Footer,
Header Header
} }
}; };
@@ -20,12 +23,21 @@ export default {
<style lang="less"> <style lang="less">
#app { #app {
font-family: Montserrat, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color: @text-color; color: @text-color;
} }
a {
text-decoration: none;
cursor: pointer;
&:visited {
color: inherit;
}
}
main { main {
padding: 2rem 1rem 1rem 1rem; padding: 2rem 1rem 1rem 1rem;
background-color: @secondary-color; background-color: @secondary-color;

29
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<footer>
<p>
©2020 Made with <span style="color: red;">&#9829;</span> by
<a href="https://wazo-lab.io" target="_blank">Wazo Lab</a>
</p>
</footer>
</template>
<script>
export default {};
</script>
<style lang="less">
footer {
background-color: #111111;
color: @secondary-color;
text-align: center;
padding: 2rem;
p {
margin: 0;
a {
color: rgba(255, 152, 0, 1);
}
}
}
</style>