EEP_BookPreview/src/views/book/courseware/preview/common/PreviewOperation.vue

<template>
  <div class="operation">
    <div v-show="permissionControl.can_answer" class="button retry" @click="retry()"></div>
    <div v-show="permissionControl.can_correct || permissionControl.can_check_correct" class="button correct"></div>
    <div
      v-show="permissionControl.can_judge_correct || permissionControl.can_show_answer"
      class="button answer"
      @click="showAnswerAnalysis()"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'PreviewOperation',
  inject: ['getPermissionControl'],
  data() {
    return {};
  },
  computed: {
    permissionControl() {
      return this.getPermissionControl();
    },
  },
  methods: {
    showAnswerAnalysis() {
      this.$emit('showAnswerAnalysis');
    },
    // 重做
    retry() {
      this.$emit('retry');
    },
  },
};
</script>

<style lang="scss" scoped>
.operation {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;

  .button {
    width: 90px;
    height: 40px;
    cursor: pointer;
    border-radius: 5px;

    & + .button {
      margin-left: 24px;
    }

    &.retry {
      background: url('@/assets/component/component-retry.png') no-repeat center;
    }

    &.correct {
      background: url('@/assets/component/component-correct.png') no-repeat center;
    }

    &.answer {
      background: url('@/assets/component/component-answer.png') no-repeat center;
    }
  }
}
</style>