<template> <div class="title-box flex justify-between mb40"> <p class="title">문제 등록</p> </div> <div class="board-wrap"> <div class="tab-box" > <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab1" /> 문제 유형 (일반형) </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab2" /> 문제 유형 (O,X형) </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab3" /> 문제 유형 (연결형) </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab4" /> 문제 유형 (다중 정답형) </label> </div> <hr> <div class="gd-col2 " > <div class="flex align-center mb20"> <label for="" class="title2">카테고리</label> <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> </div> <div class="flex align-center mb20"> <label for="" class="title2">문제 유형</label> <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> </div> <div class="flex align-center"> <label for="" class="title2">지문</label> <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> </div> <div class="flex align-center"> <label for="" class="title2">문제 지표</label> <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> </div> </div> <div class="flex align-center mb20 mt40"> <label for="" class="title2">문제 배점</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">내용</label> <textarea name="" id="" class="data-wrap"></textarea> </div> <div class="flex align-center mb20"> <label for="" class="title2">힌트</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">첨부파일</label> <input type="file" ref="fileInput" @change="handleFileUpload" /> </div> <hr> <div v-if="selectedTab === 'tab1'"> <div class="flex align-center mb20"> <label for="" class="title2">답1</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답2</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답3</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답4</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">해설</label> <textarea name="" id="" class="data-wrap"></textarea> </div> </div> <div v-else-if="selectedTab === 'tab2'"> <div class="flex align-center mb20"> <label for="" class="title2">답</label> <select v-model="selectedSearchOption" class="mr10 data-wrap"> <option value="bbsTtl">O</option> <option value="bbsCnt">X</option> </select> </div> <div class="flex align-center mb20"> <label for="" class="title2">해설</label> <textarea name="" id="" class="data-wrap"></textarea> </div> </div> <div v-else-if="selectedTab === 'tab3'"> <div class="gd-col2 " > <div class="flex align-center mb20 mr40" > <label for="" class="title2">문제1</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답1</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제2</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답2</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제3</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20 "> <label for="" class="title2">답3</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제4</label> <input type="text" class="data-wrap"> </div> <div class="flex align-center mb20"> <label for="" class="title2">답4</label> <input type="text" class="data-wrap"> </div> </div> <div class="flex align-center mb20"> <label for="" class="title2">해설</label> <textarea name="" id="" class="data-wrap"></textarea> </div> </div> <div v-else-if="selectedTab === 'tab4'"> <div class="flex align-center mb20 mr40" > <label for="" class="title2">문제1</label> <input type="text" class="data-wrap"> <input type="checkbox" class="ui-checkbox ml30"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제2</label> <input type="text" class="data-wrap"> <input type="checkbox" class="ui-checkbox ml30"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제3</label> <input type="text" class="data-wrap"> <input type="checkbox" class="ui-checkbox ml30"> </div> <div class="flex align-center mb20 mr40"> <label for="" class="title2">문제4</label> <input type="text" class="data-wrap"> <input type="checkbox" class="ui-checkbox ml30"> </div> <div class="flex align-center mb20"> <label for="" class="title2">해설</label> <textarea name="" id="" class="data-wrap"></textarea> </div> </div> </div> <div class="flex justify-between mt50"> <button type="button" title="글쓰기" class="new-btn" @click="goToPage('QuestionList')"> 목록 </button> <div class="flex"> <button type="button" title="글쓰기" class="new-btn mr10"> 취소 </button> <button type="button" title="글쓰기" class="new-btn"> 등록 </button> </div> </div> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify } from '@mdi/js'; export default { data() { return { mdiMagnify: mdiMagnify, selectedTab: 'tab1', } }, methods: { goToPage(page) { this.$router.push({ name: page }); }, }, watch: { }, computed: { }, components: { SvgIcon }, mounted() { console.log('Main2 mounted'); } } </script> <style scoped> .ui-checkbox{width: 30px; height: 30px;} </style>