fix data
This commit is contained in:
@ -4,57 +4,52 @@
|
||||
<div class="flex flex-col justify-between w-full gap-4 xl:w-[45%]">
|
||||
<div class="space-y-[25px]">
|
||||
<h1 class="h1-big text-accent-green-light dark:text-accent-green-dark">
|
||||
{{ component.section_lang_data.main_title }}
|
||||
{{ component.front_section_lang[0].data.main_title }}
|
||||
</h1>
|
||||
<p>
|
||||
{{ component.section_lang_data.main_description }}
|
||||
{{ component.front_section_lang[0].data.main_description }}
|
||||
</p>
|
||||
</div>
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.main_subtitle }}
|
||||
{{ component.front_section_lang[0].data.main_subtitle }}
|
||||
</h4>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
|
||||
<div class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
|
||||
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
}"></div>
|
||||
</div>
|
||||
<div class="space-25-55-75">
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ component.section_lang_data.story_title }}
|
||||
{{ component.front_section_lang[0].data.story_title }}
|
||||
</h2>
|
||||
<div class="flex flex-col-reverse md:flex-row w-full gap-6">
|
||||
<div
|
||||
class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]"
|
||||
:style="{
|
||||
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}"
|
||||
/>
|
||||
<div class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]" :style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}" />
|
||||
<div class="flex flex-col">
|
||||
<p v-for="(item, index) in component.section_lang_data.story_description">
|
||||
{{ item }}
|
||||
<div v-if="index < component.section_lang_data.story_description.length-1">
|
||||
<br>
|
||||
</div>
|
||||
<p v-for="(item, index) in component.front_section_lang[0].data.story_description" :key="index">
|
||||
{{ item }}
|
||||
<div v-if="index < component.front_section_lang[0].data.story_description.length - 1">
|
||||
<br>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col w-full gap-6">
|
||||
<h4 class="h4-uppercase-bold-inter">
|
||||
{{ component.section_lang_data.story_subtitle }}
|
||||
{{ component.front_section_lang[0].data.story_subtitle }}
|
||||
</h4>
|
||||
<div class="flex flex-col justify-between xl:max-w-[70%]">
|
||||
<p v-for="(el, indexEl) in component.section_lang_data.story_sub_description">
|
||||
<p v-for="(el, indexEl) in component.front_section_lang[0].data.story_sub_description" :key="indexEl">
|
||||
{{ el }}
|
||||
<div v-if="indexEl < component.section_lang_data.story_sub_description.length-1">
|
||||
<br>
|
||||
</div>
|
||||
<div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
|
||||
<br>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,19 +59,28 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
const props = defineProps<{ component: Component }>();
|
||||
type Component = {
|
||||
image_collection: string;
|
||||
section_id: string;
|
||||
section_img: string;
|
||||
section_lang_data: {
|
||||
main_title: string;
|
||||
main_description: string;
|
||||
main_subtitle: string;
|
||||
story_title: string;
|
||||
story_description: [];
|
||||
story_subtitle: string;
|
||||
story_sub_description: [];
|
||||
};
|
||||
};
|
||||
defineProps<{
|
||||
component: {
|
||||
id: number
|
||||
name: string
|
||||
img: string[]
|
||||
component_name: string
|
||||
is_no_lang: boolean
|
||||
page_name: string
|
||||
front_section_lang: {
|
||||
data: {
|
||||
main_title: string
|
||||
main_description: string
|
||||
main_subtitle: string
|
||||
story_title: string
|
||||
story_description: string[]
|
||||
story_subtitle: string
|
||||
story_sub_description: string[]
|
||||
}
|
||||
id_front_section: number
|
||||
id_lang: number
|
||||
}[]
|
||||
}
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
Reference in New Issue
Block a user