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 ref="mySwiper1" class="mySwiper swiper-notice" @swiper="onSwiper"
:direction="'vertical'" :spaceBetween="5" :slidesPerView="1" :centeredSlides="false"
:navigation="false" :modules="modules" :autoplay="{
delay: 3000,
disableOnInteraction: false,
}" :loop="loop">
<swiper-slide v-for="(item, idx) in noticeListForBanner" :key="idx"
@click="noticeSelectOnePage(item)" class="slide1" >
<p class="main-notice-top2">{{ item.post_title }}</p>
</swiper-slide>
</swiper>
</div>
<!-- 메인 텍스트 -->
<div class="main-text">
<p>모두를 위한 맞춤 교육<br><span>AI 디지털교과서</span></p>
</div>
<!-- 메인 배너 -->
<div class="main-benner">
<swiper :pagination="{ clickable: true }" :modules="modules" class="mySwiper main-benner-sw" loop="true"
:autoplay="{ delay: 3000, disableOnInteraction: false,}">
<swiper-slide class="main-benner-img"><img src="../../../../resources/jpg/main-slide3.png" alt=""></swiper-slide>
<swiper-slide class="main-benner-img"><img src="../../../../resources/jpg/main-slide2.png" alt=""></swiper-slide>
<swiper-slide class="main-benner-img"><img src="../../../../resources/jpg/main-slide1.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>
<p>{{ noticeOne.post_title }}</p>
<p>{{ noticeOne.rgtr_id }} l {{ yyyymmdd(noticeOne.reg_dt) }}</p>
</td>
</tr>
</table>
</div>
</div>
<div class="main-wrap-grid-5 ">
<div class="main-position">
<a href="/Technology.page">
<img src="../../../../resources/jpg/main-pu3.png" alt="">
<button class="main-grid-box">기술문서</button>
</a>
</div>
</div>
<div class="main-wrap-grid-3 ">
<div class="main-position">
<a href="/Data.page?type=main">
<img src="../../../../resources/jpg/main-box.png" alt="">
<button class="main-grid-box">가이드라인</button>
</a>
</div>
</div>
<div class="main-wrap-grid-4 ">
<div class="main-position">
<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-2 ">
<div class="main-position">
<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>
</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="loop" loopedSlides="1" :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="modal-img" @click="openModal(item)">
<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
alt="thumbnail" />
<p>{{ item.post_title }}</p>
</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>{{ visitHistory }}</p>
<span>명</span>
</div>
</div>
<div class="main-history-box-2">
<div>
<h3>참가업체</h3>
<p></p>
<p>{{ participationCompany }}</p>
<span>업체</span>
</div>
</div>
<div class="main-history-box-3">
<div>
<h3>참가인원</h3>
<p></p>
<p>{{ participationUser }}</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 :slidesPerView="10" :spaceBetween="30" :loop="loop" :speed="1500"
:centeredSlides="false" :autoplay="{ delay: 1000, disableOnInteraction: false }"
:breakpoints="{
300: { slidesPerView: 2 },
479: { slidesPerView: 4 },
768: { slidesPerView: 6 },
1023: { slidesPerView: 7 }
}" :navigation="false" :modules="modules" class="mySwiper swiper-2"
>
<swiper-slide v-for="(companyOne, index) in companyLogoLists" :key="index">
<img :src="'http://localhost:8080' + companyOne.file_path + '/' + companyOne.file_nm + '.' + companyOne.file_extn_nm"
alt="">
</swiper-slide>
</swiper>
</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>
<div class="main-popup" v-if="showPopup">
<div>
<div class="main-popup-div">
<swiper :spaceBetween="30" :centeredSlides="true" :autoplay="{delay: 3000, disableOnInteraction: false,}"
:pagination="{ clickable: true,}" :navigation="false" :modules="modules" class="mySwiper">
<swiper-slide v-for="(item, index) in popupList" :key="index">
<a :href="item.shortcuts_url" target="_blank" v-if="shortcuts_yn === 'Y'">
<img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="">
</a>
<img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="" v-else>
</swiper-slide>
</swiper>
</div>
<div class="main-popup-input" :class="{ active: doNotShow }">
<p @click="hidePopup">24시간 동안 열지 않기</p>
<p @click="closeNow">닫기</p>
</div>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation,Autoplay, Pagination } from 'swiper/modules';
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import { useStore } from "vuex";
import Cookies from 'js-cookie';
export default {
data() {
return {
isModalOpen: false,
videoUrl: '',
postList: [],
postListCount: 0,
postIdx: 0,
postListSearch: {
currentPage: 1,
perPage: 10,
searchType: null,
searchText: null,
bbs_id: '1'
},
noticeList: [],
noticeListForBanner: [],
swiper: null,
store: useStore(),
popupList: [],
showPopup: true,
companyLogoLists: [],
swiper: null,
loop: false,
modules: [Autoplay, Pagination, Navigation],
visitHistory: 0,
participationCompany: 0,
participationUser: 0
}
},
methods: {
onSwiper(swiper) {
this.swiper = swiper;
},
// 메인 팝업 관련 메서드
closeNow: function () {
this.showPopup = false;
},
getFilePath: function (filePath, fileName, fileExt) {
return `http://localhost:8080${filePath}/${fileName}.${fileExt}`;
},
checkPopupStatus() {
const popupClosed = Cookies.get('popupClosed') === 'true';
console.log("popupClosed", popupClosed);
if (popupClosed) {
this.showPopup = false;
}
},
hidePopup() {
// 'popupClosed' 쿠키를 1일(24시간) 동안 설정합니다.
Cookies.set('popupClosed', true, { expires: 1 });
this.showPopup = false;
console.log("this.showPopup", this.showPopup)
},
// 페이지 준비중 alert
showAlert: function () {
alert('페이지 준비중입니다.');
},
// +더보기 공지사항으로
goToNotice() {
this.$router.push({ name: 'Notice' });
},
closeModal() {
this.videoUrl = "";
this.urlHTML(this.videoUrl)
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('공지사항 목록 조회 오류, 관리자에게 문의하세요.');
})
},
//배너 부분 공지사항 상단고정 목록
noticeBannerListForMain: function () {
const vm = this;
axios({
url: '/post/noticeBannerListForMain.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
}).then(function (response) {
vm.noticeListForBanner = response.data;
vm.$nextTick(() => {
if (vm.swiper) {
console.log("인스턴스 받아와지니", vm.swiper)
vm.swiper.init();
vm.loop = true;
}
});
}).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) {
const vm = this;
axios({
url: '/post/postViewCount.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'post_id': item.post_id, 'bbs_id': item.bbs_id }
}).then(function (response) {
axios({
url: '/statistics/pageLogInsert.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { "page_nm": "공지사항" }
}).then(function () {
vm.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
})
}).catch(function (error) {
console.log(error)
alert("공지사항 상세보기 오류, 관리자에게 문의바랍니다.");
})
},
/** 사이트 방문자 통계 */
visitLogInsert: function () {
const vm = this;
console.log("vm.store.state.loginUser ", vm.store.state.loginUser)
axios({
url: '/statistics/visitLogInsert.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'user': vm.store.state.loginUser }
})
},
popupSelectList: function () {
const vm = this;
axios({
url: '/popup/userPopupList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
}).then(function (response) {
vm.popupList = response.data;
// if (vm.popupList.length > 0) {
// vm.showPopup = true
// }
if (vm.popupList.length < 1) {
vm.showPopup = false;
}
console.log("vm.popupList", vm.popupList)
}).catch(function (error) {
alert('팝업 목록 조회 오류, 관리자에게 문의하세요.');
})
},
companyLogoList: function () {
const vm = this;
axios({
url: '/company/companyLogoList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
}).then(function (response) {
console.log("companyLogoList!!!")
vm.companyLogoLists = response.data
console.log("vm.companyLogoLists", vm.companyLogoLists);
// vm.$nextTick(() => {
// if (vm.swiper) {
// console.log("vm.companyLogoLists", vm.swiper)
// vm.swiper.init();
// vm.loop = true;
// }
// });
}).catch(function (error) {
alert('기업 로고 목록 조회 오류, 관리자에게 문의하세요.');
})
},
mainHistory: function() {
const vm = this;
axios({
url: '/statistics/mainHistory.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
}).then(function (response) {
vm.visitHistory = response.data.visitHistory.toLocaleString('ko-KR');
vm.participationCompany = response.data.participationCompany.toLocaleString('ko-KR');
vm.participationUser = response.data.participationUser.toLocaleString('ko-KR');
}).catch(function (error) {
alert('히스토리 조회 오류, 관리자에게 문의하세요.');
})
}
},
watch: {
},
computed: {
},
components: {
Swiper,
SwiperSlide,
},
mounted() {
console.log('Main mounted');
this.popupSelectList();
this.companyLogoList();
this.postSelectList();
this.noticeListForMain();
this.noticeBannerListForMain();
this.visitLogInsert();
this.checkPopupStatus();
this.mainHistory();
}
}
</script>