60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
|
<script setup>
|
||
|
|
import logoImg from '@/assets/logo.png'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
size: {
|
||
|
|
type: String,
|
||
|
|
default: 'medium', // small, medium, large
|
||
|
|
},
|
||
|
|
showAppName: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
showSlogan: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
const sizeClasses = {
|
||
|
|
small: 'h-8',
|
||
|
|
medium: 'h-12',
|
||
|
|
large: 'h-16',
|
||
|
|
}
|
||
|
|
|
||
|
|
const textSizeClasses = {
|
||
|
|
small: 'text-xl',
|
||
|
|
medium: 'text-2xl',
|
||
|
|
large: 'text-3xl',
|
||
|
|
}
|
||
|
|
|
||
|
|
const sloganSizeClasses = {
|
||
|
|
small: 'text-xs',
|
||
|
|
medium: 'text-sm',
|
||
|
|
large: 'text-base',
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<img :src="logoImg" alt="DataFlow Logo" :class="['object-contain', sizeClasses[size]]" />
|
||
|
|
|
||
|
|
<div v-if="showAppName || showSlogan" class="flex flex-col">
|
||
|
|
<span
|
||
|
|
v-if="showAppName"
|
||
|
|
class="text-[#4da30d] font-bold leading-tight"
|
||
|
|
:class="textSizeClasses[size]"
|
||
|
|
>
|
||
|
|
DataFlow
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="showSlogan"
|
||
|
|
class="text-gray-600 leading-tight"
|
||
|
|
:class="sloganSizeClasses[size]"
|
||
|
|
>
|
||
|
|
数据管理平台
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|