bigDataStudent/src/views/targetImprove/components/QuestionItem.vue

<template>
  <div class="question_preview">
    <div class="question_header">
        <div class="header_title">
          <div class="header_index">
            {{ index}}
          </div>
          <span class="header_type">
              {{question.questionType}}
          </span>
          <span class="header_difficulty" :style="{color:GetDiffcutyColor(question.questionLevel || question.diffName)}">
              {{question.questionLevel || question.diffName}}
          </span>
          <div class="header_exam_name">
              来源：{{question.fromPaper || question.source || question.sourceName}} 
          </div>
        </div>
        <slot name="header_right">
          
        </slot>
    </div>
    <div class="question_content" v-html="question.title">
        
    </div>
    <!-- 小题 -->
    <div class="question_content" v-for="subQues in (question?.subQuestions || [])" :key="subQues.questionId" v-html="subQues.title"></div>
  </div>
</template>
<script>
// 题目预览公共组件
import { mapGetters } from "vuex";
export default {
  components: {
  },
  props: {
    question: {
      type: Object,
      default: () => {
        return {};
      },
    },

    index: {
      type: Number,
      default: 1,
    },
  },
  computed: {

  },
  data() {
    return {

      questionContent:"<div class=\"qml-stem\" data-copyright=\"xkw.com-1778721752-107161725521013800-LOqLkjMPMHlPSNdJ2YSObDfSIpJYVbaMq2PwNexeT3jLb8OIq6bBG4DxeSUqDFM9\"><p style=\"text-align: left;\"><span style=\"font-family: 宋体;\">赏析有误的一项是（<span style=\"font-family: 'Times New Roman'\" qml-space-size=\"3\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>）</span></p><p style=\"text-align: center;\"><span style=\"font-family: 楷体;\">十一月四日风雨大作（其二）</span></p><p style=\"text-align: center;\"><span style=\"font-family: 楷体;\">陆游</span></p><p style=\"text-align: center;\"><span style=\"font-family: 楷体;\">僵卧孤村不自哀，尚思为国戍轮台。</span></p><p style=\"text-align: center;\"><span style=\"font-family: 楷体;\">夜阑卧听风吹雨，铁马冰河入梦来。</span></p><div class=\" qml-og\"><table class=\"qml-og\" style=\"width:100%\"><tr><td>A.&nbsp;<span class=\"qml-op\"><span style=\"font-family: 宋体;\">全诗由述志和记梦两部分组成，两者之间是因果关系。</span></span></td></tr><tr><td>B.&nbsp;<span class=\"qml-op\"><span style=\"font-family: 宋体;\">诗中“尚”字表现了诗人强烈而至死不渝的爱国之情，报国之志。</span></span></td></tr><tr><td>C.&nbsp;<span class=\"qml-op\"><span style=\"font-family: 宋体;\">诗的后两句都是写梦境，与前两句写实相映衬。</span></span></td></tr><tr><td colspan=\"1\">D.&nbsp;<span class=\"qml-op\"><span style=\"font-family: 宋体;\">全诗气势豪壮，感情真挚，具有强烈的感染力。</span></span></td></tr></table></div></div>",//总菜单
    };
  },
  watch: {
    userInfo: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);

      },
      deep: true, // 监听对象的深层变化
    },
  },
  created() {

  },
  mounted() {


  },
  methods: {
    // 获取题目难度颜色
    GetDiffcutyColor(value)
    {
      console.log("打印难易度",value);
      return this.$global.getDiffcutyColor(value);
    },
  },
};
</script>
<style lang="scss" scoped>

.question_preview
{
    width: 100%;
    height: auto;

    // background: #FFFFFF;
    // border-radius: 10px 10px 10px 10px;
    // border: 1px solid #DCDFE6;
    // padding: 16px;
    // box-sizing: border-box;
    .question_header
    {
        width: 100%;
        height: 25px;
        background: #fff;
        display: flex;
        justify-content:space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
        .header_title
        {
            display: flex;
            justify-content:flex-start;
            align-items: center;
            gap: 16px;
        }
        .header_index
        {
            width: 20px;
            height: 20px;


            line-height: 18px;
            background: #F3F3F3;
            border-radius: 2px 2px 2px 2px;
            font-weight: 500;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }

        .header_type
        {
            font-weight: 600;
            font-size: 14px;
            color: #333333;
        }

        .header_difficulty
        {
            font-weight: 400;
            font-size: 14px;
            color: #90CB75;
        }

        .header_exam_name
        {
            font-weight: 400;
            font-size: 14px;
            color: #999999;
        }
    }
    .question_content
    {
        width: 100%;
        height: auto;
        background: #fff;
        line-height: 30px;
        overflow-y: auto;
    }
}
</style>