<template>
  <div class="paper-header">
    <el-image
      :src="require('@/assets/images/preview_paper_logo.png')"
      class="paper-logo"
    ></el-image>
    <div class="paper-title">
      <div class="paper-text">{{ title }}</div>
      <div class="paper-score">总分：{{ totalScore }}分</div>
      <div v-if="className" class="paper-score">班级：{{className}}</div>
      <div v-if="gradeName" class="paper-score">年级：{{gradeName}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "测评名称",
    },
    totalScore: {
      type: Number | String,
      default: "150",
    },
    className: {
      type: String,
      default: ''
    },
    gradeName: {
      type: String,
      default: ''
    }
  },
};
</script>
<style scoped>
.paper-header {
  background-image: url("../../../assets/images/preview_paper_bg.png");
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}
.paper-logo {
  width: 60px;
  height: 60px;
}
.paper-title {
  margin-left: 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.paper-text {
  font-size: 24px;
  font-family: "PingFangSC-Medium", "PingFang SC";
  font-weight: 500;
  color: #ffffff;
}
.paper-score {
  font-size: 16px;
  font-family: "PingFangSC-Regular", "PingFang SC";
  font-weight: 400;
  color: #ffffff;
}
</style>
