99 lines
3.1 KiB
Vue
99 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
// 项目 logo:波普贴纸,双款式跟随 app store(burst 星爆 / seal 波浪封印,
|
|
// 设置 · 关于点击 logo 切换)。固定品牌色值不走 CSS 变量——favicon 与深浅主题共用同一套颜色。
|
|
import { computed } from 'vue'
|
|
|
|
import { useAppStore } from '@/stores/app'
|
|
|
|
withDefaults(defineProps<{ size?: number }>(), { size: 48 })
|
|
|
|
const BURST =
|
|
'M24 5 L27.9 9.5 L33.5 7.5 L34.6 13.4 L40.5 14.5 L38.5 20.1 L43 24 L38.5 27.9 ' +
|
|
'L40.5 33.5 L34.6 34.6 L33.5 40.5 L27.9 38.5 L24 43 L20.1 38.5 L14.5 40.5 L13.4 34.6 ' +
|
|
'L7.5 33.5 L9.5 27.9 L5 24 L9.5 20.1 L7.5 14.5 L13.4 13.4 L14.5 7.5 L20.1 9.5 Z'
|
|
// 十二瓣扇贝圆(经典价签贴纸),内圈虚线封印
|
|
const SEAL =
|
|
'M39.5 19.9 A5.8 5.8 0 0 0 35.3 12.7 A5.8 5.8 0 0 0 28.1 8.5 A5.8 5.8 0 0 0 19.9 8.5 ' +
|
|
'A5.8 5.8 0 0 0 12.7 12.7 A5.8 5.8 0 0 0 8.5 19.9 A5.8 5.8 0 0 0 8.5 28.1 ' +
|
|
'A5.8 5.8 0 0 0 12.7 35.3 A5.8 5.8 0 0 0 19.9 39.5 A5.8 5.8 0 0 0 28.1 39.5 ' +
|
|
'A5.8 5.8 0 0 0 35.3 35.3 A5.8 5.8 0 0 0 39.5 28.1 A5.8 5.8 0 0 0 39.5 19.9 Z'
|
|
|
|
const VARIANTS = {
|
|
burst: { d: BURST, strokeWidth: 2.6, textY: 28.8, fontSize: 13, ring: false },
|
|
seal: { d: SEAL, strokeWidth: 2.4, textY: 28.6, fontSize: 12.5, ring: true },
|
|
} as const
|
|
|
|
const app = useAppStore()
|
|
const v = computed(() => VARIANTS[app.logoVariant])
|
|
</script>
|
|
|
|
<template>
|
|
<span class="logo-wrap" :style="{ width: `${size}px`, height: `${size}px` }">
|
|
<Transition name="logo-slide">
|
|
<svg :key="app.logoVariant" :width="size" :height="size" viewBox="0 0 48 48" aria-hidden="true">
|
|
<g transform="rotate(-8 24 24)">
|
|
<path :d="v.d" fill="#3A2418" transform="translate(1.9,2.4)"></path>
|
|
<path :d="v.d" fill="#C96442" stroke="#FFFDF7" :stroke-width="v.strokeWidth" stroke-linejoin="round"></path>
|
|
<circle
|
|
v-if="v.ring"
|
|
cx="24"
|
|
cy="24"
|
|
r="12.5"
|
|
fill="none"
|
|
stroke="#FAF3E3"
|
|
stroke-width="1"
|
|
stroke-dasharray="2.4 2.6"
|
|
opacity="0.7"
|
|
></circle>
|
|
<text
|
|
x="24"
|
|
:y="v.textY"
|
|
text-anchor="middle"
|
|
font-family="Georgia,'Times New Roman',serif"
|
|
:font-size="v.fontSize"
|
|
font-weight="900"
|
|
fill="#FAF3E3"
|
|
>
|
|
O!
|
|
</text>
|
|
</g>
|
|
</svg>
|
|
</Transition>
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 款式切换:旧款右滑淡出、新款自左滑入(整体从左到右);
|
|
离开元素绝对定位避免过渡期双元素撑开布局 */
|
|
.logo-wrap {
|
|
position: relative;
|
|
display: inline-block;
|
|
line-height: 0;
|
|
}
|
|
.logo-slide-enter-active,
|
|
.logo-slide-leave-active {
|
|
transition:
|
|
transform 0.35s ease,
|
|
opacity 0.35s ease;
|
|
}
|
|
.logo-slide-leave-active {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.logo-slide-enter-from {
|
|
transform: translateX(-45%);
|
|
opacity: 0;
|
|
}
|
|
.logo-slide-leave-to {
|
|
transform: translateX(45%);
|
|
opacity: 0;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.logo-slide-enter-active,
|
|
.logo-slide-leave-active {
|
|
transition: none;
|
|
}
|
|
}
|
|
</style>
|