MoreStrive
113 lines
3.3 KiB
Vue
113 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
import { enumPageComponentTemplates } from "@/definitions/enum";
|
|
import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
|
|
import { getResource } from "@/utils/resourceHandler";
|
|
|
|
const props = defineProps<{
|
|
dataResult?: any;
|
|
dataType?: any;
|
|
dataQuery?: any;
|
|
layout?: string;
|
|
label?: any;
|
|
}>();
|
|
|
|
const LAYOUT_PARSE = computed(() => {
|
|
const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
|
|
return Object.assign({}, designObject);
|
|
});
|
|
|
|
const parseData = computed(() => {
|
|
if (!props.dataResult) return;
|
|
const result = getInputValue(props.dataResult, "OBJECT");
|
|
return result;
|
|
});
|
|
|
|
const playVideo = ref<boolean>(false)
|
|
|
|
onMounted(() => {
|
|
getResource(JSON.parse(props.dataResult).detail)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<article
|
|
class="basic-article border-custom"
|
|
:class="LAYOUT_PARSE['article_Class']"
|
|
:style="LAYOUT_PARSE['article']"
|
|
>
|
|
<div class="article_video">
|
|
<template v-if="parseData">
|
|
<div
|
|
v-if="!playVideo"
|
|
class="article_video_thumb h-full"
|
|
:style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
|
|
>
|
|
<div></div>
|
|
<div class="article_video_content">
|
|
<span><Icon name="ri:play-circle-line" class="text-white" /></span>
|
|
<h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
|
|
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
|
|
</h3>
|
|
<p class="mb-0 line-clamp text-white" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
|
|
{{ parseData.intro?.replace(/<[^>]+>/g, "") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<video src=""></video>
|
|
</template>
|
|
</div>
|
|
|
|
<div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
|
|
</article>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.article_video {
|
|
@apply min-h-465px;
|
|
.article_video_thumb {
|
|
@apply flex flex-col justify-end min-h-465px;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
position: relative;
|
|
z-index: 0;
|
|
padding: 120px 85px 60px 85px;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
z-index: 1;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
.article_video_content {
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
h3 {
|
|
font-size: 44px;
|
|
font-weight: 700;
|
|
line-height: 57.2px;
|
|
text-align: left;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
svg {
|
|
font-size: 80px;
|
|
color: #ed1c24;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|