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