billibox-vue/src/App.vue

134 lines
2.1 KiB
Vue

<template>
<router-view></router-view>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import TheTwoColumnsLayout from '@/layouts/TheTwoColumnsLayout.vue';
@Options({
created() {
// this.$store.dispatch("autoSignIn");
console.log(this.$store)
},
components: {
TheTwoColumnsLayout
},
computed: {
token() {
return this.$store.getters.token;
}
},
async beforeCreate() {
console.log("beforeCreate", this.$store.getters.isInitialized);
if(!this.$store.getters.isInitialized) {
console.log("Not yet initialized")
await this.$store.dispatch("initialize", {seed: true});
}
},
})
export default class App extends Vue {}
</script>
<style>
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~@fortawesome/fontawesome-pro/css/all.min.css';
@import '~animate.css/animate.min.css';
.bg-vue {
background-color: rgb(52, 73, 94);
color: white
}
.bg-vue2 {
background-color: rgb(65, 184, 131);
color: white
}
.text-vue {
color: rgb(52, 73, 94);
}
.text-vue2 {
color: rgb(65, 184, 131);
}
.billi-primary {
background-color: #21ae0e;
}
.billi-secondary {
background-color: #b2b1b1;
}
.billi-primary-50 {
background-color: #21ae0e75;
}
.billi-secondary-50 {
background-color: #b2b1b175;
}
.billi-bg {
background-color: #2a67dc;
}
.billi-bg-50 {
background-color: #2a67dc75
}
.billi-bg-transparent {
background-color: white;
background-color: rgb(255 255 255 / 40%);
}
.billi-read-detail {
background-color: transparent;
margin-top: 1rem;
display: grid;
grid-template-columns: 33% 66%;
grid-template-areas:
"seite haupt"
;
}
.billi-read-detail aside {
margin-right: 1rem;
grid-area: seite
}
.billi-read-detail section {
padding-left: 1rem;
border-left: 1px solid grey;
z-index: 0;
grid-area: haupt
}
.billi-icon-as-bg {
height: 600px;
position: absolute;
bottom: -50px;
left: -50px;
}
.billi-icon-filter {
height: 40px;
width: 40px;
border-radius: 50%;
padding: 1em;
}
.billi-filter-grid {
display: grid;
margin-top: 0.5rem;
grid-template-columns: repeat(4, 1fr);
}
</style>