Duong Truong Phong
92 lines
4.0 KiB
Vue
92 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
|
|
import ArticlePodcast from "~/organisms/article/ArticlePodcast.vue";
|
|
|
|
const props = defineProps<{ article: any }>();
|
|
|
|
const getSrc = (htmlString: string) => {
|
|
const srcRegex = /src="([^"]+)"/;
|
|
return htmlString?.match(srcRegex);
|
|
};
|
|
const getArticleById = async (articleId: number) => {
|
|
try {
|
|
const { apiUrl } = useRuntimeConfig().public;
|
|
const { item }: any = await $fetch(`${apiUrl}/cms/article/${articleId}`, {
|
|
headers: {
|
|
Site: "1",
|
|
},
|
|
});
|
|
return item;
|
|
} catch (error) {
|
|
handleError(error);
|
|
}
|
|
};
|
|
const listArticle = computed(() => {
|
|
// if (props.article && props.article.audioIds) {
|
|
// return props.article.audioIds.split(",").map((audioId: number) => getArticleById(audioId));
|
|
// }
|
|
// return []
|
|
const test = "8,2,3";
|
|
return test.split(",").map((audioId) => getArticleById(audioId));
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full grid grid-cols-12 gap-4" v-if="listArticle?.length > 0">
|
|
<div class="col-span-9 h-60 md:h-100 relative bg-center" :style="'background-image: url(' + listArticle[0]?.thumbnail + '); background-size: cover;'">
|
|
<div class="absolute inset-0 bg-black opacity-80 z-1"></div>
|
|
<Wrap class="relative flex items-center justify-center">
|
|
<div class="w-full h-40 md:h-80 absolute inset-0 z-2">
|
|
<div class="grid grid-cols-10 w-full">
|
|
<div class="col-span-3 flex justify-center items-center h-60 md:h-80 mx-2 md:mx-8">
|
|
<div
|
|
class="h-40 md:h-60 w-full rounded-tl-3xl rounded-br-3xl border-double px-2 overflow-x-hidden relative overflow-y-hidden bg-cover z-1 after:z-2 after:content-[''] after:w-full after:h-full after:top-0 after:left-0 after:bg-#000 after:opacity-30 after:absolute"
|
|
:style="{ backgroundImage: `url(${listArticle[0]?.thumbnail})` }"
|
|
>
|
|
<img :src="listArticle[0]?.thumbnail" alt="" class="relative z-3 h-40 md:h-60 w-full object-contain" />
|
|
</div>
|
|
</div>
|
|
<div class="col-span-7 grid grid-cols-12 relative">
|
|
<div class="col-span-12 w-full grid grid-cols-12 mt-8 md:mb-4">
|
|
<div class="col-span-11">
|
|
<h1 v-html="listArticle[0]?.sub" class="text-xl font-bold text-white opacity-60"></h1>
|
|
<h1 class="text-md md:text-3xl text-[#fff] font-bold font-['SFD']">{{ listArticle[0]?.title }}</h1>
|
|
<time class="xs:mt-0.5 text-[10px] md:text-sm text-[#fff]">
|
|
{{ utils.dateFormat(listArticle[0]?.createdOn, "dddd, DD/MM/YYYY - HH:mm") }}
|
|
</time>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 w-full mb-4 hidden md:block">
|
|
<div v-html="listArticle[0]?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
|
|
</div>
|
|
<div class="col-span-11">
|
|
<AudioPlayer :src="getSrc(listArticle[0]?.detail)?.[1]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Wrap>
|
|
</div>
|
|
<div class="col-span-3">
|
|
<div class="flex items-center mt-5 mb-5">
|
|
<ul class="bg-red-500 text-white text-sm font-semibold hover:bg-red-400 font-medium inline-block rounded-tl-lg rounded-br-lg">
|
|
<li class="inline-block uppercase rounded-l-lg border-radius border-red-500 border-r-0 px-2 py-1 text-center block transition-transform duration-300 transform hover:scale-105">Podcast Hôm nay</li>
|
|
</ul>
|
|
<div class="border border-slate-7 flex-grow ml-4"></div>
|
|
</div>
|
|
<div class="grid w-full">
|
|
<div class="" v-for="(item, index) in listArticle.slice(1)" :key="index">
|
|
<ArticlePodcast mode="podcast" image-size="md" text-size="lg" :createdOn="item?.createdOn" :title="item?.title" :slug="'/' + item.category?.code + '/' + item.code" :thumb="item?.thumbnail" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.name {
|
|
text-align: center;
|
|
line-height: 100px;
|
|
}
|
|
</style>
|