Nuxt/examples/nuxt-prefetch/layouts/default.vue

58 lines
1.1 KiB
Vue
Raw Normal View History

<template>
<div>
<div v-if="$nuxt.isOffline" class="offline">
You are offline
</div>
<div class="container">
<h1>{{ $route.name }}</h1>
<Nuxt />
</div>
</div>
</template>
<style>
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
padding: 10px 20px;
padding-bottom: 40px;
}
.offline {
background: #3B8070;
color: white;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
}
a {
display: block;
padding: 10px 10px 10px 0px;
margin: 20px 0;
font-size: 20px;
border-bottom: 2px #ddd solid;
color: #3B8070;
text-decoration: none;
transition: border-bottom-color 0.3s linear;
}
a:hover,
a.nuxt-link-exact-active {
background-color: rgb(245, 245, 245);
}
a.nuxt-link-prefetched:after {
content: '';
display: inline-block;
background: url('../assets/check.svg') no-repeat;
background-size: 14px;
width: 14px;
height: 14px;
position: relative;
right: -3px;
top: 1px;
}
</style>