<template> <div class="title-box flex justify-between mb40"> <p class="title">A교재</p> <select name="" id=""> <option value="">A 교재</option> </select> </div> <div class="board-wrap"> <label for="" class="title2">단원</label> <div class="table-pagination flex mt10"> <button class="selected-btn">1</button> <button>2</button> <button>3</button> </div> <hr> <div class="mb20 "> <div class="flex justify-between mb30 align-center"> <label for="" class="title1">지문</label> <div class="look-btn flex align-center" @click="goToPage('TextList')"> <p>자세히 보기 </p> <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> </div> </div> <div class="table-wrap"> <table> <thead> <td>No.</td> <td>제목</td> <td>내용</td> <td>작성자</td> <td>등록일</td> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> <hr> <div class="mb20" > <div class="flex justify-between mb30 align-center"> <label for="" class="title1">문제</label> <div class="look-btn flex align-center" @click="goToPage('QuestionList')"> <p>자세히 보기 </p> <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> </div> </div> <div class="table-wrap"> <table> <thead> <td>No.</td> <td>제목</td> <td>내용</td> <td>작성자</td> <td>등록일</td> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> <hr> <div class="mb20" > <div class="flex justify-between mb30 align-center"> <label for="" class="title1">단어</label> <div class="look-btn flex align-center" @click="goToPage('VocaList')"> <p>자세히 보기 </p> <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> </div> </div> <div class="table-wrap"> <table> <thead> <td>No.</td> <td>단어</td> <td>뜻</td> <td>작성자</td> <td>등록일</td> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> <hr> <div class="mb20" > <div class="flex justify-between mb30 align-center"> <label for="" class="title1">중간 평가</label> <div class="look-btn flex align-center" @click="goToPage('ExamList')"> <p>자세히 보기 </p> <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> </div> </div> <div class="table-wrap"> <table> <thead> <td>No.</td> <td>제목</td> <td>내용</td> <td>작성자</td> <td>등록일</td> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> <hr> <div > <div class="flex justify-between mb30 align-center"> <label for="" class="title1">최종 평가</label> <div class="look-btn flex align-center" @click="goToPage('ExamList')"> <p>자세히 보기 </p> <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> </div> </div> <div class="table-wrap"> <table> <thead> <td>No.</td> <td>제목</td> <td>내용</td> <td>작성자</td> <td>등록일</td> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> </div> <!-- <div class="flex justify-end mt30" style="gap: 10px;"> <button type="button" title="" class="new-btn" @click="goToPage('RoadMap')"> 로드맵 </button> <button type="button" title="" class="new-btn" @click="showConfirm('delete')"> 삭제 </button> </div> --> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify, } from '@mdi/js'; import { mdilArrowRight } from '@mdi/light-js'; import ProgressBar from '../../component/ProgressBar.vue'; export default { data() { return { mdiMagnify: mdiMagnify, mdilArrowRight: mdilArrowRight, timer: "00:00", progress: 20 } }, methods: { goToPage(page) { this.$router.push({ name: page }); }, increaseProgress() { if (this.progress < 100) { this.progress += 10; } }, showConfirm(type) { let message = ''; if (type === 'delete') { message = '삭제하시겠습니까?'; } else if (type === 'reset') { message = '초기화하시겠습니까?'; } else if (type === 'save') { message = '등록하시겠습니까?'; } if (confirm(message)) { this.goBack(); } }, }, watch: { }, computed: { }, components: { SvgIcon, ProgressBar }, mounted() { console.log('Main2 mounted'); } } </script> <style scoped></style>