+
@@ -175,10 +181,10 @@
@@ -244,6 +250,7 @@ const DEFAULTS = {
freeScrollInterval: 50, // 自由滚动速度:滚动间隔 ms(越小越快)
pageSwitchDuration: 800, // 页面切换速度:翻页动画时长 ms
firstScreenDuration: 4500, // 首屏停留时间:首屏效果结束后再开始自动滚动
+ formalPageHeight: '100vh',
}
const data = ref({
@@ -289,11 +296,13 @@ const firstScreenDuration = computed(() => {
const curtainBg = computed(() => ({ backgroundImage: `url(${data.value.heroImg})` }))
const endImage = computed(() => data.value.endImg || data.value.heroImg)
-// 相册页页面高度:支持 100vh / 80vh / 60vh / auto / 自定义 vh
-const pageHeightStyle = (page) => {
- const h = page.height || '100vh'
+// 页面高度:支持 100vh / 80vh / 60vh / auto / 自定义 vh
+const sectionHeightStyle = (height) => {
+ const h = height || '100vh'
return h === 'auto' ? { minHeight: 'auto' } : { minHeight: h }
}
+const formalPageHeightStyle = computed(() => sectionHeightStyle(data.value.formalPageHeight))
+const pageHeightStyle = (page) => sectionHeightStyle(page.height)
const closeDrawer = () => { isDrawerOpen.value = false }
const handleScroll = () => {
@@ -493,6 +502,7 @@ onMounted(async () => {
loaded.firstScreenDuration = Number.isFinite(Number(loaded.firstScreenDuration))
? Number(loaded.firstScreenDuration)
: DEFAULTS.firstScreenDuration
+ loaded.formalPageHeight = loaded.formalPageHeight || DEFAULTS.formalPageHeight
data.value = { ...data.value, ...DEFAULTS, ...loaded }
}
} catch (e) { /* 使用默认配置 */ }
@@ -580,48 +590,107 @@ onUnmounted(() => {
}
/* ---------- 入场揭幕(雅致象牙金) ---------- */
-.curtain-root { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; font-family: var(--font-sans); background: #fbf6ef; }
+.curtain-root { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; font-family: var(--font-sans); background: #fbf6ef; perspective: 1200px; }
.curtain-bg {
position: absolute; inset: -24px; background-size: cover; background-position: center;
- filter: blur(16px) brightness(0.7) saturate(1.05); transform: scale(1.12);
+ filter: blur(18px) brightness(0.68) saturate(1.02); transform: scale(1.12);
+}
+.curtain-veil {
+ position: absolute; inset: 0;
+ background:
+ radial-gradient(circle at 50% 18%, rgba(255,250,242,0.76), rgba(241,226,207,0.36) 38%, rgba(82,60,42,0.2) 100%),
+ linear-gradient(180deg, rgba(251,246,239,0.42), rgba(232,214,194,0.28));
}
-.curtain-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,246,239,0.35), rgba(232,214,194,0.25)); }
.curtain-door {
position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2;
- background: linear-gradient(160deg, #fbf6ef 0%, #f5e9dc 45%, #ecd9c4 100%);
- box-shadow: inset 0 0 50px rgba(184,154,120,0.12);
+ background:
+ linear-gradient(90deg, rgba(92,64,42,0.06), transparent 18%, transparent 78%, rgba(255,255,255,0.28)),
+ repeating-linear-gradient(90deg, rgba(166,128,87,0.04) 0 1px, transparent 1px 10px),
+ linear-gradient(160deg, #fbf6ef 0%, #f5e9dc 45%, #ecd9c4 100%);
+ box-shadow: inset 0 0 58px rgba(184,154,120,0.16), inset 0 0 0 1px rgba(255,255,255,0.42);
transition: transform 1.4s cubic-bezier(0.76, 0, 0.24, 1);
+ transform-style: preserve-3d;
}
.curtain-door::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(184,154,120,0.5), transparent); }
+.curtain-door::after {
+ content: ''; position: absolute; inset: 20px 18px;
+ border-top: 1px solid rgba(168,140,107,0.14);
+ border-bottom: 1px solid rgba(168,140,107,0.12);
+ pointer-events: none;
+}
.curtain-door-left { left: 0; }
.curtain-door-right { right: 0; }
.curtain-door-left::before { right: 0; }
.curtain-door-right::before { left: 0; }
-.door-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.25) 100%); }
-.curtain-root.is-opening .curtain-door-left { transform: translateX(-100%); }
-.curtain-root.is-opening .curtain-door-right { transform: translateX(100%); }
+.door-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.56) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.28) 100%); }
+.curtain-root.is-opening .curtain-door-left { transform: translateX(-100%) rotateY(-12deg); }
+.curtain-root.is-opening .curtain-door-right { transform: translateX(100%) rotateY(12deg); }
.curtain-emblem {
- position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3;
+ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; padding: 28px;
transition: opacity 0.8s ease, transform 0.9s ease; animation: emblemIn 1.1s ease both;
}
.curtain-root.is-opening .curtain-emblem { opacity: 0; transform: scale(1.25); }
-.emblem-inner { text-align: center; color: #5b4a36; padding: 10px; }
-.emblem-floral { display: block; font-size: 22px; color: #b89a78; margin-bottom: 14px; }
-.emblem-kicker { display: block; letter-spacing: 0.6em; font-size: 9px; color: #b89a78; text-transform: uppercase; margin-bottom: 18px; padding-left: 0.6em; font-family: var(--font-display); }
-.emblem-names { font-family: var(--font-serif); font-size: 30px; letter-spacing: 0.18em; font-weight: 300; color: #4a3f30; }
-.emblem-names .amp { font-style: italic; color: #b89a78; margin: 0 8px; }
-.emblem-rule { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, #b89a78, transparent); margin: 18px auto; }
-.emblem-date { font-family: var(--font-number); font-size: 11px; letter-spacing: 0.3em; color: #8a7458; }
+.invite-cover {
+ position: relative; width: min(82vw, 360px); min-height: min(72vh, 560px);
+ display: flex; align-items: center; justify-content: center; padding: 34px 24px;
+ color: #5b4a36; text-align: center;
+ background:
+ linear-gradient(135deg, rgba(255,255,255,0.5), transparent 28%, rgba(183,145,96,0.08) 100%),
+ repeating-linear-gradient(0deg, rgba(120,88,55,0.025) 0 1px, transparent 1px 7px),
+ #fbf7ef;
+ border: 1px solid rgba(168,140,107,0.35);
+ box-shadow: 0 28px 70px rgba(59,39,22,0.24), inset 0 0 0 10px rgba(255,255,255,0.34), inset 0 0 0 11px rgba(168,140,107,0.14);
+}
+.invite-cover::before,
+.invite-cover::after {
+ content: ''; position: absolute; pointer-events: none;
+}
+.invite-cover::before {
+ inset: 18px; border: 1px solid rgba(168,140,107,0.25);
+}
+.invite-cover::after {
+ inset: 28px; border: 1px solid rgba(168,140,107,0.11);
+ background:
+ linear-gradient(45deg, transparent 0 49.6%, rgba(168,140,107,0.15) 50%, transparent 50.4%),
+ linear-gradient(-45deg, transparent 0 49.6%, rgba(168,140,107,0.12) 50%, transparent 50.4%);
+ opacity: .52;
+}
+.cover-filigree {
+ position: absolute; left: 50%; width: 122px; height: 22px; transform: translateX(-50%);
+ border-top: 1px solid rgba(168,140,107,0.42);
+}
+.cover-filigree::before,
+.cover-filigree::after {
+ content: ''; position: absolute; top: -4px; width: 26px; height: 8px;
+ border-top: 1px solid rgba(168,140,107,0.42); border-radius: 50%;
+}
+.cover-filigree::before { left: 20px; transform: rotate(-18deg); }
+.cover-filigree::after { right: 20px; transform: rotate(18deg); }
+.cover-filigree-top { top: 42px; }
+.cover-filigree-bottom { bottom: 42px; transform: translateX(-50%) rotate(180deg); }
+.emblem-inner { position: relative; z-index: 1; width: 100%; text-align: center; color: #5b4a36; padding: 42px 16px 34px; }
+.emblem-kicker { display: block; letter-spacing: 0.48em; font-size: 10px; color: #a88c6b; text-transform: uppercase; margin-bottom: 24px; padding-left: 0.48em; font-family: var(--font-display); }
+.emblem-seal {
+ width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 9999px;
+ display: flex; align-items: center; justify-content: center;
+ border: 1px solid rgba(168,140,107,0.46); color: #a88c6b;
+ background: rgba(255,255,255,0.34); box-shadow: inset 0 0 0 5px rgba(168,140,107,0.07);
+}
+.emblem-seal i { font-size: 18px; }
+.emblem-names { font-family: var(--font-serif); font-size: clamp(31px, 8vw, 44px); line-height: 1.22; letter-spacing: 0.14em; font-weight: 500; color: #403527; }
+.emblem-names .amp { font-style: italic; color: #b89a78; margin: 0 9px; font-family: var(--font-display); font-weight: 300; }
+.emblem-rule { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, #b89a78, transparent); margin: 22px auto 18px; }
+.emblem-date { font-family: var(--font-number); font-size: 12px; letter-spacing: 0.34em; padding-left: 0.34em; color: #806a4d; }
.emblem-invite-title {
- margin-top: 24px; color: #4a3f30; font-family: var(--font-serif);
- font-size: 18px; line-height: 1.35; letter-spacing: 0.14em; font-weight: 500;
+ margin-top: 30px; color: #4a3f30; font-family: var(--font-brush);
+ font-size: 24px; line-height: 1.35; letter-spacing: 0.1em; font-weight: 800;
}
.emblem-invite-copy {
- max-width: 270px; margin: 12px auto 0; color: #6a5d4a;
- font-family: var(--font-kai); font-size: 14px; line-height: 1.95;
- letter-spacing: 0.08em;
+ max-width: 276px; margin: 13px auto 0; color: #5f503d;
+ font-family: var(--font-kai); font-size: 15px; line-height: 2.05;
+ letter-spacing: 0.09em; font-weight: 600;
}
-.emblem-hint { margin-top: 26px; font-size: 11px; letter-spacing: 0.3em; color: #a08a66;
+.emblem-hint { margin-top: 30px; font-size: 12px; letter-spacing: 0.26em; color: #9b825e;
display: flex; align-items: center; justify-content: center; gap: 8px; }
.emblem-hint .dot { width: 6px; height: 6px; border-radius: 9999px; background: #b89a78; animation: hintPulse 1.6s infinite; }
@@ -709,37 +778,38 @@ onUnmounted(() => {
.rsvp-cta-deco { font-size: 13px; opacity: .9; }
.rsvp-cta-line { width: 18px; height: 1px; background: currentColor; opacity: .6; }
.map-cta {
- width: 100%; min-height: 58px; border-radius: 12px;
- border: 1px solid rgba(168,140,107,0.28);
- background:
- linear-gradient(135deg, rgba(255,255,255,0.72), rgba(247,246,242,0.42)),
- rgba(255,255,255,0.42);
- color: #7a6244; cursor: pointer; padding: 9px 12px;
- display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 10px;
- text-align: left; box-shadow: 0 8px 22px rgba(110,82,43,0.08);
- transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
+ position: relative; width: 100%; min-height: 54px; border: 0;
+ border-top: 1px solid rgba(168,140,107,0.22);
+ border-bottom: 1px solid rgba(168,140,107,0.16);
+ background: rgba(255,255,255,0.2);
+ color: #7a6244; cursor: pointer; padding: 10px 2px;
+ display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px;
+ text-align: left;
+ transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.map-cta:hover {
- background: rgba(255,255,255,0.75); border-color: rgba(168,140,107,0.58);
- box-shadow: 0 12px 28px rgba(110,82,43,0.14);
+ background: rgba(255,255,255,0.42);
+ border-color: rgba(168,140,107,0.34);
}
.map-cta-icon {
- width: 34px; height: 34px; border-radius: 10px;
+ width: 28px; height: 28px; border-radius: 9999px;
display: flex; align-items: center; justify-content: center;
- background: rgba(168,140,107,0.13); color: #a88c6b;
+ border: 1px solid rgba(168,140,107,0.38); color: #a88c6b;
+ background: rgba(255,255,255,0.28);
}
-.map-cta-icon i { font-size: 15px; }
+.map-cta-icon i { font-size: 12px; }
.map-cta-copy {
display: flex; flex-direction: column; min-width: 0; gap: 3px;
}
.map-cta-copy b {
- font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.16em; font-weight: 600;
+ font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.2em; font-weight: 600;
}
.map-cta-copy small {
color: #8A8680; font-size: 9px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-cta-arrow {
- font-size: 11px; color: #b89a78;
+ color: #a88c6b; font-size: 10px; letter-spacing: 0.18em; padding: 0 1px 0 10px;
+ border-left: 1px solid rgba(168,140,107,0.2);
}
/* ---------- 地图选择 ---------- */