<script setup> import i18n from "@/i18n.js" const props = defineProps({ id: Number, type: String, lastName: String, firstName: String, address: String, country: String, birthDate: String, cursus:String, degree:String,}); </script> <template> <div class="bodu"> <div class="container"> <div class="id"><a>{{id}}</a></div> <div class="type"><a>{{type}}</a></div> <div class="surname"><a>{{lastName}}</a></div> <div class="firstname"><a>{{firstName}}</a></div> <div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}} </button></div> <div class="accept"><button style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div> <div class="refuse"><button style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div> </div> </div> </template> <style scoped> .container{ color:white; height:100px; font-size:20px; display:grid; grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol]; grid-template-areas: "id type surname firstname infos accept refuse"; column-gap:10px; } .infos { grid-area:infos; align-self:center; } .accept{ grid-area:accept; align-self:center; } .refuse{ grid-area:refuse; align-self:center; } .titles { grid-area:titles; background-color:rgb(215,215,215); } .id{ grid-area:id; margin-left:40px; align-self:center; } .type{ grid-area:type; align-self:center; } .surname{ grid-area:surname; align-self:center; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } .firstname{ grid-area:firstname; align-self:center; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } button{ font-size:15px; height:50px; width:100px; border:none; border-radius:20px; } .bodu { width:100%; margin-bottom:10px; border:2px solid black; border-radius:9px; background-color:rgb(50,50,50); } </style>