测试页面

.env

@@ -2,10 +2,10 @@
 VITE_APP_TITLE=AI课程网
 
 # 请求路径
-VITE_BASE_URL='http://59.110.91.129/admin-api'
-# VITE_BASE_URL='http://192.168.110.8:8080/admin-api'
+# VITE_BASE_URL='http://59.110.91.129/admin-api'
+VITE_BASE_URL='http://192.168.110.8:8080/admin-api'
 
 # 默认账户密码
 VITE_APP_DEFAULT_LOGIN_TENANT = 博雅智算
 VITE_APP_DEFAULT_LOGIN_USERNAME = aiTest
-VITE_APP_DEFAULT_LOGIN_PASSWORD = aiTest
+VITE_APP_DEFAULT_LOGIN_PASSWORD = aiTest

src/api/question/test.js

@@ -0,0 +1,19 @@
+import axios from "@/utils/request";
+
+// 获取问卷列表
+export function QuestionList (data){
+  return axios({
+    url: "bjdxWeb/questionnaire/selectQuestionnaire",
+    method: 'get',
+    data
+  })
+}
+
+// 获取问卷试题列表
+export function QuestionTopicList (data){
+  return axios({
+    url: "bjdxWeb/questionnaire/getQuestionVoList" ,
+    method: 'get',
+    data
+  })
+}

src/components/DefaultMessage/index.vue

@@ -8,25 +8,44 @@
       class="default-message-item"
     >
       {{ msg }}
+      <el-icon><Right /></el-icon>
     </span>
   </div>
 </template>
 
 <script setup>
-import { ref,defineEmits } from 'vue'
+import { ref, defineEmits, onMounted, defineProps, watch } from 'vue'
+import { Right } from '@element-plus/icons-vue'
+import { teacherList } from '@/api/teachers'
 
-// 默认消息
-const defaultMessages = ref([
-  '什么是人工智能？',
-  '机器学习和深度学习的区别是什么？',
-  '如何使用AI生成图像？'
-])
+const props = defineProps({
+  category: {
+    type: String,
+    required: true
+  },
+  questTip: {
+    type: String,
+    required: true
+  }
+})
 
+// 默认消息
+const defaultMessages = ref([])
 // 点击时通过 emit 触发该事件并传递消息内容
 const emit = defineEmits(['select-message'])
 const useDefaultMessage = message => {
   emit('select-message', message)
 }
+
+// watch监听questTip变化
+watch(
+  () => props.questTip,
+  (newVal) => {
+    defaultMessages.value = newVal ? newVal.split(',').map(item => item.trim()) : []
+  },
+  { immediate: true } // 立即执行一次
+)
+
 </script>
 
 <style scoped lang="scss">

src/components/HomePage.vue

@@ -82,7 +82,7 @@
         <div
           class="top-sub-box"
           :style="{ backgroundImage: `url(${indexImages[2]})` }"
-           @click="notOpen()"
+           @click="goToEvaluation"
         >
           <span>能力测评</span>
         </div>
@@ -145,11 +145,11 @@ const goToAILab = () => {
 }
 
 // 能力测评
-//const goToEvaluation = () =>{
-  //router.push({
-   // path:'/evaluation'
- // })
-//}
+const goToEvaluation = () =>{
+  router.push({
+   path:'/evaluation'
+ })
+}
 
 // 添加下拉菜单选中项
 const selectedGrade = ref(localStorage.getItem('selectedGrade') || '')

src/components/LeftPanel.vue

