Merge branch '24-create-the-header' into 'master'

Resolve "Create the Header"

Closes #24

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!13
This commit is contained in:
Tim Zieger 2020-04-19 16:59:39 +00:00
commit 56bac021e6
4 changed files with 84 additions and 6 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div id="app"> <div id="app">
<Header />
<router-view /> <router-view />
<Footer /> <Footer />
@ -9,20 +9,23 @@
<script> <script>
import Footer from './components/layout/Footer' import Footer from './components/layout/Footer';
import Header from './components/layout/Header';
export default { export default {
name:"app", name:"app",
components: { components: {
Footer Footer,
Header
} }
} }
</script> </script>
<style>
<style scoped>
#app { #app {
font-family: Avenir, Helvetica, Arial, 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;
text-align: center;
color: #2c3e50; color: #2c3e50;
} }

View File

@ -0,0 +1,57 @@
<template>
<div class="header">
<div>
<img alt="Vue logo" src="../../assets/logo.png">
</div>
<div>
<u><router-link to="/login">Login</router-link></u>
</div>
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
.header {
display: flex;
justify-content: space-between;
background: #333;
color: #fff;
padding: 10px;
}
.header a {
float: left;
color: #fff;
padding: 10px;
text-decoration: none;
}
.header img {
float: left;
width: 30%;
height: auto;
padding: 10px;
}
.header p {
margin-left: 50%;
}
</style>

View File

@ -3,3 +3,17 @@
<h1>This is an about page</h1> <h1>This is an about page</h1>
</div> </div>
</template> </template>
<script>
// @ is an alias to /src
export default {
name: "About",
components: {
}
};
</script>
<style scoped>
</style>

View File

@ -16,3 +16,7 @@ export default {
} }
}; };
</script> </script>
<style scoped>
</style>