|
|
@@ -0,0 +1,422 @@
|
|
|
+<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>
|
丸子
