更新页面效果

vite-tailwindcss/src/styles/frames.css

@@ -69,3 +69,57 @@
   box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e7d6bb, 0 8px 22px rgba(120, 90, 60, 0.12);
   background: #fff;
 }
+
+/* 阴影浮起（无边框，大柔影悬浮感） */
+.gf-shadow {
+  padding: 0;
+  border: 0;
+  border-radius: 10px;
+  box-shadow: 0 18px 44px rgba(96, 72, 50, 0.2), 0 4px 12px rgba(96, 72, 50, 0.1);
+  background: #fff;
+}
+
+/* 墨黑描边（简约深色细框） */
+.gf-ink {
+  padding: 6px;
+  border: 1.5px solid #3a3733;
+  border-radius: 2px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+  background: #fff;
+}
+
+/* 悬浮卡片（厚白边 + 大圆角 + 层叠影） */
+.gf-card {
+  padding: 12px;
+  border: 1px solid rgba(168, 140, 107, 0.18);
+  border-radius: 16px;
+  box-shadow: 0 2px 6px rgba(120, 90, 60, 0.08), 0 16px 36px rgba(120, 90, 60, 0.16);
+  background: #fff;
+}
+
+/* 虚线文艺（dashed 描边 + 内白边） */
+.gf-lace {
+  padding: 7px;
+  border: 1.5px dashed #b89a78;
+  border-radius: 8px;
+  box-shadow: 0 3px 12px rgba(120, 90, 60, 0.08);
+  background: #fff;
+}
+
+/* 柔光金晕（浅金边 + 外发光） */
+.gf-glow {
+  padding: 5px;
+  border: 1px solid #e7d3ae;
+  border-radius: 6px;
+  box-shadow: 0 0 0 3px rgba(231, 211, 174, 0.35), 0 0 26px rgba(201, 169, 120, 0.45), 0 6px 16px rgba(120, 90, 60, 0.1);
+  background: #fff;
+}
+
+/* 辅助：图片保持原始宽高比（单图铺满+保比例时使用，覆盖 gf-frame 的 height:100%） */
+.gf-natural {
+  height: auto !important;
+}
+.gf-natural > img {
+  height: auto;
+  object-fit: contain;
+}