VuesticLogo.vue
1.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
<svg :height="height" viewBox="0 0 240 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="paint0_linear" x1="0" y1="0" x2="240" y2="0" gradientUnits="userSpaceOnUse">
<stop :stop-color="colorsComputed.end" />
<stop offset="1" :stop-color="colorsComputed.start" />
</linearGradient>
</defs>
<!-- 主标题 HaHRCS -->
<!-- 基线 y=40, 字号 36 -->
<text
x="5"
y="40"
fill="url(#paint0_linear)"
font-family="sans-serif"
font-weight="900"
font-size="36"
font-style="italic"
style="letter-spacing: -1.5px;"
>
HHRCS
</text>
<!-- 副标题 VDA -->
<!-- 基线 y=24, 顶部 y=14 -->
<!-- 保持在右侧 x=175 -->
<text
x="146"
y="24"
:fill="colorsComputed.start"
font-family="sans-serif"
font-weight="bold"
font-size="12"
style="letter-spacing: 1px;"
>
VDA
</text>
<!-- 装饰折线 -->
<!-- 底部横线延长至 148 -->
<!-- 向上折线延伸至大字顶部水平位置 y=14 -->
<!-- 起点(10, 42) -> 拐点(148, 42) -> 终点(170, 14) -->
<path
d="M10 48 H130 L138 14"
:stroke="colorsComputed.end"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
opacity="0.7"
/>
<!-- 路径终点圆点 -->
<circle cx="138" cy="14" r="2.5" :fill="colorsComputed.start" />
</svg>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useColors } from 'vuestic-ui'
const { getColor } = useColors()
const props = withDefaults(
defineProps<{
height?: number
start?: string
end?: string
}>(),
{
height: 36,
start: 'primary',
end: undefined,
},
)
const colorsComputed = computed(() => {
return {
start: getColor(props.start),
end: getColor(props.end || props.start),
}
})
</script>