bigDataStudent/src/views/analysisReport/personalProfile/KnowledgeTrack.vue

<template>
  <div class="knowledgeTrack">
    <h3 class="title">历次考试知识点追踪</h3>
    <!-- 内容区域 -->
    <div class="map_content" v-if="examRange || knowledgeStats.length > 0">
      <!-- 考试范围说明 -->
      <div class="knowledge_stats">
        <p class="range_text" >
          <span class="dot"></span>历次考试：<span v-html="examRange" style="color:#333333;font-weight:600;"></span>
        </p>
        <p class="stats_text" v-for="(item, index) in knowledgeStats" :key="index">
          <span class="dot"></span> <span v-html="item"></span>
        </p>
      </div>
    </div>

    <!-- 暂无数据 -->
    <div class="noData" v-else>
      <div class="module_chart no_content_data no_data" element-loading-background="#ffffff">
        <span>暂无数据</span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "KnowledgeTrack",
  props: {
    // 考试范围
    examRange: {
      type: String,
      default: ''
    },
    // 包含知识点数据
    knowledgeStats: {
      type: Array,
      default: () => []
    },
    // 模式：class/grade/student
    mode: {
      type: String,
      default: 'grade'
    }
  },
  data() {
    return {
      
    };
  },
  computed: {
    
  },
  mounted() {

  },
  methods: {
    
  }
};
</script>

<style scoped lang="scss">
.knowledgeTrack {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;

  .title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 20px 0;
  }
  .map_content {
    background: #F7F7F8;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #EBEEF5;
    padding: 12px;
    p{
      margin-bottom: 5px;
    }
    .range_text,.stats_text {
      font-size: 14px;
      line-height: 1.8;
      color: #666;
      padding-left: 17px;
      position: relative;
      text-align: justify;

      .dot {
        position: absolute;
        left: 0;
        top: 8px;
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #666666;
        border-radius: 50%;
      }
    }
  }

  //暂无数据
  .noData {
    position: relative;
    height: 220px;

    /* 暂无数据样式 */
    .no_data {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      color: #909399;
      text-align: center;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      span{
        margin-top: 11%;
      }
    }
  }
}  

</style>