You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { BASIC_HOME_PATH } from '~/constants'
|
|
import { createNamespace } from '~/utils'
|
|
|
|
const props = defineProps({
|
|
showTitle: { type: Boolean, default: true },
|
|
homePath: { type: String, default: BASIC_HOME_PATH },
|
|
})
|
|
|
|
const { push } = useRouter()
|
|
const { logo } = useSiteSetting()
|
|
const { getShowLogo } = useRootSetting()
|
|
|
|
const getIsShowLogo = computed(() => unref(getShowLogo))
|
|
const title = import.meta.env.VITE_APP_TITLE
|
|
const { bem } = createNamespace('app-logo')
|
|
|
|
function goHome() {
|
|
push(props.homePath)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="getIsShowLogo" :class="bem()" @click="goHome">
|
|
<img :src="`/${logo}`" alt="logo">
|
|
<div v-show="showTitle" class="ml-2 truncate md:opacity-100" :class="bem('title')">
|
|
{{ title }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.app-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 7px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
height: 48px;
|
|
background: transparent;
|
|
box-sizing: border-box;
|
|
|
|
img {
|
|
width: 32px;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
transition: all 0.5s;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
</style>
|