@@ -96,6 +96,7 @@ const navigateToAI = async (group) => {
       const grade = route.query.grade || localStorage.getItem('selectedGrade')
       // 获取小学低年级AI数据
       const juniorAIRes = await teacherList({ category: grade + 'AI' })
+      console.log(juniorAIRes);
       const aiPerson = juniorAIRes.data.list.find(
         person => person.name === '小智'
       )
@@ -104,13 +105,15 @@ const navigateToAI = async (group) => {
           id: aiPerson.id,
           name: aiPerson.name,
           image: aiPerson.model2dPath,
-          message: aiPerson.systemMessage
+          message: aiPerson.systemMessage,
+          default: aiPerson.questTip
         }
         console.log(personData.value)
         router
           .push({
             path: '/ai-questions',
-            query: personData.value
+            query: personData.value,
+            category: grade + 'AI'
           })
       } else {
         console.warn('未找到名为小智的数据')

src/router/index.js

@@ -21,9 +21,14 @@ const routes = [
     path: '/ai-laboratory',
     component: () => import('../views/AILaboratory.vue')
   },
-  // 能力测评
+  // 能力测评 问卷列表
   {
     path: '/evaluation',
+    component: () => import('../views/evaluation/testList.vue')
+  },
+  // 在线测试
+   {
+    path: '/testTopic',
     component: () => import('../views/evaluation/testTopic.vue')
   },
   // 智能绘画

src/views/AIDevelop.vue

@@ -232,6 +232,13 @@
                 <div class="message-content" v-html="message.content"></div>
               </div>
             </div>
+            <!-- 弹框默认消息 -->
+            <DefaultMessage  
+              class="default-messages"
+              :category="'ai_develop'" 
+              :questTip="course.courseConfigList && course.courseConfigList[0] ? course.courseConfigList[0].ccAiQuestTip : ''" 
+              @select-message="handleSelectMessage"
+            />
             <el-input
               v-model="userMessage"
               placeholder="输入问题..."
@@ -239,7 +246,7 @@
               @keyup.enter="sendMessage"
             >
               <template #append class="flex flex-wrap items-center mb-4">
-                <!--              <el-button @click="sendMessage" class="child-button confirm">发送</el-button>-->
+                <!-- <el-button @click="sendMessage" class="child-button confirm">发送</el-button>-->
                 <el-button @click="sendMessage" size="large" round
                   >发送</el-button
                 >
@@ -273,8 +280,13 @@ import auto from '@/assets/icon/auto_awesome.png'
 import { ClassType } from '@/api/class.js'
 import { Message } from '@/utils/message/Message.js'
 
-// import Hls from 'hls.js'
-// let hls = null
+import DefaultMessage from '@/components/DefaultMessage/index.vue'
+// 处理选择的默认消息
+const handleSelectMessage = (message) => {
+  userMessage.value = message;
+}
+ 
+
 
 const router = useRouter() // 获取当前路由对象
 
@@ -320,8 +332,8 @@ onMounted(async () => {
     try {
       // 取接口课程数据
       const res = await ClassType(typeId)
+      console.log(res);
       courseList.value = res.data
-
       //课程数据
       courseList.value.forEach((courseTemp, index) => {
         let menuIndex = courseTemp.courseLabel + '-' + (index + 1)
@@ -639,7 +651,6 @@ const handleAIClick = () => {
     sendMessage()
     userMessage.value = ''
   }
-
   showAIDialog.value = true
 }
 
@@ -1417,6 +1428,7 @@ video::-webkit-media-controls-panel {
   overflow-y: auto;
   margin-bottom: rpx(15);
   // 可以根据实际情况调整最大高度
+  font-size: rpx(5);
   max-height: 50vh;
   // padding: 5px 10px;
 
@@ -1443,7 +1455,7 @@ video::-webkit-media-controls-panel {
 
     .message-content {
       background-color: #ffffff;
-      font-size: rpx(10);
+      font-size: rpx(5);
       max-width: 80%;
       color: black;
       box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
@@ -1491,7 +1503,7 @@ video::-webkit-media-controls-panel {
       background-color: white;
       padding: rpx(8) rpx(12);
       border-radius: rpx(5);
-      font-size: rpx(10);
+      font-size: rpx(8);
       color: black;
       max-width: 80%;
       box-shadow: 0 rpx(1) rpx(3) rgba(0, 0, 0, 0.05);
@@ -1547,3 +1559,15 @@ video::-webkit-media-controls-panel {
   background: linear-gradient(to bottom, #ffefb0, #ffcc00);
 }
 </style>
+
+<style scoped lang="scss">
+@use 'sass:math';
+// 定义rpx转换函数
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+.default-messages{
+  margin-top: rpx(-10);
+  margin-bottom: rpx(5);
+}
+</style>

src/views/AIGeneralCourse.vue

@@ -185,7 +185,6 @@ const classOutlineData = ref([])
 const fetchCtTypes = async () => {
   try {
     const response = await ClassList()
-    console.log(response)
     if (response.code === 0) {
       classData.value = response.data
       // 获取到数据，优先从localStorage读取选中值
@@ -199,6 +198,7 @@ const fetchCtTypes = async () => {
         classData.value[0]
       if (selectedItem) {
         ClassOutline(selectedItem.id).then(res => {
+          console.log(res);
           if (res.code === 0) {
             classOutlineData.value = res.data
           }

src/views/AILaboratory.vue

@@ -20,7 +20,7 @@
     </div>
 
     <!-- 侧边栏组件 -->
-      <LeftPanel ref="leftPanelRef" v-show="drawerVisible"/>
+    <LeftPanel ref="leftPanelRef" v-show="drawerVisible" />
 
     <!-- 右侧数字人 -->
     <div class="number-people">
@@ -51,7 +51,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import {
   Document,
   Menu as IconMenu,
@@ -91,31 +91,34 @@ import painting from '@/assets/icon/painting.png'
 import human from '@/assets/icon/human.png'
 
 // 数字人接口
+const grade = ref('')
 const peopleList = ref([])
 onMounted(async () => {
   try {
-     const grade = route.query.grade || localStorage.getItem('selectedGrade')
-     console.log(grade);
+    grade.value = route.query.grade || localStorage.getItem('selectedGrade')
+    console.log(grade)
     // 获取小学低年级数据
-    const juniorRes = await teacherList({ category:  grade })
-    console.log(juniorRes);
+    const juniorRes = await teacherList({ category: grade.value })
+    console.log(juniorRes)
     peopleList.value = juniorRes.data.list.map(person => ({
       id: person.id,
       name: person.name,
       image: person.model2dPath,
-      message: person.systemMessage
+      message: person.systemMessage,
+      default: person.questTip
     }))
+    console.log(peopleList.value)
   } catch (error) {
     console.error('获取小学低年级数据失败:', error)
   }
 })
 
-
 // 跳转页面携带名字和人物形象
-const navigateToAIQuestions = (person) => {
+const navigateToAIQuestions = person => {
   router.push({
     path: '/ai-questions',
-    query: person
+    query: person,
+    category: grade.value
   })
 }
 

src/views/AIQuestions.vue

@@ -56,10 +56,12 @@
               </div>
             </div>
             <!-- 默认消息 -->
-            <!-- <DefaultMessage
+            <DefaultMessage
               v-if="showDefaultMessages"
               @select-message="handleDefaultMessageSelect"
-            /> -->
+              :category="route.query.category"
+              :quest-tip="route.query.default"
+            />
             <!-- 输入框和发送按钮 -->
             <div class="input-section">
               <input
@@ -97,7 +99,7 @@ import {
   User
 } from '@element-plus/icons-vue'
 
-// import DefaultMessage from '@/components/DefaultMessage/index.vue'
+import DefaultMessage from '@/components/DefaultMessage/index.vue'
 
 // 导入图片
 // import question from '@/assets/icon/question.png'
@@ -108,12 +110,12 @@ import LeftPanel from '@/components/LeftPanel.vue'
 const leftPanelRef = ref(null)
 
 // 默认消息控制
-// const showDefaultMessages = ref(true)
-// const handleDefaultMessageSelect = message => {
-//   prompt.value = message
-//   handleSendByButton()
-//   showDefaultMessages.value = false
-// }
+const showDefaultMessages = ref(true)
+const handleDefaultMessageSelect = message => {
+  prompt.value = message
+  handleSendByButton()
+  showDefaultMessages.value = false
+}
 
 // 添加抽屉显示状态
 const drawerVisible = ref(true)

src/views/evaluation/testList.vue

@@ -0,0 +1,116 @@
+<template>
+  <!-- 问卷列表 -->
+  <div class="test-list">
+    <div class="box-title">
+      <el-icon><ArrowLeftBold /></el-icon>
+      能力测评
+    </div>
+    <div class="test-card">
+      <!-- 列表 -->
+      <div class="test-item">
+        <!-- 问卷标题 -->
+        <div
+          class="test-title"
+          @click="handleClick(item.id)"
+          v-for="item in testList"
+          :key="item.id"
+        >
+          {{ item.bqQuestionnaire }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { QuestionList } from '@/api/question/test.js'
+import { ArrowLeftBold } from '@element-plus/icons-vue'
+
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+// 点击进入试题携带列表id
+const handleClick = (id) => {
+  router.push({
+    path: '/testTopic',
+    query: {
+      id: id
+    }
+  })
+}
+
+// 问卷列表
+const testList = ref([])
+onMounted(() => {
+  QuestionList().then(res => {
+    console.log(res)
+    testList.value = res.data.list
+    console.log(testList.value)
+  })
+})
+
+// 搜索
+const SearchInput = ref('')
+</script>
+
+<style scoped lang="scss">
+@use 'sass:math';
+// 定义rpx转换函数
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+.test-list {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #e2ddfc;
+  display: flex;
+  flex-direction: column;
+  gap: rpx(0);
+}
+.box-title{
+  width: 100%;
+  height: rpx(30);
+  font-size: rpx(10);
+  cursor: pointer;
+  color: black;
+  display: flex; /* 设置flex布局 */
+  align-items: center; /* 垂直居中 */
+  padding-left: rpx(15); /* 添加左侧内边距 */
+  gap: rpx(5); /* 设置图标和文字间距 */
+}
+.test-card {
+  width: 100%;
+  height: 100%;
+}
+.test-item {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: row; /* 改为横向排列 */
+  flex-wrap: wrap; /* 添加自动换行 */
+  overflow-y: auto;
+  gap: rpx(10);
+  padding: rpx(10); /* 添加内边距 */
+}
+.test-title {
+  width: rpx(130); // 增加宽度以容纳文本
+  text-overflow: ellipsis; // 文本溢出时显示省略
+  height: rpx(80);
+  margin: rpx(11);
+  border-radius: rpx(5);
+  border: 1px solid white;
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  padding: 0 rpx(10);
+  display: flex;
+  align-items: center;
+  justify-content: center; /* 添加水平居中 */
+}
+.test-title:hover {
+  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.418);
+}
+</style>

src/views/evaluation/testTopic.vue

@@ -1,311 +1,174 @@
 <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 class="test-topic">
+    <!-- 测试标题 -->
+    <div class="test-title" @click="handleClick">
+      <el-icon><ArrowLeftBold /></el-icon>
+      在线测试
+    </div>
+    <!-- 测试内容 -->
+    <div class="test-content">
+      <!-- 左侧  题目 -->
+      <div class="content-left">
+        <div class="question-container">
+          <!-- 添加题目进度显示 -->
+          <div class="question-progress">
+            第 {{ currentQuestionIndex + 1 }}/{{ questions.length }} 题
           </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"
+          <!-- 添加题目内容 -->
+          <div class="question-content">
+            <!-- 题目 -->
+            <div class="question-title" v-html="questions[currentQuestionIndex]?.qcontent"></div>
+            <!-- 选项 -->
+            <div class="question-options">
+              <el-radio-group
+                v-model="selectedOption"
+                size="large"
+                class="radio-button-group custom-radio-group"
+              >
+                <el-radio-button
+                  v-for="(option, index) in questions[currentQuestionIndex]?.questionOptionsList || []"
+                  :key="option.oid"
+                  :label="option.ovalue"
+                  >{{ option.ovalue }}. {{ option.oname }}</el-radio-button 
                 >
-                  <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>
+              </el-radio-group>
             </div>
-            <!-- 标记 @click="getChangMark(index)"-->
-            <div class="mark-style">
-              <el-tooltip
-                :content="shiTi.mark ? '已标记' : '可标记'"
-                placement="right"
-                effect="light"
+          </div>
+          <!-- 添加题目导航按钮盒子 -->
+          <div class="question-navigation">
+            <el-button
+              type="text"
+              border
+              class="prev-question-btn"
+              @click="handlePrevQuestion"
+              >上一题</el-button
+            >
+            <!-- 修改下一题按钮样式 -->
+            <el-button
+              type="primary"
+              class="next-question-btn"
+              @click="handleNextQuestion"
+              >下一题</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 右侧答题卡 -->
+      <div class="content-right">
+        <div class="center-box">
+          <div class="box-title">答题卡</div>
+          <div class="box-content">
+            <div class="number-buttons">
+              <el-button
+                v-for="num in questions.length"
+                :key="num"
+                class="circle-btn"
+                :class="{ clicked: clickedNumbers.includes(num) }"
+                @click="handleButtonClick(num)"
+                >{{ num }}</el-button
               >
-                <a
-                  @click="getChangMark(index)"
-                  class="el-icon-star-on"
-                  :class="{ mark: shiTi.mark }"
-                />
-              </el-tooltip>
             </div>
           </div>
-        </el-card>
-      </el-col>
-    </el-row>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, onMounted, onUnmounted, ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ref,watch ,onMounted} from 'vue'
+import { ArrowLeftBold } from '@element-plus/icons-vue'
+import { useRouter,useRoute } from 'vue-router'
 
-// 定义响应式数据
-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
-})
+import { QuestionTopicList } from '@/api/question/test.js'
 
-// DOM引用
-const scrollContainer = ref(null)
-let timeId = null
+const router = useRouter()
+const route = useRoute()
 
-// 页面滚动处理函数
-const handleScroll = () => {
-  clearTimeout(timeId)
-  timeId = setTimeout(() => {
-    scrollToTop()
-    console.log('执行完成')
-  }, 100)
-}
+const selectedOption = ref(null)
+const clickedNumbers = ref([])
+// 当前题目索引
+const currentQuestionIndex = ref(0)
+const userAnswers = ref([]) // 存储用户答案
 
-// 点击导航菜单滚动到指定位置
-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 handleClick = () => {
+  router.push({
+    path: '/evaluation',
+  })
 }
 
-// 监听页面滚动改变导航选中状态
-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 questions = ref([
+])
+
+onMounted(()=>{
+  // 获取路由参数中的id
+  const id = route.query.id
+  console.log(id);
+  if (id) {
+    // 将id作为参数传递给QuestionTopicList接口
+    QuestionTopicList({ qrId: id }).then(res=>{
+      console.log(res);
+      // 将接口返回的题目数据赋值给questions
+      questions.value = res.data.questionList || []
+     // 初始化currentQuestionIndex，防止越界
+      if (questions.value.length > 0) {
+        currentQuestionIndex.value = 0
       }
+      console.log(questions.value);
+    }).catch(err => {
+      console.error('获取题目失败:', err)
     })
   }
-}
-
-// 标记或收藏题目
-// const getChangMark = num => {
-//   state.examDetails[num].mark = !state.examDetails[num].mark
-// }
+})
 
-const gegegegeg = (val, num) => {
-  console.log(val)
+// 上一题按钮逻辑
+const handlePrevQuestion = () => {
+  if (currentQuestionIndex.value > 0) {
+    // 保存当前题目的答案
+    userAnswers.value[currentQuestionIndex.value] = selectedOption.value;
+    currentQuestionIndex.value--;
+    // 加载上一题的答案
+    selectedOption.value = userAnswers.value[currentQuestionIndex.value] || null;
+  }
 }
 
-// 取消跳转样式
-const getChenge = () => {
-  state.navgatorIndex = null
+// 下一题按钮逻辑
+const handleNextQuestion = () => {
+  if (currentQuestionIndex.value < questions.value.length - 1) {
+    // 保存当前题目的答案
+    userAnswers.value[currentQuestionIndex.value] = selectedOption.value;
+    currentQuestionIndex.value++;
+    // 加载下一题的答案
+    selectedOption.value = userAnswers.value[currentQuestionIndex.value] || 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'
-  })
+// 答题卡
+const handleButtonClick = (num) => {
+  // 切换到对应题目
+  currentQuestionIndex.value = num - 1
+  // 加载该题目的答案
+  selectedOption.value = userAnswers.value[currentQuestionIndex.value] || null
+  // 答题卡选中状态切换逻辑
+  // if (clickedNumbers.value.includes(num)) {
+  //   clickedNumbers.value = clickedNumbers.value.filter(n => n !== num)
+  // } else {
+  //   clickedNumbers.value.push(num)
+  // }
 }
-
-// 生命周期钩子
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll, true)
+// 监听选项变化，自动更新答题卡状态
+watch(selectedOption, (newVal) => {
+  if (newVal !== null) {
+    const currentQuestionNumber = currentQuestionIndex.value + 1
+    // 保存当前题目的答案
+    userAnswers.value[currentQuestionIndex.value] = newVal
+    if (!clickedNumbers.value.includes(currentQuestionNumber)) {
+      clickedNumbers.value.push(currentQuestionNumber)
+    }
+  }
 })
 
-onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll, true)
-  clearTimeout(timeId)
-})
 </script>
 
 <style scoped lang="scss">
@@ -314,109 +177,210 @@ onUnmounted(() => {
 @function rpx($px) {
   @return math.div($px, 750) * 100vw;
 }
-.home-container {
+.test-topic {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(to bottom, #001169, #8a78d0);
   display: flex;
   flex-direction: column;
+  background-color: #e2ddfc;
   gap: rpx(0);
-  font-size: rpx(8);
 }
-.test-paper {
+.test-title {
+  width: 100%;
+  height: rpx(30);
+  font-size: rpx(10);
+  cursor: pointer;
+  color: black;
+  display: flex; /* 设置flex布局 */
+  align-items: center; /* 垂直居中 */
+  padding-left: rpx(15); /* 添加左侧内边距 */
+  gap: rpx(5); /* 设置图标和文字间距 */
+}
+.test-content {
   width: 100%;
   height: 100%;
+  display: flex; /* 使用flex布局使子元素并排 */
+  gap: rpx(10); /* 左右盒子间距 */
 }
-:deep(.el-card__body) {
-  min-height: 100%;
+// 左侧盒子样式  题目
+.content-left {
+  flex: 1.5;
+  border-radius: rpx(5);
+  padding: rpx(10);
 }
-.el-card {
-  border: none;
-  // background: linear-gradient(to bottom, #e2ddfc, #f1effd);
+.question-container {
+  width: 100%;
+  height: 100%;
+  padding-left: rpx(40);
+  box-sizing: border-box;
+  position: relative; // 相对定位
 }
-.answer-sheet {
-  width: rpx(140);
-  display: inline-block;
-  margin-right: rpx(5);
+/* 添加题目进度样式 */
+.question-progress {
+  font-size: rpx(12);
+  font-weight: bold;
+  color: #9e78e7;
   text-align: left;
 }
-.test-questions {
-  flex: 1;
-  height: 100%;
-  display: inline-block;
-  text-align: left;
-  overflow-y: auto; /* 启用垂直滚动 */
+// 题目
+.question-content {
+  // margin-top: 20px;
+  ::v-deep(.el-radio-button) {
+    // 添加选项选中状态样式
+    &.is-active .el-radio-button__inner {
+      background-color: #9e78e7;
+      border-color: #9e78e7;
+      color: white;
+    }
+  }
 }
-.test-questions .el-card::-webkit-scrollbar {
-  width: rpx(2);
+.question-title {
+  font-size: rpx(12);
+  text-align: left;
+  color: black;
+  margin-bottom: 15px;
+  line-height: 1.5;
 }
-.test-questions .el-card::-webkit-scrollbar-thumb {
-  background-color: #ddd;
-  border-radius: 3px;
+.question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
-</style>
-
-<style scoped lang="scss">
-@use 'sass:math';
-// 定义rpx转换函数
-@function rpx($px) {
-  @return math.div($px, 750) * 100vw;
+.radio-button-group {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  gap: 10px;
 }
-/* 具体样式：答题卡样式 */
-.all-serial-number {
+.el-radio-button {
+  width: 100%;
+  margin-top: rpx(10);
+  justify-content: flex-start;
 }
-.serial-number {
-  margin: rpx(5);
-  width: rpx(15);
-  height: rpx(15);
+.el-radio-button ::v-deep(.el-radio-button__inner) {
+  width: fit-content; //按钮宽度跟随文字多少变化
+  height: rpx(25);
+  display: flex;
+  align-items: center;
+  text-align: left;
   font-size: rpx(8);
+  border-radius: rpx(5);
+  color: black;
+  border: 1px solid white;
+  background: rgb(255, 255, 255, 0.5);
 }
-/* 具体样式：试题样式 */
-.exam-details {
-  margin-bottom: rpx(5);
-  padding: rpx(5);
-  border: 1px solid #001169;
+// 上一题 下一题按钮
+/* 添加导航按钮样式 */
+.question-navigation {
+  display: flex;
+  margin-top: rpx(20); // 与题目内容保持间距
+  // 绝对定位到底部
+  position: absolute;
+  bottom: rpx(25);
+  left: rpx(40);
+  right: 0;
+  // 上一题按钮样式
+  ::v-deep(.prev-question-btn) {
+    border: 1px solid #9e78e7; // 添加边框
+    color: #9e78e7; // 设置文字颜色
+    font-size: rpx(8);
+    background-color: transparent; // 透明背景
+    &:hover {
+      background-color: #9e78e7; //  hover效果
+      color: white;
+    }
+  }
+  // 下一题按钮样式
+  ::v-deep(.next-question-btn) {
+    background-color: #9e78e7; // 更换为紫色
+    border-color: #9e78e7;
+    font-size: rpx(8);
+    &:hover {
+      background-color: #8a63d2; // hover加深颜色
+      border-color: #8a63d2;
+    }
+  }
+}
+.question-navigation .el-button {
+  width: rpx(80); // 固定按钮宽度
+  height: rpx(20);
   border-radius: rpx(5);
-  height: rpx(55);
 }
-/* 指定跳转题目样式 */
-.skip-style {
-  border: 1px solid rgb(255, 0, 0);
+
+// 右侧盒子样式  答题卡
+.content-right {
+  flex: 1;
+  border-radius: rpx(5);
+  padding: rpx(10);
+  display: flex; /* 使用flex布局 */
+  flex-direction: column; /* 垂直方向排列 */
+  align-items: center; /* 水平居中 */
+  justify-content: center; /* 垂直居中 */
 }
-.shi-ti-style {
-  display: inline-block;
-  // width: calc(100% - 30px);
+// 答题卡
+.center-box {
+  width: rpx(200); /* 宽度 */
+  height: 100%; /* 高度 */
+  background-color: #fefefe80;
+  border-radius: rpx(5);
+  border: 1px solid white;
+  display: flex;
+  flex-direction: column; /* 垂直排列子元素 */
+  padding: rpx(10);
+  gap: rpx(5); /* 标题和内容间距 */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
-/* 选项样式 */
-.xuan-xiang-style {
-  margin-top: rpx(10);
+// 标题盒子样式
+.box-title {
+  width: 100%;
+  height: rpx(20);
+  font-size: rpx(11);
+  font-weight: bold;
+  border-radius: rpx(3);
+  line-height: rpx(20);
 }
-/* 标记样式 */
-// .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;
+// 内容盒子样式
+.box-content {
+  height: 100%;
+  border-radius: rpx(3);
+  padding: rpx(5);
+  overflow: auto; /* 内容溢出时显示滚动条 */
+}
+// 数字按钮容器
+.number-buttons {
+  display: flex;
+  justify-content: flex-start; // 将center改为flex-start实现左对齐
+  gap: rpx(8);
+  flex-wrap: wrap; // 添加换行属性
+}
+
+// 圆形按钮样式
+.circle-btn {
+  width: rpx(25);
+  height: rpx(25);
+  margin-left: 0;
+  border-radius: 50%; // 圆形显示
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: rpx(10);
+  background-color: transparent;
+  border: 1px solid white;
+  color: #909090;
+  min-width: auto; // 移除Element Plus按钮默认最小宽度
+}
+
+.circle-btn:focus,
+.circle-btn:active,
+.circle-btn.clicked {
+  color: white;
+  background-color: #9e78e7;
 }
-/* 联动样式 */
-.yi-zuo-da {
-  color: #fff;
-  background: dodgerblue;
+.circle-btn:hover{
+  border: 2px solid #9e78e7;
 }
 </style>