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>
<ul>
<li>[공유]AI디지털교과서 개발 가이드라인 설명회 발표자료</li>
<li>[공유]AI디지털교과서 개발 가이드라인 설명회 발표자료</li>
</ul>
</div>
<!-- 메인 텍스트 -->
<div class="main-text">
<p>신나고 재미있는 수업의 시작<br><span>디지털 교과서와 함께합니다.</span></p>
</div>
<!-- 메인 배너 -->
<div class="main-benner">
</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>+ 더보기</button>
<!-- <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>
</table>
</div>
</div>
<div class="main-wrap-grid-2">
<div>
<a href="">
<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="">
<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="">
<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="">
<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 class="main-content-news">
<div class="w1400">
<div class="main-wrap-news">
<h3>홍보/뉴스</h3>
<div class="main-wrap-news-hidden">
<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="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="w1400">
<div class="main-partner-wrap">
<h1>파트너사</h1>
<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>
<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>
</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-2 {
padding: 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 img {
width: 40%;
}
.swiper-2 {
height: 100px;
transition-timing-function: linear;
}
/*--------------------------------------- */
</style>