93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
import type {PropType} from "vue";
|
|
import type {QuizResponse} from "~/store/quiz";
|
|
import type {Axe} from "~/store/axe";
|
|
|
|
const props = defineProps({
|
|
axe: {
|
|
type: Object as PropType<Axe>,
|
|
required: true
|
|
},
|
|
average: Number,
|
|
responses: {
|
|
type: Object as PropType<QuizResponse[]>,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const cssVars = computed(() => {
|
|
return {
|
|
'--color': props.axe ? props.axe.color : "#ffffff"
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section :style="cssVars" class="axe-details">
|
|
<h2 class="title">
|
|
<span><span class="upper">{{ axe.identifier }}</span><span>{{ axe.shortTitle }}</span></span>
|
|
<span class="upper">{{ Number((average).toFixed(1)) }} / 10</span>
|
|
</h2>
|
|
<div v-for="response in responses">
|
|
<p class="question">
|
|
<span>
|
|
{{ response.question }}
|
|
</span>
|
|
<span class="note">{{ response.score }} / 10</span>
|
|
</p>
|
|
<p v-if="response.comment" class="comment">{{ response.comment }}</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@import "assets/css/font";
|
|
@import "assets/css/color";
|
|
@import "assets/css/spacing";
|
|
|
|
.axe-details {
|
|
margin-top: $small;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: $tertiary-font-size;
|
|
font-weight: 700;
|
|
color: black;
|
|
border-bottom: 3px solid var(--color);
|
|
margin: $xx_small 0;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.title .upper {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: var(--color);
|
|
}
|
|
|
|
.title .upper:first-child {
|
|
margin-right: $xxx_small;
|
|
}
|
|
|
|
.question {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: black;
|
|
margin: $xx_small 0 0 0;
|
|
}
|
|
|
|
.question .note {
|
|
color: var(--color);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comment {
|
|
font-size: $small-font-size;
|
|
margin: $xxx_small 0 1rem 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
</style>
|