File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div>
<div class="w1400">
<div class="page-logo new-logo">
<img src="../../../../resources/jpg/info-logo.png" alt="">
<h1>홍보/뉴스</h1>
</div>
<section class="news-bos">
<section class="news-bos-box">
<div class="modal-img"
@click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
<img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
</div>
<div>
<h3>학교알리미</h3>
</div>
<div class="news-box-sed">
<p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
</div>
<div class="news-box-end">
<p>작성자 <span>케리스</span></p>
<p>조회수 <span>100</span></p>
</div>
</section>
<section class="news-bos-box">
<div class="modal-img"
@click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
<img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
</div>
<div>
<h3>학교알리미</h3>
</div>
<div class="news-box-sed">
<p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
</div>
<div class="news-box-end">
<p>작성자 <span>케리스</span></p>
<p>조회수 <span>100</span></p>
</div>
</section>
<section class="news-bos-box">
<div class="modal-img"
@click="openModal('https://www.youtube.com/embed/rCu7WIxf5P8?si=1KRKYGkd8uh6pe9h')">
<img src="https://img.youtube.com/vi/rCu7WIxf5P8/0.jpg" alt="Thumbnail 2">
</div>
<div>
<h3>학교알리미</h3>
</div>
<div class="news-box-sed">
<p>[사립유치원K-에듀파인] 사립유치원회계, 어떻게 하면 투명하게 운영할 수 있을까요?</p>
</div>
<div class="news-box-end">
<p>작성자 <span>케리스</span></p>
<p>조회수 <span>100</span></p>
</div>
</section>
</section>
<div v-if="isModalOpen" class="modal">
<div class="modal-content">
<iframe width="100%" height="80%" :src="videoUrl" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<!-- 모달 닫기 버튼 -->
<button @click="closeModal">닫기</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isModalOpen: false,
videoUrl: '',
}
},
methods: {
openModal(url) {
this.videoUrl = url;
this.isModalOpen = true;
},
closeModal() {
this.isModalOpen = false;
},
},
watch: {
},
computed: {
},
mounted() {
console.log('Login mounted');
}
}
</script>