99 lines
2.2 KiB
Vue
99 lines
2.2 KiB
Vue
<template>
|
|
<div class="ca-root">
|
|
<span v-reveal="'down'" class="ca-chapter">CHAPITRE UN</span>
|
|
|
|
<div class="ca-mid">
|
|
<i v-reveal="'down'" class="ca-line" aria-hidden="true"></i>
|
|
<div v-reveal="{ variant: 'scale', delay: 180 }" class="ca-photo">
|
|
<img :src="heroImg" class="ca-img" fetchpriority="high" decoding="async" alt="封面" />
|
|
</div>
|
|
<i v-reveal="'up'" class="ca-line" aria-hidden="true"></i>
|
|
</div>
|
|
|
|
<div v-reveal="{ variant: 'up', delay: 320 }" class="ca-copy">
|
|
<span class="ca-names">{{ groom }} <em>et</em> {{ bride }}</span>
|
|
<span class="ca-date">{{ date }} — {{ lunar }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
/** 文艺影调封面：严格对称构图、上下轴线、法式分幕字 */
|
|
defineProps({
|
|
heroImg: { type: String, default: '' },
|
|
groom: { type: String, default: '' },
|
|
bride: { type: String, default: '' },
|
|
date: { type: String, default: '' },
|
|
lunar: { type: String, default: '' },
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ca-root {
|
|
width: 100%;
|
|
flex: 1 1 auto;
|
|
min-height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
padding: max(40px, env(safe-area-inset-top)) 30px 48px;
|
|
background: var(--c-bg);
|
|
overflow: hidden;
|
|
}
|
|
.ca-chapter {
|
|
font-family: var(--font-display);
|
|
font-size: 11px;
|
|
letter-spacing: 0.66em;
|
|
text-indent: 0.66em;
|
|
color: var(--c-muted);
|
|
}
|
|
.ca-mid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
.ca-line {
|
|
width: 1px;
|
|
height: 30px;
|
|
background: rgba(var(--c-line-rgb), 0.7);
|
|
}
|
|
.ca-photo {
|
|
width: min(58vw, 215px);
|
|
aspect-ratio: 4 / 5;
|
|
overflow: hidden;
|
|
}
|
|
.ca-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: saturate(0.82) contrast(1.03);
|
|
}
|
|
.ca-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-align: center;
|
|
}
|
|
.ca-names {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(23px, 7vw, 30px);
|
|
letter-spacing: 0.16em;
|
|
color: var(--c-ink);
|
|
}
|
|
.ca-names em {
|
|
font-style: italic;
|
|
font-size: 0.62em;
|
|
color: var(--c-muted);
|
|
margin: 0 0.3em;
|
|
}
|
|
.ca-date {
|
|
font-family: var(--font-serif);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.3em;
|
|
color: var(--c-muted);
|
|
}
|
|
</style>
|