diff --git a/src/main/resources/templates/themes/mint-breeze/assets/css/main.css b/src/main/resources/templates/themes/mint-breeze/assets/css/main.css index 73fc718..75acfa4 100644 --- a/src/main/resources/templates/themes/mint-breeze/assets/css/main.css +++ b/src/main/resources/templates/themes/mint-breeze/assets/css/main.css @@ -615,3 +615,509 @@ time, .item-meta { color: var(--text-light); font-size: 13px; } .side-nav { display: none; } .list-main.has-sidenav, .detail-main.has-sidenav { display: block; } } + + + +/* ============================================================ + * 首页布局模式区块(home_layout 落库后由 fragments/home-blocks.html 自持渲染) + * 手册 §A.2 · P-A2。三条硬约束: + * ① 本包 .home-main 是三列网格(第「首页区块」节),自研区块不再由 common 兜住 + * grid-column → **每个区块根类必须显式跨满整行**,否则塌成三分之一列(§2.5 坑③)。 + * ② 网格轨道一律 minmax(0,1fr),中文长标题才不会被 min-content 撑破窄视口。 + * ③ 颜色只用本包已有令牌;唯一的自持色是公告条 warn 三件套(皮肤契约没有告警色变量, + * 与 themes/common 骨架的 --plb-warn-* 同一处置),且只写在公告条规则内、不进 :root。 + * ============================================================ */ + +/* 区块根:卡片本体(news_grid / card / compact / media_focus / image_wall / gallery / links / quick_links) */ +.mb-block { + grid-column: 1 / -1; + min-width: 0; + background: var(--card-bg); + border-radius: var(--radius); + box-shadow: var(--shadow-soft); + padding: 24px; + position: relative; +} +.mb-block-inner { position: relative; } + +/* 站点 news_bg_image:本包卡片不透明,整幅铺图会看不见,故按"薄荷水印"处理成低透明衬底,正文浮于其上 */ +.mb-sec-bg { + position: absolute; + inset: 0; + background-size: cover; + background-position: center; + border-radius: var(--radius); + opacity: .12; + pointer-events: none; +} + +/* 双栏要闻:左 3 份头条、右 2 份紧凑行 */ +.mb-split { + display: grid; + grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); + gap: 24px; + align-items: start; +} +.mb-featured > a { display: block; color: inherit; text-decoration: none; } +.mb-featured-body { display: block; min-width: 0; } +.mb-cover { + display: block; + border-radius: var(--radius-sm); + overflow: hidden; + margin-bottom: 12px; +} +.mb-cover img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform .4s ease; } +.mb-featured:hover .mb-cover img { transform: scale(1.03); } +/* 默认卡形态的头条:左图右文(整宽) */ +.mb-featured--row > a { display: flex; align-items: flex-start; gap: 18px; } +.mb-cover--row { flex: none; width: 34%; } +.mb-cover--row img { height: 178px; margin: 0; } + +/* 元信息行:置顶徽标 / 来源 / 日期(复用 .top-badge 语汇) + 必须限定在 .mb-block 内:.item-meta 是本页族 list.html 在用的既有类, + 不限定就会顺手改掉列表页(列表页不在 P-A2 范围内)。 */ +.mb-block .item-meta { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; + margin-top: 8px; + font-size: 13px; + color: var(--text-light); +} +.mb-src { + flex: none; + font-size: 12px; + color: var(--primary-dark); + border: 1px solid var(--primary); + border-radius: var(--radius-pill); + padding: 1px 9px; +} +.mb-date { flex: none; font-size: 13px; color: var(--text-light); } + +/* 日期药丸(compact 形态):本包圆角语言下的"日期方块" */ +.mb-date-chip { + flex: none; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 52px; + border-radius: var(--radius-sm); + background: var(--primary-light); + color: var(--primary-dark); + line-height: 1.2; +} +.mb-date-chip b { font-size: 18px; font-weight: 600; } +.mb-date-chip i { font-style: normal; font-size: 11px; opacity: .8; } + +/* 媒体聚焦双列:columns 断点处降单列(本包无 hover 依赖,纯排布) */ +.mb-list--two { columns: 2; column-gap: 28px; } +.mb-list--two > li { break-inside: avoid; } + +/* 图片墙 / 线上展厅:四列格 + 底部渐变题注(渐变端点用主色深变量,不写死色值) */ +.mb-wall { + list-style: none; + margin: 16px 0 0; + padding: 0; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 14px; +} +.mb-wall-item { + position: relative; + border-radius: var(--radius-sm); + overflow: hidden; + box-shadow: var(--shadow-soft); +} +.mb-wall-item a { display: block; } +.mb-wall-item img { width: 100%; height: 150px; object-fit: cover; display: block; transition: transform .5s ease; } +.mb-wall-item:hover img { transform: scale(1.05); } +.mb-wall-cap { + position: absolute; + left: 0; right: 0; bottom: 0; + padding: 26px 10px 9px; + font-size: 13px; + color: #fff; + background: linear-gradient(transparent, var(--primary-dark)); + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; +} +.mb-gallery-sub { + margin: -6px 0 4px; + font-size: 12px; + letter-spacing: .18em; + text-transform: uppercase; + color: var(--text-light); +} + +/* 要闻速递横条:flex 项自动最小尺寸 = min-content,中文可按字断行 → + 不锁 nowrap / 不让出收缩权就塌成一字一列(与 HomeBlocksCssContractTest 钉骨架的三条同形) */ +.mb-ticker { + grid-column: 1 / -1; + min-width: 0; + background: var(--primary); + color: #fff; + border-radius: var(--radius); + padding: 11px 18px; + font-size: 14px; +} +.mb-ticker-inner { display: flex; align-items: center; gap: 14px; min-width: 0; } +.mb-ticker-label { + flex: none; + font-weight: 600; + padding: 2px 12px; + border-radius: var(--radius-pill); + background: rgba(255, 255, 255, .18); +} +.mb-ticker-list { + flex: 1; + min-width: 0; + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + gap: 22px; + overflow: hidden; + white-space: nowrap; +} +.mb-ticker-item { + display: block; + flex: none; + max-width: 320px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #fff; + text-decoration: none; +} +.mb-ticker-item:hover { text-decoration: underline; text-underline-offset: 3px; } + +/* 快捷通道宫格:六列 → 三列 → 两列 */ +.mb-quick-grid { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 12px; +} +.mb-quick-link { + display: flex; + align-items: center; + justify-content: center; + min-height: 52px; + padding: 8px 10px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--bg); + color: var(--text); + font-size: 14px; + text-align: center; + text-decoration: none; + transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; +} +.mb-quick-link:hover { + color: var(--primary-dark); + border-color: var(--primary); + background: var(--primary-light); + transform: translateY(-2px); +} + +/* 友情链接分组 */ +.mb-links { + list-style: none; + margin: 0 0 12px; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 8px 12px; +} +.mb-links li { flex: none; } +.mb-links a { + display: inline-block; + padding: 4px 14px; + border: 1px solid var(--border); + border-radius: var(--radius-pill); + background: var(--bg); + color: var(--text); + font-size: 13px; + text-decoration: none; + transition: color .15s ease, border-color .15s ease, background .15s ease; +} +.mb-links a:hover { color: var(--primary-dark); border-color: var(--primary); background: var(--primary-light); } + +/* 公告条:整幅横条(非卡片),info 走主色、warn 走自持暖色三件套 */ +.mb-notice-bar { + --mb-warn-fg: #B45309; + --mb-warn-bg: #FFF7E6; + --mb-warn-border: #FFD591; + grid-column: 1 / -1; + min-width: 0; + border: 1px solid var(--primary); + border-radius: var(--radius); + background: var(--primary-light); + padding: 12px 18px; + font-size: 14px; +} +.mb-notice-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; } +.mb-notice-tag { + flex: none; + font-size: 12px; + font-weight: 600; + color: #fff; + background: var(--primary); + border-radius: var(--radius-pill); + padding: 2px 12px; +} +.mb-notice-link { + color: var(--primary-dark); + text-decoration: none; + overflow: hidden; text-overflow: ellipsis; +} +.mb-notice-link:hover { text-decoration: underline; text-underline-offset: 3px; } +.mb-notice-text { color: var(--text); min-width: 0; } +.mb-notice--info { border-color: var(--primary); background: var(--primary-light); } +.mb-notice--warn { border-color: var(--mb-warn-border); background: var(--mb-warn-bg); } +.mb-notice--warn .mb-notice-tag { color: var(--mb-warn-fg); background: var(--mb-warn-bg); border: 1px solid var(--mb-warn-border); } +.mb-notice--warn .mb-notice-link { color: var(--mb-warn-fg); } + +/* 空态(.empty 已给居中淡字与留白,这里只补两行的间距与提示字级) */ +.mb-empty p { margin: 0; } +.mb-empty .mb-empty-hint { margin-top: 6px; font-size: 12px; } + +@media (max-width: 992px) { + .mb-split { grid-template-columns: minmax(0, 1fr); } + .mb-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .mb-list--two { columns: 1; } + .mb-ticker-item { max-width: 180px; } + .mb-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .mb-block { padding: 18px; } +} +@media (max-width: 768px) { + .mb-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .mb-featured--row > a { flex-direction: column; } + .mb-cover--row { width: 100%; } + .mb-notice-inner { flex-direction: column; align-items: flex-start; gap: 4px; } +} + +/* ============================================================ + * 服务中心 / 事项指南(service.html · guide.html,svc 页族) + * 页壳/面包屑/页题/分页沿用既有 .list-main / .breadcrumb / .page-title / .pagination, + * 这里只补事项特有的件。 + * ============================================================ */ +.mb-page-card { + background: var(--card-bg); + border-radius: var(--radius); + box-shadow: var(--shadow-soft); + padding: 24px; + min-width: 0; +} + +.mb-svc-search { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } +.mb-svc-search input { + flex: 1; + min-width: 0; + padding: 9px 14px; + border: 1px solid var(--border); + border-radius: var(--radius-pill); + background: var(--bg); + color: var(--text); + font-size: 14px; +} +.mb-svc-search button { + flex: none; + padding: 9px 22px; + border: none; + border-radius: var(--radius-pill); + background: var(--primary); + color: #fff; + font-size: 14px; + cursor: pointer; + transition: background .15s ease; +} +.mb-svc-search button:hover { background: var(--primary-dark); } + +.mb-svc-filters { + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 10px 14px; + margin-bottom: 18px; + background: var(--bg); +} +.mb-svc-filter-group { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; } +.mb-svc-filter-group + .mb-svc-filter-group { border-top: 1px dashed var(--border); } +.mb-svc-filter-label { flex: none; font-size: 13px; font-weight: 600; color: var(--text); padding-top: 3px; } +.mb-svc-filter-options { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } +.mb-chip { + font-size: 13px; + color: var(--text-light); + text-decoration: none; + padding: 2px 12px; + border: 1px solid var(--border); + border-radius: var(--radius-pill); + background: var(--card-bg); + transition: color .15s ease, border-color .15s ease, background .15s ease; +} +.mb-chip:hover { color: var(--primary-dark); border-color: var(--primary); } +.mb-chip.active { color: #fff; background: var(--primary); border-color: var(--primary); } +.mb-svc-clear { font-size: 13px; color: var(--primary-dark); text-decoration: none; align-self: center; } +.mb-svc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 13px; color: var(--text-light); } + +/* 事项卡网格:三列 → 两列 → 单列(轨道 minmax(0,1fr),中文不撑破) */ +.mb-svc-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 18px; +} +.mb-svc-item { + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius); + box-shadow: var(--shadow-soft); + padding: 16px; + min-width: 0; + transition: transform .18s ease, box-shadow .18s ease; +} +.mb-svc-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } +.mb-svc-item a { display: flex; gap: 14px; align-items: flex-start; color: inherit; text-decoration: none; } +.mb-svc-item-cover { flex: none; width: 96px; height: 68px; border-radius: var(--radius-sm); overflow: hidden; } +.mb-svc-item-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } +.mb-svc-item-body { flex: 1; min-width: 0; } +.mb-svc-item-title { display: block; } +.mb-svc-item-name { + font-size: 15px; + font-weight: 600; + line-height: 1.5; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.mb-svc-item:hover .mb-svc-item-name { color: var(--primary); } +.mb-svc-item-summary { + margin-top: 6px; + font-size: 13px; + color: var(--text-light); + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.mb-svc-item-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-light); } +.mb-tag { + font-size: 12px; + color: var(--primary-dark); + background: var(--primary-light); + border-radius: var(--radius-pill); + padding: 1px 9px; +} +/* 可在线办理:本包没有第二品牌色,用描边区分而不是引入新色相 */ +.mb-tag.online { color: var(--primary-dark); background: transparent; border: 1px solid var(--primary); } + +.mb-visually-hidden { + position: absolute; + width: 1px; height: 1px; + margin: -1px; padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; +} + +.mb-svc-guide, .mb-svc-guide-body, .mb-svc-unavailable { min-width: 0; } +.mb-svc-guide .article-meta { justify-content: flex-start; } +.mb-svc-unavailable { padding: 40px 0; } +.mb-svc-apply { display: flex; align-items: center; gap: 14px; margin: 18px 0; } +.mb-svc-apply-btn { + display: inline-block; + padding: 10px 30px; + border-radius: var(--radius-pill); + background: var(--primary); + color: #fff; + font-size: 15px; + text-decoration: none; + transition: background .15s ease, transform .15s ease; +} +.mb-svc-apply-btn:hover { background: var(--primary-dark); transform: translateY(-2px); } +.mb-svc-apply-hint { font-size: 13px; color: var(--text-light); } +.mb-svc-summary { font-size: 15px; color: var(--text-light); line-height: 1.8; margin: 0 0 18px; } + +.mb-svc-info { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14px; } +.mb-svc-info th, .mb-svc-info td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; vertical-align: top; } +.mb-svc-info th { width: 132px; background: var(--bg); color: var(--text-light); font-weight: 500; } + +.mb-svc-section { margin-top: 22px; } +.mb-svc-section h2 { + font-size: 18px; + font-weight: 600; + color: var(--text); + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 10px; +} +.mb-svc-section h2::before { + content: ""; + flex: none; + width: 9px; + height: 9px; + border-radius: 50%; + background: var(--primary); + box-shadow: 0 0 0 3.5px var(--primary-light); +} +.mb-svc-attachments ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } +.mb-svc-attachments a { color: var(--primary-dark); font-size: 14px; text-decoration: none; } +.mb-svc-attachments a:hover { text-decoration: underline; text-underline-offset: 3px; } +.mb-svc-att-size { font-size: 12px; color: var(--text-light); margin-left: 8px; } + +.mb-svc-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--border); } +.mb-svc-links a { + font-size: 14px; + color: var(--primary-dark); + padding: 4px 16px; + border: 1px solid var(--primary); + border-radius: var(--radius-pill); + text-decoration: none; + transition: background .15s ease, color .15s ease; +} +.mb-svc-links a:hover { background: var(--primary); color: #fff; } + +.mb-svc-related { margin-top: 28px; } +.mb-svc-related-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; } +.mb-svc-related-list { list-style: none; margin: 0; padding: 0; } +.mb-svc-related-list > li + li { border-top: 1px dashed var(--border); } +.mb-svc-related-list a { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 10px 0; + color: inherit; + text-decoration: none; +} +.mb-svc-related-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.mb-svc-related-list a:hover .mb-svc-related-name { color: var(--primary); } +.mb-svc-related-meta { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-light); } + +@media (max-width: 992px) { + .mb-svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} +@media (max-width: 768px) { + .mb-svc-list { grid-template-columns: minmax(0, 1fr); } + .mb-page-card { padding: 18px 16px; } + .mb-svc-info th { width: 92px; } + .mb-svc-item a { flex-direction: column; } + .mb-svc-item-cover { width: 100%; height: 150px; } +} + +/* ============================================================ + * headerStyle=plain(theme.json select 参数):收起细线顶栏、压低居中品牌行 + * ============================================================ */ +.header-plain .top-bar { display: none; } +.header-plain .brand-row { padding-top: 12px; padding-bottom: 10px; } +.header-plain .site-logo { height: 40px; } +.header-plain .site-name { font-size: 24px; } diff --git a/src/main/resources/templates/themes/mint-breeze/fragments/header.html b/src/main/resources/templates/themes/mint-breeze/fragments/header.html index f514289..a67d3db 100644 --- a/src/main/resources/templates/themes/mint-breeze/fragments/header.html +++ b/src/main/resources/templates/themes/mint-breeze/fragments/header.html @@ -1,7 +1,9 @@ - -