Code - jichoi/lms

<template> <div class=" main"> <div class="myplan"> <div class="title-box flex justify-between mb40"> <p class="title">오늘 공부를 계획해봅시다.</p>  </div> <div class="wrap"> <p class="title1"> 학습 교재를 선택합시다.</p> <div class="search-wrap flex justify-end mb20 mt20">  <input class="data-wrap" type="text" placeholder="검색하세요."> <button type="button" title="위원회 검색"> <img src="../../../resources/img/look_t.png" alt=""> </button> </div> <div class="table-wrap"> <table> <colgroup> <col style="width: 5%;"> <col style="width: 10%;"> <col style="width: 70%;"> <col style="width: 15%;"> </colgroup> <tr> <td><input type="checkbox" class="ui-checkbox mr10"></td> <td><img src="../../../resources/img/img214_19s.png" alt=""></td> <td class="text-lf"> <p class="title1">the best</p> <p class="title2">wirte a</p> </td> <td> <button type="button" title="확인" class="new-btn" @click="buttonSearch"> 시간입력 </button></td> </tr> <tr> <td><input type="checkbox" class="ui-checkbox mr10"></td> <td><img src="../../../resources/img/img214_19s.png" alt=""></td> <td class="text-lf"> <p class="title1">the best</p> <p class="title2">wirte a</p> </td> <td> <button type="button" title="확인" class="new-btn" @click="buttonSearch"> 시간입력 </button></td> </tr> </table> <div class="flex justify-end"> <button type="button" title="선택하기" class="yellow-btn mt30"> 선택하기 </button> </div> </div> </div> <div class="wrap mt30"> <p class="title1 mb20"> AI 맞춤형 학습 코스는 어떨까요?</p> <div class="imgGroup flex justify-between"> <div class="text-lf"> <img src="../../../resources/img/img215_22s.png" alt=""> <p class="title2 mt10">추천 학습 단원</p> </div> <div class="text-lf"> <img src="../../../resources/img/img215_22s.png" alt=""> <p class="title2 mt10">추천 학습 단원</p> </div> <div class="text-lf"> <img src="../../../resources/img/img215_22s.png" alt=""> <p class="title2 mt10">추천 학습 단원</p> </div> </div> </div> <div class="wrap mt30"> <p class="title1 mb20">학습일정을 확인해봅시다. </p> <div class="flex-column" style="gap: 20px;"> <div class=" flex justify-between align-center " style="gap: 70px;"> <div><img src="../../../resources/img/img217_22s.png" alt=""></div> <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }" @click="toggleClicked" style="width: 100%;"> <div class="text-lf flex justify-between align-center "> <div> <div class="flex align-center mb10" style="gap: 10px;"> <p class="title2"><em class="gray-bd">1교시</em></p> <p class="title1">9:00</p> <p class="title1">~</p> <p class="title1">10:00</p> </div> <div class="title-box mb10"> <span class="title">the best</span></div> <p class="title2">wirte a</p> </div> <div class=""> <img src="../../../resources/img/img214_19s.png" alt=""></div> </div> </div> </div> </div> <div class="flex justify-end"> <button type="button" title="선택하기" class="yellow-btn mt30"> 선택하기 </button> </div> </div>  <div class="popup-wrap" v-show="searchOpen"> <div class="popup-box "> <div class="flex mb10 justify-between"> <p class="popup-title mb20">시간 선택</p> <button type="button" class="popup-close-btn" @click="closeBtn"> <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> </button> </div> <article class=" mb20 flex-column " style="gap: 20px;"> <div class="flex justify-between bg-gray"> <div class="flex align-center"> <div><input type="checkbox" class="ui-checkbox mr20"></div> <div class="text-lf"> <p class="title1">2교시</p> </div> </div> <div> <div class="flex align-center " style="gap: 10px;"><img src="../../../resources/img/img215_20s.png" alt=""> <p class="title1">9:00</p> <p class="title1">~</p> <p class="title1">10:00</p> </div> </div> </div> <div class="flex justify-between bg-gray"> <div class="flex align-center"> <div><input type="checkbox" class="ui-checkbox mr20"></div> <div class="text-lf"> <p class="title1">2교시</p> </div> </div> <div> <div class="flex align-center " style="gap: 10px;"><img src="../../../resources/img/img215_20s.png" alt=""> <p class="title1">9:00</p> <p class="title1">~</p> <p class="title1">10:00</p> </div> </div> </div> <div class="flex justify-between bg-gray"> <div class="flex align-center"> <div><input type="checkbox" class="ui-checkbox mr20"></div> <div class="text-lf"> <p class="title1">2교시</p> </div> </div> <div> <div class="flex align-center " style="gap: 10px;"><img src="../../../resources/img/img215_20s.png" alt=""> <p class="title1">9:00</p> <p class="title1">~</p> <p class="title1">10:00</p> </div> </div> </div> <div class="flex justify-between bg-gray"> <div class="flex align-center"> <div><input type="checkbox" class="ui-checkbox mr20"></div> <div class="text-lf"> <p class="title1">2교시</p> </div> </div> <div> <div class="flex align-center " style="gap: 10px;"><img src="../../../resources/img/img215_20s.png" alt=""> <p class="title1">9:00</p> <p class="title1">~</p> <p class="title1">10:00</p> </div> </div> </div> </article> <div class="flex justify-center mt20"> <button type="button" title="선택" class="new-btn"> 선택 </button> </div> </div> </div> </div> </div> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify, mdiWindowClose } from '@mdi/js'; export default { data() { return { isClicked: false, mdiMagnify: mdiMagnify, mdiWindowClose: mdiWindowClose, showModal: false, searchOpen: false, } }, methods: { toggleClicked() { this.isClicked = !this.isClicked; }, goToPage(page) { this.$router.push({ name: page }); }, showConfirm(type) { let message = ''; if (type === 'cancel') { message = '삭제하시겠습니까?'; } else if (type === 'reset') { message = '초기화하시겠습니까?'; } else if (type === 'save') { message = '등록하시겠습니까?'; } if (confirm(message)) { this.goBack(); } }, closeModal() { this.showModal = false; }, buttonSearch() { this.searchOpen = true; }, closeBtn() { this.searchOpen = false; }, }, watch: { }, computed: { }, components: { SvgIcon }, mounted() { console.log('Main2 mounted'); } } </script> <style scoped> .popup-box { width: 750px; } </style>