HAM!DREZA
110 lines
2.8 KiB
Vue
110 lines
2.8 KiB
Vue
<template>
|
|
<div class="flex justify-center mt-[10vw] md:mt-[8vw] pb-[10vw]">
|
|
<div
|
|
class="w-[87.69%] md:w-[81.04%] flex flex-col md:flex-row justify-between mt-[3.846vw] md:mt-[1.667vw]"
|
|
>
|
|
|
|
<div class="basis-1/1 md:basis-1/2">
|
|
<h2
|
|
class="text-[5.11vw] md:text-[1.69vw] text-primaryGreen text-[#383E43] font-semibold ms-0 md:ms-[1.458vw]"
|
|
>
|
|
درباره ما
|
|
</h2>
|
|
<div
|
|
v-html="info?.data?.value?.about"
|
|
class="about text-[#383E43] max-w-[766px] text-[3.59vw] md:text-[16px] mt-[4vw] md:mt-[1.354vw] mb-[6vw] md:mb-0 leading-[7.179vw] font-light md:leading-[1.865vw]"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative basis-1/1 md:basis-1/2">
|
|
<div class="grid-gallery mt-0 md:mt-[3.906vw] pb-[120vw] md:pb-0">
|
|
<div class="panel"></div>
|
|
<div class="panel"></div>
|
|
<div class="panel"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
const info = await useFetch('/api/settings')
|
|
|
|
</script>
|
|
|
|
<style>
|
|
@media (min-width: 768px) {
|
|
|
|
.panel {
|
|
background: url("public/images/aboutUs.jpg");
|
|
background-size: cover;
|
|
background-repeat: no-repeat !important;
|
|
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
|
position: absolute;
|
|
}
|
|
.panel:nth-child(1) {
|
|
width: 16.667vw !important;
|
|
height: 16.667vw !important;
|
|
top: 4vw !important;
|
|
left: -0.1vw !important;
|
|
background-position-x: 28% !important;
|
|
background-position-y: 0% !important;
|
|
background-size: 340% !important;
|
|
}
|
|
.panel:nth-child(2) {
|
|
top: 12.75vw !important;
|
|
left: 0.26vw !important;
|
|
height: 33.076vw !important;
|
|
width: 33.076vw !important;
|
|
background-position-x: 50% !important;
|
|
background-position-y: -7.24vw !important;
|
|
background-size: 150% !important;
|
|
}
|
|
|
|
.panel:nth-child(3) {
|
|
width: 16.667vw !important;
|
|
height: 16.667vw !important;
|
|
top: 4vw !important;
|
|
left: 17.1vw !important;
|
|
background-size: 300% !important;
|
|
background-position-x: 75% !important;
|
|
background-position-y: 0% !important;
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
background: url("public/images/aboutUs.jpg");
|
|
background-size: cover;
|
|
background-repeat: no-repeat !important;
|
|
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
|
position: absolute;
|
|
}
|
|
.panel:nth-child(1) {
|
|
width: 45.667vw;
|
|
height: 45.667vw;
|
|
top: 9vw;
|
|
left: -2.5vw;
|
|
background-position-x: 28%;
|
|
background-position-y: 0%;
|
|
background-size: 340%;
|
|
}
|
|
.panel:nth-child(2) {
|
|
top: 32.75vw;
|
|
left: 0.26vw;
|
|
height: 87.076vw;
|
|
width: 87.692vw;
|
|
background-position-x: 50%;
|
|
background-position-y: 310%;
|
|
background-size: 160%;
|
|
}
|
|
|
|
.panel:nth-child(3) {
|
|
width: 45.667vw;
|
|
height: 45.667vw;
|
|
top: 9vw;
|
|
left: 45.2vw;
|
|
background-size: 300%;
|
|
background-position-x: 75%;
|
|
background-position-y: 0%;
|
|
}
|
|
</style> |