You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.6 KiB
79 lines
1.6 KiB
<template>
|
|
<div :class="getAppLogoClass" @click="goHome">
|
|
<div class="ml-2 truncate md:opacity-100" :class="getTitleClass">
|
|
{{ title }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { useDesign } from '~/composables/useDesign';
|
|
|
|
const { prefixCls } = useDesign('app-logo');
|
|
const title = import.meta.env.VITE_GLOB_APP_TITLE
|
|
const getAppLogoClass = computed(() => [
|
|
prefixCls
|
|
]);
|
|
const getTitleClass = computed(() => [
|
|
`${prefixCls}__title`,
|
|
]);
|
|
const router = useRouter()
|
|
function goHome() {
|
|
router.push('/')
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
$prefix-cls: '#{$name-prefix}-app-logo';
|
|
$header-prefix-cls: '#{$name-prefix}-layout-header';
|
|
.#{$header-prefix-cls} {
|
|
&--white {
|
|
.#{$prefix-cls} {
|
|
&__title {
|
|
//color: @white;
|
|
color: #333 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--host {
|
|
.#{$prefix-cls} {
|
|
&__title {
|
|
color: $white !important;
|
|
//color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.#{$prefix-cls} {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 7px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
&.light {
|
|
//border-bottom: 1px solid @border-color-base;
|
|
}
|
|
|
|
&.collapsed-show-title {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
&.light &__title {
|
|
//color: @primary-color;
|
|
color: #333;
|
|
}
|
|
|
|
&.dark &__title {
|
|
//color: @white;
|
|
color: #333;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
transition: all 0.5s;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
</style>
|