File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<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>