<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>


