/*! * 全站弹性布局统一控制中心 —— 样式 * * 约定： * · .yk-shell 页面外壳，居中容器的载体 * · body.yk-layout-boxed 盒式（居中，最大宽度 = --yk-shell-max） * · body.yk-layout-fluid 通栏（100%，忽略 --yk-shell-max） * · --yk-shell-max 由 JS 写入 的 style，站点默认来自后台设置 * * 任何页面都不要再自行写 .yk-shell 的 max-width，统一由这里控制。 */ /* -------------------------------------------------------------------------- 1. 外壳 -------------------------------------------------------------------------- */ .yk-shell { max-width: var(--yk-shell-max, 1280px); margin-left: auto; margin-right: auto; background: var(--yk-bg, #F7F8FA); } /* 通栏：外壳与内部 Bootstrap 容器一起放开，否则仍受 .container 的最大宽度限制 */ body.yk-layout-fluid .yk-shell, body.yk-layout-fluid .yk-shell .container { max-width: none; } /* 盒式：外壳与内部容器一并收敛到统一宽度，避免大屏下外壳变宽而内容仍卡在 1170 */ body.yk-layout-boxed .yk-shell, body.yk-layout-boxed .yk-shell .container { max-width: var(--yk-shell-max, 1280px); } /* 撑开主内容区，使 footer 始终贴底 */ .yk-content { flex: 1 0 auto; } /* -------------------------------------------------------------------------- 2. 悬浮控制按钮（全站唯一一个，任何页面看到的是同一个开关） -------------------------------------------------------------------------- */ .yk-layout-fab { position: fixed; right: 18px; bottom: 18px; z-index: 10800; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: var(--yk-primary, #4F6CF7); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04); transition: all 0.2s ease; } .yk-layout-fab:hover { background: var(--yk-primary-dark, #3B55D9); transform: translateY(-2px); } .yk-layout-fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- 3. 设置面板 -------------------------------------------------------------------------- */ .yk-layout-panel { position: fixed; right: 18px; bottom: 72px; z-index: 10801; width: 268px; background: #fff; border: 1px solid var(--yk-border, #E2E8F0); border-radius: 12px; box-shadow: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04); padding: 14px 16px; display: none; font-size: 13px; color: var(--yk-text, #1A202C); line-height: 1.5; } .yk-layout-panel.is-open { display: block; } .yk-lp-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 10px; } .yk-lp-close { border: none; background: none; cursor: pointer; color: var(--yk-text-muted, #A0AEC0); font-size: 16px; line-height: 1; padding: 0 2px; } .yk-lp-group { margin-bottom: 12px; } .yk-lp-label { font-size: 12px; color: var(--yk-text-muted, #A0AEC0); margin-bottom: 6px; } .yk-lp-opts { display: flex; flex-wrap: wrap; gap: 6px; } .yk-lp-opt { border: 1px solid var(--yk-border, #E2E8F0); background: #fff; color: var(--yk-text-secondary, #4A5568); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .yk-lp-opt:hover { border-color: var(--yk-primary, #4F6CF7); color: var(--yk-primary, #4F6CF7); } .yk-lp-opt.is-active { background: var(--yk-primary, #4F6CF7); border-color: var(--yk-primary, #4F6CF7); color: #fff; } .yk-lp-opt.is-disabled { opacity: 0.45; cursor: not-allowed; } .yk-lp-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--yk-border-light, #EDF2F7); padding-top: 10px; margin-top: 2px; } .yk-lp-tip { font-size: 11px; color: var(--yk-text-muted, #A0AEC0); } .yk-lp-reset { border: 1px solid var(--yk-border, #E2E8F0); background: #fff; color: var(--yk-text-secondary, #4A5568); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; } .yk-lp-reset:hover { border-color: var(--yk-danger, #F56565); color: var(--yk-danger, #F56565); } @media (max-width: 767px) { .yk-layout-fab { right: 12px; bottom: 12px; } .yk-layout-panel { right: 12px; bottom: 64px; width: calc(100vw - 24px); max-width: 268px; } }