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 class="main-page">
<section class="main-sec sec1">
<!-- <div class="main-content"> -->
<div class="flex">
<!-- 메인비주얼 -->
<div class="main-box">
<div class="w1400">
<div class="main-box-wrap">
<!-- 공지사항 배너 -->
<div class="main-notice">
<h2> <i class="fa-solid fa-volume-high" style="color: #ffffff;"></i>공지사항</h2>
<swiper :direction="'vertical'" :loop="true" :spaceBetween="8" :slidesPerView="1"
:centeredSlides="false" :navigation="false" :modules="modules"
class="mySwiper swiper-notice" :autoplay="{
delay: 2500,
disableOnInteraction: false,
}">
<swiper-slide v-for="(item, idx) in noticeListForBanner" :key="idx"
@click="noticeSelectOnePage(item)" class="slide1">
{{ item.post_title }}
</swiper-slide>
</swiper>
</div>
<!-- 메인 텍스트 -->
<div class="main-text">
<p>모두를 위한 맞춤 교육<br><span>AI 디지털교과서</span></p>
</div>
<!-- 메인 배너 -->
<div class="main-benner">
<swiper :direction="'vertical'" :pagination="{
clickable: true,
}" :modules="modules" class="mySwiper main-benner-sw" loop="true" :autoplay="{
delay: 2500,
disableOnInteraction: false,
}">
<swiper-slide class="main-benner-img"><img src="../../../../resources/jpg/main.png"
alt=""></swiper-slide>
<swiper-slide class="main-benner-img"><img src="../../../../resources/jpg/main.png"
alt=""></swiper-slide>
</swiper>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
</section>
<section class="main-sec sec1">
<div class="main-content">
<div class="flex">
<!-- 메인 퍼즐 -->
<div class="main-content-wrap">
<div class="w1400">
<div class="main-puzzle-container">
<div class="main-wrap-grid">
<div class="main-grid-name">
<h3>공지사항</h3>
<button @click="goToNotice">+ 더보기</button>
<!-- <input type="button" value="+ 더보기"> -->
</div>
<div class="m-p-table">
<table>
<!-- <tr v-for="(noticeOne, idx) in noticeList" :key="idx" @click="postSelectOnePage(item)"></tr> -->
<tr v-for="(noticeOne, idx) in noticeList" :key="idx"
@click="noticeSelectOnePage(noticeOne)">
<td>{{ noticeOne.post_title }}
<p>{{ noticeOne.rgtr_id }} l {{ yyyymmdd(noticeOne.reg_dt) }}</p>
</td>
</tr>
</table>
</div>
</div>
<div class="main-wrap-grid-2">
<div>
<a @click="showAlert">
<img src="../../../../resources/jpg/fille.png" alt="">
<!-- <input type="button" value="네트워킹" class="m-p-ai"> -->
<button class="main-grid-box">네트워킹</button>
</a>
</div>
</div>
<div class="main-wrap-grid-3">
<div>
<a href="/Guide.page">
<img src="../../../../resources/jpg/main-box.png" alt="">
<button class="main-grid-box">가이드라인</button>
</a>
</div>
</div>
<div class="main-wrap-grid-4">
<div>
<a href="/Data.page">
<img src="../../../../resources/jpg/main-pu4.png" alt="">
<button class="main-grid-box">자료집</button>
</a>
</div>
</div>
<div class="main-wrap-grid-5">
<div>
<a href="/Technology.page">
<img src="../../../../resources/jpg/main-pu3.png" alt="">
<button class="main-grid-box">기술문서</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-sec sec1">
<div class=" flex">
<!-- 메인 홍보/뉴스 -->
<div v-show="isModalOpen" class="news-modal">
<!-- <div class="modal-content" ref="modalInner"> -->
<div class="modal-content">
<div ref="modalInner"></div>
<!-- <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 class="main-content-news">
<div class="w1400">
<div class="main-wrap-news">
<h3>홍보/뉴스</h3>
<div class="main-wrap-news-hidden">
<swiper ref="mySwiper" :navigation="true" :pagination="false" :slidesPerView="3"
:mousewheel="true" :initialSlide="2" :centeredSlides="false" :spaceBetween="55"
:loop="true" :breakpoints="{
200: { slidesPerView: 1 },
300: { slidesPerView: 1 },
479: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1023: { slidesPerView: 3 }
}" :modules="modules" class="mySwiper">
<swiper-slide v-for="(item, idx) in postList" :key="idx">
<div class="swiper-div">
<div class="modal-img" @click="openModal(item)">
<img :src="'http://localhost:8080' + item.file_path + '\\thumbnail_' + item.file_nm + '.' + item.file_extn_nm"
alt="thumbnail" />
<p>{{ item.post_title }}</p>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <section class="main-sec sec1">
<div class=" flex"> -->
<!-- 히스토리 -->
<!-- <div class="main-history">
<div class="w1400">
<div class="main-history-wrap">
<h1>History</h1>
<div class="main-history-box">
<div class="main-history-box-1">
<div>
<h3>방문자수</h3>
<p></p>
<p>367,700 </p>
<span>명</span>
</div>
</div>
<div class="main-history-box-2">
<div>
<h3>참가업체</h3>
<p></p>
<p>52,500 </p>
<span>업체</span>
</div>
</div>
<div class="main-history-box-3">
<div>
<h3>참가인원</h3>
<p></p>
<p>360,000</p>
<span>명</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- <section class="main-sec sec1">
<div class=" flex"> -->
<!-- 파트너사 -->
<!-- <div class="main-partner">
<div class="main-partner-wrap">
<h1>파트너사</h1>
<div class="m-p-sw">
<div class="m-p-sw-1">
<swiper :slides-per-view="7" :space-between="30" :loop="true" :speed="1000"
:centered-slides="true" :autoplay="{ delay: 0, disableOnInteraction: false }"
:breakpoints="{
300: { slidesPerView: 1 },
479: { slidesPerView: 2 },
768: { slidesPerView: 3 },
1023: { slidesPerView: 5 }
}" :navigation="false" :modules="modules" class="mySwiper swiper-2">
<swiper-slide>
<img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../../../../resources/jpg/logo/kefa.png" alt="">
</swiper-slide>
<swiper-slide>
<img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../../../../resources/jpg/logo/keris.gif" alt="">
</swiper-slide>
<swiper-slide>
<img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../../../../resources/jpg/logo/ko.png" alt="">
</swiper-slide>
</swiper>
</div>
</div>
<div class="w1400">
<div class="main-partner-logo">
<div class="main-partner-img lo1">
</div>
<div class="main-partner-img lo2">
</div>
<div class="main-partner-img lo3">
</div>
<div class="main-partner-img lo4">
</div>
<div class="main-partner-img lo5">
</div>
</div>
</div>
</div>
</div>
</div>
-->
<!--
</section> -->
<div class="w1400">
<div class="main-partner-logo">
<div class="main-partner-img lo1">
</div>
<div class="main-partner-img lo2">
</div>
<div class="main-partner-img lo3">
</div>
<div class="main-partner-img lo4">
</div>
<div class="main-partner-img lo5">
</div>
</div>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Autoplay, Pagination } from 'swiper/modules';
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
export default {
data() {
return {
module: [Pagination, Autoplay],
isModalOpen: false,
videoUrl: '',
postList: [],
postListCount: 0,
postIdx: 0,
postListSearch: {
currentPage: 1,
perPage: 10,
searchType: null,
searchText: null,
bbs_id: '1'
},
noticeList: [],
noticeListForBanner: [],
}
},
methods: {
showAlert: function () {
alert('페이지 준비중입니다.');
},
// +더보기 공지사항으로
goToNotice() {
this.$router.push({ name: 'Notice' });
},
closeModal() {
this.isModalOpen = false;
},
postSelectList: function () {
const vm = this;
axios({
url: '/post/newsSelectListForMain.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.postListSearch
}).then(function (response) {
vm.postList = response.data.postSelectList;
vm.postListCount = response.data.postSelectListCount;
vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
}).catch(function (error) {
alert('홍보/뉴스 목록 조회 오류, 관리자에게 문의하세요.');
})
},
//공지사항 최신순 5개 리스트 출력
noticeListForMain: function () {
const vm = this;
let limitCnt = 5;
axios({
url: '/post/noticeSelectListForMain.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {
'limit_cnt': limitCnt,
},
}).then(function (response) {
vm.noticeList = response.data;
console.log("resopnse.data", response.data)
}).catch(function (error) {
alert('공지사항 목록 조회 오류, 관리자에게 문의하세요.');
})
},
//배너 부분 공지사항 최신순 2개 출력
noticeBannerListForMain: function () {
const vm = this;
let limitCnt = 2;
axios({
url: '/post/noticeSelectListForMain.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {
'limit_cnt': limitCnt,
},
}).then(function (response) {
vm.noticeListForBanner = response.data;
}).catch(function (error) {
alert('배너 공지사항 목록 조회 오류, 관리자에게 문의하세요.');
})
},
//날짜 시,분,초 자르기
yyyymmdd: function (date) {
return COMMON_UTIL.yyyymmdd(date);
},
openModal: function (item) {
this.isModalOpen = true;
this.videoUrl = item.post_content;
this.urlHTML(this.videoUrl)
},
urlHTML: function (content) {
/* this.$nextTick(() => {
let divRef = this.$refs['modalInner'];
if (divRef) {
divRef.innerHTML = content;
}
}); */
let divRef = this.$refs['modalInner'];
divRef.innerHTML = content;
},
//공지사항 상세조회 페이지로 이동
noticeSelectOnePage: function (item) {
this.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
},
},
watch: {
},
computed: {
},
components: {
Swiper,
SwiperSlide,
},
setup() {
return {
modules: [Autoplay, Pagination, Navigation],
};
},
mounted() {
console.log('Main mounted');
this.postSelectList();
this.noticeListForMain();
this.noticeBannerListForMain();
}
}
</script>