58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<template>
|
|
<UPopover
|
|
:mode="isMobile ? 'click' : 'hover'"
|
|
:ui="{ content: '--reka-popper-transform-origin: 50% -20px;' }"
|
|
>
|
|
<UButton
|
|
icon="i-mdi-human-handsdown"
|
|
label="фотомодель"
|
|
class="model-btn"
|
|
/>
|
|
|
|
<template #content>
|
|
<div class="model-info">
|
|
<div
|
|
v-for="parameter in photoModel"
|
|
:key="parameter?.split(': ')[0]"
|
|
>
|
|
{{ parameter?.split(': ')[0] }} <strong>{{ parameter?.split(': ')[1] }}</strong>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UPopover>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useMediaQuery } from '@vueuse/core'
|
|
|
|
const { photoModel } = useProduct()
|
|
const isMobile = useMediaQuery('(max-width: 1280px)')
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.model-btn {
|
|
display: inline-flex !important;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.model-info {
|
|
width: 140px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
padding: 15px;
|
|
font-size: 14px;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
|
|
& > * {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.model-info strong {
|
|
font-weight: 600;
|
|
}
|
|
</style>
|