<template>
  <NuxtLayout>
    <img v-h="773" v-w="1210" src="~/assets/images/desktop/postfach/frame.png" />

    <Hover v-h="56" v-w="109" v-x="1029" v-y="27" class="shadow">
      <img src="~/assets/images/desktop/postfach/filter-button.png" />
      <img src="~/assets/images/desktop/postfach/filter-button-hover.png" />
    </Hover>

    <button v-h="111" v-w="1066" v-x="72" v-y="190" @click="popup = true">
      <Spot />
    </button>
    <Popup v-model="popup">
      <div v-frame-h="700" v-frame-w="500" class="relative">
        <img src="~/assets/images/desktop/postfach/popups/angebote-frame.png" />
        <button v-h:700="48" v-w:500="48" v-x:500="448" v-y:700="8" @click="popup = false">
          <Spot />
        </button>
      </div>
    </Popup>
  </NuxtLayout>
</template>

<script lang="ts" setup>
const popup = ref(false)
</script>
