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

<style scoped>
.new-logo img {
    width: 50px;
    height: 50px;
    z-index: -1;
    /* transform: translateY(-40px); */
}

/* 모달 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.modal-content {
    top: 50%;
    left: 50%;
    position: fixed;
    z-index: 9999;
    /* bottom: auto; */
    padding: 4rem;
    border-radius: 2rem;
    background-color: #f9f9f9;
    transform: translate(-50%, -50%);
    /* margin: 0 auto; */
    box-shadow: 2px 2px 5px #86868644;
    width: 70%;
    margin: 0 auto;

    height: 70%;
}

.modal-content button {
    position: relative;
    /* margin: 50%; */
    transform: translate(-52%, 0);
    top: 10%;
    left: 50%;
    padding: 2rem 6rem 2rem;
    background-color: #007aff;
    border-radius: 2rem;

    color: white;
    font-family: "Pretendard-Regular";

}

/* ----------------------------------- */
.news-bos {
    width: 100%;
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 6rem 6rem 12rem 6rem;
    /* border: 1px solid red; */
}

.news-bos-box {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 auto;
    border-radius: 2rem;
    padding: 2rem;
    background-color: #f7f7f7;
    box-shadow: 2px 2px 5px #8484847c;
}

.news-bos-box div {
    padding: 1rem;
}

.modal-img {
    width: 100%;
    height: 195px;
    /* border: 1px solid/ red; */
}

.news-bos-box div h3 {
    font-size: 1.7rem;
    padding: 1rem;
}

.news-bos-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2.5rem;
    box-shadow: 2px 2px 5px #8484847c;

}

.news-box-end {
    display: grid;
    grid-template-columns: 1fr 1fr;

}

.news-box-sed p {
    font-size: 1.5rem;
    /* padding: 1rem; */
    /* background-color: aquamarine; */
}

.news-box-end p {
    font-size: 1.5rem;
    color: #3f87f7;
    /* padding: 1rem; */
}

.news-box-end p span {
    color: #333;

}

.news-box-end p:nth-child(2) {

    text-align: right;
}


@media all and (max-width: 479px) {
    .news-bos {
        grid-template-columns: 1fr;

    }

    .new-logo {
        width: 100%;
        text-align: center;

    }

    .new-logo img {
        margin: 0 auto;
        text-align: center;
    }

    .modal-content {
        height: 50%;
        width: 90%;
    }
}

@media all and (min-width: 480px) and (max-width: 767px) {
    .news-bos {
        grid-template-columns: 1fr 1fr;

    }

    .new-logo {
        width: 100%;
        text-align: center;

    }

    .new-logo img {
        margin: 0 auto;
        text-align: center;
    }
}
</style>


