Code - yjryu/KERIS

<template> <div class="main-page"> <section class="main-sec sec1">  <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> </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>  </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/m-p-ai2.png" alt=""> <input type="button" value="자료집" class="m-p-ai"> </div> </div> <div class="m-p-c-4"> <div> <img src="../../../resources/jpg/m-p-ai.png" alt=""> <input type="button" value="AI 디지털교과서 정책소개 다운" class="m-p-ai"> </div> </div> <div class="m-p-c-5"> <div> <img src="../../../resources/jpg/ki-i.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 :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>