81 lines
1.8 KiB
Vue
81 lines
1.8 KiB
Vue
<template>
|
||
<div class="info-button">
|
||
<UiButton class="info-button__button">
|
||
<slot>Начать бесплатно</slot>
|
||
</UiButton>
|
||
|
||
<Tooltip distance="8" placement="bottom-end">
|
||
<IMonoInfo class="info-button__info-trigger desktop-only" />
|
||
|
||
<template #popper>
|
||
Зарегистрируйтесь и получите <br>
|
||
7 дней бесплатной подписки для <br>
|
||
ознакомления с сервисом
|
||
</template>
|
||
</Tooltip>
|
||
|
||
<p class="info-button__hint mobile-only">
|
||
Зарегистрируйтесь и получите 14 дней бесплатной подписки для ознакомления с сервисом
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { Tooltip } from 'floating-vue'
|
||
|
||
// const infoTriggerEl = ref()
|
||
// const tooltipEl = ref()
|
||
// const tooltipArrowEl = ref()
|
||
//
|
||
// const { floatingStyles: tooltipStyles, middlewareData } = useFloating(
|
||
// infoTriggerEl,
|
||
// tooltipEl,
|
||
// {
|
||
// placement: 'bottom-end',
|
||
// middleware: [offset(8), arrow({ element: tooltipArrowEl })],
|
||
// },
|
||
// )
|
||
//
|
||
// const arrowStyles = computed(() => {
|
||
// if (!middlewareData.value.arrow) {
|
||
// return {
|
||
// position: 'absolute',
|
||
// }
|
||
// }
|
||
//
|
||
// return {
|
||
// position: 'absolute',
|
||
// left: `${middlewareData.value.arrow.x ?? 0}px`,
|
||
// top: `${middlewareData.value.arrow.y ?? 0}px`,
|
||
// }
|
||
// })
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.info-button {
|
||
@include desktop {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
&__button {
|
||
width: 100%;
|
||
}
|
||
|
||
&__info-trigger {
|
||
flex-shrink: 0;
|
||
font-size: 24px;
|
||
color: $color-gray-500;
|
||
}
|
||
|
||
&__hint {
|
||
@include font(11px, 500, 14px);
|
||
|
||
text-align: center;
|
||
margin-top: 8px;
|
||
color: $color-gray-600;
|
||
}
|
||
}
|
||
</style>
|