192 lines
2.9 KiB
Vue
192 lines
2.9 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: 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 {
|
|
border-left: 1px solid grey;
|
|
z-index: 0;
|
|
grid-area: haupt
|
|
}
|
|
|
|
.billi-icon-as-bg {
|
|
height: 600px;
|
|
position: absolute;
|
|
bottom: -50px;
|
|
left: -50px;
|
|
z-index: -100;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.billi-box {
|
|
margin-top: 1rem;
|
|
border-radius: 0.5rem;
|
|
padding-left: 0rem;
|
|
display: grid;
|
|
grid-template-columns: auto 60px;
|
|
grid-template-areas:
|
|
"header icon"
|
|
"billi-ct billi-ct"
|
|
;
|
|
}
|
|
|
|
.billi-box-header {
|
|
padding:0.5rem;
|
|
border-radius: 0.5rem 0 0 0;
|
|
grid-area: header;
|
|
}
|
|
|
|
.billi-box-icon {
|
|
padding: 0.5rem;
|
|
grid-area: icon;
|
|
border-radius: 0 0.5rem 0 0;
|
|
align-self: center;
|
|
justify-self: stretch;
|
|
}
|
|
|
|
.billi-box-icon svg {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
}
|
|
.billi-box-content {
|
|
padding: 1rem;
|
|
grid-area: billi-ct
|
|
}
|
|
.billi-box-content textarea {
|
|
width:100%;
|
|
|
|
}
|
|
|
|
.billi-row-50-50 {
|
|
display:grid;
|
|
grid-template-columns: 50% 50%;
|
|
}
|
|
|
|
.billi-label {
|
|
font-weight: bold;
|
|
}
|
|
.billi-value {
|
|
padding-top: 0.5rem;
|
|
justify-self: stretch;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.billi-value input,
|
|
.billi-value select{
|
|
width: 100%
|
|
}
|
|
|
|
|
|
</style>
|