summaryrefslogtreecommitdiff
path: root/day9/task5_vue/src/components/PopupMessage.vue
blob: 90e28da05957a229bb904e9c59b4b2ec12bc864d (plain)
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
<template>
    <div
            ref="container" class="popupContainer"
            v-bind:class="{
                'type-success': data.type === 'success',
                'type-failure': data.type === 'failure'
            }">
        {{ data.msg }}
    </div>
</template>

<script>
    export default {
        name: "PopupMessage",
        props: ['message', 'data'],
    }
</script>

<style scoped>
    .popupContainer {
        padding: 30px;

        font-size: 30px;
        text-align: center;

        position: fixed;
        bottom: 0;

        left: 0;
        right: 0;
    }

    .type-success {
        background-color: #00ff5e;
    }

    .type-failure {
        background-color: #ff002d;
    }
</style>