100 lines
3.0 KiB
Vue
100 lines
3.0 KiB
Vue
<template>
|
|
|
|
<body style="background-color:#f4f4f4">
|
|
<DefaultLayout></DefaultLayout>
|
|
|
|
<v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
|
|
|
|
<v-row justify="center">
|
|
<v-col cols="12">
|
|
<v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
|
|
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
|
|
<v-col cols="12" class="text-right">
|
|
<v-btn style="margin-right: 3%"> <v-icon>mdi-pencil</v-icon></v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row justify="center">
|
|
|
|
</v-row>
|
|
|
|
|
|
<v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
|
|
<v-container>
|
|
<v-row>
|
|
<v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
|
|
<v-row style="margin-bottom: 20px;">
|
|
<v-spacer></v-spacer>
|
|
<v-col style="margin-top: -70px;">
|
|
<v-row>
|
|
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
|
|
</v-row>
|
|
<v-col>
|
|
<v-btn style="margin-top: -30px;">
|
|
<v-icon>mdi-pencil</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
|
|
</v-col>
|
|
<v-spacer></v-spacer>
|
|
</v-row>
|
|
<p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
|
|
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
|
|
|
|
<v-form>
|
|
<v-text-field v-model="firstName" label="Prénom"></v-text-field>
|
|
<v-text-field v-model="lastName" label="Nom"></v-text-field>
|
|
<v-text-field v-model="titre" label="Titre"></v-text-field>
|
|
<v-text-field v-model="description" label="Description"></v-text-field>
|
|
|
|
</v-form>
|
|
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
|
|
|
|
<router-link :to="{ name: 'creatorfolio' }" class="">
|
|
<v-btn style="margin-right: 20px;">Retour</v-btn>
|
|
</router-link>
|
|
<v-btn>Éditer</v-btn>
|
|
|
|
</v-col>
|
|
|
|
</v-col>
|
|
|
|
</v-row>
|
|
</v-container>
|
|
</v-container>
|
|
<FooterLayout></FooterLayout>
|
|
</body>
|
|
</template>
|
|
|
|
<script setup>
|
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
|
import { ref } from 'vue';
|
|
|
|
|
|
|
|
const profilePictureUrl = ref('../../../images/guillaume.png');
|
|
const bannerImageUrl = ref('../../../images/guillaimeaime3x.png');
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.your-profile-picture {
|
|
width: 300px;
|
|
border-radius: 40px;
|
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
|
|
|
|
}
|
|
|
|
.row-shadow {
|
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.col-shadow {
|
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
|
|
}
|
|
</style>
|