mental-health-student/src/views/Exam/index.vue

<template>
  <el-container class="container-exam">
    <el-header class="header">
      SCL-90症状自评量表_专业焦虑与抑郁测试
    </el-header>
    <el-main class="main">
      <el-card class="card">
        <template #header>
          <div class="card-header">
            <p>症状自评量表-SCL90是世界上最著名的心理健康测试量表之一，是当前使用最为广泛的精神障碍和心理疾病门诊检查量表。SCL90协助我们从十个方面来了解自己的心理健康程度。</p>
            <p>症状自评量表（Self-reporting
              Inventory)，又名90项症状清单（SCL-90），时也叫做Hopkin's症状清单（HSCL，编制年代早于SCL-90，作者为同一人，HCSL最早版编于1954年）。于1975年编制，其作者是德若伽提斯（L.R.Derogatis)。该量表共有90个项目，包含有较广泛的精神病症状学内容，从感觉、情感、思维、意识、行为直至生活习惯、人际关系、饮食睡眠等，均有涉及，并采用10个因子分别反映10个方面的心理症状情况。
            </p>
          </div>
        </template>

        <div class="subject-btn">
          <el-button-group>
            <el-button type="primary" size="large" @click="previous" :disabled="preDisable">
              <el-icon class="el-icon--left">
                <ArrowLeft />
              </el-icon>上一题
            </el-button>
            <el-button type="primary" size="large" @click="next" :disabled="nextDisable">
              下一题<el-icon class="el-icon--right">
                <ArrowRight />
              </el-icon>
            </el-button>
          </el-button-group>
        </div>

        <div class="subject-content">
          <div class="subject-title">{{ questionNum + 1 + '、' + currentQuestion.question }}</div>
          <el-radio-group v-model="currentQuestion.answer">
            <el-radio :value="item.value" v-for="item in currentQuestion.options" :key="item.id">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </div>

        <template #footer v-if="nextDisable">
          <div class="submit-footer">
            <el-button class="submit-btn" type="primary" size="large">提交</el-button>
          </div>
        </template>

      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, computed } from 'vue'

const questionList = ref([
  {
    id: 1,
    question: '是否头疼',
    options: [
      { id: 1, name: '没有', value: 1 },
      { id: 2, name: '很轻', value: 2 },
      { id: 3, name: '中等', value: 3 },
      { id: 4, name: '偏重', value: 4 },
      { id: 5, name: '严重', value: 5 },
      { id: 6, name: '一般般', value: 6 },
    ],
    answer: null
  },
  {
    id: 2,
    question: '经常感到神经过敏、心中不踏实',
    options: [
      { id: 1, name: '没有', value: 1 },
      { id: 2, name: '很轻', value: 2 },
      { id: 3, name: '中等', value: 3 },
      { id: 4, name: '偏重', value: 4 },
      { id: 5, name: '严重', value: 5 },
    ],
    answer: null
  },
  {
    id: 3,
    question: '测试',
    options: [
      { id: 1, name: '没有', value: 1 },
      { id: 2, name: '很轻', value: 2 }
    ],
    answer: null
  }
])
const currentQuestion = ref(questionList.value[0])

const questionNum = ref(0)

const preDisable = computed(() => {
  return questionNum.value === 0
})

function previous() {
  questionNum.value--
  if (questionNum.value <= 0) {
    questionNum.value = 0
  }

  currentQuestion.value = questionList.value[questionNum.value]
}

const nextDisable = computed(() => {
  return questionNum.value === questionList.value.length - 1
})

function next() {
  questionNum.value++

  if (questionNum.value >= questionList.value.length) {
    questionNum.value = questionList.value.length
  }

  currentQuestion.value = questionList.value[questionNum.value]
}
</script>

<style lang="scss" scoped>
.container-exam {
  height: 100vh;

  .header {
    height: 60px;
    color: #CDCDCD;
    background-color: #333333;
    text-align: center;
    font-size: 20px;
    padding-top: 15px;
  }

  .main {
    width: 60%;
    height: calc(100vh - 60px);
    margin: 0 auto;

    .card {
      height: 100%;

      .card-header {
        text-indent: 2em;
        font-size: 14px;
        line-height: 28px;
      }

      .subject-btn {
        text-align: center;
      }

      .submit-footer {
        text-align: center;

        .submit-btn {
          width: 200px;
        }
      }

      .subject-content {
        margin-left: 50px;
        margin-top: 10px;
        height: 400px;

        ::v-deep .el-radio-group {
          display: block;
        }

        ::v-deep .el-radio {
          display: block;
          margin: 10px;
        }

        .subject-title {
          color: #0F9AE0;
          font-size: 18px;
          font-weight: bold;
        }

        ::v-deep .el-radio__label {
          font-size: 18px;
          font-weight: bold;
          padding-left: 8px;
        }
      }
    }
  }
}
</style>