61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<Transition appear>
|
|
<div v-if="true" class="gw-div" :class="{ 'less': correctness==-3, 'more': correctness==-2, 'default': correctness==0, 'cw-cp': correctness==4, 'cw-ip': correctness==3, 'cf-cp': correctness==2, 'cf-ip': correctness==1 }">
|
|
<slot></slot>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Transition } from 'vue';
|
|
|
|
|
|
export default {
|
|
props: {
|
|
correctness: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-enter-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
|
|
.gw-div::first-letter {
|
|
font-weight: bold;
|
|
}
|
|
.gw-div {
|
|
border-radius: 10px;
|
|
padding: 8px;
|
|
margin: 5px;
|
|
justify-content: center;
|
|
background-color: grey;
|
|
color: white;
|
|
}
|
|
.default {
|
|
background-color: rgb(79, 79, 79);
|
|
}
|
|
.more {
|
|
background-color: rgb(255, 0, 0);
|
|
}
|
|
.less {
|
|
background-color: rgb(129, 112, 0);
|
|
}
|
|
.cw-cp {
|
|
background-color: rgb(0, 122, 2);
|
|
}
|
|
.cw-ip {
|
|
background-color: rgb(1, 185, 4);
|
|
}
|
|
.cf-cp {
|
|
background-color: rgb(0, 9, 166);
|
|
}
|
|
.cf-ip {
|
|
background-color: rgb(45, 54, 225);
|
|
}
|
|
</style> |