90 lines
1.8 KiB
CSS
90 lines
1.8 KiB
CSS
/**
|
||
* Home Modules · CMS 形态首页模块系统样式
|
||
*
|
||
* 仅在 site_profile=cms 时（首页）加载。
|
||
*
|
||
* 宽度模型：
|
||
* - .home-modules > .home-module 锁定到 --container（默认 1280）
|
||
* - .home-modules > .hero 走 full-bleed（不在此处约束）
|
||
* - banner 模块的精细微调见 hero.css `.banner-slider.home-modules__banner`
|
||
*/
|
||
|
||
.home-modules {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-9, 48px);
|
||
padding-bottom: var(--space-9, 48px);
|
||
}
|
||
|
||
.home-modules--fullbleed {
|
||
width: 100%;
|
||
}
|
||
|
||
.home-modules--fullbleed > .home-module {
|
||
max-width: 100%;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
/* 容器宽度统一：所有非 hero 的 home-module 都对齐到 --container */
|
||
.home-modules > .home-module {
|
||
width: 100%;
|
||
max-width: var(--container);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.home-modules > .home-module {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
}
|
||
|
||
/* ============ 公共 header ============ */
|
||
.home-module__header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: var(--space-3, 12px);
|
||
margin-bottom: var(--space-5, 20px);
|
||
padding-bottom: var(--space-3, 12px);
|
||
border-bottom: 1px solid var(--color-line);
|
||
}
|
||
|
||
.home-module__title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font: 700 22px/1.2 var(--font-display);
|
||
margin: 0;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.home-module__title i {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.home-module__more {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font: 500 13px/1 var(--font-ui);
|
||
color: var(--color-primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.home-module__more:hover {
|
||
color: var(--color-primary-active);
|
||
}
|
||
|
||
.home-module__admin-tools {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 14px;
|
||
}
|
||
|