33 lines
961 B
Vue
33 lines
961 B
Vue
<script setup lang="ts">
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
|
|
const props = defineProps<{
|
|
title: string
|
|
resourcesData: PageDataResourceGroup
|
|
}>()
|
|
|
|
const { getCurrentSrc } = useResponsiveSrc()
|
|
|
|
const resPath = computed(() => props.resourcesData?.res_path)
|
|
const imageSrc = computed(() => {
|
|
return getCurrentSrc(resPath.value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex justify-center items-center w-full h-[120px] bg-center px-[20px] bg-no-repeat bg-cover sm:px-[40px] md:h-[180px]"
|
|
:style="{ backgroundImage: `url(${imageSrc})` }"
|
|
>
|
|
<h2
|
|
class="flex justify-center items-center w-full max-w-full md:justify-start md:max-w-[1300px]"
|
|
>
|
|
<span
|
|
class="flex justify-center items-center text-white text-[20px] font-bold tracking-[-0.6px] leading-[30px] md:text-[32px] md:leading-[44px] md:tracking-[-0.96px]"
|
|
>
|
|
{{ props.title }}
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
</template>
|