<div id="app">
        <header>
            <div class="container">
                <div class="top-header">
                    <div class="top-header__phone">пн-сб с 9ч до 19ч</div>
                    <div class="top-header__email">baffeli@bk.ru</div>
                </div>
                <div class="bottom-header">
                    <div class="bottom-header__logo">
                        Logo
                    </div>
                    <div class="bottom-header__menu">
                        <ul>
                            <li>
                                <a href="#">Прайс</a>
                            </li>
                            <li>
                                <a href="#">Цвета реек</a>
                            </li>
                            <li>
                                <a href="#">Выполненные проекты</a>
                            </li>
                            <li>
                                <a href="#">Доставка и монтаж</a>
                            </li>
                            <li>
                                <a href="#">Контакты</a>
                            </li>
                        </ul>
                    </div>
                    <div class="bottom-header__phone">
                        8 800 201 44 58
                    </div>
                    <div class="bottom-header__instagram">
                        <img src="/img/instagram.svg" alt="">
                    </div>
                    <div class="bottom-header__call">
                        <button class="button" @click="showPopup('Оч Хотца Оставить заявку!')">Оставить заявку</button>
                        <button class="button" @click="showPopup('Оч Хотца Заказать звонок!')">Заказать звонок</button>
                    </div>
                </div>
            </div>
        </header>
        <footer>
            <modal title="Order" v-show="showModal" @close="closePopup">
                <div class="content">
                   {{txt}}
                </div>
            </modal>
        </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    height: 200vh;
}

.container {
    max-width: 1170px;
    margin: 0 auto;
}
.modal {
    background: #fff;
    position: absolute;
    width: 400px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.modal-background {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    z-index: 9999;
}
.top-header {
    display: flex;
    justify-content: flex-end;
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
}

.top-header__email {
}
.top-header__email {

}
.top-header__phone {
    margin-right: 40px;
    position: relative;
}
.top-header__phone::before {
    content: '';
    background: url(/img/call.svg);
    width: 24px;
    height: 24px;
    position: absolute;
    left: -31px;
    margin-right: 5px;
}
.bottom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}
.bottom-header__logo {
}
.bottom-header__menu ul li {
    display: inline-block;
    list-style: none;
    margin-right: 10px;
}
.bottom-header__menu ul li a {
    color: #000;
    text-decoration: none;
}
.bottom-header__phone {
}
.bottom-header__instagram {
    width: 32px;
}
.bottom-header__instagram img {
    width: 100%;
}
.bottom-header__call {
}
.button {
    border: 1px solid #000;
    padding: 10px 20px;
    background: none;
    cursor: pointer;
}

Vue.component('modal', {
 
    template: `
    <div class="modal-background" @click.self="$emit('close')">
        <div class="modal">
            <div class="modal-content">
                <div class="box">
                        <slot></slot>
                </div>
            </div>
            <button style='margin-left:5px;' class="modal-close" @click="$emit('close')">Закрыть</button>
        </div>
    </div>
    `
});

let app = new Vue({
    el: '#app',
    data() {
        return {
          showModal: false,
          txt:'ничего не хотца...'
        }
    },
    methods: {
        showPopup(text) {
             this.txt = text;
            this.showModal = true
        },
        closePopup() {
            this.showModal = false
        }
    }
});