AIClass/src/views/evaluation/testTopic.vue

<template>
  <!-- 能力测评 -->
  <div class="home-container">
    <el-row class="test-paper">
      <el-col class="answer-sheet" span="12">
        <el-card style="min-height: 100%" shadow="hover">
          <h4>序号：</h4>
          <div class="all-serial-number">
            <el-button
              @click="handleLeft(index)"
              v-for="(item, index) in state.examDetails"
              :key="index"
              class="serial-number"
              size="mini"
              :class="{ 'yi-zuo-da': item.da.length != 0 }"
            >
              {{ index + 1 }}
            </el-button>
          </div>
          <div>
            <el-button @click="getSubmit" type="primary" plain>提 交</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col class="test-questions" span="12">
        <el-card shadow="hover">
          <div
            @click="getChenge"
            v-for="(shiTi, index) in state.examDetails"
            :key="index"
            :id="'id' + index"
            class="exam-details"
            :class="{ 'skip-style': index === state.navgatorIndex }"
          >
            <!-- 试题 -->
            <div class="shi-ti-style">
              <!-- 题目 -->
              <div>{{ index + 1 }}、{{ shiTi.timu }}</div>
              <!-- 选项 -->
              <div class="xuan-xiang-style">
                <!-- 单选 -->
                <el-radio-group
                  @input="gegegegeg(shiTi, index)"
                  v-if="shiTi.type == '单选'"
                  v-model="shiTi.da"
                >
                  <el-radio
                    v-for="(dan, danIdnex) in shiTi.xuanxiang"
                    :label="danIdnex"
                    :key="danIdnex"
                  >
                    {{ dan }}
                  </el-radio>
                </el-radio-group>
                <!-- 多选 -->
                <el-checkbox-group
                  @change="gegegegeg(shiTi, index)"
                  v-else-if="shiTi.type == '多选'"
                  v-model="shiTi.da"
                >
                  <el-checkbox
                    v-for="(duo, duoIndex) in shiTi.xuanxiang"
                    :label="duoIndex"
                    :key="duoIndex"
                  >
                    {{ duo }}
                  </el-checkbox>
                </el-checkbox-group>
                <!-- 问答 -->
                <div v-else>
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="shiTi.da"
                  />
                </div>
              </div>
            </div>
            <!-- 标记 @click="getChangMark(index)"-->
            <div class="mark-style">
              <el-tooltip
                :content="shiTi.mark ? '已标记' : '可标记'"
                placement="right"
                effect="light"
              >
                <a
                  @click="getChangMark(index)"
                  class="el-icon-star-on"
                  :class="{ mark: shiTi.mark }"
                />
              </el-tooltip>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, onMounted, onUnmounted, ref } from 'vue'
import { ElMessage } from 'element-plus'

// 定义响应式数据
const state = reactive({
  examDetails: [
    {
      timu: '《山行》是描绘了( C )的景色。',
      type: '单选',
      xuanxiang: ['A、春天', 'B、夏天', 'C、秋天', ' D、冬天'],
      // 答案存放字符串
      da: '',
      mark: false
    },
    {
      timu: '劝君更尽一杯酒，西出阳关无故人。”出自( B )的名句。',
      type: '单选',
      xuanxiang: ['A、李白', 'B、王维', 'C、王昌龄', 'D、杜牧'],
      // 答案存放字符串
      da: '',
      mark: false
    },
    {
      timu: '把“春风”比作“剪刀”的是哪首诗?( C )',
      type: '单选',
      xuanxiang: [
        'A、《忆江南》',
        'B、《滁州西涧》',
        'C、《咏柳》',
        'D、《游园不值》'
      ],
      // 答案存放字符串
      da: '',
      mark: false
    },
    {
      timu: '横看成岭侧成峰，远近高低各不一样。”诗中写的名胜是( D )。',
      type: '单选',
      xuanxiang: ['A、泰山', 'B、华山', 'C、黄山', 'D、庐山'],
      // 答案存放字符串
      da: '',
      mark: false
    },
    {
      timu: '解落三秋叶，能开二月花。过江千尺浪，入竹万竿斜。”这首诗写的是( B )。',
      type: '单选',
      xuanxiang: ['A、花', 'B、风', 'C、竹', 'D、水'],
      // 答案存放字符串
      da: '',
      mark: false
    },
    {
      timu: '以下哪些诗句出自白居易的作品？( A、C、E )',
      type: '多选',
      xuanxiang: [
        'A、春风又绿江南岸',
        'B、白日依山尽',
        'C、人生自古谁无死',
        'D、大漠孤烟直',
        'E、举杯邀明月',
        'F、月落乌啼霜满天'
      ],
      // 答案存放数组
      da: [0, 2, 4],
      mark: false
    },
    {
      timu: '以下哪些是唐代诗人？( A、B、C、E、F )',
      type: '多选',
      xuanxiang: [
        'A、杜甫',
        'B、苏轼',
        'C、白居易',
        'D、李清照',
        'E、辛弃疾',
        'F、陆游'
      ],
      // 答案存放数组
      da: [],
      mark: false
    },
    {
      timu: '以下哪些诗人被称为“唐三百首”？( A、B、C )',
      type: '多选',
      xuanxiang: ['A、李白', 'B、杜甫', 'C、白居易', 'D、苏轼', 'E、王之涣'],
      // 答案存放数组
      da: [],
      mark: false
    },
    {
      timu: '以下哪些诗人被称为“宋词四大家”？( A、B、C、D  )',
      type: '多选',
      xuanxiang: ['A、李清照', 'B、辛弃疾', 'C、苏轼', 'D、杜牧', 'E、杨万里'],
      // 答案存放数组
      da: [],
      mark: false
    },
    // {
    //   timu: '具有诗仙、诗圣、诗鬼称号的的诗人分别是谁?',
    //   type: '问答',
    //   xuanxiang: ['李白 杜甫 李贺'],
    //   // 答案存放字符串
    //   da: '',
    //   mark: false
    // },
    // {
    //   timu: '在苏轼写的《惠崇春江晚景》这首中，让我们明白了有一种味美但内脏有毒的鱼叫什么?',
    //   type: '问答',
    //   xuanxiang: ['河豚'],
    //   // 答案存放字符串
    //   da: '',
    //   mark: false
    // }
  ],
  navgatorIndex: null,
  listBoxState: true,
  isSkip: true,
  isShiTi: false,
  listBox: null
})

