36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
|
<div class="content-wrapper">
|
|
<ContentRenderer :value="doc" v-if="!isMobile" /> <!-- Render the markdown content for laptop -->
|
|
<ContentRenderer :value="mobileDoc" v-if="isMobile" /> <!-- Render the markdown content for mobile -->
|
|
</div>
|
|
<video controls width="640">
|
|
<source src="/videos/video.mp4" type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Import Vue's reactive and ref from 'vue'
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
// Determine if the device is mobile
|
|
const isMobile = ref(false)
|
|
|
|
// Fetch the markdown content files asynchronously
|
|
const { data: doc } = await useAsyncData('markdownDoc', () =>
|
|
queryContent('markdown_laptop').findOne()
|
|
)
|
|
const { data: mobileDoc } = await useAsyncData('mobileMarkdownDoc', () =>
|
|
queryContent('markdown_mobile').findOne()
|
|
)
|
|
|
|
// Add event listener to update isMobile based on window resize when the component is mounted
|
|
onMounted(() => {
|
|
isMobile.value = window.innerWidth <= 768
|
|
|
|
window.addEventListener('resize', () => {
|
|
isMobile.value = window.innerWidth <= 768
|
|
})
|
|
})
|
|
</script>
|