<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" style=" height: calc(100% - 16rem);"> <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> <label for="" class="title2 ">1단원 로드맵 등록</label> <div class="search-wrap flex mb20 mt30"> <select v-model="selectedSearchOption" class="mr10 data-wrap"> <option value="bbsTtl">제목</option> <option value="bbsCnt">내용</option> <option value="userNm">작성자</option> <option value="bbsCls">카테고리</option> </select> <input v-model="searchKeyword" type="text" placeholder="검색하세요." @keyup.enter="boardDataSearch" /> <button type="button" @click="boardDataSearch()" title="게시글 검색"> <img src="../../../resources/img/look_t.png" alt="" /> </button> </div> <div class="flex justify-between align-center mypage mt10" style="height: calc(100% - 23rem);"> <div class="textbook big book-gray"> <div class="text "> <p class="title1">학습항목</p> </div> <div class="box flex-column" style="gap: 30px;"> <!-- 지문 --> <div class="textbook book-red"> <div class="text "> <p class="title1" style="color: #fff;">지문. 제목</p> </div> <div class="box"> <P class="title2 mt10">지문 내용</P> </div> </div> <!-- 단어 --> <div class="textbook "> <div class="text "> <p class="title1" style="color: #fff;">단어장1</p> </div> <div class="box"> <P class="title2 mt10">단어1</P> </div> </div> <!-- 문제 --> <div class="textbook book-blue"> <div class="text "> <p class="title1" style="color: #fff;">문제1</p> </div> <div class="box"> <P class="title2 mt10">문제유형</P> <P class="title2 mt10">정답</P> </div> </div> <!-- 평가 --> <div class="textbook book-navy"> <div class="text "> <p class="title1" style="color: #fff;">평가1</p> </div> <div class="box"> <P class="title2 mt10">평가 내용</P> </div> </div> </div> </div> <div class="textbook big book-gray"> <div class="text "> <p class="title1">로드맵</p> </div> <div class="box flex-column" style="gap: 10px;"> <div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div> <div class="text-ct"><svg-icon type="mdi" :path="mdilArrowDown" style="width: 40px; height: 40px; color: #8C8E92;"></svg-icon></div> <div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div> <div class="text-ct"><svg-icon type="mdi" :path="mdilArrowDown" style="width: 40px; height: 40px; color: #8C8E92;"></svg-icon></div> <div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div> </div> </div> </div> </div> <div class="flex justify-end mt30" style="gap: 10px;"> <!-- <button type="button" title="" class="new-btn" @click="showConfirm('delete')"> 추가 </button> --> <button type="button" title="" class="new-btn" @click="goToPage('TextBookDetail')"> 취소 </button> <button type="button" title="" class="new-btn" @click="goToPage('TextBookDetail')"> 등록 </button> </div> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify, mdilArrowRight } from '@mdi/js'; import { mdilArrowDown } from '@mdi/light-js'; import ProgressBar from '../../component/ProgressBar.vue'; export default { data() { return { mdilArrowDown: mdilArrowDown, 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> .search-wrap button { right: 83rem; } </style>