91 lines
2.6 KiB
Vue
91 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { logoProps } from './types';
|
|
import { type NiConfig, useNiConfig } from '~/config';
|
|
const niConfig = useNiConfig()
|
|
const props = defineProps(logoProps);
|
|
|
|
// * logo内容
|
|
const logoContent = computed<string[]>(() => {
|
|
const name = props.logoName || niConfig.get('logoName') || ['N', 'i']
|
|
return Array.isArray(name) ? name : [String(name)[0], String(name)[1]]
|
|
})
|
|
console.log(props, niConfig, logoContent);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ni-logo">
|
|
<div class="content">
|
|
<div class="first">{{ logoContent[0] }}</div>
|
|
<div class="second">{{ logoContent[1] }}</div>
|
|
</div>
|
|
<div class="mask">
|
|
<div class="first"><div class="maskContainer"><div class="maskContent">{{ logoContent[0] }}</div></div></div>
|
|
<div class="second"><div class="maskContainer"><div class="maskContent">{{ logoContent[1] }}</div></div></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/style.scss' as niStyle;
|
|
.ni-logo{
|
|
// logo样式的一些变量
|
|
// * logo宽度
|
|
--ni-logo-width: 6em;
|
|
// * logo高度
|
|
--ni-logo-height: 3em;
|
|
// * logo遮罩层背景颜色
|
|
--ni-logo-mask-background-color: #111;
|
|
// * logo字体颜色
|
|
--ni-logo-mask-font-color: #fff;
|
|
|
|
// = logo容器
|
|
position: relative;
|
|
width: var(--ni-logo-width);
|
|
height: var(--ni-logo-height);
|
|
user-select: none;
|
|
.content,.mask{
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
&.content > div{
|
|
flex: 1;
|
|
@extend .AllCenter;
|
|
}
|
|
}
|
|
.content{
|
|
position: relative;
|
|
}
|
|
.mask{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
& > div.first, & > div.second{
|
|
position: relative;
|
|
width: 50%;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
&.first{
|
|
}
|
|
&.second{
|
|
& > div.maskContainer{
|
|
background-color: var(--ni-logo-mask-background-color);
|
|
color: var(--ni-logo-mask-font-color);
|
|
@extend .LogoAnimation;
|
|
}
|
|
}
|
|
& > div.maskContainer{
|
|
width: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
& > div.maskContent{
|
|
width: calc(var(--ni-logo-width) / 2);
|
|
height: 100%;
|
|
@extend .AllCenter;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |