创新实训-错题本

<template>
    <el-col class="paper">
        <el-row :gutter="24">
            <!--  左侧   -->
            <el-col :span="4" :xs="24">
                <el-card class="type_list">
                    <div style="padding-bottom: 25px;">
                        <p class="type_name"> 数学错题本 </p>
                        <el-divider></el-divider>
                        <el-row>
                            <el-tag v-for="(cp, index) in cpdata" :type="index === quIndex ? 'success' : ''"
                                @click="handleTag(index)" class="type_tag">
                                {{ index+1 }}
                            </el-tag>
                        </el-row>
                    </div>
                </el-card>
            </el-col>

            <!-- 中间题目 -->

            <el-col :span="16" :xs="24">
                <el-card class="qu_list">
                    <div>
                        <template v-for="(cp, index) in cpdata">
                            <div :class="'index' + index">
                                <el-row :gutter="24">
                                    <el-col :span="20" style="text-align: left">
                                        <!-- 题目: 序号、类型、题干 -->
                                        <div>
                                            <div class="qu_num">{{ index+1 }}</div>
                                            【 {{ cp.tag }} 】
                                            <div class="qu_content">
                                                <textBox :text="cp.text"></textBox>
                                            </div>

                                        </div>
                                        

                                        <!-- 选项 -->
                                        <!-- <el-radio-group class="qu_choose_group">
                                            <el-radio v-for="item in cp.choice" border class="qu_choose"> -->
                                        <!-- 选项flex浮动 -->
                                        <!-- <div class="qu_choose_tag">
                                                    <div class="qu_choose_tag_type">
                                                        {{ item.key }}.
                                                    </div> -->
                                        <!-- 选项内容和图片 -->
                                        <!-- <div class="qu_choose_tag_content">
                                                        {{ item.value }}
                                                    </div>
                                                </div>
                                                <div class="qu_choose_answer" v-if="item.key == cp.ans">
                                                    <i class="el-icon-success" style="color:#1aac1a;">
                                                        答案
                                                    </i>
                                                </div>
                                            </el-radio>
                                        </el-radio-group> -->

                                        <!-- 题目解析 -->
                                        <div class="qu_analysis" v-if="showSolutions[index]">
                                            <el-card>
                                                <span>试题解析：</span><br />
                                                <div class="qu_analysis_content">
                                                    <textBox :text="cp.analysis"></textBox>
                                                </div>
                                            </el-card>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                       <div class="tjButton" style="text-align: right;">
                                            <el-button type="primary" @click="toggleSolution(index)">查看题解</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </template>
                    </div>
                    <el-divider />
                </el-card>
            </el-col>

            <!-- 右侧试卷信息 -->

            <el-col :span="4" :xs="24">
                <el-card class="paper_base">
                    <p class="paper_base_content">数学错题本</p>
                    <!-- <p class="paper_base_content">这里还可以写一些东西</p> -->
                    <el-divider></el-divider>
                    <p class="paper_base_content">你已经整理了</p>
                    <p class="paper_base_score">3道题</p>
                    <el-divider></el-divider>
                </el-card>

            </el-col>

        </el-row>
    </el-col>
</template>
  
<script>
import textBox from '@/components/FomulaText.vue'
export default {
    name: 'ExamProcess',
    data() {
        return {
            quIndex: -1,
            cpdata: [
                {
                    tag: '乘法', text: '5*6=?',
                    ans: '30',
                    analysis: '5*6=30'
                }
                
            ],
            showSolutions: [],
        }
    },
    components: {
        textBox
    },
    mounted(){
        let review_collection = JSON.parse(localStorage.getItem("review_collection"));
        for (let element of review_collection) {
            console.log(element);
            let p={};
            p["tag"]=element["tag"];
            p["text"]=element["text"];
            p["analysis"]=element["ans"];
            this.cpdata.push(p);
        }
    },
    created() {
        // 初始化 showSolutions 数组，每道题解初始状态都为隐藏
        this.showSolutions = new Array(this.cpdata.length).fill(false);
    },
    methods: {
        // 点击答题卡题号, 右侧题目滑动
        handleTag(index) {
            // 高亮选中的题目index标签
            this.quIndex = index;
            // 题目滑动到锚定点
            let page = document.querySelector(".index" + index);
            page.scrollIntoView();
        },
        toggleSolution(index) {
            // 切换指定题目的题解显示状态
            this.$set(this.showSolutions, index, !this.showSolutions[index]);
        }
    },
}
</script>
  
<style scoped lang="scss">
.el-card{
    overflow: auto;
}
.paper {
    
    
    line-height: 25px;
    width: 100%;


    // 左侧题目总菜单
    .type_list {
        height: 600px;
        overflow: auto;
        text-align: left;
        line-height: 10px;

        .type_name {
            color: #1890ff;
            font-weight: bold;
        }

        .type_tag {
            margin-right: 10px;
            margin-top: 10px;
        }
    }

    // 试题内容样式
    .qu_list {
        
        height: 600px;
        overflow: auto;
        page-break-after: always;

        .qu_num {
            display: inline-block;
            background: url(~@/assets/btbj.jpg) no-repeat 100% 100%;
            background-size: contain;
            height: 30px;
            width: 30px;
            line-height: 25px;
            color: #040000;
            font-size: 14px;
            text-align: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .qu_content {
            overflow: auto;
            padding-left: 10px;
        }

        // 选项组
        .qu_choose_group {
            width: 100%;

            // 单个选项
            .qu_choose {
                display: block;
                margin: 10px;

                // 去除前面的radio
                ::v-deep .el-radio__input .el-radio__inner {
                    display: none;
                }

                // 单个选项内容样式
                .qu_choose_tag {
                    display: inline-flex;
                    width: 90%;

                    // 选项标签
                    .qu_choose_tag_type {
                        font-weight: bold;
                        color: #0a84ff;
                        width: 10px;
                    }

                    // 选项内容
                    .qu_choose_tag_content {
                        padding: 0 10px 10px 10px;
                    }

                    .qu_choose_tag_img {
                        height: auto;
                        display: block;
                        margin: 10px;
                    }

                    .qu_choose_tag_el_image {
                        clear: both;
                        padding-top: 10px;
                    }
                }

                // 选项答案
                .qu_choose_answer {
                    float: right;
                }
            }
        }


        // 试题解析
        .qu_analysis {
            padding: 10px;

            .qu_analysis_content {
                padding-top: 10px;
            }
        }

        // 试题赋分
        .qu_assign_score {
            background: #f5f5f5;
            height: 100px;
            padding-top: 35px;

            .qu_assign_score_content {
                width: 80px
            }
        }
    }

    // 右侧试卷基本信息
    .paper_base {
        height: 600px;
        overflow: auto;
        text-align: center;

        .paper_base_content {
            font-weight: bold;
        }

        .paper_base_score {
            font-weight: bold;
            color: #0a76a4;
        }
    }
}
</style>
  
  
  

错题本页面，接收刷题册收藏来的题目+题解和错题上传页面上传的题目+题解并进行展示