105 lines
3.6 KiB
Vue
105 lines
3.6 KiB
Vue
<template>
|
|
<div style="background-color: #f4f4f4;">
|
|
<DefaultLayout />
|
|
|
|
<v-container fluid style="margin-top: 100px; font-size: 3rem;">
|
|
<v-row justify="center">
|
|
<v-col cols="12" class="text-center">
|
|
<v-row justify="center">
|
|
<!-- Colonne de gauche -->
|
|
<v-col class="text-left d-flex justify-center "> <!-- Ajout de align-center -->
|
|
<router-link to="/" class="d-flex justify-center">
|
|
<!-- Retrait de la classe align-center -->
|
|
<v-btn color="#a30e79">Accueil</v-btn>
|
|
</router-link>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
|
|
<div class="headline font-weight-bold">UTILISATEURS</div>
|
|
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
|
|
<v-container fluid style="margin-bottom: 80px;">
|
|
<v-row justify="center">
|
|
<v-col cols="12" sm="8" md="8">
|
|
<v-container class="mt-10">
|
|
<v-row justify="center">
|
|
<router-link v-for="(profile, index) in profiles" :key="index" :to="profile.routerLink"
|
|
class="text-decoration-none">
|
|
<v-col>
|
|
<v-card class="mb-4 card-equal-width" style="max-width: 250px; height: 325px;">
|
|
<v-img :src="profile.imageUrl" height="200px" width="300px"
|
|
style="margin-top: 10px;"></v-img>
|
|
<v-card-title style="font-weight: 600;" class="text-center">{{ profile.name
|
|
}}</v-card-title>
|
|
<v-card-text class="text-center">{{ profile.description }}</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</router-link>
|
|
</v-row>
|
|
</v-container>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
<FooterLayout />
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.card-equal-width {
|
|
max-width: 300px;
|
|
/* Ajustez cette valeur selon vos besoins */
|
|
}
|
|
</style>
|
|
|
|
<script setup>
|
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
|
import { ref } from 'vue';
|
|
|
|
const profiles = ref([
|
|
{
|
|
id: 1,
|
|
name: "Hutopy",
|
|
description: "Page officiel",
|
|
imageUrl: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
|
|
routerLink: 'Hutopy'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "L'effet",
|
|
description: "Fondation",
|
|
imageUrl: '/images/usersmedia/leffet/profilepictures/leffetProfile01.png',
|
|
routerLink: 'leffet'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Guillaume M",
|
|
description: "Créateur de contenus",
|
|
imageUrl: '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
|
|
routerLink: 'guillaumeaime'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Chloé Beaugrand",
|
|
description: "Spécialiste en médias sociaux",
|
|
imageUrl: '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png',
|
|
routerLink: 'chloebeaugrand'
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.text-decoration-none {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card-equal-width {
|
|
width: 220px;
|
|
}
|
|
</style>
|