fix: 升级了一些视觉、各种单图相册效果、日历效果、多种模板任选
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -29,16 +29,16 @@
|
||||
<div class="boot-frame boot-frame-br" aria-hidden="true"></div>
|
||||
|
||||
<div class="boot-stage">
|
||||
<span class="boot-kicker calligraphy">WEDDING INVITATION</span>
|
||||
<span class="boot-kicker calligraphy">{{ bootKickerText }}</span>
|
||||
<div class="boot-rule" aria-hidden="true"><span></span><i>✦</i><span></span></div>
|
||||
<div class="boot-seal-wrap">
|
||||
<i class="boot-seal-ring boot-seal-ring-a" aria-hidden="true"></i>
|
||||
<i class="boot-seal-ring boot-seal-ring-b" aria-hidden="true"></i>
|
||||
<div class="boot-seal calligraphy">囍</div>
|
||||
<div class="boot-seal calligraphy">{{ bootSealChar }}</div>
|
||||
</div>
|
||||
<div class="boot-rule boot-rule-flip" aria-hidden="true"><span></span><i>✦</i><span></span></div>
|
||||
<p class="boot-names calligraphy-strong">{{ data.groom }}<span>&</span>{{ data.bride }}</p>
|
||||
<p class="boot-hint calligraphy">请柬装载中</p>
|
||||
<p class="boot-hint calligraphy">{{ bootHintText }}</p>
|
||||
<div class="boot-dots" aria-hidden="true"><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,6 +82,77 @@
|
||||
<div class="em-go-date em-go-lunar">{{ data.lunar }} 恭候光临</div>
|
||||
<div class="emblem-hint"><span class="dot"></span>轻触展开婚书</div>
|
||||
</template>
|
||||
<!-- 水墨山水：卷轴帖 -->
|
||||
<template v-else-if="siteThemeKey === 'inkwash'">
|
||||
<i class="em-ink-rod" aria-hidden="true"></i>
|
||||
<div class="em-ink-title">谨 订 婚 期</div>
|
||||
<div class="em-ink-names">{{ data.groom }} 与 {{ data.bride }}</div>
|
||||
<div class="em-ink-date">{{ data.date }} · {{ data.lunar }}</div>
|
||||
<span class="em-ink-seal" aria-hidden="true">囍</span>
|
||||
<i class="em-ink-rod" aria-hidden="true"></i>
|
||||
<div class="emblem-hint"><span class="dot"></span>轻触展卷</div>
|
||||
</template>
|
||||
<!-- 复古电影：三段式上映海报（横幅 / 主标 / 制作名单） -->
|
||||
<template v-else-if="siteThemeKey === 'cinema'">
|
||||
<div class="em-cn-top">
|
||||
<span class="em-cn-badge">COMING SOON</span>
|
||||
<span class="em-cn-studio">LOVE PICTURES 荣誉出品</span>
|
||||
</div>
|
||||
<div class="em-cn-mid">
|
||||
<div class="em-cn-title">THE WEDDING</div>
|
||||
<div class="em-cn-star">领衔主演</div>
|
||||
<div class="em-cn-names">{{ data.groom }} · {{ data.bride }}</div>
|
||||
<div class="em-cn-date">{{ data.date }} 隆重献映</div>
|
||||
</div>
|
||||
<div class="em-cn-bottom">
|
||||
<div class="em-cn-credits">出品·缘分 / 监制·时光 / 特别出演·各位亲友</div>
|
||||
<div class="emblem-hint"><span class="dot"></span>轻触入场</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 胶片日记：胶卷盒 -->
|
||||
<template v-else-if="siteThemeKey === 'kodak'">
|
||||
<span class="em-kd-strip" aria-hidden="true"><i></i><i></i><i></i></span>
|
||||
<div class="em-kd-title">WEDDING FILM</div>
|
||||
<div class="em-kd-sub">COLOR · 35mm · 24 EXP</div>
|
||||
<div class="em-kd-names">{{ data.groom }} ♥ {{ data.bride }}</div>
|
||||
<div class="em-kd-date">{{ data.date }}</div>
|
||||
<div class="emblem-hint"><span class="dot"></span>轻触冲印</div>
|
||||
</template>
|
||||
<!-- 文艺影调：分幕页 -->
|
||||
<template v-else-if="siteThemeKey === 'arthouse'">
|
||||
<span class="em-ah-chapter">— CHAPITRE UN —</span>
|
||||
<div class="em-ah-names">{{ data.groom }} <em>et</em> {{ data.bride }}</div>
|
||||
<i class="em-ah-line" aria-hidden="true"></i>
|
||||
<div class="em-ah-date">{{ data.date }}</div>
|
||||
<div class="emblem-hint"><span class="dot"></span>轻触开场</div>
|
||||
</template>
|
||||
<!-- 环球旅行：护照封面 -->
|
||||
<template v-else-if="siteThemeKey === 'passport'">
|
||||
<span class="em-pp-top">LOVE REPUBLIC</span>
|
||||
<span class="em-pp-crest" aria-hidden="true">✈</span>
|
||||
<div class="em-pp-title">PASSPORT</div>
|
||||
<div class="em-pp-sub">TO FOREVER</div>
|
||||
<div class="em-pp-names">{{ data.groom }} / {{ data.bride }}</div>
|
||||
<div class="emblem-hint"><span class="dot"></span>轻触通关</div>
|
||||
</template>
|
||||
<!-- 手账拼贴：日记封面 -->
|
||||
<template v-else-if="siteThemeKey === 'scrapbook'">
|
||||
<span class="em-sb-tape" aria-hidden="true"></span>
|
||||
<div class="em-sb-label">
|
||||
<span class="em-sb-small">our story ♥</span>
|
||||
<div class="em-sb-names">{{ data.groom }} & {{ data.bride }}</div>
|
||||
<span class="em-sb-date">{{ data.date }}</span>
|
||||
</div>
|
||||
<div class="emblem-hint"><span class="dot"></span>轻触翻开手账</div>
|
||||
</template>
|
||||
<!-- 千禧蒸汽波：开机窗口 -->
|
||||
<template v-else-if="siteThemeKey === 'y2k'">
|
||||
<div class="em-yk-bar"><span>welcome.exe</span><i aria-hidden="true">✕</i></div>
|
||||
<div class="em-yk-names">{{ data.groom }} ♥ {{ data.bride }}</div>
|
||||
<div class="em-yk-date">{{ data.date }} ☆ {{ data.lunar }}</div>
|
||||
<div class="em-yk-load" aria-hidden="true"><i></i></div>
|
||||
<div class="emblem-hint"><span class="dot"></span>click to start</div>
|
||||
</template>
|
||||
<!-- 杂志封面：刊头式幕布 -->
|
||||
<template v-else-if="siteThemeKey === 'magazine'">
|
||||
<span class="em-mag-logo">VOWS</span>
|
||||
@@ -142,6 +213,8 @@
|
||||
:petal-enabled="data.petalEnabled"
|
||||
:bubble-enabled="data.bubbleEnabled"
|
||||
:active="effectsActive"
|
||||
:petal-palette="themeFxObj.petal"
|
||||
:heart-palette="themeFxObj.bubble"
|
||||
/>
|
||||
|
||||
<DanmakuLayer
|
||||
@@ -447,7 +520,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LikeBurst ref="likeBurstRef" />
|
||||
<LikeBurst ref="likeBurstRef" :colors="themeFxObj.like" :glow-colors="themeFxObj.likeGlow" />
|
||||
<GiftEffect v-if="giftFxBackend === 'classic'" ref="giftEffectRef" @play-start="onGiftPlayStart" />
|
||||
<GiftEffect3D v-else ref="giftEffectRef" @play-start="onGiftPlayStart" @fallback="onGiftFxFallback" />
|
||||
<GiftFeed ref="giftFeedRef" />
|
||||
@@ -569,7 +642,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 2. 邀请文案页（风格包=经典竖排；完整模板=各自专属排版） -->
|
||||
<div class="page-section bg-[var(--c-bg)] items-center px-8 relative justify-center" :class="data.scrollMode === 'snap' ? 'snap-start' : ''" :style="formalPageHeightStyle">
|
||||
<div class="page-section items-center px-8 relative justify-center" :class="data.scrollMode === 'snap' ? 'snap-start' : ''" :style="formalPageHeightStyle">
|
||||
<template v-if="!isLayoutTheme">
|
||||
<div class="absolute top-0 left-0 w-32 h-32 border-l-[0.5px] border-t-[0.5px] border-[var(--c-primary)]/30 m-6"></div>
|
||||
<div class="absolute bottom-0 right-0 w-32 h-32 border-r-[0.5px] border-b-[0.5px] border-[var(--c-primary)]/30 m-6"></div>
|
||||
@@ -596,6 +669,56 @@
|
||||
<span class="fgo-foot">两 姓 联 姻 · 一 堂 缔 约</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 水墨：竖排 + 墨线 + 朱印 -->
|
||||
<div v-else-if="siteThemeKey === 'inkwash'" v-reveal="'blur'" class="formal-ink">
|
||||
<div class="fi-cols">
|
||||
<span class="vertical-text fi-main">{{ data.formalText1 }}</span>
|
||||
<span class="vertical-text fi-main fi-main-2">{{ data.formalText2 }}</span>
|
||||
</div>
|
||||
<span class="fi-seal" aria-hidden="true">囍</span>
|
||||
</div>
|
||||
<!-- 电影：台词字幕卡 -->
|
||||
<div v-else-if="siteThemeKey === 'cinema'" v-reveal="'up'" class="formal-cn">
|
||||
<span class="fc-time">00:52:13,600 → 00:52:20,140</span>
|
||||
<p class="fc-line">“{{ data.formalText1 }}”</p>
|
||||
<p class="fc-line fc-line-2">“{{ data.formalText2 }}”</p>
|
||||
<span class="fc-note">—— 选自《我们的婚礼》未删减版</span>
|
||||
</div>
|
||||
<!-- 胶片：相纸背书 -->
|
||||
<div v-else-if="siteThemeKey === 'kodak'" v-reveal="'up'" class="formal-kd">
|
||||
<span class="fk-head">— 相纸背面的话 —</span>
|
||||
<p class="fk-line">{{ data.formalText1 }}</p>
|
||||
<p class="fk-line">{{ data.formalText2 }}</p>
|
||||
<span class="fk-stamp">{{ data.date }}</span>
|
||||
</div>
|
||||
<!-- 文艺：居中引言 + 罗马数字 -->
|
||||
<div v-else-if="siteThemeKey === 'arthouse'" v-reveal="'up'" class="formal-ah">
|
||||
<span class="fa-num">Ⅰ</span>
|
||||
<p class="fa-line">{{ data.formalText1 }}</p>
|
||||
<p class="fa-line fa-line-2">{{ data.formalText2 }}</p>
|
||||
</div>
|
||||
<!-- 旅行：签证页 -->
|
||||
<div v-else-if="siteThemeKey === 'passport'" v-reveal="'up'" class="formal-pp">
|
||||
<span class="fp-visa" aria-hidden="true">VISA · APPROVED</span>
|
||||
<p class="fp-line">{{ data.formalText1 }}</p>
|
||||
<p class="fp-line">{{ data.formalText2 }}</p>
|
||||
<span class="fp-foot">✈ DESTINATION: FOREVER</span>
|
||||
</div>
|
||||
<!-- 手账：便签纸 -->
|
||||
<div v-else-if="siteThemeKey === 'scrapbook'" v-reveal="'up'" class="formal-sb">
|
||||
<span class="fs-clip" aria-hidden="true"></span>
|
||||
<p class="fs-line">{{ data.formalText1 }}</p>
|
||||
<p class="fs-line">{{ data.formalText2 }}</p>
|
||||
</div>
|
||||
<!-- Y2K：对话框窗口 -->
|
||||
<div v-else-if="siteThemeKey === 'y2k'" v-reveal="'up'" class="formal-yk">
|
||||
<div class="fy-bar"><span>message.txt</span><i aria-hidden="true">✕</i></div>
|
||||
<div class="fy-body">
|
||||
<p class="fy-line">{{ data.formalText1 }}</p>
|
||||
<p class="fy-line">{{ data.formalText2 }}</p>
|
||||
<span class="fy-btn" aria-hidden="true">OK ♥</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 杂志：编辑部引言（pull-quote） -->
|
||||
<div v-else-if="siteThemeKey === 'magazine'" v-reveal="'up'" class="formal-mag">
|
||||
<span class="fm-quote" aria-hidden="true">“</span>
|
||||
@@ -643,7 +766,7 @@
|
||||
class="page-section p-6 relative"
|
||||
:class="data.scrollMode === 'snap' ? 'snap-start' : ''"
|
||||
:style="pageHeightStyle(page)">
|
||||
<div class="absolute inset-0 bg-[var(--c-card)]/40 -z-10"></div>
|
||||
<div class="absolute inset-0 bg-[var(--c-card)]/20 -z-10"></div>
|
||||
<div class="absolute top-0 left-0 w-24 h-24 border-l-[0.5px] border-t-[0.5px] border-[var(--c-primary)]/30 m-6 pointer-events-none z-0"></div>
|
||||
<div class="absolute bottom-0 right-0 w-24 h-24 border-r-[0.5px] border-b-[0.5px] border-[var(--c-primary)]/30 m-6 pointer-events-none z-0"></div>
|
||||
<div class="w-full h-full flex flex-col justify-center py-6 relative z-10">
|
||||
@@ -651,7 +774,7 @@
|
||||
:page="page"
|
||||
:nine-grid-animate="!!data.nineGridAnimate"
|
||||
:layout-theme="isLayoutTheme"
|
||||
:page-index="pIdx + 2"
|
||||
:page-index="sectionIndex(pIdx + 2)"
|
||||
@preview-image="openImagePreview"
|
||||
@ready="onGalleryReady"
|
||||
/>
|
||||
@@ -660,10 +783,10 @@
|
||||
|
||||
<!-- 婚礼日历 -->
|
||||
<div class="page-section wedding-calendar-page px-6 py-10 relative" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
|
||||
<div v-reveal="'up'" class="calendar-card">
|
||||
<div v-reveal="'up'" class="calendar-card" :class="calStyleClass">
|
||||
<SectionHeading
|
||||
v-if="isLayoutTheme"
|
||||
:index="(data.photoPages?.length || 0) + 2"
|
||||
:index="sectionIndex((data.photoPages?.length || 0) + 2)"
|
||||
kicker="Save The Date"
|
||||
:title="`${calendarTitle.year} · ${calendarTitle.monthText}`"
|
||||
/>
|
||||
@@ -730,7 +853,7 @@
|
||||
<SectionHeading
|
||||
v-if="isLayoutTheme"
|
||||
v-reveal="'up'"
|
||||
:index="(data.photoPages?.length || 0) + 3"
|
||||
:index="sectionIndex((data.photoPages?.length || 0) + 3)"
|
||||
kicker="Wedding Schedule"
|
||||
title="婚礼流程"
|
||||
/>
|
||||
@@ -756,18 +879,11 @@
|
||||
|
||||
<!-- 尾页 -->
|
||||
<div class="page-section ending-page px-6 py-8 flex flex-col items-center justify-center relative" :class="data.scrollMode === 'snap' ? 'snap-start' : ''">
|
||||
<!-- 门框装饰仅风格包主题渲染；完整模板走各自的收尾排版 -->
|
||||
<!-- 尾页装饰仅风格包主题渲染（幕布/花环/格窗/星环/缎带，后台可选）；完整模板走各自的收尾排版 -->
|
||||
<template v-if="!isLayoutTheme">
|
||||
<div v-reveal="'blur'" class="ending-frame" aria-hidden="true">
|
||||
<span class="ending-keystone">
|
||||
<i class="ek-line"></i>
|
||||
<span class="ek-mark">❀</span>
|
||||
<i class="ek-line ek-line-r"></i>
|
||||
</span>
|
||||
<span class="ending-vine ending-vine-l"></span>
|
||||
<span class="ending-vine ending-vine-r"></span>
|
||||
<div v-reveal="'blur'" class="ending-decor" :class="`ending-style-${endingStyleKey}`" aria-hidden="true">
|
||||
<i class="ed-a"></i><i class="ed-b"></i><i class="ed-c"></i><i class="ed-d"></i>
|
||||
</div>
|
||||
<div v-reveal="{ variant: 'scale', delay: 220 }" class="ending-corners" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
|
||||
</template>
|
||||
<div class="w-full max-w-[340px] flex flex-col items-center z-10 relative">
|
||||
<SectionHeading v-if="isLayoutTheme" v-reveal="'down'" title="With Love" kicker="Ending" />
|
||||
@@ -809,6 +925,13 @@
|
||||
<span v-else-if="siteThemeKey === 'newspaper'" class="elf elf-news">── 本版终 · THE END ──</span>
|
||||
<span v-else-if="siteThemeKey === 'magazine'" class="elf elf-mag">BACK COVER · VOWS MAGAZINE</span>
|
||||
<span v-else-if="siteThemeKey === 'pixel'" class="elf elf-pixel">♥ GAME CLEAR · THANK YOU FOR PLAYING ♥</span>
|
||||
<span v-else-if="siteThemeKey === 'inkwash'" class="elf elf-ink">水墨长卷 <b>囍</b> 落款于此</span>
|
||||
<span v-else-if="siteThemeKey === 'cinema'" class="elf elf-cn">THE END · 全 剧 终</span>
|
||||
<span v-else-if="siteThemeKey === 'kodak'" class="elf elf-kd">DEVELOPED WITH LOVE · 24 EXP</span>
|
||||
<span v-else-if="siteThemeKey === 'arthouse'" class="elf elf-ah">fin — merci</span>
|
||||
<span v-else-if="siteThemeKey === 'passport'" class="elf elf-pp">BON VOYAGE · 旅途愉快 ✈</span>
|
||||
<span v-else-if="siteThemeKey === 'scrapbook'" class="elf elf-sb">❀ to be continued…</span>
|
||||
<span v-else-if="siteThemeKey === 'y2k'" class="elf elf-yk">☆ see u at the wedding ☆</span>
|
||||
<span v-else class="elf elf-zen">fin</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1029,7 +1152,8 @@ import {
|
||||
import { sendVisitBeacon, getFingerprint } from '@/utils/visitBeacon'
|
||||
import { optimizeImageUrl, isIOS } from '@/composables/useAndroidOptimize'
|
||||
import { DANMAKU_COLORS, DANMAKU_GRADIENT_COLORS, DEFAULT_DANMAKU_COLOR, BLESSING_STYLES } from '@/utils/danmakuColors'
|
||||
import { applySiteTheme, normalizeSiteTheme, themeLayoutKind } from '@/utils/themes'
|
||||
import { applySiteTheme, normalizeSiteTheme, themeLayoutKind, themeFx, cachedSiteTheme } from '@/utils/themes'
|
||||
import { resolveCalendarStyle } from '@/utils/calendarStyles'
|
||||
import SectionHeading from '@/components/themes/SectionHeading.vue'
|
||||
import CoverClassic from '@/components/themes/covers/CoverClassic.vue'
|
||||
import CoverMagazine from '@/components/themes/covers/CoverMagazine.vue'
|
||||
@@ -1038,6 +1162,13 @@ import CoverPixel from '@/components/themes/covers/CoverPixel.vue'
|
||||
import CoverZen from '@/components/themes/covers/CoverZen.vue'
|
||||
import CoverGuofengNew from '@/components/themes/covers/CoverGuofengNew.vue'
|
||||
import CoverGuofengOld from '@/components/themes/covers/CoverGuofengOld.vue'
|
||||
import CoverInkwash from '@/components/themes/covers/CoverInkwash.vue'
|
||||
import CoverCinema from '@/components/themes/covers/CoverCinema.vue'
|
||||
import CoverKodak from '@/components/themes/covers/CoverKodak.vue'
|
||||
import CoverArthouse from '@/components/themes/covers/CoverArthouse.vue'
|
||||
import CoverPassport from '@/components/themes/covers/CoverPassport.vue'
|
||||
import CoverScrapbook from '@/components/themes/covers/CoverScrapbook.vue'
|
||||
import CoverY2k from '@/components/themes/covers/CoverY2k.vue'
|
||||
import { parseLrc, formatAudioTime, findLrcIndex } from '@/utils/parseLrc'
|
||||
import CanvasEffects from '@/components/CanvasEffects.vue'
|
||||
import DanmakuLayer from '@/components/DanmakuLayer.vue'
|
||||
@@ -1055,7 +1186,10 @@ const DEFAULTS = {
|
||||
musicCacheEnabled: true, musicCacheHours: 24,
|
||||
danmakuEnabled: true, danmakuShowTime: true, nineGridAnimate: false,
|
||||
giftEffectMode: 'classic', // 礼物特效方案：classic 经典粒子 / three 立体炫效 / auto 按设备
|
||||
siteTheme: 'champagne', // 整站主题：champagne/crimson/sage/ocean/lilac/sunset
|
||||
siteTheme: cachedSiteTheme(), // 整站风格模板（初始取上次缓存，Loading 屏即主题化）
|
||||
endingFrameStyle: 'curtain', // 尾页装饰：curtain 幕布 / moonwreath 花环 / frwindow 格窗 / starring 星环 / ribbons 缎带
|
||||
sectionIndexEnabled: true, // 完整模板的章节编号（01/02…）是否显示
|
||||
calendarStyle: 'auto', // 日历样式：auto=跟随主题，或指定 calendarStyles.js 中的样式
|
||||
|
||||
freeScrollInterval: 50, // 自由滚动速度：滚动间隔 ms（越小越快）
|
||||
pageSwitchDuration: 800, // 页面切换速度：翻页动画时长 ms
|
||||
@@ -1225,6 +1359,26 @@ watch(() => data.value.siteTheme, (t) => applySiteTheme(t), { immediate: true })
|
||||
/** 当前主题（归一化后）与布局类型（pack=风格包沿用经典排版 / layout=完整模板） */
|
||||
const siteThemeKey = computed(() => normalizeSiteTheme(data.value.siteTheme))
|
||||
const isLayoutTheme = computed(() => themeLayoutKind(siteThemeKey.value) === 'layout')
|
||||
/** Loading 屏专属文案：中心印记 / 加载提示 / 顶部小字（缺省回退经典请柬） */
|
||||
const BOOT_THEME_TEXT = {
|
||||
'guofeng-old': { hint: '花轿启程中', kicker: '大喜之日' },
|
||||
'guofeng-new': { hint: '良辰将至', kicker: '喜结良缘' },
|
||||
magazine: { seal: 'V', hint: 'COVER STORY LOADING', kicker: 'VOWS MAGAZINE' },
|
||||
newspaper: { seal: '讯', hint: '头版排印中', kicker: 'THE WEDDING TIMES' },
|
||||
pixel: { seal: '♥', hint: 'NOW LOADING', kicker: 'WEDDING QUEST' },
|
||||
zen: { seal: '静', hint: '静候片刻', kicker: 'SLOW WEDDING' },
|
||||
inkwash: { seal: '墨', hint: '墨韵晕染中', kicker: '水墨婚书' },
|
||||
cinema: { seal: '影', hint: '影片装带中', kicker: 'NOW SHOWING' },
|
||||
kodak: { seal: '35', hint: 'DEVELOPING…', kicker: 'FILM MEMORIES' },
|
||||
arthouse: { seal: 'A', hint: '布展中', kicker: 'ART HOUSE' },
|
||||
passport: { seal: '✈', hint: '安检放行中', kicker: 'BOARDING PASS' },
|
||||
scrapbook: { seal: '贴', hint: '手帐拼贴中', kicker: 'OUR SCRAPBOOK' },
|
||||
y2k: { seal: '★', hint: 'LOADING 98%', kicker: 'WEDDING.EXE' },
|
||||
}
|
||||
const bootThemeText = computed(() => BOOT_THEME_TEXT[siteThemeKey.value] || {})
|
||||
const bootSealChar = computed(() => bootThemeText.value.seal || '囍')
|
||||
const bootHintText = computed(() => bootThemeText.value.hint || '请柬装载中')
|
||||
const bootKickerText = computed(() => bootThemeText.value.kicker || 'WEDDING INVITATION')
|
||||
/** 封面组件：风格包共用经典封面，完整模板各用专属排版 */
|
||||
const coverComponent = computed(() => ({
|
||||
'guofeng-new': CoverGuofengNew,
|
||||
@@ -1233,13 +1387,31 @@ const coverComponent = computed(() => ({
|
||||
newspaper: CoverNewspaper,
|
||||
pixel: CoverPixel,
|
||||
zen: CoverZen,
|
||||
inkwash: CoverInkwash,
|
||||
cinema: CoverCinema,
|
||||
kodak: CoverKodak,
|
||||
arthouse: CoverArthouse,
|
||||
passport: CoverPassport,
|
||||
scrapbook: CoverScrapbook,
|
||||
y2k: CoverY2k,
|
||||
}[siteThemeKey.value] || CoverClassic))
|
||||
/** 章节编号：可在后台关闭（传 0 时 SectionHeading 不渲染编号） */
|
||||
const sectionIndex = (n) => (data.value.sectionIndexEnabled === false ? 0 : n)
|
||||
/** 主题特效色板：点赞爱心 / 花瓣 / 漂浮爱心随模板换色 */
|
||||
const themeFxObj = computed(() => themeFx(siteThemeKey.value))
|
||||
/** 日历样式：auto 跟随主题推荐，可在后台手动指定 */
|
||||
const calStyleClass = computed(() => `cal-style-${resolveCalendarStyle(data.value.calendarStyle, siteThemeKey.value)}`)
|
||||
/** 尾页装饰样式（风格包主题下生效，未知值回落幕布） */
|
||||
const ENDING_FRAME_STYLES = ['curtain', 'moonwreath', 'frwindow', 'starring', 'ribbons']
|
||||
const endingStyleKey = computed(() => (ENDING_FRAME_STYLES.includes(data.value.endingFrameStyle) ? data.value.endingFrameStyle : 'curtain'))
|
||||
/** 幕布印章符号：各风格包的辨识元素（空 = 默认羽毛图标） */
|
||||
const curtainSealChar = computed(() => ({
|
||||
french: '❀',
|
||||
forest: '❧',
|
||||
night: '☾',
|
||||
modern: '◆',
|
||||
watercolor: '❋',
|
||||
sakura: '❀',
|
||||
}[siteThemeKey.value] || ''))
|
||||
/** 邀请文案页首符号：随风格包变化 */
|
||||
const formalMark = computed(() => ({
|
||||
@@ -1247,6 +1419,8 @@ const formalMark = computed(() => ({
|
||||
forest: '❦',
|
||||
night: '☾',
|
||||
modern: '◇',
|
||||
watercolor: '❋',
|
||||
sakura: '✿',
|
||||
}[siteThemeKey.value] || '❀'))
|
||||
const likeCount = ref(0)
|
||||
const likePulse = ref(false)
|
||||
@@ -3735,6 +3909,16 @@ watch(
|
||||
radial-gradient(circle at 82% 82%, rgba(var(--c-primary-rgb),0.12), transparent 28%);
|
||||
}
|
||||
.calendar-card {
|
||||
/* 成套配色变量：默认为香槟金卡观感，各 cal-style-* 皮肤整组覆盖（见 theme-packs.css） */
|
||||
--cal-title: #3f3428;
|
||||
--cal-sub: #806f5c;
|
||||
--cal-kicker: var(--c-primary);
|
||||
--cal-week: var(--c-primary);
|
||||
--cal-day: #4b443c;
|
||||
--cal-sel-ink: #763342;
|
||||
--cal-sel-bg: rgba(253, 251, 247, 0.9);
|
||||
--cal-rule: rgba(var(--c-primary-rgb), 0.45);
|
||||
--cal-title-rule: rgba(var(--c-primary-rgb), 0.8);
|
||||
width: min(100%, 352px); margin: 0 auto; padding: 30px 24px 28px;
|
||||
color: var(--c-ink-soft); text-align: center; position: relative;
|
||||
background:
|
||||
@@ -3749,19 +3933,19 @@ watch(
|
||||
border: 1px solid rgba(var(--c-primary-rgb),0.16); pointer-events: none;
|
||||
}
|
||||
.calendar-kicker {
|
||||
color: var(--c-primary); font-family: var(--font-display);
|
||||
color: var(--cal-kicker); font-family: var(--font-display);
|
||||
font-size: 10px; letter-spacing: 0.46em; padding-left: 0.46em; text-transform: uppercase;
|
||||
}
|
||||
.calendar-title {
|
||||
display: flex; align-items: center; justify-content: center; gap: 14px;
|
||||
margin-top: 12px; color: #3f3428; font-family: var(--font-display);
|
||||
margin-top: 12px; color: var(--cal-title); font-family: var(--font-display);
|
||||
font-size: 30px; line-height: 1.2; letter-spacing: 0.12em;
|
||||
}
|
||||
.calendar-title i {
|
||||
width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--c-primary-rgb),0.8), transparent);
|
||||
width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--cal-title-rule), transparent);
|
||||
}
|
||||
.calendar-date-line {
|
||||
margin: 10px auto 22px; color: #806f5c; font-size: 11px;
|
||||
margin: 10px auto 22px; color: var(--cal-sub); font-size: 11px;
|
||||
letter-spacing: 0.16em; font-family: var(--font-serif);
|
||||
}
|
||||
.calendar-weekdays,
|
||||
@@ -3769,12 +3953,12 @@ watch(
|
||||
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
|
||||
}
|
||||
.calendar-weekdays {
|
||||
margin-bottom: 9px; color: var(--c-primary); font-size: 10px;
|
||||
margin-bottom: 9px; color: var(--cal-week); font-size: 10px;
|
||||
font-family: var(--font-kai); font-weight: 700;
|
||||
}
|
||||
.calendar-day {
|
||||
position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
|
||||
color: #4b443c; font-family: var(--font-number); font-size: 15px;
|
||||
color: var(--cal-day); font-family: var(--font-number); font-size: 15px;
|
||||
}
|
||||
.calendar-day.is-empty { visibility: hidden; }
|
||||
.calendar-day-num {
|
||||
@@ -3783,8 +3967,8 @@ watch(
|
||||
.calendar-day.is-selected .calendar-day-num {
|
||||
width: 24px; height: 24px; border-radius: 9999px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #763342; font-weight: 900; font-size: 16px;
|
||||
background: rgba(253,251,247,0.9);
|
||||
color: var(--cal-sel-ink); font-weight: 900; font-size: 16px;
|
||||
background: var(--cal-sel-bg);
|
||||
box-shadow: 0 0 0 1px rgba(151,64,82,0.12), 0 4px 10px rgba(91,47,36,0.1);
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,0.82);
|
||||
}
|
||||
@@ -3843,11 +4027,11 @@ watch(
|
||||
}
|
||||
.calendar-note {
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
margin-top: 24px; color: #806f5c; font-family: var(--font-kai);
|
||||
margin-top: 24px; color: var(--cal-sub); font-family: var(--font-kai);
|
||||
font-size: 13px; font-weight: 700; letter-spacing: 0.2em;
|
||||
}
|
||||
.calendar-note i {
|
||||
width: 20px; height: 1px; background: rgba(var(--c-primary-rgb),0.45);
|
||||
width: 20px; height: 1px; background: var(--cal-rule);
|
||||
}
|
||||
|
||||
/* ---------- 揭幕前 Loading（象牙金主题） ---------- */
|
||||
@@ -3864,10 +4048,10 @@ watch(
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 42%, rgba(255, 252, 246, 0.96), transparent 55%),
|
||||
radial-gradient(ellipse at 50% 42%, rgba(255, 252, 246, 0.72), transparent 55%),
|
||||
radial-gradient(ellipse at 18% 78%, rgba(var(--c-line-rgb), 0.14), transparent 42%),
|
||||
radial-gradient(ellipse at 82% 18%, rgba(var(--c-primary-rgb), 0.12), transparent 40%),
|
||||
linear-gradient(165deg, var(--c-paper) 0%, #f7efe4 46%, #eddcc6 100%);
|
||||
linear-gradient(165deg, var(--c-paper) 0%, var(--c-bg) 46%, var(--c-bg-deep) 100%);
|
||||
transition: opacity 0.48s ease, visibility 0.48s ease, transform 0.48s ease;
|
||||
}
|
||||
.boot-loading.is-leaving {
|
||||
@@ -4022,7 +4206,7 @@ watch(
|
||||
color: var(--boot-gold);
|
||||
background:
|
||||
radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.65), transparent 46%),
|
||||
linear-gradient(160deg, #fffaf3, #f3e6d6);
|
||||
linear-gradient(160deg, var(--c-card), var(--c-bg-deep));
|
||||
border: 1.5px solid rgba(var(--c-primary-rgb), 0.55);
|
||||
box-shadow:
|
||||
inset 0 0 0 5px rgba(var(--c-primary-rgb), 0.08),
|
||||
@@ -4050,7 +4234,8 @@ watch(
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.38em;
|
||||
padding-left: 0.38em;
|
||||
color: rgba(128, 106, 77, 0.78);
|
||||
color: var(--boot-ink);
|
||||
opacity: 0.78;
|
||||
}
|
||||
.boot-dots {
|
||||
display: flex;
|
||||
@@ -4510,76 +4695,209 @@ watch(
|
||||
linear-gradient(180deg, rgba(253,251,247,0.92) 0%, rgba(247,246,242,0.98) 100%),
|
||||
radial-gradient(circle at 50% 12%, rgba(232,201,210,0.2), transparent 34%);
|
||||
}
|
||||
.ending-frame {
|
||||
position: absolute; top: 28px; right: 22px; bottom: 28px; left: 22px;
|
||||
border: 1px solid rgba(var(--c-primary-rgb),0.26); border-radius: 160px 160px 24px 24px;
|
||||
background: rgba(255,255,255,0.28); pointer-events: none;
|
||||
/* 内侧淡金光晕，增强"门内"纵深感 */
|
||||
box-shadow: inset 0 0 46px rgba(201, 169, 120, 0.13);
|
||||
}
|
||||
.ending-frame::before {
|
||||
content: ''; position: absolute; inset: 9px;
|
||||
border: 0.5px solid rgba(var(--c-primary-rgb),0.18); border-radius: 150px 150px 18px 18px;
|
||||
}
|
||||
/* 拱顶 keystone：花饰圆章 + 两侧延伸细线，圆章用页面底色垫片盖住穿过的拱线 */
|
||||
.ending-keystone {
|
||||
position: absolute; top: 0; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
color: #b08e63;
|
||||
}
|
||||
.ek-mark {
|
||||
width: 34px; height: 34px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 15px; line-height: 1;
|
||||
background: var(--c-paper);
|
||||
border: 1px solid rgba(var(--c-primary-rgb), 0.38);
|
||||
box-shadow: 0 0 0 4px var(--c-paper), inset 0 0 8px rgba(201, 169, 120, 0.2);
|
||||
}
|
||||
.ek-line {
|
||||
width: 24px; height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(var(--c-primary-rgb), 0.55));
|
||||
}
|
||||
.ek-line-r { transform: scaleX(-1); }
|
||||
.reveal--in .ek-mark {
|
||||
animation: keystonePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
|
||||
}
|
||||
@keyframes keystonePop {
|
||||
0% { opacity: 0; transform: scale(0.4) rotate(-90deg); }
|
||||
100% { opacity: 1; transform: scale(1) rotate(0deg); }
|
||||
}
|
||||
/* 门框底部两侧对称藤蔓花枝 */
|
||||
.ending-vine {
|
||||
position: absolute; bottom: 10px;
|
||||
width: 74px; height: 48px;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cg fill='none' stroke='%23a88c6b' stroke-width='1.2'%3E%3Cpath d='M4 56C24 50 44 40 60 26 70 17 78 10 92 6'/%3E%3Cpath d='M24 48q-3-9 4-14 4 7-4 14z' fill='%23c9a978' stroke='none' opacity='.6'/%3E%3Cpath d='M42 38q-1-9 7-12 2 8-7 12z' fill='%23c9a978' stroke='none' opacity='.55'/%3E%3Cpath d='M60 26q0-9 8-11 1 8-8 11z' fill='%23c9a978' stroke='none' opacity='.5'/%3E%3Cpath d='M76 15q1-8 9-9 0 8-9 9z' fill='%23c9a978' stroke='none' opacity='.45'/%3E%3Ccircle cx='92' cy='6' r='2' fill='%23d9a0a5' stroke='none' opacity='.65'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.ending-vine-l { left: 10px; }
|
||||
.ending-vine-r { right: 10px; transform: scaleX(-1); }
|
||||
/* 四角雕花：细线 L 角 + 圆点收尾
|
||||
容器必须自带 absolute 尺寸：v-reveal 的 transform 会把它变成
|
||||
absolute 子元素的 containing block，没有 inset 时入场动画期间四角会错位 */
|
||||
.ending-corners {
|
||||
/* ---------- 尾页装饰（幕布/花环/格窗/星环/缎带，后台可选） ----------
|
||||
容器自带 inset:0：v-reveal 的 transform 会让它成为 absolute 子元素的
|
||||
containing block，无尺寸时入场动画期间装饰会错位 */
|
||||
.ending-decor {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ending-corners i {
|
||||
position: absolute; width: 46px; height: 46px; border-color: rgba(var(--c-primary-rgb),0.3);
|
||||
.ending-decor i {
|
||||
position: absolute;
|
||||
}
|
||||
.ending-corners i::after {
|
||||
content: ''; position: absolute; width: 4px; height: 4px;
|
||||
border-radius: 50%; background: rgba(var(--c-primary-rgb), 0.42);
|
||||
|
||||
/* —— 舞台幕布：顶部帷幔垂坠 + 两侧束幕 + 金色束带 —— */
|
||||
.ending-style-curtain {
|
||||
--ed-cloth: color-mix(in srgb, var(--c-primary) 78%, #6e2836);
|
||||
--ed-cloth-dark: color-mix(in srgb, var(--c-primary) 58%, #431722);
|
||||
--ed-gold: rgba(216, 178, 110, 0.9);
|
||||
}
|
||||
.ending-style-curtain::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -6px;
|
||||
right: -6px;
|
||||
height: 84px;
|
||||
background:
|
||||
radial-gradient(43px 52px at 46px 2px, var(--ed-cloth) 68%, transparent 70%) 0 4px / 92px 80px repeat-x,
|
||||
radial-gradient(43px 48px at 0 0, var(--ed-cloth-dark) 68%, transparent 70%) 46px 8px / 92px 74px repeat-x,
|
||||
linear-gradient(180deg, var(--ed-cloth-dark), var(--ed-cloth) 82%) 0 0 / 100% 30px no-repeat;
|
||||
filter: drop-shadow(0 6px 10px rgba(60, 20, 30, 0.3));
|
||||
}
|
||||
.ending-style-curtain::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5px;
|
||||
background: linear-gradient(90deg, rgba(216, 178, 110, 0.4), var(--ed-gold) 30%, var(--ed-gold) 70%, rgba(216, 178, 110, 0.4));
|
||||
}
|
||||
.ending-style-curtain .ed-a,
|
||||
.ending-style-curtain .ed-b {
|
||||
top: -8px;
|
||||
bottom: -8px;
|
||||
width: 74px;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, var(--ed-cloth) 0 9px, var(--ed-cloth-dark) 9px 17px, var(--ed-cloth) 17px 26px);
|
||||
filter: drop-shadow(0 0 14px rgba(60, 20, 30, 0.35));
|
||||
}
|
||||
.ending-style-curtain .ed-a {
|
||||
left: -10px;
|
||||
clip-path: polygon(0 0, 100% 0, 56% 40%, 42% 50%, 78% 62%, 100% 100%, 0 100%);
|
||||
}
|
||||
.ending-style-curtain .ed-b {
|
||||
right: -10px;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 22% 62%, 58% 50%, 44% 40%);
|
||||
}
|
||||
.ending-style-curtain .ed-c,
|
||||
.ending-style-curtain .ed-d {
|
||||
top: 47%;
|
||||
width: 34px;
|
||||
height: 13px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #ecd2a0, #c9a054 70%);
|
||||
box-shadow: 0 2px 5px rgba(90, 60, 20, 0.35);
|
||||
}
|
||||
.ending-style-curtain .ed-c {
|
||||
left: 2px;
|
||||
transform: rotate(9deg);
|
||||
}
|
||||
.ending-style-curtain .ed-d {
|
||||
right: 2px;
|
||||
transform: rotate(-9deg);
|
||||
}
|
||||
|
||||
/* —— 满月花环：正圆双枝花环环抱内容 —— */
|
||||
.ending-style-moonwreath::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: min(92vw, 400px);
|
||||
height: min(92vw, 400px);
|
||||
transform: translate(-50%, -50%);
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23a8b894' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M100 190a90 90 0 0 1-88-72'/%3E%3Cpath d='M100 190a90 90 0 0 0 88-72'/%3E%3Cpath d='M12 82A90 90 0 0 1 96 10'/%3E%3Cpath d='M188 82A90 90 0 0 0 104 10'/%3E%3C/g%3E%3Cg fill='%23b0c29a'%3E%3Cellipse cx='22' cy='140' rx='9' ry='3.8' transform='rotate(58 22 140)'/%3E%3Cellipse cx='12' cy='108' rx='9' ry='3.8' transform='rotate(84 12 108)'/%3E%3Cellipse cx='14' cy='72' rx='9' ry='3.8' transform='rotate(108 14 72)'/%3E%3Cellipse cx='30' cy='40' rx='9' ry='3.8' transform='rotate(134 30 40)'/%3E%3Cellipse cx='58' cy='18' rx='9' ry='3.8' transform='rotate(156 58 18)'/%3E%3Cellipse cx='178' cy='140' rx='9' ry='3.8' transform='rotate(-58 178 140)'/%3E%3Cellipse cx='188' cy='108' rx='9' ry='3.8' transform='rotate(-84 188 108)'/%3E%3Cellipse cx='186' cy='72' rx='9' ry='3.8' transform='rotate(-108 186 72)'/%3E%3Cellipse cx='170' cy='40' rx='9' ry='3.8' transform='rotate(-134 170 40)'/%3E%3Cellipse cx='142' cy='18' rx='9' ry='3.8' transform='rotate(-156 142 18)'/%3E%3Cellipse cx='58' cy='182' rx='8' ry='3.4' transform='rotate(22 58 182)'/%3E%3Cellipse cx='142' cy='182' rx='8' ry='3.4' transform='rotate(-22 142 182)'/%3E%3C/g%3E%3Cg fill='%23e4aeb6'%3E%3Cg transform='translate(100 12)'%3E%3Ccircle cy='-4' r='3.2'/%3E%3Ccircle cx='3.6' cy='1.2' r='3.2'/%3E%3Ccircle cx='-3.6' cy='1.2' r='3.2'/%3E%3Ccircle r='1.7' fill='%23c9a24a'/%3E%3C/g%3E%3Cg transform='translate(100 188)'%3E%3Ccircle cy='-4' r='3.2'/%3E%3Ccircle cx='3.6' cy='1.2' r='3.2'/%3E%3Ccircle cx='-3.6' cy='1.2' r='3.2'/%3E%3Ccircle r='1.7' fill='%23c9a24a'/%3E%3C/g%3E%3Cg transform='translate(14 96) scale(.82)'%3E%3Ccircle cy='-4' r='3.2'/%3E%3Ccircle cx='3.6' cy='1.2' r='3.2'/%3E%3Ccircle cx='-3.6' cy='1.2' r='3.2'/%3E%3Ccircle r='1.7' fill='%23c9a24a'/%3E%3C/g%3E%3Cg transform='translate(186 96) scale(.82)'%3E%3Ccircle cy='-4' r='3.2'/%3E%3Ccircle cx='3.6' cy='1.2' r='3.2'/%3E%3Ccircle cx='-3.6' cy='1.2' r='3.2'/%3E%3Ccircle r='1.7' fill='%23c9a24a'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23d9a0a5' opacity='.6'%3E%3Ccircle cx='40' cy='166' r='2.2'/%3E%3Ccircle cx='160' cy='166' r='2.2'/%3E%3Ccircle cx='40' cy='30' r='2.2'/%3E%3Ccircle cx='160' cy='30' r='2.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.ending-style-moonwreath::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 6%;
|
||||
width: 60%;
|
||||
height: 26px;
|
||||
transform: translateX(-50%);
|
||||
background: radial-gradient(50% 100% at 50% 50%, rgba(168, 184, 148, 0.2), transparent 75%);
|
||||
}
|
||||
|
||||
/* —— 法式格窗：细格线落地窗 + 窗台横板 —— */
|
||||
.ending-style-frwindow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 26px 20px 44px;
|
||||
border: 2px solid rgba(var(--c-primary-rgb), 0.4);
|
||||
border-radius: 3px;
|
||||
background:
|
||||
linear-gradient(rgba(var(--c-primary-rgb), 0.35), rgba(var(--c-primary-rgb), 0.35)) 50% 0 / 2.5px 100% no-repeat,
|
||||
repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(var(--c-primary-rgb), 0.24) calc(25% - 1px) 25%),
|
||||
repeating-linear-gradient(90deg, transparent 0 calc(16.666% - 1px), rgba(var(--c-primary-rgb), 0.16) calc(16.666% - 1px) 16.666%),
|
||||
radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 50%);
|
||||
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.35), 0 14px 30px rgba(var(--c-primary-rgb), 0.12);
|
||||
}
|
||||
.ending-style-frwindow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: 32px;
|
||||
height: 7px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(180deg, rgba(var(--c-primary-rgb), 0.4), rgba(var(--c-primary-rgb), 0.26));
|
||||
box-shadow: 0 5px 8px rgba(var(--c-primary-rgb), 0.16);
|
||||
}
|
||||
.ending-style-frwindow .ed-a {
|
||||
left: 50%;
|
||||
top: 49%;
|
||||
width: 5px;
|
||||
height: 22px;
|
||||
margin-left: 5px;
|
||||
border-radius: 4px;
|
||||
background: rgba(var(--c-primary-rgb), 0.5);
|
||||
}
|
||||
|
||||
/* —— 星光圆环：光点环缓旋 + 四角光斑 —— */
|
||||
.ending-style-starring::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(34% 26% at 6% 4%, rgba(232, 201, 135, 0.22), transparent 70%),
|
||||
radial-gradient(30% 24% at 96% 8%, rgba(232, 201, 135, 0.16), transparent 70%),
|
||||
radial-gradient(32% 24% at 4% 94%, rgba(232, 201, 135, 0.16), transparent 70%),
|
||||
radial-gradient(36% 28% at 96% 96%, rgba(232, 201, 135, 0.22), transparent 70%);
|
||||
}
|
||||
.ending-style-starring .ed-a {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: min(88vw, 384px);
|
||||
height: min(88vw, 384px);
|
||||
transform: translate(-50%, -50%);
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='92' fill='none' stroke='%23d9c288' stroke-width='2.6' stroke-dasharray='0.1 15.5' stroke-linecap='round'/%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%23d9c288' stroke-width='1.4' stroke-dasharray='0.1 10.4' stroke-linecap='round' opacity='.55'/%3E%3Cg fill='%23d9c288'%3E%3Cpath d='M100 2l1.8 4.4L106 8l-4.2 1.6L100 14l-1.8-4.4L94 8l4.2-1.6z'/%3E%3Cpath d='M100 186l1.8 4.4 4.2 1.6-4.2 1.6-1.8 4.4-1.8-4.4-4.2-1.6 4.2-1.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
|
||||
animation: edRingSpin 70s linear infinite;
|
||||
filter: drop-shadow(0 0 10px rgba(217, 194, 136, 0.4));
|
||||
}
|
||||
@keyframes edRingSpin {
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
.ending-style-starring::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 60%;
|
||||
height: 46%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 250, 236, 0.3), transparent 72%);
|
||||
}
|
||||
|
||||
/* —— 缎带环绕：上下飘带 + 对角蝴蝶结 —— */
|
||||
.ending-style-ribbons::before,
|
||||
.ending-style-ribbons::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
right: -12px;
|
||||
height: 46px;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 46' preserveAspectRatio='none'%3E%3Cpath d='M-4 30C56 8 116 8 178 24s124 18 246-8' fill='none' stroke='%23e8a8b2' stroke-width='7' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M-4 34C56 12 116 12 178 28s124 18 246-8' fill='none' stroke='%23d9c288' stroke-width='2.4' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
|
||||
}
|
||||
.ending-style-ribbons::before {
|
||||
top: 22px;
|
||||
}
|
||||
.ending-style-ribbons::after {
|
||||
bottom: 22px;
|
||||
transform: scaleX(-1) scaleY(-1);
|
||||
}
|
||||
.ending-style-ribbons .ed-a,
|
||||
.ending-style-ribbons .ed-b {
|
||||
width: 56px;
|
||||
height: 38px;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 44'%3E%3Cg fill='%23e093a3'%3E%3Cpath d='M33 12C26 4 14 2 8 8c-5 5-3 13 4 15 8 2 17-4 21-11z' fill='%23e8a8b2'/%3E%3Cpath d='M33 12c7-8 19-10 25-4 5 5 3 13-4 15-8 2-17-4-21-11z' fill='%23e8a8b2'/%3E%3Cpath d='M27 20l-7 20 8-3 3 5 4-22z' fill='%23e8a8b2'/%3E%3Cpath d='M39 20l7 20-8-3-3 5-4-22z' fill='%23dfa0aa'/%3E%3Ccircle cx='33' cy='13' r='5' fill='%23d9899a'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
|
||||
filter: drop-shadow(0 3px 5px rgba(190, 120, 130, 0.35));
|
||||
}
|
||||
.ending-style-ribbons .ed-a {
|
||||
top: 40px;
|
||||
left: 16px;
|
||||
transform: rotate(-14deg);
|
||||
}
|
||||
.ending-style-ribbons .ed-b {
|
||||
bottom: 40px;
|
||||
right: 16px;
|
||||
transform: rotate(168deg);
|
||||
}
|
||||
.ending-corners i:nth-child(1) { top: 44px; left: 38px; border-top: 1px solid; border-left: 1px solid; }
|
||||
.ending-corners i:nth-child(1)::after { top: -2.5px; left: -2.5px; }
|
||||
.ending-corners i:nth-child(2) { top: 44px; right: 38px; border-top: 1px solid; border-right: 1px solid; }
|
||||
.ending-corners i:nth-child(2)::after { top: -2.5px; right: -2.5px; }
|
||||
.ending-corners i:nth-child(3) { left: 38px; bottom: 44px; border-bottom: 1px solid; border-left: 1px solid; }
|
||||
.ending-corners i:nth-child(3)::after { bottom: -2.5px; left: -2.5px; }
|
||||
.ending-corners i:nth-child(4) { right: 38px; bottom: 44px; border-right: 1px solid; border-bottom: 1px solid; }
|
||||
.ending-corners i:nth-child(4)::after { bottom: -2.5px; right: -2.5px; }
|
||||
.ending-kicker {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 10px;
|
||||
margin-bottom: 18px; color: var(--c-primary); font-size: 10px; letter-spacing: 0.45em;
|
||||
|
||||
Reference in New Issue
Block a user