<template>
    <div class="answer_analysis">
        <div class="knowledge_area">
            <div class="knowledge_title">【知识点】</div>
            <div class="knowledge_tags">
                <span v-for="item in knowledgeList" :key="item.knowId" 
                    class="tag_item">{{item.knowName}}
                </span>
            </div>
        </div>
        <!-- 正确答案区域 -->
        <div class="answer_area block_area">
            <div class="title">【答案】</div>
            <div  class="desc" v-html="answer"></div>
        </div>
        <!-- 详解区域 -->
        <div class="analysis_area block_area">
            <div class="title">【详解】</div>
            <div class="detail_content desc" v-html="analysis"></div>
        </div>
    </div>
</template>


<script>

export default ({
    name:'AnswerAnalysis',
    components: {},
    props:{
        knowledgeList:{  //知识点
            type:Array,

        },
        answer:{  //答案
            type:String,
        },
        analysis:{  //解析
            type:String,
        }
    },
    data(){
        return {
        }
    },
    methods: {},
    computed:{},
    mounted() {
    },


    
})

</script>


<style lang="scss" scoped>

  // 答案解析区域
.answer_analysis{
    border-top: 1px solid #DCDFE6;

    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 {
            flex: 1 1;
            display: flex;
            flex-wrap: wrap;
            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{
            flex: 1 1;
            line-height: 24px;
        }
    }
}


</style>