106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<template>
|
|
<div class="segment-readout flex h-11 items-end justify-center gap-[3px] px-1.5 pb-2.5" aria-hidden="true">
|
|
<span
|
|
v-for="(item, i) in glyphs"
|
|
:key="i"
|
|
class="digit"
|
|
:data-n="item.ch"
|
|
>
|
|
<i class="seg a" :class="{ on: lit(item.ch, 'a') }" />
|
|
<i class="seg b" :class="{ on: lit(item.ch, 'b') }" />
|
|
<i class="seg c" :class="{ on: lit(item.ch, 'c') }" />
|
|
<i class="seg d" :class="{ on: lit(item.ch, 'd') }" />
|
|
<i class="seg e" :class="{ on: lit(item.ch, 'e') }" />
|
|
<i class="seg f" :class="{ on: lit(item.ch, 'f') }" />
|
|
<i class="seg g" :class="{ on: lit(item.ch, 'g') }" />
|
|
<i v-if="item.dp" class="dp on" />
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const MAP: Record<string, string> = {
|
|
'0': 'abcdef',
|
|
'1': 'bc',
|
|
'2': 'abged',
|
|
'3': 'abcdg',
|
|
'4': 'fgbc',
|
|
'5': 'afgcd',
|
|
'6': 'afedcg',
|
|
'7': 'abc',
|
|
'8': 'abcdefg',
|
|
'9': 'abcdfg',
|
|
'-': 'g'
|
|
}
|
|
|
|
const props = defineProps<{
|
|
value: string
|
|
}>()
|
|
|
|
const glyphs = computed(() => {
|
|
const raw = String(props.value || '0')
|
|
const out: { ch: string; dp: boolean }[] = []
|
|
for (const ch of raw) {
|
|
if (ch === '.') {
|
|
if (out.length) out[out.length - 1].dp = true
|
|
else out.push({ ch: '0', dp: true })
|
|
continue
|
|
}
|
|
if (MAP[ch]) out.push({ ch, dp: false })
|
|
}
|
|
return out.length ? out : [{ ch: '0', dp: false }]
|
|
})
|
|
|
|
function lit(ch: string, seg: string) {
|
|
return (MAP[ch] || '').includes(seg)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.segment-readout {
|
|
background:
|
|
linear-gradient(180deg, rgba(9, 9, 11, 0.95), rgba(24, 24, 27, 0.9));
|
|
box-shadow:
|
|
inset 0 2px 8px rgba(0, 0, 0, 0.75),
|
|
inset 0 -1px 0 rgba(255, 255, 255, 0.04);
|
|
}
|
|
.digit {
|
|
position: relative;
|
|
width: 0.72rem;
|
|
height: 1.15rem;
|
|
margin-right: 0.2rem;
|
|
}
|
|
.digit:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.seg {
|
|
position: absolute;
|
|
background: rgba(251, 191, 36, 0.1);
|
|
border-radius: 1px;
|
|
}
|
|
.seg.on {
|
|
background: #fbbf24;
|
|
box-shadow: 0 0 6px rgba(251, 191, 36, 0.65);
|
|
}
|
|
.a { top: 0; left: 2px; right: 2px; height: 2px; }
|
|
.d { bottom: 0; left: 2px; right: 2px; height: 2px; }
|
|
.g { top: calc(50% - 1px); left: 2px; right: 2px; height: 2px; }
|
|
.f { top: 2px; left: 0; width: 2px; height: calc(50% - 3px); }
|
|
.b { top: 2px; right: 0; width: 2px; height: calc(50% - 3px); }
|
|
.e { bottom: 2px; left: 0; width: 2px; height: calc(50% - 3px); }
|
|
.c { bottom: 2px; right: 0; width: 2px; height: calc(50% - 3px); }
|
|
.dp {
|
|
position: absolute;
|
|
right: -5px;
|
|
bottom: 0;
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 1px;
|
|
background: rgba(251, 191, 36, 0.1);
|
|
}
|
|
.dp.on {
|
|
background: #fbbf24;
|
|
box-shadow: 0 0 6px rgba(251, 191, 36, 0.65);
|
|
}
|
|
</style>
|