@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Noto+Serif+SC:wght@900&display=swap";.snow-field{position:fixed;inset:0;pointer-events:none;z-index:1}.flake{position:absolute;top:-10px;width:4px;height:4px;background:#fff;border-radius:50%;opacity:.3;animation:snowFall 10s linear infinite}@keyframes snowFall{to{transform:translateY(100vh) translate(50px)}}.flake:nth-child(1){left:10%;animation-duration:8s}.flake:nth-child(2){left:30%;animation-duration:12s}.flake:nth-child(3){left:50%;animation-duration:9s}.flake:nth-child(4){left:70%;animation-duration:15s}.flake:nth-child(5){left:90%;animation-duration:11s}.gallery-container[data-v-96206c92]{display:flex;justify-content:center;align-items:flex-start}.photo-perspective[data-v-96206c92]{perspective:2000px}.photo-card[data-v-96206c92]{width:75vw;max-width:400px;aspect-ratio:3 / 4}.photo-frame[data-v-96206c92]{position:relative;width:70vw;max-width:380px;aspect-ratio:3/4;background:#111;border:1px solid rgba(212,175,55,.2);transform-style:preserve-3d;transition:transform .3s;cursor:pointer;box-shadow:0 40px 100px #000c}.photo-frame[data-v-96206c92]:active{transform:translateZ(-50px) rotateX(5deg)}.content-img[data-v-96206c92]{width:100%;height:100%;object-fit:cover;filter:brightness(.9) contrast(1.1)}.shimmer[data-v-96206c92]{position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);background-size:200% 100%;animation:shine-96206c92 4s infinite}.toy-particle[data-v-96206c92]{position:fixed;z-index:1000;pointer-events:none;animation:explodeAndFall-96206c92 2.5s cubic-bezier(.1,.8,.3,1) forwards}@keyframes explodeAndFall-96206c92{0%{transform:translate(-50%,-50%) scale(0);opacity:1}20%{transform:translate(calc(-50% + var(--tx)),-100px) scale(1.2) rotate(180deg)}to{transform:translate(calc(-50% + var(--tx)),var(--ty)) scale(.8) rotate(720deg);opacity:0}}@keyframes shine-96206c92{0%{background-position:200% 0}to{background-position:-200% 0}}.photo-flip-enter-active[data-v-96206c92],.photo-flip-leave-active[data-v-96206c92]{transition:all .7s cubic-bezier(.6,0,.4,1)}.photo-flip-enter-from[data-v-96206c92]{opacity:0;transform:rotateY(-90deg) scale(.8)}.photo-flip-leave-to[data-v-96206c92]{opacity:0;transform:rotateY(90deg) scale(1.2)}.minimal-audio[data-v-99a92862]{position:fixed;bottom:40px;right:40px;z-index:500}.audio-bars[data-v-99a92862]{display:flex;align-items:flex-end;gap:3px;height:25px;cursor:pointer;padding:10px}.audio-bars span[data-v-99a92862]{width:2px;height:5px;background:#d4af37;transition:.2s}.audio-bars.active span[data-v-99a92862]{animation:barFlow-99a92862 .6s infinite alternate}.audio-bars span[data-v-99a92862]:nth-child(2){animation-delay:.1s}.audio-bars span[data-v-99a92862]:nth-child(3){animation-delay:.2s}.audio-bars span[data-v-99a92862]:nth-child(4){animation-delay:.3s}.audio-bars span[data-v-99a92862]:nth-child(5){animation-delay:.4s}@keyframes barFlow-99a92862{0%{height:5px}to{height:25px}}:root{--gold: #d4af37;--gold-light: #fcf6ba;--bg-deep: #020808;--emerald-glow: rgba(2, 43, 29, .4)}*{-webkit-tap-highlight-color:transparent;outline:none}body,html{margin:0;padding:0;background:var(--bg-deep);color:#fff;overflow:hidden;font-family:Cinzel,serif;width:100%;height:100%}.intro-overlay{position:fixed;inset:0;z-index:1000;background:radial-gradient(circle at center,#0a0a0a,#000);display:flex;justify-content:center;align-items:center;cursor:pointer;overflow:hidden}.glass-seal{position:relative;padding:40px;background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.2);border-radius:2px;box-shadow:0 0 50px #00000080;z-index:2}.gift-trigger{text-align:center;color:var(--gold)}.sparkle,.sparkle-bottom{font-size:1.5rem;opacity:.6;animation:rotateStar 4s infinite linear}.text-group{margin:25px 0}.en-label{font-size:.7rem;letter-spacing:.6rem;opacity:.8;margin-bottom:10px}.special-to{font-family:"Noto Serif SC",serif;font-size:1.2rem;letter-spacing:.3rem;margin-top:15px;color:#fff}.gift-trigger .line{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);width:150px;margin:0 auto;transition:width 1s cubic-bezier(.4,0,.2,1)}.intro-overlay:hover .line{width:220px}明白了，这种“距离感”通常是因为 flex: 1 占据了屏幕所有剩余空间并把照片强行居中导致的。 为了让标题和照片像精心排版的杂志一样紧凑、成对出现，我们需要彻底抛弃“自动平分空间”的逻辑，改用精准的间距控制。 以下是优化后的 App.vue 样式，它将距离锁死，无论屏幕多大，照片都会紧跟在标题下方： 1 更新 src/App.vue 的样式 请替换 <style> 部分中的相关类，或者直接覆盖： CSS .main-stage{display:flex;flex-direction:column;align-items:center;min-height:100vh;width:100vw;position:relative;overflow-y:auto;overflow-x:hidden}.ambient-gradient{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,var(--emerald-glow) 0%,transparent 70%);z-index:0}.luxury-header{padding-top:5vh;padding-bottom:0;width:100%;text-align:center;z-index:10}.gallery-container{width:100%;display:flex;justify-content:center;align-items:flex-start;margin-top:20px;padding-bottom:40px;z-index:5}.title-container{position:relative;display:inline-block}h1{font-family:"Noto Serif SC",serif;font-size:clamp(2.5rem,10vw,4.5rem);margin:0;letter-spacing:.8rem;position:relative;background:linear-gradient(90deg,#fff 0%,var(--gold) 25%,var(--gold-light) 50%,var(--gold) 75%,#fff 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shineText 5s linear infinite}.title-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:60px;background:var(--gold);filter:blur(60px);opacity:.15;z-index:-1}.subtitle{font-size:.7rem;letter-spacing:.4rem;margin-top:15px;opacity:.5;font-weight:200}@keyframes shineText{to{background-position:200% center}}@keyframes rotateStar{to{transform:rotate(360deg)}}.entry-blur-leave-active{transition:all 1.5s cubic-bezier(.7,0,.3,1)}.entry-blur-leave-to{opacity:0;filter:blur(30px) scale(1.1)}.snow-field{position:fixed;inset:0;pointer-events:none;z-index:10}.flake{position:absolute;top:-10px;background:#fff;border-radius:50%;opacity:.4;animation:fall linear infinite}@keyframes fall{to{transform:translateY(105vh) translate(50px)}}.flake:nth-child(2n){width:3px;height:3px}.flake:nth-child(odd){width:1px;height:1px}@media(max-width:768px){.luxury-header{padding-top:40px}h1{font-size:2.2rem;letter-spacing:.3rem}.gallery-container{margin-top:10px}}@media(min-width:1200px){.gallery-container{margin-top:30px}}