mirror of
https://origin.cursor.com/mrdevmx/panels.git
synced 2026-10-09 17:13:18 +00:00
74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<div class="saas-shell">
|
|
<header class="saas-top">
|
|
<button type="button" class="brand" @click="navigateTo('/')">
|
|
<span class="brand-word">PANELS</span>
|
|
<span class="brand-tag">SaaS</span>
|
|
</button>
|
|
<div class="saas-top-end">
|
|
<Button label="Empresas" text size="small" @click="navigateTo('/')" />
|
|
<Button label="SMTP" text size="small" @click="navigateTo('/smtp')" />
|
|
<span class="user-label">{{ user?.display_name || user?.username }}</span>
|
|
<Button icon="pi pi-sign-out" text rounded aria-label="Salir" @click="logout" />
|
|
</div>
|
|
</header>
|
|
<main class="saas-main">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { user, logout } = useAuth();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.saas-shell {
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(1200px 500px at 10% -10%, rgba(15, 76, 129, 0.12), transparent 60%),
|
|
linear-gradient(180deg, #f5f7fa 0%, #eef1f5 100%);
|
|
}
|
|
.saas-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.85rem 1.25rem;
|
|
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 0.45rem;
|
|
border: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.brand-word {
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
font-size: 1.15rem;
|
|
}
|
|
.brand-tag {
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #0f4c81;
|
|
font-weight: 700;
|
|
}
|
|
.saas-top-end {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
.user-label {
|
|
font-size: 0.9rem;
|
|
color: #334155;
|
|
}
|
|
.saas-main {
|
|
padding: 0;
|
|
}
|
|
</style>
|