teacher-tools/app/src/apps/classroom_compliance/ClassItem.vue

37 lines
673 B
Vue

<script setup lang="ts">
import { type Class } from '@/api/classroom_compliance'
import { useRouter } from 'vue-router';
defineProps<{
cls: Class
}>()
const router = useRouter()
</script>
<template>
<div class="class-item" @click="router.push(`/classroom-compliance/classes/${cls.id}`)">
<h3>Class <span v-text="cls.number"></span></h3>
<p v-text="cls.schoolYear"></p>
</div>
</template>
<style scoped>
.class-item {
border: 2px solid;
border-radius: 10px;
padding: 10px;
cursor: pointer;
max-width: 500px;
}
.class-item:hover {
border: 2px dashed;
}
.class-item+.class-item {
margin-top: 1em;
}
.class-item>h3 {
margin-top: 0;
}
</style>