Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MelissaPerfil: cards com chrome estilo financeiro (icon-box + sub + body)

Browse Source 
Cada card .mpr-w agora segue o mesmo padrao visual do MelissaFinanceiro:
- Head: icon-box 36x36 com bg primary-tint + titulo + subtitulo
- Border-bottom separando head do body
- Body wrappado em .mpr-w__body com padding 14px e gap 12px
- Box-shadow elevando o card sobre o bg da sidebar/main

Subtitulos novos por card:
- Sua evolucao  : Nivel, conquistas e pendencias
- Avatar        : Foto exibida no menu e cabecalho
- Identidade    : Nome, apelido e descricao profissional
- Contato       : WhatsApp e e-mail de login
- Bio           : Apresentacao curta para o seu perfil publico
- Sites e Redes : Site, redes sociais e links customizados

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 15:22:22 -03:00
parent f2fd2e4722
commit dad1fd72c2
1 changed files with 90 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaPerfil.vue
+90 -34
View File
@@ -533,11 +533,14 @@ onBeforeUnmount(() => {
<!-- Card: Sua evolução --> <!-- Card: Sua evolução -->
<div class="mpr-w mpr-w--side"> <div class="mpr-w mpr-w--side">
<div class="mpr-w__head"> <div class="mpr-w__head">
<span class="mpr-w__title"> <div class="mpr-w__icon"><i class="pi pi-star" /></div>
<i class="pi pi-star" /> Sua evolução <div class="mpr-w__title">
</span> <div class="mpr-w__title-text">Sua evolução</div>
<div class="mpr-w__sub">Nível, conquistas e pendências</div>
</div>
</div> </div>
<div class="mpr-w__body">
<div class="mpr-level"> <div class="mpr-level">
<div <div
class="mpr-level__icon" class="mpr-level__icon"
@@ -613,15 +616,19 @@ onBeforeUnmount(() => {
{{ tip.text }} {{ tip.text }}
</button> </button>
</div> </div>
</div><!-- /.mpr-w__body -->
</div> </div>
<!-- Card: Avatar --> <!-- Card: Avatar -->
<div id="mpr-sec-avatar" class="mpr-w mpr-w--side"> <div id="mpr-sec-avatar" class="mpr-w mpr-w--side">
<div class="mpr-w__head"> <div class="mpr-w__head">
<span class="mpr-w__title"> <div class="mpr-w__icon"><i class="pi pi-image" /></div>
<i class="pi pi-image" /> Avatar <div class="mpr-w__title">
</span> <div class="mpr-w__title-text">Avatar</div>
<div class="mpr-w__sub">Foto exibida no menu e cabeçalho</div>
</div>
</div> </div>
<div class="mpr-w__body">
<div class="mpr-avatar"> <div class="mpr-avatar">
<div class="mpr-avatar__preview"> <div class="mpr-avatar__preview">
<img v-if="ui.avatarPreview" :src="ui.avatarPreview" alt="Avatar" /> <img v-if="ui.avatarPreview" :src="ui.avatarPreview" alt="Avatar" />
@@ -650,6 +657,7 @@ onBeforeUnmount(() => {
/> />
<div class="mpr-avatar__hint">JPG, PNG ou WebP. Máximo 5 MB.</div> <div class="mpr-avatar__hint">JPG, PNG ou WebP. Máximo 5 MB.</div>
</div> </div>
</div><!-- /.mpr-w__body -->
</div> </div>
</div> </div>
@@ -667,8 +675,10 @@ onBeforeUnmount(() => {
<!-- Skeleton enquanto carrega --> <!-- Skeleton enquanto carrega -->
<template v-if="loading"> <template v-if="loading">
<div class="mpr-w" v-for="n in 3" :key="`sk-${n}`"> <div class="mpr-w" v-for="n in 3" :key="`sk-${n}`">
<Skeleton width="40%" height="20px" class="mb-3" /> <div class="mpr-w__body">
<Skeleton v-for="m in 3" :key="`sk-${n}-${m}`" width="100%" height="40px" class="mb-2" /> <Skeleton width="40%" height="20px" class="mb-3" />
<Skeleton v-for="m in 3" :key="`sk-${n}-${m}`" width="100%" height="40px" class="mb-2" />
</div>
</div> </div>
</template> </template>
@@ -676,10 +686,13 @@ onBeforeUnmount(() => {
<!-- ── Identidade ── --> <!-- ── Identidade ── -->
<div id="mpr-sec-identidade" class="mpr-w"> <div id="mpr-sec-identidade" class="mpr-w">
<div class="mpr-w__head"> <div class="mpr-w__head">
<span class="mpr-w__title"> <div class="mpr-w__icon"><i class="pi pi-id-card" /></div>
<i class="pi pi-id-card" /> Identidade <div class="mpr-w__title">
</span> <div class="mpr-w__title-text">Identidade</div>
<div class="mpr-w__sub">Nome, apelido e descrição profissional</div>
</div>
</div> </div>
<div class="mpr-w__body">
<div class="mpr-grid"> <div class="mpr-grid">
<div class="mpr-field mpr-field--full"> <div class="mpr-field mpr-field--full">
<FloatLabel variant="on"> <FloatLabel variant="on">
@@ -741,15 +754,19 @@ onBeforeUnmount(() => {
</FloatLabel> </FloatLabel>
</div> </div>
</div> </div>
</div><!-- /.mpr-w__body -->
</div> </div>
<!-- ── Contato ── --> <!-- ── Contato ── -->
<div id="mpr-sec-contato" class="mpr-w"> <div id="mpr-sec-contato" class="mpr-w">
<div class="mpr-w__head"> <div class="mpr-w__head">
<span class="mpr-w__title"> <div class="mpr-w__icon"><i class="pi pi-phone" /></div>
<i class="pi pi-phone" /> Contato <div class="mpr-w__title">
</span> <div class="mpr-w__title-text">Contato</div>
<div class="mpr-w__sub">WhatsApp e e-mail de login</div>
</div>
</div> </div>
<div class="mpr-w__body">
<div class="mpr-grid"> <div class="mpr-grid">
<div class="mpr-field mpr-field--half"> <div class="mpr-field mpr-field--half">
<FloatLabel variant="on"> <FloatLabel variant="on">
@@ -780,15 +797,19 @@ onBeforeUnmount(() => {
<small class="mpr-hint">Pra trocar, vá em Segurança.</small> <small class="mpr-hint">Pra trocar, vá em Segurança.</small>
</div> </div>
</div> </div>
</div><!-- /.mpr-w__body -->
</div> </div>
<!-- ── Bio ── --> <!-- ── Bio ── -->
<div id="mpr-sec-bio" class="mpr-w"> <div id="mpr-sec-bio" class="mpr-w">
<div class="mpr-w__head"> <div class="mpr-w__head">
<span class="mpr-w__title"> <div class="mpr-w__icon"><i class="pi pi-pencil" /></div>
<i class="pi pi-pencil" /> Bio <div class="mpr-w__title">
</span> <div class="mpr-w__title-text">Bio</div>
<div class="mpr-w__sub">Apresentação curta para o seu perfil público</div>
</div>
</div> </div>
<div class="mpr-w__body">
<FloatLabel variant="on"> <FloatLabel variant="on">
<Textarea <Textarea
id="mpr_bio" id="mpr_bio"
@@ -800,19 +821,23 @@ onBeforeUnmount(() => {
<label for="mpr_bio">Conte um pouco sobre você</label> <label for="mpr_bio">Conte um pouco sobre você</label>
</FloatLabel> </FloatLabel>
<small class="mpr-hint">Apresentação curta — aparece no seu perfil público.</small> <small class="mpr-hint">Apresentação curta — aparece no seu perfil público.</small>
</div><!-- /.mpr-w__body -->
</div> </div>
<!-- ── Sites e Redes ── --> <!-- ── Sites e Redes ── -->
<div id="mpr-sec-redes" class="mpr-w"> <div id="mpr-sec-redes" class="mpr-w">
<div class="mpr-w__head"> <div class="mpr-w__head">
<span class="mpr-w__title"> <div class="mpr-w__icon"><i class="pi pi-share-alt" /></div>
<i class="pi pi-share-alt" /> Sites e Redes <div class="mpr-w__title">
</span> <div class="mpr-w__title-text">Sites e Redes</div>
<div class="mpr-w__sub">Site, redes sociais e links customizados</div>
</div>
<button class="mpr-w__action" @click="addCustomSocial"> <button class="mpr-w__action" @click="addCustomSocial">
<i class="pi pi-plus" /> <i class="pi pi-plus" />
<span>Adicionar</span> <span>Adicionar</span>
</button> </button>
</div> </div>
<div class="mpr-w__body">
<div class="mpr-grid"> <div class="mpr-grid">
<div class="mpr-field mpr-field--half"> <div class="mpr-field mpr-field--half">
<FloatLabel variant="on"> <FloatLabel variant="on">
@@ -880,6 +905,7 @@ onBeforeUnmount(() => {
</button> </button>
</div> </div>
</div> </div>
</div><!-- /.mpr-w__body -->
</div> </div>
</template> </template>
</div> </div>
@@ -1109,35 +1135,56 @@ onBeforeUnmount(() => {
} }
} }
/* ═══════ Card-base (mpr-w) ═══════ */ /* ═══════ Card-base (mpr-w) — visual igual aos cards do MelissaFinanceiro:
head com icon-box colorido + titulo + subtitulo + border-bottom; body
com padding interno separado; box-shadow pra elevacao. */
.mpr-w { .mpr-w {
background: var(--m-bg-medium); background: var(--m-bg-soft);
border: 1px solid var(--m-border); border: 1px solid var(--m-border);
border-radius: 12px; border-radius: 12px;
padding: 14px; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px;
} }
.mpr-w--side { .mpr-w--side {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
} }
.mpr-w__head { .mpr-w__head {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 10px;
gap: 8px; padding: 12px 14px;
padding: 0; border-bottom: 1px solid var(--m-border);
} }
.mpr-w__icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 9px;
flex-shrink: 0;
background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
color: var(--p-primary-color);
font-size: 1rem;
}
.mpr-w__icon > i { font-size: 0.95rem; }
.mpr-w__title { .mpr-w__title {
display: inline-flex; flex: 1;
align-items: center; min-width: 0;
gap: 8px; }
font-size: 0.86rem; .mpr-w__title-text {
font-size: 0.92rem;
font-weight: 700; font-weight: 700;
color: var(--m-text); color: var(--m-text);
line-height: 1.2;
}
.mpr-w__sub {
font-size: 0.74rem;
color: var(--m-text-muted);
margin-top: 2px;
line-height: 1.3;
} }
.mpr-w__title > i { color: var(--p-primary-color); font-size: 0.92rem; }
.mpr-w__action { .mpr-w__action {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -1145,16 +1192,25 @@ onBeforeUnmount(() => {
padding: 5px 10px; padding: 5px 10px;
border-radius: 7px; border-radius: 7px;
border: 1px solid var(--m-border); border: 1px solid var(--m-border);
background: var(--m-bg-soft); background: var(--m-bg-medium);
color: var(--m-text); color: var(--m-text);
cursor: pointer; cursor: pointer;
font-size: 0.74rem; font-size: 0.74rem;
font-weight: 600; font-weight: 600;
flex-shrink: 0;
transition: background-color 120ms ease; transition: background-color 120ms ease;
} }
.mpr-w__action:hover { background: var(--m-bg-soft-hover); } .mpr-w__action:hover { background: var(--m-bg-soft-hover); }
.mpr-w__action > i { font-size: 0.72rem; color: var(--p-primary-color); } .mpr-w__action > i { font-size: 0.72rem; color: var(--p-primary-color); }
/* Body do card — wrapper unificado pra padding/gap consistente */
.mpr-w__body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ═══════ Gamificação ═══════ */ /* ═══════ Gamificação ═══════ */
.mpr-level { .mpr-level {
display: flex; display: flex;