// DOM引用
const scrollContainer = ref(null)
let timeId = null

// 页面滚动处理函数
const handleScroll = () => {
  clearTimeout(timeId)
  timeId = setTimeout(() => {
    scrollToTop()
    console.log('执行完成')
  }, 100)
}

// 点击导航菜单滚动到指定位置
const handleLeft = index => {
  state.navgatorIndex = index
  const element = document.getElementById(`id${index}`)
  if (element) {
    element.scrollIntoView({
      top: '100px',
      behavior: 'smooth',
      block: 'center'
    })
  }
  state.listBoxState = false
  clearTimeout(timeId)
  timeId = setTimeout(() => {
    state.listBoxState = true
  }, 200)
}

// 监听页面滚动改变导航选中状态
const scrollToTop = () => {
  const scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop
  if (state.listBoxState && state.listBox) {
    state.listBox.forEach((_, i) => {
      const element = document.getElementById(`id${i}`)
      if (element) {
        const offsetTop = element.offsetTop
        const scrollHeight = element.scrollHeight
        if (scrollTop >= offsetTop && scrollTop <= offsetTop + scrollHeight) {
          state.navgatorIndex = i
        }
      }
    })
  }
}

// 标记或收藏题目
// const getChangMark = num => {
//   state.examDetails[num].mark = !state.examDetails[num].mark
// }

const gegegegeg = (val, num) => {
  console.log(val)
}

// 取消跳转样式
const getChenge = () => {
  state.navgatorIndex = null
}

// 提交答案
const getSubmit = () => {
  console.log(state.examDetails)
  const list = state.examDetails.map(item => item.da)
  console.log(list)
  ElMessage({
    message: JSON.stringify(list),
    type: 'success'
  })
}

// 生命周期钩子
onMounted(() => {
  window.addEventListener('scroll', handleScroll, true)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll, true)
  clearTimeout(timeId)
})
</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #001169, #8a78d0);
  display: flex;
  flex-direction: column;
  gap: rpx(0);
  font-size: rpx(8);
}
.test-paper {
  width: 100%;
  height: 100%;
}
:deep(.el-card__body) {
  min-height: 100%;
}
.el-card {
  border: none;
  // background: linear-gradient(to bottom, #e2ddfc, #f1effd);
}
.answer-sheet {
  width: rpx(140);
  display: inline-block;
  margin-right: rpx(5);
  text-align: left;
}
.test-questions {
  flex: 1;
  height: 100%;
  display: inline-block;
  text-align: left;
  overflow-y: auto; /* 启用垂直滚动 */
}
.test-questions .el-card::-webkit-scrollbar {
  width: rpx(2);
}
.test-questions .el-card::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
/* 具体样式：答题卡样式 */
.all-serial-number {
}
.serial-number {
  margin: rpx(5);
  width: rpx(15);
  height: rpx(15);
  font-size: rpx(8);
}
/* 具体样式：试题样式 */
.exam-details {
  margin-bottom: rpx(5);
  padding: rpx(5);
  border: 1px solid #001169;
  border-radius: rpx(5);
  height: rpx(55);
}
/* 指定跳转题目样式 */
.skip-style {
  border: 1px solid rgb(255, 0, 0);
}
.shi-ti-style {
  display: inline-block;
  // width: calc(100% - 30px);
}
/* 选项样式 */
.xuan-xiang-style {
  margin-top: rpx(10);
}
/* 标记样式 */
// .mark-style {
//   float: right;
//   text-align: center;
//   width: 30px;
// }
// .el-icon-star-on {
//   font-size: 25px;
// }
// .mark {
//   color: #f7ba2a;
// }
</style>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
/* 联动样式 */
.yi-zuo-da {
  color: #fff;
  background: dodgerblue;
}
</style>