98 lines
2.0 KiB
Vue
Executable File
98 lines
2.0 KiB
Vue
Executable File
<script lang="ts" setup>
|
|
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
|
|
import {BellRing, Mail} from 'lucide-vue-next';
|
|
import SidebarRight from "~/components/SidebarRight.vue";
|
|
|
|
const {$gsap} = useNuxtApp()
|
|
const mainLayoutStore = useMainLayoutStore()
|
|
const home = ref({
|
|
icon: 'pi pi-home'
|
|
});
|
|
const router = useRouter()
|
|
const routes=computed(()=>{
|
|
const route=router.currentRoute.value.name as string
|
|
return route.split('-').map(x => {
|
|
return {
|
|
label: x.charAt(0).toUpperCase() + x.slice(1),
|
|
icon: 'pi pi-angle'
|
|
}
|
|
})
|
|
})
|
|
const visibleRight = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<section class="title-bar-layout">
|
|
<Sidebar v-model:visible="visibleRight" header="通知" position="right">
|
|
<SidebarRight/>
|
|
</Sidebar>
|
|
<h1 class="name">
|
|
<Breadcrumb :home="home" :model="routes" />
|
|
</h1>
|
|
<div class="action">
|
|
<Icon name="BellRing" @click="visibleRight=true" :stroke-width="1.5" :size="20"/>
|
|
<Icon name="Mail" :stroke-width="1.5" :size="20"/>
|
|
</div>
|
|
<div class="user">
|
|
<UserMini/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "base";
|
|
|
|
.title-bar-layout {
|
|
grid-area: titlebar;
|
|
background: $light-bg-color;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto auto;
|
|
grid-template-rows: 1fr;
|
|
align-items: center;
|
|
padding: 0 $padding*2;
|
|
gap: $gap*2;
|
|
@include SC_Font();
|
|
.dark-mode & {
|
|
background: $dark-bg-color;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-weight: 700;
|
|
font-size: 26px;
|
|
color: $light-text-color;
|
|
|
|
.dark-mode & {
|
|
color: $dark-text-color;
|
|
}
|
|
}
|
|
|
|
.user {
|
|
grid-column: 4;
|
|
}
|
|
|
|
.action {
|
|
display: flex;
|
|
gap: $gap*2;
|
|
grid-column: 3;
|
|
svg{
|
|
cursor: pointer;
|
|
stroke: rgba(51, 51, 51, 0.5);
|
|
&:hover{
|
|
stroke: $light-text-color;
|
|
}
|
|
.dark-mode &{
|
|
stroke: rgba(255, 255, 255, 0.5);
|
|
&:hover{
|
|
stroke: $dark-text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:deep(.p-breadcrumb){
|
|
background: unset;
|
|
.p-menuitem-text{
|
|
color: #D3D3D3;
|
|
}
|
|
}
|
|
</style> |