<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-21 17:20:49
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-28 11:56:49
 * @FilePath: /danger-manage-web/src/views/myLessons/components/GoodJob.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="goodjob-wrapper flex">
    <div class="text flex">
      <div class="text flex">
        <template v-if="goodJobData.answer >= goodJobData.qualifiedNum">
          <div class="icon"><i class="iconfont icon-smiling" /></div>
          <div>
            恭喜你，做对{{ goodJobData.answer }}道题得分{{
              Math.floor((goodJobData.answer / goodJobData.topicNum) * 100)
            }}，成绩合格！
          </div>
        </template>
        <template v-else>
          <div class="icon"><i class="iconfont icon-nanguo" /></div>
          <div>
            继续努力，做对{{ goodJobData.answer }}道题得分{{
              Math.floor((goodJobData.answer / goodJobData.topicNum) * 100)
            }}，成绩不合格！
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    goodJobData: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.goodjob-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #bbbbbb;
  .text {
    width: 100%;
    height: 136px;
    color: #1d84ff;
    background: #f9f9f9 100%;
    border-radius: 15px;
    line-height: 136px;
    font-size: 28px;
    justify-content: center;
    align-items: center;
    .icon {
      margin-right: 10px;
      .iconfont {
        color: #e2852a;
        font-size: 40px !important;
      }
    }
  }
}
</style>
