2026-07-31 10:29:14 +08:00
|
|
|
|
/* ============================================================
|
|
|
|
|
|
相册边框样式（全局）
|
|
|
|
|
|
- 前台 PhotoGallery 按 page.borderStyle 套用
|
|
|
|
|
|
- 后台 AdminEditor 预览复用同一套类
|
|
|
|
|
|
结构约定：<div class="gf-frame gf-xxx"><img/></div>
|
2026-07-31 12:13:41 +08:00
|
|
|
|
gf-frame 只负责裁切，gf-xxx 负责边框/卡纸/投影
|
|
|
|
|
|
注意：绝不能在此设置 position/width/height —— 本文件在
|
|
|
|
|
|
Tailwind 工具类之后加载，会覆盖元素上的 absolute/尺寸工具类
|
|
|
|
|
|
（position:relative 曾把 overlap 版的 absolute 静默冲掉）
|
2026-07-31 10:29:14 +08:00
|
|
|
|
============================================================ */
|
|
|
|
|
|
.gf-frame {
|
|
|
|
|
|
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;
|
|
|
|
|
|
}
|
2026-07-31 11:36:19 +08:00
|
|
|
|
|
|
|
|
|
|
/* 阴影浮起（无边框，大柔影悬浮感） */
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
