更新页面效果

2026-07-31 10:29:14 +08:00
parent 5f00b644cf
commit 3c4347128d
73 changed files with 1558 additions and 183 deletions
--- a/vite-tailwindcss/src/styles/frames.css
+++ b/vite-tailwindcss/src/styles/frames.css
@@ -0,0 +1,71 @@
+/* ============================================================
+   相册边框样式（全局）
+   - 前台 PhotoGallery 按 page.borderStyle 套用
+   - 后台 AdminEditor 预览复用同一套类
+   结构约定：<div class="gf-frame gf-xxx"><img/></div>
+   gf-frame 负责定位与裁切，gf-xxx 负责边框/卡纸/投影
+   ============================================================ */
+.gf-frame {
+  position: relative;
+  background: #fff;
+  overflow: hidden;
+}
+.gf-frame > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 无边框 */
+.gf-none {
+  padding: 0;
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+/* 细金线 */
+.gf-thin {
+  padding: 0;
+  border: 1px solid #cdb89c;
+  border-radius: 4px;
+  box-shadow: 0 2px 10px rgba(120, 90, 60, 0.08);
+  background: #fff;
+}
+
+/* 白卡纸（经典裱框） */
+.gf-mat {
+  padding: 8px;
+  border-radius: 2px;
+  box-shadow: 0 6px 20px rgba(120, 90, 60, 0.12);
+  background: #fff;
+}
+
+/* 柔圆角 */
+.gf-rounded {
+  padding: 0;
+  border: 1px solid rgba(168, 140, 107, 0.4);
+  border-radius: 20px;
+  box-shadow: 0 8px 24px rgba(120, 90, 60, 0.1);
+  background: #fff;
+}
+
+/* 双线框 */
+.gf-double {
+  padding: 6px;
+  border: 3px double #b89a78;
+  border-radius: 3px;
+  box-shadow: 0 4px 16px rgba(120, 90, 60, 0.1);
+  background: #fff;
+}
+
+/* 古典金框（外白 + 金线双层） */
+.gf-gold {
+  padding: 7px;
+  border: 2px solid #c9a978;
+  border-radius: 3px;
+  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e7d6bb, 0 8px 22px rgba(120, 90, 60, 0.12);
+  background: #fff;
+}