79 lines
1.4 KiB
Vue
79 lines
1.4 KiB
Vue
|
<script setup>
|
||
|
|
const cursus=[
|
||
|
|
{
|
||
|
|
"id": 12,
|
||
|
|
"name": "Math pour l'info",
|
||
|
|
"credits": 11,
|
||
|
|
"faculty": "science",
|
||
|
|
"teacher": 42,
|
||
|
|
"Assistants": []},
|
||
|
|
{
|
||
|
|
"id": 42,
|
||
|
|
"name": "Operating Systems",
|
||
|
|
"credits": 8,
|
||
|
|
"faculty": "science",
|
||
|
|
"teacher": 14,
|
||
|
|
"Assistants": []},
|
||
|
|
{
|
||
|
|
"id": 42,
|
||
|
|
"name": "Fonctionnement des ordinateurs",
|
||
|
|
"credits": 11,
|
||
|
|
"faculty": "science",
|
||
|
|
"teacher": 42,
|
||
|
|
"Assistants": []},
|
||
|
|
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="body">
|
||
|
|
<div class="listElement " v-for="item in cursus">
|
||
|
|
<div class=" containerElement">
|
||
|
|
<div class="name"> {{item.name}} </div>
|
||
|
|
<div class="teacher">{{item.teacher}}</div>
|
||
|
|
<div class="credits">Credits:{{item.credits}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.body {
|
||
|
|
width:100%;
|
||
|
|
margin-bottom:10px;
|
||
|
|
}
|
||
|
|
.containerElement{
|
||
|
|
justify-content:center;
|
||
|
|
display:grid;
|
||
|
|
grid-template-columns:350px 350px 200px;
|
||
|
|
grid-template-areas:
|
||
|
|
"name teacher credits";
|
||
|
|
column-gap:10px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
grid-area:name;
|
||
|
|
align-self:center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.teacher{
|
||
|
|
grid-area:teacher;
|
||
|
|
align-self:center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.credits{
|
||
|
|
grid-area:credits;
|
||
|
|
align-self:center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listElement{
|
||
|
|
border:2px solid black;
|
||
|
|
font-size:25px;
|
||
|
|
color:white;
|
||
|
|
padding:20px;
|
||
|
|
background-color:rgb(50,50,50);
|
||
|
|
border-radius:20px;
|
||
|
|
margin-bottom:10px;
|
||
|
|
}
|
||
|
|
</style>
|