44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
src?: string
|
|
name?: string
|
|
englishName?: string
|
|
}>(), {
|
|
src: '/images/brand-mark-v2.png',
|
|
name: '慧遇书院',
|
|
englishName: 'HUIYU ACADEMY',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink to="/" class="brand-logo" :aria-label="`返回${name}首页`">
|
|
<img :src="src" :alt="name">
|
|
<span class="brand-logo-copy"><strong>{{ name }}</strong><small v-if="englishName">{{ englishName }}</small></span>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.brand-logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.brand-logo img {
|
|
display: block;
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.brand-logo-copy { display: grid; margin-left: 10px; line-height: 1; white-space: nowrap; }
|
|
.brand-logo-copy strong { font: 600 23px/1.15 var(--serif); letter-spacing: .08em; }
|
|
.brand-logo-copy small { margin-top: 3px; font-size: 8px; letter-spacing: .12em; }
|
|
|
|
@media (max-width: 720px) {
|
|
.brand-logo img { width: 38px; height: 38px; }
|
|
.brand-logo-copy { margin-left: 8px; }
|
|
.brand-logo-copy strong { font-size: 18px; }
|
|
.brand-logo-copy small { font-size: 7px; }
|
|
}
|
|
</style>
|