UpdateUI Css Page creator
This commit is contained in:
PascalMarchesseault
@@ -1,23 +1,275 @@
|
||||
<template>
|
||||
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<main class="top-aligned-column">
|
||||
|
||||
|
||||
<div class="column">
|
||||
<h1>Dashboard</h1>
|
||||
<v-container>
|
||||
<div class="d-flex flex-colum flex-md-row justify-space-between">
|
||||
<div
|
||||
class="w-100 pa-4 rounded-lg elevation-2"
|
||||
>
|
||||
TEST
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="w-100 pa-4 rounded-lg elevation-2"
|
||||
>
|
||||
TEST
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="center-column column">
|
||||
<p>CreatorFolio YOOOOOOO</p>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
<v-layout column justify-center align-center>
|
||||
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
|
||||
<v-card class="card-background" style="margin-top: -30px;">
|
||||
<!-- Remonter les cartes de 30px et limiter la largeur -->
|
||||
<v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
|
||||
<v-card class="card-background" style="margin-top: -30px;">
|
||||
<!-- Remonter les cartes de 30px et limiter la largeur -->
|
||||
<v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<v-container>
|
||||
<v-row justify="center"> <!-- Centrage horizontal -->
|
||||
<v-col cols="12" sm="6"> <!-- Taille de la colonne pour occuper la moitié de la largeur en plein écran -->
|
||||
<div class="banner-container" style="width: 100%; max-width: 50vw; margin: auto;">
|
||||
<!-- Utilisation de margin: auto; pour centrer -->
|
||||
<img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture"
|
||||
style="width: 100%; margin-bottom: -80px;">
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="banner-container">
|
||||
<img src="../../../images/guillaume.png" class="profile-picture">
|
||||
<img src="../../../images/checkprofile.png" class="check-profile">
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<v-container class="label-creator">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" sm="2" md="3" class="d-flex justify-center"></v-col>
|
||||
<v-col cols="12" sm="4" md="3" class="d-flex justify-center"></v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<v-layout column justify-center align-center>
|
||||
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
|
||||
<v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 460px;">
|
||||
<!-- Remonter les cartes de 30px et limiter la largeur -->
|
||||
<v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
|
||||
<v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 20px">
|
||||
<!-- Remonter les cartes de 30px et limiter la largeur -->
|
||||
<v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
|
||||
const { name } = useDisplay()
|
||||
|
||||
const height = computed(() => {
|
||||
// name is reactive and
|
||||
// must use .value
|
||||
switch (name.value) {
|
||||
case 'xs': return 220
|
||||
case 'sm': return 400
|
||||
case 'md': return 500
|
||||
case 'lg': return 600
|
||||
case 'xl': return 800
|
||||
case 'xxl': return 1200
|
||||
}
|
||||
|
||||
return undefined
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.sticky-column {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.profile-picture-position {
|
||||
margin-top: 25;
|
||||
}
|
||||
|
||||
.label-paiement-color {
|
||||
color: rgba(163, 14, 121, 0.85);
|
||||
/* Couleur du texte (utilisez la couleur souhaitée) */
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
/* Couleur de fond */
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
/* Ombre */
|
||||
|
||||
}
|
||||
|
||||
.tips-h1 {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: rgba(163, 14, 121, 0.85);
|
||||
/* Couleur du texte (utilisez la couleur souhaitée) */
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.test-color {
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
}
|
||||
|
||||
.check-profile {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-top: -20px;
|
||||
margin-left: 140px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
/* Placez les levels derrière la photo de profil */
|
||||
}
|
||||
|
||||
.label-tips {
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.label-creator-texte-color {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-creator-position {
|
||||
margin-top: -25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label-creator {
|
||||
margin-right: 43px;
|
||||
margin-top: -160px;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
/* Placez les levels derrière la photo de profil */
|
||||
/* Valeur inférieure pour placer derrière */
|
||||
}
|
||||
|
||||
.card-background {
|
||||
background-color: rgba(107, 0, 101, 1);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.flow-menu {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-creator {
|
||||
align-items: center;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
border-radius: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
|
||||
border: 2px solid rgba(163, 14, 121, 0.5);
|
||||
z-index: 1;
|
||||
/* Assurez-vous que la photo de profil est au-dessus des autres éléments */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.smooth-picture {
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.column-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.column-creatorFolio {
|
||||
flex-grow: 1.2;
|
||||
/* La colonne centrale peut agrandir de 20% */
|
||||
flex-shrink: 0;
|
||||
/* Empêche la colonne centrale de rétrécir */
|
||||
flex-basis: auto;
|
||||
/* La colonne centrale prend sa taille de base */
|
||||
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column-creatorFolio-side {
|
||||
flex-grow: 0;
|
||||
/* Les colonnes latérales ne peuvent pas agrandir */
|
||||
flex-shrink: 0;
|
||||
/* Empêche les colonnes latérales de rétrécir */
|
||||
flex-basis: 200px;
|
||||
/* Largeur fixe pour les colonnes latérales */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rgb-background {
|
||||
background-color: rgba(163, 14, 121, 0.1);
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.top-aligned-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.center-column {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user