student-client/src/features/OnlineExam/Examing/ExamingHome.vue

<template>
  <div class="container">
    <div class="header">
      <RemainTime></RemainTime>
      <OverallProgress :exam-question-list="examQuestionList"></OverallProgress>
      <QuestionFilters :exam-question-list="examQuestionList"></QuestionFilters>
      <Button class="qm-primary-button">交卷</Button>
    </div>
    <div class="main">
      <QuestionView :exam-question="examQuestion"></QuestionView>
    </div>
    <div class="side">
      <div class="question-nav">
        question nav
      </div>
      <div class="camera">
        camera
      </div>
    </div>
  </div>
</template>

<script>
import RemainTime from "./RemainTime.vue";
import OverallProgress from "./OverallProgress.vue";
import QuestionFilters from "./QuestionFilters.vue";
import QuestionView from "./QuestionView.vue";

export default {
  data() {
    return {
      exam: null,
      paperStruct: null,
      examQuestionList: [],
      examQuestion: null
    };
  },
  async mounted() {
    const exam = await this.$http.get(
      "/api/ecs_exam_work/exam/" + this.$route.params.examId
    );
    this.exam = exam.data;

    const paperStruct = await this.$http.get(
      "/api/exam_question/paper_struct/?exam_record_id=" +
        this.$route.query.examRecordId
    );
    this.paperStruct = paperStruct.data;

    // FIXME: global API processing. mock or not
    const examQuestionList = await this.$http.get(
      "/api/mock/exam_question/?exam_record_id=" +
        this.$route.query.examRecordId
    );
    this.examQuestionList = examQuestionList.data;
    this.examQuestion = this.examQuestionList[0];
  },
  components: {
    RemainTime,
    OverallProgress,
    QuestionFilters,
    QuestionView
  }
};
</script>

<style scoped>
.container {
  /* display: flex;
  flex-direction: row; */
  display: grid;
  grid-template-areas:
    "header header"
    "main side";
  grid-template-rows: 80px 1fr;
  grid-template-columns: 1fr 300px;

  height: 100vh;
}
.header {
  /* display: flex;
  flex-direction: row; */
  display: grid;
  place-items: center;
  grid-template-columns: 200px 1fr 300px 100px;

  grid-area: header;

  height: 80px;
}

.main {
  display: grid;

  grid-area: main;
}

.side {
  display: grid;

  grid-area: side;
}
</style>