Jonathan Bourdon
ab911955ed
git-subtree-dir: frontend git-subtree-mainline:205a3bd14bgit-subtree-split:c070c0315d
103 lines
3.1 KiB
Vue
103 lines
3.1 KiB
Vue
<script setup>
|
|
import { useBrandingStore } from "@/stores/brandingStore.js";
|
|
import { ref } from "vue";
|
|
|
|
const branding = useBrandingStore();
|
|
const menu = ref(false); // C'est pour le menu déroulant!
|
|
|
|
// Fonction pour convertir une couleur hexadécimale en RGB afin d'appliquer la transparence avec nos couleurs du backend hex a rgb
|
|
function hexToRgb(hex) {
|
|
const bigint = parseInt(hex.replace('#', ''), 16);
|
|
const r = (bigint >> 16) & 255;
|
|
const g = (bigint >> 8) & 255;
|
|
const b = bigint & 255;
|
|
return `${r}, ${g}, ${b}`;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-center">
|
|
<!-- ExclusiveCard -->
|
|
<div
|
|
class="rounded-lg w-[290px] h-[380px] relative"
|
|
:style="{
|
|
backgroundColor: branding.colors.surface,
|
|
boxShadow: '0 10px 10px rgba(0, 0, 0, 0.3)',
|
|
borderColor: `rgba(${hexToRgb(branding.colors.secondary)}, 0.4)`,
|
|
borderWidth: '1px',
|
|
}"
|
|
>
|
|
<!-- Conteneur pour aligner le titre et le bouton -->
|
|
<div
|
|
class="flex items-center justify-between py-2 px-3"
|
|
:style="{ color: branding.colors.onPrimary }"
|
|
>
|
|
<div class="text-md">Comment créer un logo</div>
|
|
|
|
<!-- Bouton à trois points avec menu déroulant -->
|
|
<v-menu v-model="menu" activator="parent" offset-y>
|
|
<template #activator="{ props }">
|
|
<button
|
|
v-bind="props"
|
|
class="text-gray-600"
|
|
:style="{ color: branding.colors.onPrimary }"
|
|
>
|
|
<i class="mdi mdi-dots-vertical text-lg"></i>
|
|
</button>
|
|
</template>
|
|
<v-list
|
|
:style="{
|
|
backgroundColor: branding.colors.secondary,
|
|
color: branding.colors.onSecondary,
|
|
}"
|
|
>
|
|
<v-list-item title="Modifier" @click="modifier" />
|
|
<v-list-item title="Effacer" @click="effacer" />
|
|
<v-list-item title="Reporter" @click="reporter" />
|
|
</v-list>
|
|
</v-menu>
|
|
</div>
|
|
|
|
<div class="relative h-[170px] overflow-hidden">
|
|
<img
|
|
src="/images/hutopymedia/banners/hutopyul.png"
|
|
class="w-full h-full object-cover blur-md"
|
|
alt="image"
|
|
/>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<i
|
|
class="mdi mdi-lock text-7xl p-2 rounded-full"
|
|
:style="{
|
|
color: branding.colors.secondary,
|
|
border: `2px solid ${branding.colors.secondary}`,
|
|
}"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-end pa-2 px-4" :style="{ color: branding.colors.onPrimary }">
|
|
14-05-2024
|
|
</div>
|
|
|
|
<div class="text-justify px-4 text-md" :style="{ color: branding.colors.onPrimary }">
|
|
Tutoriel sur comment s'assurer d'avoir un logo unique et percutant
|
|
qui se démarque de la concurrence.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|
|
|
|
<script>
|
|
function modifier() {
|
|
console.log("Modifier l'élément");
|
|
}
|
|
function effacer() {
|
|
console.log("Effacer l'élément");
|
|
}
|
|
function reporter() {
|
|
console.log("Reporter l'élément");
|
|
}
|
|
</script>
|