91 lines
3.2 KiB
Vue
91 lines
3.2 KiB
Vue
<script setup lang="ts">
|
||
import {useMouse, useWindowScroll} from "@vueuse/core"
|
||
|
||
const y = ref<number>()
|
||
const x = ref<number>()
|
||
|
||
const handleMouseMove = (event: MouseEvent) => {
|
||
x.value = event.clientX
|
||
y.value = event.clientY
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section
|
||
class="overflow-hidden"
|
||
@mousemove="handleMouseMove"
|
||
>
|
||
<div class="about__grid py-16">
|
||
<NuxtPicture
|
||
class="overflow-hidden rounded-r-xl"
|
||
style="grid-area: img-a;"
|
||
src="/images/sweep.jpg"
|
||
></NuxtPicture>
|
||
<div class="rounded-xl p-8 bg-slate-100 md:mr-16" style="grid-area: card-a;">
|
||
Компания Чистый город осуществляет профессиональные комплексные услуги по уборке помещений для частных и корпоративных клиентов. Высокое качество выполняемых услуг обеспечивается за счет использования современной профессиональной техники с использованием качественных моющих средств нашими опытными специалистами.
|
||
</div>
|
||
<div class="rounded-xl p-8 bg-slate-100 md:ml-16" style="grid-area: card-b;">
|
||
Нам дорог каждый клиент и важно каждое мнение о нас, поэтому мы с максимальной ответственностью подходим к своей работе! Наша работа делает мир чище! Благодаря нашему труду пространство становиться чистым, а чистота залог здоровья и приятно находиться в убранном чистом месте, пусть это будет ваша квартира, дом или рабочее место! Нам важно, чтобы наши клиенты оставались с нами и рекомендовали нас как ответственных профессионалов своего дела!
|
||
</div>
|
||
<NuxtPicture
|
||
class="overflow-hidden rounded-l-xl"
|
||
src="/images/building-window.jpg"
|
||
style="grid-area: img-b;"
|
||
></NuxtPicture>
|
||
</div>
|
||
|
||
<div
|
||
class="about__blob-wrapper"
|
||
:style="{
|
||
transform: `translate(${x}px, ${y}px)`
|
||
}"
|
||
>
|
||
<div
|
||
class="about__blob bg-lime-500"
|
||
></div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped lang="postcss">
|
||
.about__grid {
|
||
display: grid;
|
||
gap: 16px;
|
||
grid-template-columns:
|
||
calc(calc(100% - var(--col-width)) / 2)
|
||
repeat(3,
|
||
calc(calc(var(--col-width) / 3) - 21.33px)
|
||
)
|
||
calc(calc(100% - var(--col-width)) / 2);
|
||
grid-template-rows: 300px 300px;
|
||
grid-template-areas:
|
||
'img-a img-a card-a card-a .'
|
||
'. card-b card-b img-b img-b';
|
||
|
||
@media screen and (max-width: 1280px) {
|
||
grid-template-columns: auto repeat(3, 1fr) auto;
|
||
}
|
||
}
|
||
|
||
:deep(img) {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.about__blob-wrapper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
.about__blob {
|
||
width: 300px;
|
||
height: 300px;
|
||
border-radius: 999px;
|
||
filter: blur(96px);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
</style>
|