Browse Source

layout

master 02-layout
Alexander Jäger 1 year ago
parent
commit
ab60b72a00
2 changed files with 33 additions and 18 deletions
  1. +2
    -2
      public/index.html
  2. +31
    -16
      src/App.vue

+ 2
- 2
public/index.html View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" style="width:100%; height:100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<body style="width:100%; height:100%; margin:0px">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>


+ 31
- 16
src/App.vue View File

@ -1,32 +1,47 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div id="app" class="main">
<div class="header">Header</div>
<div class="content">
<div class="nav"> Nav</div>
<div class="details">Details</div>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
#app {
.main {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
background-color: green;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#nav {
padding: 30px;
.header {
background-color: red;
flex: 0 0 5em;
}
a {
font-weight: bold;
color: #2c3e50;
.content {
background-color: orange;
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
.nav {
background-color: lightblue;
flex: 0 0 10em;
}
&.router-link-exact-active {
color: #42b983;
}
}
.details {
background-color: green;
flex: 1 1 auto;
margin: 1em;
}
</style>

Loading…
Cancel
Save