Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <template>
<div class="dashboard mx-auto d-flex flex-column align-items-center mt-4">
<nuxt-child></nuxt-child>
</div>
</template>
<script>
import card from '../../../components/cards/card.vue';
export default {
auth: false,
layout: 'dashboard',
components: {card},
data() {
return {
cards: [
],
announcement: {
title: '',
text: ''
},
modal: null
}
},
methods: {
/**
* Adds a card to the cards list
* @see addCard
* @returns void
*/
addCard() {
let newCard = {
title: this.announcement.title,
text: this.announcement.text
}
this.cards.push(newCard);
this.resetFields();
this.modal.hide();
},
/**
* Resets announcement fields
* @see resetFields
* @returns void
*/
resetFields() {
this.announcement = {
title: '',
text: ''
}
}
},
async mounted() {
// let {Modal} = await import('bootstrap');
// let myModal = this.$refs.modal;
// this.modal = new Modal(myModal);
}
}
</script>
<style lang="scss" scoped>
//.dashboard {
// background-color: #a1a1a1;
//}
.dashboard {
width: 75%;
}
.btn-close {
opacity: 1;
width: 2.5rem;
height: 2.5rem;
background-size: 2.5rem 2.5rem;
}
@include media-breakpoint-down(lg) {
.dashboard {
width: 100%;
}
}
</style>
|