添加答题操作交互和线上答题显示

src/views/targetImprove/practice/practiceResults/answerAnalysis.vue

@@ -60,6 +60,8 @@ export default ({
 
   // 答案解析区域
 .answer_analysis{
+    border-top: 1px solid #DCDFE6;
+
     padding: 16px;
     display: flex;
     flex-direction: column;

src/views/targetImprove/practice/practiceResults/practiceDetail.vue

@@ -26,7 +26,7 @@
             </div>
 
             <ul class="question_detail_list">
-                <li v-for="(item,index) in 2" :key="item">
+                <li v-for="(item,index) in questionList"  :key="item.id">
                     <!-- 题目区域 -->
                     <div class="question_area">
                         <div class="question_header">
@@ -81,28 +81,25 @@
                     </div>
 
                     <!-- 功能按钮 -->
-                    <div class="action_buttons">
-                        <span class="action_btn ai_lecture_btn">
+                    <div class="action_buttons" :class="{border_bottom_radius:item.operationType == 'ai'}">
+                        <span class="action_btn" :class="{'ai_lecture_btn':item.operationType=='ai'}" @click="questionOperationTrigger(item,'ai')">
                             <img :src="aiIcon" alt="">
                             AI讲题
                         </span>
-                        <span class="action_btn analysis_btn">
+                        <span class="action_btn" :class="{'analysis_btn':item.operationType=='analysis'}" @click="questionOperationTrigger(item,'analysis')">
                             <img :src="answerIcon" alt="">
                             解析答案
                         </span>
-                        <span class="action_btn answer_detail_btn">
+                        <span class="action_btn" :class="{'answer_detail_btn':item.operationType=='stuAnswerDetail'}" @click="questionOperationTrigger(item,'stuAnswerDetail')">
                             <img :src="deteaiIcon" alt="">
                             作答详情
                         </span>
                     </div>
-
                     
                     <!-- 答案解析区域 -->
-                     <AnswerAnalysis/>
-                 
-
+                    <AnswerAnalysis v-if="item?.operationType == 'analysis'"/>
                     <!-- 作答详情区域 -->
-
+                    <studentAnswerDetail v-if="item?.operationType == 'stuAnswerDetail'"/>
                 </li>
             </ul>
         </div>
@@ -118,24 +115,43 @@ import answerIcon from '@/assets/practiceResult/broken_line.png'
 import deteaiIcon from '@/assets/practiceResult/todo_list.png'
 
 import AnswerAnalysis from './answerAnalysis.vue'
-
+import studentAnswerDetail from './studentAnswerDetail.vue';
 
 export default ({
     name:'PracticeDetail',
     components: {
         TopBackNav,
-        AnswerAnalysis
+        AnswerAnalysis,
+        studentAnswerDetail
     },
     data(){
         return {
             aiIcon:aiIcon,
             answerIcon:answerIcon,
             deteaiIcon:deteaiIcon,
+            questionList:[
+                {
+                    id:'1',
+                    operationType:''
+                },
+                {
+                    id:'2',
+                    operationType:''
+                }
+        ],
         }
     },
     methods: {
-      questionOperation(row,type){
-
+        /**
+         * @param row 
+         * @param type  'ai' 'analysis' 'stuAnswerDetail'
+         */
+      questionOperationTrigger(row,type){
+        if(row.operationType == type){
+            row.operationType = ''
+        }else{
+            row.operationType = type
+        }
       }
     },
     computed:{},
@@ -214,6 +230,7 @@ export default ({
         li{
             border-radius: 10px;
             border: 1px solid #DCDFE6;
+          
             // 题目区域
             .question_area {
                 padding: 16px;
@@ -282,13 +299,16 @@ export default ({
                 background: #F8F8F9;
                 padding:14px 16px;
 
-                border-bottom: 1px solid #DCDFE6;
                 border-top: 1px solid #DCDFE6;
 
                 display: flex;
                 justify-content: flex-end;
                 gap: 20px;
 
+                &.border_bottom_radius{
+                    border-radius: 0 0 10px 10px;
+                }
+
                 .action_btn {
                     cursor: pointer;
                     display: flex;
@@ -302,6 +322,7 @@ export default ({
                     &.ai_lecture_btn {
                         color: #4F3EFF;
                     }
+                    &.answer_detail_btn,
                     &.analysis_btn {
                         color:#2E64FA;
                     }

src/views/targetImprove/practice/practiceResults/studentAnswerDetail.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="stu_answer_detail">
+        <div class="title">【作 答】</div>
+        <div class="desc">
+            <!-- v-model="rightAnswerValue"  -->
+            <el-radio-group 
+                v-if="answerType == 'online'"
+                @change="rightAnswerValue = defaultRightAnswerValue"
+            >
+              <el-radio 
+                v-for="radioItem in questionOption" 
+                    :key="radioItem.value" 
+                    :label="radioItem.value"
+                    :class="{ 
+                         'is-correct-radio is-checked':  rightAnswerValue  === radioItem.value, 
+                        'is-wrong-radio is-checked': studentAnswerVal===radioItem.value && rightAnswerValue !== studentAnswerVal
+                    }"
+                >{{ radioItem.label }}</el-radio>
+            </el-radio-group>
+        </div>
+    </div>
+</template>   
+
+
+<script>
+export default ({
+    name:'StudentAnswerDetail',
+    components: {},
+    data(){
+        return {
+            answerType:'online',  //答题方式  //线上答题和上传图片 online \ photo
+            studentAnswerVal:'D',
+            rightAnswerValue:'B',
+            defaultRightAnswerValue:'B',
+            questionOption:[
+                {
+                    label:'A',
+                    value:'A'
+                },
+                {
+                    label:'B',
+                    value:'B'
+                },
+                {
+                    label:'C',
+                    value:'C'
+                },
+                {
+                    label:'D',
+                    value:'D'
+                },
+            ]
+        }
+    },
+    methods: {},
+    computed:{},
+    mounted() {
+    },
+    
+})
+
+</script>
+
+
+<style lang="scss" scoped>
+ .stu_answer_detail{
+    padding: 16px;
+    display: flex;
+    gap:10px;
+    .title {
+        text-align: right;
+        width: 70px;
+        flex-shrink: 0;
+        font-weight: 600;
+    }
+    .desc{
+        line-height: 24px;
+    }
+
+
+    
+    // 2. 错误选项样式（红色）
+    ::v-deep .is-wrong-radio {
+            position: relative !important;
+        // 圆圈边框
+        .el-radio__inner {
+            border-color: #F56C6C !important;
+        }
+        // 选中状态（圆点填充）
+        &.is-checked .el-radio__inner {
+            position: relative !important;
+            background-color: none;
+            &::after{
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 100%;
+                    background-color: #F56C6C !important;
+                    content: "";
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%) scale(1) !important;
+                    transition: transform 0.15s ease-in;
+            }
+        }
+    }
+
+    ::v-deep .is-correct-radio {
+            position: relative !important;
+        // 圆圈边框
+        .el-radio__inner {
+            border-color: #2E64FA !important;
+        }
+        // 选中状态（圆点填充）
+        &.is-checked .el-radio__inner {
+            position: relative !important;
+            background-color: none;
+
+            &::after{
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 100%;
+                    background-color: #2E64FA!important;
+                    content: "";
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%) scale(1) !important;
+                    transition: transform 0.15s ease-in;
+            }
+        }
+    }
+
+}
+</style>