lq/hunli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 升级了一些视觉

Browse Source
This commit is contained in:
年糕崽崽
2026-08-12 13:53:06 +08:00
parent 5fb0f9a1a7
commit 5e609d5ee4
9 changed files with 2347 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
vite-tailwindcss/src/components/themes/SectionHeading.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<div class="sh" :class="`sh-${kind}`">
<span v-if="indexText" class="sh-index">{{ indexText }}</span>
<span v-if="kicker" class="sh-kicker">{{ kicker }}</span>
<i class="sh-rule sh-rule-top" aria-hidden="true"></i>
<span class="sh-title">{{ title }}</span>
<i class="sh-rule sh-rule-bottom" aria-hidden="true"></i>
<span v-if="note" class="sh-note">{{ note }}</span>
</div>
</template>
<script setup>
/**
* 完整模板（layout 主题）的统一章节头。
* 结构固定，观感按 html[data-theme]（magazine/newspaper/pixel/zen）差异化：
* - magazine 左对齐编号大字
* - newspaper 居中栏目头，双细线夹标题
* - pixel 像素方框标题
* - zen 小字 + 细线 + 大留白
* pack 主题不使用本组件（各区块保留原有专属设计）。
*/
import { computed } from 'vue'
const props = defineProps({
title: { type: String, default: '' },
kicker: { type: String, default: '' },
note: { type: String, default: '' },
/** 章节序号（杂志风显示为 01/02…） */
index: { type: Number, default: 0 },
/** 当前主题 key（用于组件内微调，可不传） */
kind: { type: String, default: 'layout' },
})
const indexText = computed(() => (props.index > 0 ? String(props.index).padStart(2, '0') : ''))
</script>
<style scoped>
.sh {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
margin-bottom: 22px;
}
.sh-index {
display: none;
font-family: var(--font-display);
font-style: italic;
line-height: 1;
color: rgba(var(--c-primary-rgb), 0.34);
}
.sh-kicker {
font-family: var(--t-font-kicker);
font-size: 11px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--c-muted);
}
.sh-title {
font-family: var(--t-font-title);
font-size: 24px;
letter-spacing: 0.16em;
color: var(--c-ink);
line-height: 1.3;
}
.sh-note {
font-size: 11px;
letter-spacing: 0.12em;
color: var(--c-muted);
max-width: 300px;
line-height: 1.9;
white-space: pre-wrap;
}
.sh-rule {
display: none;
pointer-events: none;
}
/* —— 新中式：宋体 + 端部朱砂方点 + 细黛线 —— */
html[data-theme='guofeng-new'] .sh-kicker {
font-family: var(--font-kai);
letter-spacing: 0.44em;
}
html[data-theme='guofeng-new'] .sh-title {
font-family: var(--font-serif);
font-weight: 600;
letter-spacing: 0.3em;
text-indent: 0.3em;
}
html[data-theme='guofeng-new'] .sh-rule-bottom {
display: block;
width: 8px;
height: 8px;
background: #b5493f;
border-radius: 1px;
margin-top: 2px;
}
/* —— 老中式：楷体横批 + 金线双边 —— */
html[data-theme='guofeng-old'] .sh-kicker {
font-family: var(--font-kai);
letter-spacing: 0.4em;
color: var(--c-line);
}
html[data-theme='guofeng-old'] .sh-title {
font-family: var(--font-kai);
font-weight: 700;
letter-spacing: 0.4em;
text-indent: 0.4em;
color: var(--c-primary);
}
html[data-theme='guofeng-old'] .sh-rule {
display: block;
width: min(220px, 62%);
height: 5px;
border-top: 1px solid rgba(var(--c-line-rgb), 0.85);
border-bottom: 1px solid rgba(var(--c-line-rgb), 0.45);
}
/* —— 杂志封面：左对齐、超大编号、大写大字距 —— */
html[data-theme='magazine'] .sh {
align-items: flex-start;
text-align: left;
padding-left: 2px;
gap: 2px;
}
html[data-theme='magazine'] .sh-index {
display: block;
font-size: 52px;
margin-bottom: 2px;
}
html[data-theme='magazine'] .sh-kicker {
font-size: 10px;
letter-spacing: 0.5em;
color: var(--c-primary);
}
html[data-theme='magazine'] .sh-title {
font-family: var(--font-display);
font-size: 30px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
html[data-theme='magazine'] .sh-rule-top {
display: block;
order: -1;
width: 44px;
height: 3px;
background: var(--c-ink);
margin-bottom: 8px;
}
html[data-theme='magazine'] .sh-note {
text-align: left;
}
/* —— 日报编辑：居中栏目头，双细线夹标题 —— */
html[data-theme='newspaper'] .sh {
gap: 8px;
}
html[data-theme='newspaper'] .sh-kicker {
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.44em;
}
html[data-theme='newspaper'] .sh-title {
font-family: var(--font-serif);
font-weight: 700;
font-size: 25px;
letter-spacing: 0.22em;
}
html[data-theme='newspaper'] .sh-rule {
display: block;
width: min(240px, 68%);
height: 3px;
border-top: 1px solid var(--c-ink);
border-bottom: 1px solid var(--c-ink);
}
html[data-theme='newspaper'] .sh-note {
font-family: var(--font-serif);
font-style: italic;
}
/* —— 复古像素：像素方框标题 —— */
html[data-theme='pixel'] .sh-kicker {
font-size: 10px;
letter-spacing: 0.2em;
color: var(--c-line);
}
html[data-theme='pixel'] .sh-title {
font-size: 19px;
letter-spacing: 0.1em;
padding: 8px 16px;
color: var(--c-primary);
border: 3px solid var(--c-primary);
box-shadow: 4px 4px 0 rgba(var(--c-line-rgb), 0.55);
image-rendering: pixelated;
}
html[data-theme='pixel'] .sh-note {
font-size: 10px;
}
/* —— 极简主义：小字 + 一条细线 + 大留白 —— */
html[data-theme='zen'] .sh {
gap: 12px;
margin-bottom: 34px;
}
html[data-theme='zen'] .sh-kicker {
font-size: 9px;
letter-spacing: 0.6em;
}
html[data-theme='zen'] .sh-title {
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5em;
text-indent: 0.5em;
}
html[data-theme='zen'] .sh-rule-bottom {
display: block;
width: 1px;
height: 26px;
background: rgba(var(--c-line-rgb), 0.6);
}
</style>