aloky

<UiConfirmButton
  color="success"
  :loading="loading"
  block
  message="После публикации билеты станут доступны для продажи и изменить шаблон будет нельзя."
  label="Опубликовать"
  @confirm="fetch"
/>

<script setup lang="ts">
import type { ButtonProps } from '@nuxt/ui';

const emit = defineEmits<{
  (e: 'confirm'): void
}>();

defineOptions({
  inheritAttrs: false,
});

interface Props extends ButtonProps {
  message?: string
  confirmLabel?: string
  confirmColor?: ButtonProps['color']
}

const props = defineProps<Props>();

const { message, confirmLabel, confirmColor, ...buttonProps } = props;

const open = ref(false);

const confirm = () => {
  emit('confirm');
  open.value = false;
};
</script>

<template>
  <UModal
    v-model:open="open"
    :title="$t('confirm.label')"
  >
    <UButton v-bind="buttonProps">
      <template v-if="$slots">
        <slot />
      </template>
    </UButton>
    <template #body>
      <UAlert
        variant="soft"
        icon="i-tabler-alert-triangle"
        :title="message || $t('confirm.message')"
        color="error"
      />
    </template>
    <template #footer>
      <div class="flex gap-x-2 w-full justify-end pb-safe">
        <UButton
          :label="$t('button.cancel')"
          color="neutral"
          variant="outline"
          @click="open = false"
        />
        <UButton
          :label="confirmLabel || $t('button.confirm')"
          :color="confirmColor || 'success'"
          @click="confirm"
        />
      </div>
    </template>
  </UModal>
</template>

<style scoped lang="scss">

</style>

.header {
  width: 900px;
  height: 200px;
  background: #ccc;
  margin: 0 auto;
}
.content {
  display: flex;
  position: relative;
  margin-top: 30px;
}
.content > p {
  width: 600px;
  margin-left: 260px;
}
.banner {
  background: red;
  width: 100px;
  height: 100px;
  position: absolute;
  right: 270px;
}

var name = 'Peter',
    age = 20,
    message = `My name is ${name}. I am ${age} years.`;

.sale_opt {
  height: 100%; // вы это не задали просто)
  display: flex;
  justify-content: center;
}