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
2024-11-19
2024-11-19
<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>