You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.3 KiB
104 lines
2.3 KiB
<script setup>
|
|
import { inject } from 'vue'
|
|
defineProps({
|
|
items: { type: Array, default: () => [] },
|
|
labelField: { type: String, default: 'label' }
|
|
})
|
|
defineOptions({ name: 'SongNav' })
|
|
|
|
const theme = inject('songTheme')
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="song-nav">
|
|
<a
|
|
v-for="(item, i) in items"
|
|
:key="i"
|
|
class="song-nav__item"
|
|
:class="{ 'song-nav__item--active': item.active }"
|
|
href="javascript:void 0"
|
|
@click="$emit('select', item)"
|
|
>
|
|
{{ item[labelField] }}
|
|
</a>
|
|
<button class="song-nav__theme" @click="theme?.toggle()" type="button">
|
|
{{ theme?.isDark ? '砚夜' : '天青' }}
|
|
</button>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.song-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--song-space-6);
|
|
padding: 0 var(--song-space-5);
|
|
height: 56px;
|
|
border-bottom: 1px solid var(--song-border);
|
|
}
|
|
/* 直棂窗意象 §1.1：竖条分隔 */
|
|
.song-nav__item {
|
|
position: relative;
|
|
color: var(--song-text-secondary);
|
|
font-size: 14px;
|
|
letter-spacing: 0.04em;
|
|
padding: 0 2px;
|
|
text-decoration: none;
|
|
transition: color var(--song-dur-1) var(--song-ease);
|
|
}
|
|
.song-nav__item + .song-nav__item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: calc(-1 * var(--song-space-3));
|
|
top: 25%;
|
|
height: 50%;
|
|
width: 1px;
|
|
background: var(--song-border);
|
|
}
|
|
.song-nav__item:hover {
|
|
color: var(--song-text);
|
|
text-decoration: none;
|
|
}
|
|
.song-nav__item--active {
|
|
color: var(--song-primary);
|
|
}
|
|
/* 主色墨线右滑 §7 */
|
|
.song-nav__item--active::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -8px;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--song-primary);
|
|
}
|
|
.song-nav__theme {
|
|
margin-left: auto;
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
font-family: var(--song-font-serif);
|
|
font-size: 12px;
|
|
color: var(--song-text-secondary);
|
|
background: transparent;
|
|
border: 1px solid var(--song-border);
|
|
border-radius: var(--song-radius-s);
|
|
cursor: pointer;
|
|
transition: color var(--song-dur-1), border-color var(--song-dur-1);
|
|
}
|
|
.song-nav__theme:hover {
|
|
color: var(--song-primary);
|
|
border-color: var(--song-primary);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.song-nav {
|
|
gap: var(--song-space-4);
|
|
padding: 0 var(--song-space-4);
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
.song-nav__item + .song-nav__item::before {
|
|
left: calc(-1 * var(--song-space-2));
|
|
}
|
|
}
|
|
</style>
|