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="m-b">
<div class="w1400">
<div class="m-b-b">
<!-- 메인 텍스트 -->
<div class="m-text">
<p>신나고 재미있는 수업의 시작<br><span>디지털 교과서와 함께합니다.</span></p>
</div>
<!-- 메인 배너 -->
<div class="m-benner">
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
</section>
<section class="main-sec sec1">
<div class="main-content">
<div class="flex">
<!-- 메인 퍼즐 -->
<div class="m-p">
<div class="w1400">
<div class="m-p-container">
<div class="m-p-c-1">
<div class="m-p-name">
<h3>공지사항</h3>
<input type="button" value="+ 더보기">
</div>
<div class="m-p-table">
<table>
<tr>
<td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
<p>공지사항 l 2023.10.17 </p>
</td>
</tr>
<tr>
<td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
<p>공지사항 l 2023.10.17 </p>
</td>
</tr>
<tr>
<td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
<p>공지사항 l 2023.10.17 </p>
</td>
</tr>
<tr>
<td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
<p>공지사항 l 2023.10.17 </p>
</td>
</tr>
<tr>
<td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
<p>공지사항 l 2023.10.17 </p>
</td>
</tr>
<!-- <tr>
<td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
<p>공지사항 l 2023.10.17 </p>
</td>
</tr>
<tr>
<td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
<p>공지사항 l 2023.10.17 </p>
</td>
</tr>
<tr>
<td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
<p>공지사항 l 2023.10.17 </p>
</td>
</tr> -->
</table>
</div>
</div>
<div class="m-p-c-2">
<div>
<img src="../../../../resources/jpg/fille.png" alt="">
<input type="button" value="네트워킹" class="m-p-ai">
</div>
</div>
<div class="m-p-c-3">
<div>
<img src="../../../../resources/jpg/main-box.png" alt="">
<input type="button" value="가이드라인" class="m-p-ai">
</div>
</div>
<div class="m-p-c-4">
<div>
<img src="../../../../resources/jpg/main-pu4.png" alt="">
<input type="button" value="자료집" class="m-p-ai">
</div>
</div>
<div class="m-p-c-5">
<div>
<img src="../../../../resources/jpg/main-pu3.png" alt="">
<input type="button" value="기술문서" class="m-p-ai">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-sec sec1">
<div class=" flex">
<!-- 메인 홍보/뉴스 -->
<div class="m-n">
<div class="w1400">
<div class="m-n-n">
<h3>홍보/뉴스</h3>
<div class="m-n-hidden">
<!--
<swiper ref="{swiperRef}" :slidesPerView="3" :initialSlide="2" :centeredSlides="true"
:spaceBetween="30" :loop="true" :breakpoints="{
300: { slidesPerView: 1 },
479: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1023: { slidesPerView: 3 }
}" :autoplay="{
delay: 4500,
disableOnInteraction: false,
}" :pagination="{
type: 'fraction',
}" :navigation="true" :modules="modules" class="mySwiper">
<swiper-slide>
<div class="vedio">
<embed src="https://webst.edunet.net/AIDT/playertest.mp4" width="100%"
height="100px" type="">
</div>
</swiper-slide>
<swiper-slide><embed src="https://webst.edunet.net/AIDT/playertest.mp4" width="100%"
height="100px" type=""></swiper-slide>
<swiper-slide><embed src="https://webst.edunet.net/AIDT/playertest.mp4" width="100%"
height="100px" type=""></swiper-slide>
<swiper-slide><embed src="https://webst.edunet.net/AIDT/playertest.mp4" width="100%"
height="100px" type=""></swiper-slide>
<swiper-slide><embed src="https://webst.edunet.net/AIDT/playertest.mp4" width="100%"
height="100px" type=""></swiper-slide>
<swiper-slide><embed src="https://webst.edunet.net/AIDT/playertest.mp4" width="100%"
height="100px" type=""></swiper-slide>
</swiper> -->
<swiper :navigation="true" :pagination="false" :slidesPerView="3" :mousewheel="true"
:initialSlide="2" :centeredSlides="false" :spaceBetween="55" :loop="true" :breakpoints="{
300: { slidesPerView: 1 },
479: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1023: { slidesPerView: 3 }
}" :modules="modules" class="mySwiper">
<swiper-slide>
<div class="swiper-div">
<embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
<p>홍보영상</p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper-div">
<embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
<p>홍보영상</p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper-div">
<embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
<p>홍보영상</p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper-div">
<embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
<p>홍보영상</p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper-div">
<embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
<p>홍보영상</p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper-div">
<embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
<p>홍보영상</p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper-div">
<embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
<p>홍보영상</p>
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper-div">
<embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
<p>홍보영상</p>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-sec sec1">
<div class=" flex">
<!-- 히스토리 -->
<div class="m-h">
<div class="w1400">
<div class="m-h-h">
<h1>History</h1>
<div class="m-h-g">
<div class="m-h-g-1">
<div>
<h3>방문자수</h3>
<p></p>
<p>367,700 </p>
<span>명</span>
</div>
</div>
<div class="m-h-g-2">
<div>
<h3>참가업체</h3>
<p></p>
<p>52,500 </p>
<span>업체</span>
</div>
</div>
<div class="m-h-g-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="m-partner">
<div class="w1400">
<div class="m-pa">
<h1>파트너사</h1>
<div class="m-pa-pa">
<div class="m-pa-logo lo1"></div>
<div class="m-pa-logo lo2"></div>
<div class="m-pa-logo lo3"></div>
<div class="m-pa-logo lo4"></div>
<div class="m-pa-logo lo5"></div>
</div>
</div>
</div>
</div>
</div>
<div class="m-p-sw">
<div class="w1400">
<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>
</section>
</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';
export default {
data() {
return {
module: [Pagination],
}
},
methods: {
},
watch: {
},
computed: {
},
components: {
Swiper,
SwiperSlide,
},
setup() {
return {
modules: [Autoplay, Pagination, Navigation],
};
},
mounted() {
console.log('Main mounted');
}
}
</script>
<style scoped>
.swiper-button-prev:after,
.swiper-button-next:after {
color: aliceblue;
}
.swiper-button-next,
.swiper-button-prev {
margin-top: -50px !important;
color: aliceblue;
}
.swiper {
height: 260px;
padding: 0px 50px 50px 50px;
}
.swiper-div {
display: flex;
align-items: center;
flex-direction: column;
}
.swiper-div embed {
height: 230px;
width: 350px;
}
.swiper-div p {
padding: 1rem;
font-size: 1.7rem;
color: white;
}
.swiper-slide {
height: 200px;
padding-bottom: 40px;
}
.swiper-slide img {
width: 40%;
}
.swiper-2 {
height: 100px;
transition-timing-function: linear;
}
</style>