1. 礼物特效

vite-tailwindcss/src/views/index/index.vue

@@ -2472,7 +2472,7 @@ watch(
   text-shadow:
     0 0 6px rgba(253, 251, 247, 0.95),
     0 1px 0 rgba(255, 255, 255, 0.8);
-  transform: translate3d(calc(var(--scroll-p, 0) * (100vw - 1.1em) + 0.55em - 50%), 0, 0);
+  transform: translate3d(calc(var(--scroll-p, 0) * (100% - 1.1em) + 0.55em - 50%), 0, 0);
   will-change: transform;
   font-weight: 700;
   letter-spacing: 0;
@@ -3582,4 +3582,97 @@ watch(
   12% { opacity: 1; transform: translateY(4px) scale(.98); filter: blur(0); }
   100% { opacity: 0; transform: translateY(-12px) scale(.94); filter: blur(1.4px); }
 }
+
+/* ---------- PC：内容列限宽居中（缩略图不宜铺满大屏） ---------- */
+@media (min-width: 768px) {
+  .wrapper {
+    --pc-invite-width: 430px;
+    background:
+      radial-gradient(ellipse at 50% 12%, rgba(232, 201, 210, 0.12), transparent 42%),
+      linear-gradient(180deg, #f3eee6 0%, #ebe4d8 100%);
+  }
+  .scroll-transform-host {
+    max-width: var(--pc-invite-width);
+    margin-left: auto;
+    margin-right: auto;
+    background: #fdfbf7;
+    box-shadow:
+      0 0 0 1px rgba(168, 140, 107, 0.12),
+      0 28px 80px rgba(95, 70, 39, 0.12);
+  }
+  .scroll-progress {
+    left: 50%;
+    right: auto;
+    width: var(--pc-invite-width);
+    max-width: 100%;
+    transform: translateX(-50%);
+  }
+  .action-dock {
+    left: 50%;
+    right: auto;
+    width: var(--pc-invite-width);
+    max-width: 100%;
+    transform: translateX(-50%);
+    box-sizing: border-box;
+  }
+
+  /* 日历 PC：略放大卡片与选中爱心，移动端样式不变 */
+  .wedding-calendar-page {
+    min-height: 100dvh;
+    padding-top: 48px;
+    padding-bottom: 48px;
+  }
+  .calendar-card {
+    width: min(100%, 392px);
+    padding: 36px 28px 34px;
+  }
+  .calendar-card::before {
+    inset: 14px;
+  }
+  .calendar-kicker {
+    font-size: 11px;
+    letter-spacing: 0.5em;
+    padding-left: 0.5em;
+  }
+  .calendar-title {
+    margin-top: 14px;
+    font-size: 34px;
+    gap: 16px;
+  }
+  .calendar-title i {
+    width: 40px;
+  }
+  .calendar-date-line {
+    margin: 12px auto 26px;
+    font-size: 12px;
+  }
+  .calendar-weekdays,
+  .calendar-grid {
+    gap: 10px;
+  }
+  .calendar-weekdays {
+    margin-bottom: 11px;
+    font-size: 11px;
+  }
+  .calendar-day {
+    font-size: 16px;
+  }
+  .calendar-day.is-selected .calendar-day-num {
+    width: 28px;
+    height: 28px;
+    font-size: 17px;
+  }
+  .heart-ring {
+    inset: -12px;
+  }
+  .heart-ring svg {
+    width: 74px;
+    height: 72px;
+  }
+  .calendar-note {
+    margin-top: 28px;
+    font-size: 14px;
+    gap: 12px;
+  }
+}
 </style>