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="wrap mb30">
<label for="" class="title1">학습 현황</label>
<div class="flex justify-between mt30" style="gap: 50px;">
<div class="wrap-bg flex">
<img src="../../../resources/img/img16_s.png" alt="">
<div class="ml25" style="width: 100%;">
<p class="name mb10">김</p>
<p class="mb5">xx중학교 3학년 x반</p>
</div>
</div>
<div class="wrap-bg ">
<p class="title1">평균 성적</p>
<div style="width: 100%;" class="flex mt30">
<p class="title5"><em class="yellow">93</em></p>
<p class="title4 ml10 mr10">/</p>
<p class="title4">100</p>
</div>
</div>
<div class="wrap-bg flex ">
<div class="mr50">
<p class="title1 mb30">총 학습 시간</p>
<p class="second">{{ timer }}</p>
</div>
<div>
<p class="title1 mb30">남은 시간</p>
<p class="second">{{ timer }}</p>
</div>
</div>
</div>
</div>
<div class="wrap mb30">
<details>
<summary>진도율
</summary>
<div class="tpt flex justify-between align-center">
<p class="title2">종합 진도율 :</p>
<progress-bar :progress="progress"></progress-bar><span class="brown ">{{ progress }}%</span>
</div>
<div class="tpt flex justify-between align-center">
<p class="title2">교재1 진도율 :</p><progress-bar :progress="progress"></progress-bar><span class="brown ">{{
progress }}%</span>
</div>
<div class="tpt flex justify-between align-center">
<p class="title2">교재2 진도율 :</p><progress-bar :progress="progress"></progress-bar><span class="brown ">{{
progress }}%</span>
</div>
<div class="tpt flex justify-between align-center">
<p class="title2">교재3 진도율 :</p><progress-bar :progress="progress"></progress-bar><span class="brown ">{{
progress }}%</span>
</div>
</details>
</div>
<div class="wrap mb30">
<details>
<summary>단원별 오답률</summary>
<div class="tpt">
<div class="table-wrap">
<table>
<thead>
<td>단원</td>
<td>문제수</td>
<td>정답</td>
<td>오답률</td>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
</div>
<div class="wrap mb30">
<details>
<summary>학습 코스</summary>
<div class="tpt">
<div class="table-wrap">
<table>
<thead>
<td>단원</td>
<td>문제수</td>
<td>정답</td>
<td>오답률</td>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
</div>
<div class="flex justify-end ">
<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 ProgressBar from '../../component/ProgressBar.vue';
export default {
data() {
return {
mdiMagnify: mdiMagnify,
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>