67 lines
3.7 KiB
Vue
67 lines
3.7 KiB
Vue
|
<template>
|
||
|
|
<div class="template-youtube-wrapper">
|
||
|
|
<div class="template-youtube">
|
||
|
|
<div class="template-youtube-title">
|
||
|
|
<template v-for="(data, index) in title" :key="index">
|
||
|
|
<h2>{{ data }}</h2>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="template-youtube-description">{{ description }}</div>
|
||
|
|
<div class="template-youtube-screen" @click="youtubeVideoVisible = true">
|
||
|
|
<div class="template-youtube-screen-blur">
|
||
|
|
<div class="template-youtube-screen-play">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none">
|
||
|
|
<g filter="url(#filter0_d_918_49700)">
|
||
|
|
<rect x="50" y="46" width="80" height="80" rx="40" fill="white" />
|
||
|
|
<rect x="50.5" y="46.5" width="79" height="79" rx="39.5" stroke="#DFE7EF" />
|
||
|
|
<path
|
||
|
|
d="M103.062 84.7896C104.085 85.5904 104.085 87.1386 103.062 87.9394L85.3123 101.834C83.9995 102.862 82.0795 101.926 82.0795 100.259L82.0795 72.47C82.0795 70.8028 83.9995 69.8674 85.3123 70.8951L103.062 84.7896Z"
|
||
|
|
fill="var(--primary-400)"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_918_49700" x="0" y="0" width="180" height="180" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||
|
|
<feOffset dy="4" />
|
||
|
|
<feGaussianBlur stdDeviation="25" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_918_49700" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_918_49700" result="shape" />
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<img :src="imgSrc" alt="Template Youtube Screen" />
|
||
|
|
</div>
|
||
|
|
<Dialog v-model:visible="youtubeVideoVisible" header="Video Content" :style="{ width: '70vw' }">
|
||
|
|
<div class="template-youtube-video">
|
||
|
|
<iframe :src="youtubeLink" title="PrimeNG 2023 Roadmap" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
|
||
|
|
</div>
|
||
|
|
</Dialog>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
imgSrc: {
|
||
|
|
type: null,
|
||
|
|
default: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: ['Integration with', 'Existing Vite Applications'],
|
||
|
|
description: "Only the folders that are related to the layout needs to move in to your project. We've already created a short tutorial with details for Sakai Vue. The both templates have the same implementation.",
|
||
|
|
youtubeLink: 'https://www.youtube.com/embed/Y07edRJd5QM',
|
||
|
|
youtubeVideoVisible: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {}
|
||
|
|
};
|
||
|
|
</script>
|