57 lines
1.0 KiB
Vue
57 lines
1.0 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div id="nav">
|
|
<div class="nav-item toggle-button" @click="toggleFullScreen">Toggle Full Screen</div> |
|
|
<router-link to="/">Camera</router-link> |
|
|
<router-link to="/control">Control</router-link>
|
|
</div>
|
|
<router-view/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'App',
|
|
methods: {
|
|
toggleFullScreen() {
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
window.document.body.requestFullscreen();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
#nav {
|
|
padding: 30px;
|
|
|
|
div.nav-item {
|
|
display: inline;
|
|
text-decoration: underline;
|
|
color: #2c3e50;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a, div.nav-item {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
|
|
&.router-link-exact-active {
|
|
color: #42b983;
|
|
}
|
|
}
|
|
}
|
|
</style>
|