添加查看练习结果详情-解析答案静态页面

src/router/index.js

@@ -46,6 +46,13 @@ let constantRoutes = [
                     title: "自主练习",
                 },
             },
+            {
+                path: "praciceResultDetail",
+                component: () => import("@/views/targetImprove/practice/practiceResults/practiceDetail.vue"),
+                meta: {
+                    title: "自主练习结果详情",
+                },
+            },
             {
                 path: "consolidate",
                 component: () => import("@/views/targetImprove/consolidate/index.vue"),

src/views/targetImprove/components/TopBackNav.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="top_header">
+        <div class="top_left">
+            <slot name="back">
+                <el-button class="button_default_background" @click="$router.go(-1)">
+                    <i class="iconfont icon_return"></i>返回
+                </el-button>
+            </slot>
+        </div>
+        <div class="top_right">
+            <slot name="topRight"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default ({
+    components: {
+     
+    },
+    data(){
+        return {
+
+        }
+    },
+    methods: {
+      
+     },
+    computed:{},
+    mounted() {
+    },
+
+})
+
+
+</script>
+
+
+<style lang="scss" scoped>
+
+
+.top_header{
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap:20px;
+
+    background-color: white;
+    padding:6px 20px;
+    border-radius:10px;
+
+    .top_left{
+        display: flex;
+        align-items: center;
+        gap:40px;
+     
+        ::v-deep .button_default_background{
+            background: #fff;
+            border: 1px solid  #DCDFE6;
+            color: #666;
+            &:hover {
+                background: #fff;
+            }
+           
+            height: 36px !important;
+            padding:8px 10px;
+            >span{
+                .icon_return{
+                    width: 16px;
+                    height: 16px;
+                }
+                display: flex;
+                align-items: center;
+                gap:2px;
+            }
+        }
+    }
+}
+ 
+</style>

src/views/targetImprove/practice/practiceResults.vue

@@ -50,12 +50,12 @@
                 </TableRowStatus>
             </template>
             <template v-slot:improvement="{row}">
-                <img width="16px" height="16px" style="margin-right: 2px;" :src="row.improvement.type == 'up' ? upIcon : (row.improvement.type == 'down' ? downIcon : '')" alt="" />
+                <img v-if="['up','down'].includes(row.improvement.type)" width="16px" height="16px" style="margin-right: 2px;" :src="row.improvement.type == 'up' ? upIcon : downIcon" alt="" />
                {{ row.improvement.value }}
             </template>
             <template v-slot:action="{row}">
                 <div class="table_row_operation">
-                    <el-button type="text" @click="viewDetails(scope.row)">查看</el-button>
+                    <el-button type="text" @click="viewDetails(row)">查看</el-button>
                 </div>
             </template>
         </Table>
@@ -293,6 +293,10 @@ export default ({
             this.$api.target.getTargetExerciseResult(prams).then(res=>{
             })
         },
+        // 跳转练习结果详情
+        viewDetails(row){
+            this.$router.push(`/targetImprove/praciceResultDetail?id=${row.id}`);
+        },
      },
     computed:{},
     mounted() {

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

@@ -0,0 +1,109 @@
+<template>
+    <div class="answer_analysis">
+        <div class="knowledge_area">
+            <div class="knowledge_title">【知识点】</div>
+            <div class="knowledge_tags">
+                <span class="tag_item">作家作品</span>
+                <span class="tag_item">分析体裁特征和表现手法</span>
+                <span class="tag_item">阅读理解</span>
+            </div>
+        </div>
+        <!-- 正确答案区域 -->
+        <div class="answer_area block_area">
+            <div class="title">【答案】</div>
+            <div class="desc">
+                <div class="answer_content">D</div>
+                <div class="answer_explain">
+                    <div>①提升消费能力——能消费<br/>推动经济高质量发展/发展经济/发展新质生产力/促进就业/增加居民收入；完善收入分配制度，推动中低收入群体增收减负/，增强居民消费能力/分配制度展开也可以。</div>
+                    <div>②提升消费意愿——愿消费、敢消费<br/>完善社会保障，稳定居民收入预期，增强居民消费信心；政府加强宏观调控，履行经济职能/减税降费，降低存贷利率/加强市场监管，规范市场秩序，优化消费环境/完善消费者权益维护机制，增强居民消费意愿。</div>
+                    <div>③提升消费层级——消费升级<br/>推进供给侧结构性改革，优化供给结构/提供优质产品和服务，创造消费需求/；发展新业态新模式，满足多样化需求/多元消费场景，促进文旅业发展/促进消费结构优化升级。</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 详解区域 -->
+        <div class="analysis_area block_area">
+            <div class="title">【详解】</div>
+            <div class="detail_content desc">
+                <div>A: 房屋是婚后夫妻二人共同建造，属于夫妻共同财产，并非张三个人财产；且农村合法建造的宅基地房屋，自建造完成时即取得所有权，登记不是所有权取得的生效要件，错误。</div>
+                <div>B: 该借款用于夫妻共同所有的房屋装修，属于为家庭日常生活需要所负的债务，即使李四不知情，也属于夫妻共同债务，李四需要偿还，错误。</div>
+                <div>C: 宅基地所有权归村集体所有，村民只享有宅基地使用权（用益物权），该权利核心是对宅基地的占有、使用，对应物的使用价值；张三夫妻不享有宅基地所有权，因此无权处分该地块，正确。</div>
+                <div>D: 出租房屋获得的租金是按生产要素分配获得的收入，属于初次分配；再分配是国家通过税收、社会保障、转移支付等主导的分配，错误。</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+
+export default ({
+    name:'AnswerAnalysis',
+    components: {},
+    data(){
+        return {
+        }
+    },
+    methods: {},
+    computed:{},
+    mounted() {
+    },
+
+
+    
+})
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  // 答案解析区域
+.answer_analysis{
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap:16px;
+
+    // 知识点区域
+    .knowledge_area {
+        display: flex;
+        align-items: center;
+        gap:10px;
+        .knowledge_title {
+            width: 70px;
+            font-weight: 600;
+        }
+        .knowledge_tags {
+            display: flex;
+            gap: 10px;
+            .tag_item {
+                box-sizing: border-box;
+                height: 28px;
+                border-radius: 4px;
+                border: 1px solid #2E64FA;
+                padding: 4px 10px;
+                background-color: #f8f8f9;
+                color: #2E64FA;
+            }
+        }
+    }
+
+    // 答案解析 块
+    .block_area {
+        display: flex;
+        gap:10px;
+        .title {
+            text-align: right;
+            width: 70px;
+            flex-shrink: 0;
+            font-weight: 600;
+        }
+        .desc{
+            line-height: 24px;
+        }
+    }
+}
+
+
+</style>

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

@@ -0,0 +1,316 @@
+<!-- 自主练习——查看练习结果 -->
+<template>
+    <div class="practice_result">
+        <TopBackNav>
+            <template #topRight>
+                <span class="header_title">2026.8.9 14:16:30 提交记录</span>
+            </template>
+        </TopBackNav>
+
+
+        <div class="main_content">
+            <div class="overview">
+                <div class="page_search">
+                    <div class="search_content">
+                        <div class="content_left">
+                            <div class="grade_title">实用类文本</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="desc">
+                    该知识点练习前您的得分率是<span class="scoring_average bold">68%</span>，练习后您的得分率是<span class="scoring_average bold">58%</span>，经过专项练习该知识点得分率<span class="up_light bold">提升了16%</span>。请继续保持练习，时常回顾错题。
+                </div>
+                <div class="desc">
+                    该知识点练习前您的得分率是<span class="scoring_average bold">68%</span>，练习后您的得分率是<span class="scoring_average bold">58%</span>，经过专项练习该知识点得分率<span class="down_light bold">下降了16%</span>。请继续保持练习，时常回顾错题。
+                </div>
+            </div>
+
+            <ul class="question_detail_list">
+                <li v-for="(item,index) in 2" :key="item">
+                    <!-- 题目区域 -->
+                    <div class="question_area">
+                        <div class="question_header">
+                            <div>
+                                <span class="question_num">{{index + 1}}</span>
+                                <span class="question_type">选择题</span>
+                            </div>
+                            <span class="question_difficulty">容易</span>
+                            <span class="question_source">福建省莆田第五中学2024-2025学年高一上学期期末考试数学试卷</span>
+                            <span class="question_score">得分率：86.92%</span>
+                        </div>
+
+                        <div class="question_content">
+                            <p class="question_desc">教材文言知识小题，完成下面1-2小题。</p>
+
+                            <div class="sub_question_list">
+                                <!-- 第(1)题 -->
+                                <div class="sub_question">
+                                    <p class="sub_question_title">(1) 下列各项中，不含通假字的一项是（ ）</p>
+                                    <div class="option_list">
+                                        <div>①“离骚”者，犹离忧也</div>
+                                        <div>②其称文小而其指极大</div>
+                                        <div>③屈平属草稿未定</div>
+                                        <div>④屈平既绌</div>
+                                        <div>⑤厚币委质事楚</div>
+                                        <div>⑥竭忠尽智以事其君</div>
+                                        <div>⑦信义安所见乎</div>
+                                        <div>⑧置币遗单于</div>
+                                        <div>⑨与旃毛并咽之</div>
+                                    </div>
+                                    <div class="choice_list">
+                                        <div>A. ②③⑦</div>
+                                        <div>B. ④⑥⑨</div>
+                                        <div>C. ②⑤⑧</div>
+                                        <div>D. ③⑥⑧</div>
+                                    </div>
+                                </div>
+
+                                <!-- 第(2)题 -->
+                                <div class="sub_question">
+                                    <p class="sub_question_title">(2) 下列句子的句式特点不同于其他三项的一项是（ ）</p>
+                                    <div class="choice_list">
+                                        <div>A. 是时屈平既疏</div>
+                                        <div>B. 是以见放</div>
+                                        <div>C. 自疏濯淖污泥之中,蝉蜕于浊秽</div>
+                                        <div>D. 为天下笑</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <!-- 功能按钮 -->
+                    <div class="action_buttons">
+                        <span class="action_btn ai_lecture_btn">
+                            <img :src="aiIcon" alt="">
+                            AI讲题
+                        </span>
+                        <span class="action_btn analysis_btn">
+                            <img :src="answerIcon" alt="">
+                            解析答案
+                        </span>
+                        <span class="action_btn answer_detail_btn">
+                            <img :src="deteaiIcon" alt="">
+                            作答详情
+                        </span>
+                    </div>
+
+                    
+                    <!-- 答案解析区域 -->
+                     <AnswerAnalysis/>
+                 
+
+                    <!-- 作答详情区域 -->
+
+                </li>
+            </ul>
+        </div>
+    </div>
+
+</template>
+
+<script>
+import TopBackNav from '../../components/TopBackNav.vue';
+
+import aiIcon from '@/assets/knowledgeGraph/aiIcon.png'
+import answerIcon from '@/assets/practiceResult/broken_line.png'
+import deteaiIcon from '@/assets/practiceResult/todo_list.png'
+
+import AnswerAnalysis from './answerAnalysis.vue'
+
+
+export default ({
+    name:'PracticeDetail',
+    components: {
+        TopBackNav,
+        AnswerAnalysis
+    },
+    data(){
+        return {
+            aiIcon:aiIcon,
+            answerIcon:answerIcon,
+            deteaiIcon:deteaiIcon,
+        }
+    },
+    methods: {
+      questionOperation(row,type){
+
+      }
+    },
+    computed:{},
+    mounted() {
+    },
+
+})
+
+
+</script>
+
+
+<style lang="scss" scoped>
+
+.practice_result{
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap:10px;
+}
+::v-deep .top_header{
+    .top_right{
+        align-self: center;
+        .header_title{
+            font-weight: 600;
+            font-size: 20px;
+            color: #333333;
+            line-height: 28px;
+            text-align: left;
+        }
+    }
+}
+
+.main_content{
+    flex: 1 1;
+    background-color: white;
+    padding:20px;
+
+    .overview{
+        .desc{
+            margin-top: 10px;
+            line-height: 20px;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+
+            .bold{
+                font-weight: 600;
+            }
+            .scoring_average{
+                color:#2E64FA;
+            }
+            .up_light{
+                color:#3BA272;
+            }
+            .down_light{
+                color:#F56C6C;
+            }
+        }
+    }
+
+    .question_detail_list {
+        margin-top: 20px;
+        position: relative;
+        width: 100%;
+        // border:solid red 1px;
+        display: flex;
+        flex-direction: column;
+        gap:20px;
+
+        font-size: 14px;
+        color: #333;
+        line-height: 20px;
+
+        li{
+            border-radius: 10px;
+            border: 1px solid #DCDFE6;
+            // 题目区域
+            .question_area {
+                padding: 16px;
+                .question_header {
+                    display: flex;
+                    align-items: center;
+                    gap: 16px;
+                    font-weight: 600;
+                    margin-bottom: 16px;
+
+                    .question_num {
+                        padding: 0 6px;
+                        margin-right: 8px;
+                        background: #F3F3F3;
+                        border-radius: 2px;
+                        text-align: center;
+                    }
+
+                    .question_difficulty {
+                        color: #90CB75;
+                        font-size: 14px;
+                    }
+
+                    .question_source {
+                        font-weight: 400;
+                        color: #999999;
+                    }
+
+                    .question_score {
+                        color: #2E64FA;
+                        margin-left: auto;
+                    }
+                }
+                .question_content {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 16px;
+                    
+                    .sub_question_list{
+                        display: flex;
+                        flex-direction: column;
+                        gap:24px;
+                        .sub_question {
+                            display: flex;
+                            flex-direction: column;
+                            gap:16px;
+                        
+                            .option_list {
+                                display: grid;
+                                grid-template-columns: repeat(3, 1fr);
+                                gap: 10px;
+                            }
+
+                            .choice_list {
+                                display: flex;
+                                gap: 40px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .action_buttons {
+                box-sizing: border-box;
+                height: 48px;
+                background: #F8F8F9;
+                padding:14px 16px;
+
+                border-bottom: 1px solid #DCDFE6;
+                border-top: 1px solid #DCDFE6;
+
+                display: flex;
+                justify-content: flex-end;
+                gap: 20px;
+
+                .action_btn {
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap:8px;
+                    line-height: 16px;
+                    img{
+                        width: 16px;
+                        height: 16px;
+                    }
+                    &.ai_lecture_btn {
+                        color: #4F3EFF;
+                    }
+                    &.analysis_btn {
+                        color:#2E64FA;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+ 
+</style>