From 397231ca7503945b5e8e0c6264fd4a82d55120bc Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 Jul 2026 23:00:33 +0800 Subject: [PATCH] fix(hero): align header slider title/search stack with zibll Put hero main title/subtitle in search before_html (document flow), move the search overlay outside the swiper as a sibling, and reset search/slide-text positioning to zibll tops so title and search no longer overlap. --- .../src/schema/sections/page-display/index.js | 20 ++ .../frontend/header-components/admin-hint.css | 16 +- .../css/frontend/header-components/base.css | 103 +++---- .../card-device-visibility.css | 16 +- .../frontend/header-components/dark-theme.css | 86 +----- .../header-components/search-keywords-row.css | 165 +++++------ .../widget-device-visibility.css | 160 ++++++----- assets/css/frontend/zibll-utilities.css | 41 ++- assets/js/core/slider.js | 2 +- src/AKSRT/Admin/Schema/SchemaPageDisplay.php | 19 ++ src/AKSRT/Settings/DisplayRuntime.php | 16 +- templates/parts/home-modules/module-hero.php | 271 +++++++++++------- 12 files changed, 476 insertions(+), 439 deletions(-) diff --git a/assets/admin/src/schema/sections/page-display/index.js b/assets/admin/src/schema/sections/page-display/index.js index b8b741d5..8eb1c048 100644 --- a/assets/admin/src/schema/sections/page-display/index.js +++ b/assets/admin/src/schema/sections/page-display/index.js @@ -608,6 +608,8 @@ export const pageDisplaySchemas = { header_components_search_popular_limit: 5, header_components_search_show_input_cat: false, header_components_search_show_type: false, + header_components_search_before_html: '
更优雅的Wordpress主题
\n
这是导航栏幻灯片多功能组件，可在后台进行配置
', + header_components_search_after_html: '', slider_config_direction: 'horizontal', slider_config_speed: 300, slider_config_button: true, @@ -680,6 +682,24 @@ export const pageDisplaySchemas = { { key: 'header_components_search_popular_limit', label: '热词数量', type: 'number', default: 5, min: 1, max: 20, dependsOn: { key: 'header_components_search_show_keywords', value: true } }, { key: 'header_components_search_show_input_cat', label: '显示分类搜索', type: 'switch', default: false, dependsOn: { key: 'header_components_search_enabled', value: true }, help: '搜索框内显示分类选择下拉' }, { key: 'header_components_search_show_type', label: '显示类型切换', type: 'switch', default: false, dependsOn: { key: 'header_components_search_enabled', value: true }, help: '搜索框内显示内容类型切换' }, + { + key: 'header_components_search_before_html', + label: '搜索上方额外内容', + type: 'textarea', + default: '
更优雅的Wordpress主题
\n
这是导航栏幻灯片多功能组件，可在后台进行配置
', + rows: 4, + dependsOn: { key: 'header_components_search_enabled', value: true }, + help: 'Hero 主标题/副标题写在这里（支持 HTML）。不要依赖幻灯片文案，以免与搜索重叠；请注意组件总高度。', + }, + { + key: 'header_components_search_after_html', + label: '搜索下方额外内容', + type: 'textarea', + default: '', + rows: 3, + dependsOn: { key: 'header_components_search_enabled', value: true }, + help: '支持 HTML；请注意组件总高度。', + }, ], }, { diff --git a/assets/css/frontend/header-components/admin-hint.css b/assets/css/frontend/header-components/admin-hint.css index dc520795..03628843 100644 --- a/assets/css/frontend/header-components/admin-hint.css +++ b/assets/css/frontend/header-components/admin-hint.css @@ -25,20 +25,7 @@ color: #ffe082; } -/* ============================================================ - * Layer 2: 搜索覆盖模块（在轮播内部 absolute 定位） - * ============================================================ */ -.header-components-search { - position: absolute; - bottom: 25%; - left: 50%; - transform: translateX(-50%); - z-index: 10; - width: 100%; - max-width: 600px; - padding: 0 16px; -} - +/* Legacy form-class helpers (unused by zibll-aligned search; kept for admin-only markup) */ .header-components-search__form { display: flex; align-items: center; @@ -87,4 +74,3 @@ font-weight: 500; flex-shrink: 0; } - diff --git a/assets/css/frontend/header-components/base.css b/assets/css/frontend/header-components/base.css index c79ce848..abf5253f 100644 --- a/assets/css/frontend/header-components/base.css +++ b/assets/css/frontend/header-components/base.css @@ -1,19 +1,17 @@ /* ============================================================ - * AKSRT Header Slider — v5.0 Zibll-Aligned + * AKSRT Header Slider — v6.0 Zibll-Aligned * - * 三层架构： - * - Layer 1: Swiper 全宽轮播背景 - * - Layer 2: 搜索覆盖模块 - * - Layer 3: 图标卡片网格覆盖 + * Three layers: + * - Layer 1: Swiper full-bleed background + * - Layer 2: Search overlay (before_html + form + after_html) + * - Layer 3: Icon cards (negative margin) * - * 对标 zibll 的 new-swiper 体系： - * - CSS 变量高度控制 (--pc-height / --m-height) - * - data-* 属性驱动配置 - * - 缩略图分页器、视差、懒加载 + * Title/subtitle for the hero live in .header-slider-search-more.before + * (document flow with the search form). .slide-text is decorative only. * ============================================================ */ /* ============================================================ - * .new-swiper 基础样式（对标 zibll） + * .new-swiper base (zibll) * ============================================================ */ .aksrt-slider-wrapper { position: relative; @@ -45,7 +43,7 @@ object-fit: cover; } -/* 懒加载预加载器 */ +/* Lazy preloader */ .new-swiper .swiper-lazy-preloader { position: absolute; top: 50%; @@ -53,7 +51,7 @@ width: 42px; height: 42px; margin: -21px 0 0 -21px; - border: 3px solid rgba(255,255,255,0.3); + border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: aksrt-swiper-spin 0.8s linear infinite; @@ -64,7 +62,6 @@ to { transform: rotate(360deg); } } -/* 懒加载图片 */ .new-swiper .swiper-lazy { opacity: 0; transition: opacity 0.3s; @@ -75,7 +72,6 @@ opacity: 1; } -/* 缩略图分页器 */ .new-swiper .pagination-thumbnail-item { width: 60px; height: 40px; @@ -99,60 +95,52 @@ border-color: #fff; } -/* 视差层 */ .new-swiper [data-swiper-parallax] { transition: none; } -/* 比例高度模式 */ .new-swiper.scale-height .swiper-wrapper { height: 0; padding-bottom: var(--scale-ratio, 45%); } -/* 幻灯片文字覆盖层 */ -/* zibll .slide-text / .s-desc */ +/* ============================================================ + * Slide text — decorative layer (zibll .s-desc / .slide-text) + * Main hero title is NOT here; it is search before_html. + * ============================================================ */ .aksrt-slide-text, .s-desc, .slide-text { position: absolute; color: #fff; - z-index: 2; - text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -} - -.aksrt-slide-text, -.slide-text:not(.s-desc) { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: calc(100% - 32px); - max-width: 920px; - text-align: center; - background: unset; - bottom: unset; -} - -.s-desc { bottom: 0; - left: 0; - top: auto; - transform: none; - width: 100%; padding: 1.8em 2.5em; background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent); - border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px); + width: 100%; font-size: 16px; - text-align: left; + text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); + z-index: 1; + border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px); +} + +/* zibll: .slide-text unsets bottom bar, uses abs-center placement */ +.aksrt-slide-text, +.slide-text:not(.s-desc) { + background: unset; + bottom: unset; + --text-size-pc: 20px; + font-size: var(--text-size-pc); + opacity: 1; + transition: opacity 1s; } .aksrt-slide-text__title, .slide-title { font-family: var(--font-ui); - font-size: clamp(1.5rem, 3.2vw, 2.25rem); + font-size: inherit; font-weight: 600; - margin: 0 0 12px; - line-height: 1.25; + margin: 0; + line-height: 1.35; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } @@ -164,9 +152,9 @@ .aksrt-slide-text__desc, .slide-desc { - font-size: clamp(0.9rem, 1.4vw, 1.125rem); - margin: 0; - line-height: 1.6; + margin: 0.6em 0 0; + line-height: 1.5; + font-size: 60%; color: rgba(255, 255, 255, 0.95); text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } @@ -177,7 +165,6 @@ --m-height: 100%; width: 100%; height: auto; - /* Prefer aspect-ratio so global border-box cannot collapse the box. */ aspect-ratio: 5 / 2; padding-bottom: 0; } @@ -196,29 +183,29 @@ position: absolute; } -/* 移动端高度 */ @media (max-width: 767px) { .new-swiper .swiper-wrapper { height: var(--m-height); } + + .slide-text:not(.s-desc) { + --text-size-m: 13px; + font-size: var(--text-size-m); + } } /* ============================================================ - * Container — 三层叠加的父容器 + * Container * ============================================================ */ .header-slider-container, .header-components-container { position: relative; - isolation: isolate; /* 创建独立堆叠上下文，内部 z-index 不外泄 */ + isolation: isolate; width: 100%; - margin-bottom: 24px; + margin-bottom: 20px; } -/* ============================================================ - * Device Visibility for Hero/Banner slides - * ============================================================ */ - -/* PC-only slides: hidden on mobile */ +/* Device visibility for hero/banner slides */ @media (max-width: 767.98px) { .hero-slide--pc-only, .banner-slide--pc-only { @@ -226,11 +213,9 @@ } } -/* Mobile-only slides: hidden on PC */ @media (min-width: 768px) { .hero-slide--mobile-only, .banner-slide--mobile-only { display: none !important; } } - diff --git a/assets/css/frontend/header-components/card-device-visibility.css b/assets/css/frontend/header-components/card-device-visibility.css index 57955416..c6ac6eef 100644 --- a/assets/css/frontend/header-components/card-device-visibility.css +++ b/assets/css/frontend/header-components/card-device-visibility.css @@ -12,9 +12,11 @@ html.dark .header-components-search .line-form { color: #ddd; } -.header-components-search .search-input-text { +/* zibll base padding; leave room for abs-right submit */ +.header-components-search .search-input-text, +.header-slider-search .search-input-text { position: relative; - padding: 3px 42px 3px 8px; + padding: 5px 42px 5px 10px; } .header-components-search .line-form-input { @@ -79,12 +81,16 @@ html.dark .header-components-search .line-form-input { opacity: 0.92; } -.header-components-search .line-form .abs-right { +/* zibll: .header-slider-search .line-form .abs-right { margin-top:0; margin-right:-6px; } */ +.header-components-search .line-form .abs-right, +.header-slider-search .line-form .abs-right { position: absolute; - right: -6px; + right: 0.7em; top: 50%; transform: translateY(-50%); - margin: 0; + margin-top: 0; + margin-right: -6px; + z-index: 1; } .header-components-search__submit { diff --git a/assets/css/frontend/header-components/dark-theme.css b/assets/css/frontend/header-components/dark-theme.css index 73a762a9..aefc4cc1 100644 --- a/assets/css/frontend/header-components/dark-theme.css +++ b/assets/css/frontend/header-components/dark-theme.css @@ -19,7 +19,7 @@ body.dark-theme .header-components-search__input { * ============================================================ */ .header-components-card { position: relative; - z-index: 10; + z-index: 1; margin-top: -40px; } @@ -258,84 +258,8 @@ a.icon-cover-card:hover { } /* ============================================================ - * Nav 透明模式（轮播可见时 nav 变透明） + * Container-level blur: PC/Mobile split (colors only; no top offsets) * ============================================================ */ - -/* ============================================================ - * Zibll-aligned text/search structure overrides - * ============================================================ */ -.header-components__content.slide-text { - width: calc(100% - 32px); - max-width: 920px; - top: 42%; - z-index: 12; - padding-top: 0; -} - -.header-components__content.slide-text .slide-title { - font-size: clamp(1.75rem, 4vw, 3rem); - line-height: 1.2; - margin: 0 0 12px; -} - -.header-components__content.slide-text .slide-desc { - max-width: 680px; - margin: 0 auto; - font-size: clamp(0.9rem, 1.4vw, 1.125rem); - line-height: 1.6; - color: rgba(255, 255, 255, 0.9); -} - -.header-components-search { - top: calc(50% + 56px); - bottom: auto; - max-width: 680px; - padding: 0 20px; - font-size: 16px; -} - -.card-0 .header-components-search { - top: calc(50% + 76px); -} - -.header-components-search .search-input { - max-width: 620px; - margin: 0 auto; -} - -.header-components-search .search-form { - margin: 0; - display: block; - background: transparent; - border-radius: 0; - padding: 0; - box-shadow: none; - -webkit-backdrop-filter: none; - backdrop-filter: none; - transform: none; -} - -.header-components-search .search-form:focus-within { - box-shadow: none; - transform: none; -} - -.header-components-search .line-form { - position: relative; - border-radius: 100px; - padding: 0.35em 1em; - background: rgba(255, 255, 255, 0.82); - color: #555; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); - -webkit-backdrop-filter: saturate(5) blur(20px); - backdrop-filter: saturate(5) blur(20px); -} - -.filter-blur .header-components-search .line-form { - background: rgba(255, 255, 255, 0.75); -} - -/* ===== Container-level blur: PC/Mobile split ===== */ @media (min-width: 768px) { .has-blur-pc .header-components-card__wrap--shared, .has-blur-pc .header-components-card__item-bg { @@ -344,7 +268,8 @@ a.icon-cover-card:hover { -webkit-backdrop-filter: saturate(3) blur(20px); border-color: rgba(255, 255, 255, 0.3); } - .has-blur-pc .header-components-search .line-form { + .has-blur-pc .header-components-search .line-form, + .has-blur-pc .header-slider-search .line-form { background: rgba(255, 255, 255, 0.75); } .theme-dark .has-blur-pc .header-components-card__wrap--shared, @@ -363,7 +288,8 @@ a.icon-cover-card:hover { -webkit-backdrop-filter: saturate(3) blur(20px); border-color: rgba(255, 255, 255, 0.3); } - .has-blur-mobile .header-components-search .line-form { + .has-blur-mobile .header-components-search .line-form, + .has-blur-mobile .header-slider-search .line-form { background: rgba(255, 255, 255, 0.75); } .theme-dark .has-blur-mobile .header-components-card__wrap--shared, diff --git a/assets/css/frontend/header-components/search-keywords-row.css b/assets/css/frontend/header-components/search-keywords-row.css index ae3f76c5..89ffb595 100644 --- a/assets/css/frontend/header-components/search-keywords-row.css +++ b/assets/css/frontend/header-components/search-keywords-row.css @@ -1,94 +1,93 @@ -/* Search keywords row */ -.header-components-search__keywords { +/* Search keywords row + zibll mobile search top offsets */ + +.header-components-search__keywords, +.header-slider-search .search-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; + text-align: center; } -.header-components-search__kw-tag { +.header-components-search__kw-tag, +.header-slider-search .search_keywords { display: inline-block; - padding: 3px 10px; - font-size: 12px; + padding: 3px 5px; + font-size: 0.85em; line-height: 1.4; border-radius: 100px; - background: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(6px); - color: inherit; + background: rgba(255, 255, 255, 0.8); + color: #888; text-decoration: none; transition: background 0.2s; } -.header-components-search__kw-tag:hover { - background: rgba(255, 255, 255, 0.4); +.filter-blur .header-slider-search .search_keywords, +.filter-blur .header-components-search__kw-tag { + -webkit-backdrop-filter: saturate(5) blur(20px); + backdrop-filter: saturate(5) blur(20px); } -@media (max-width: 991px) { - .header-components { - height: var(--pc-height); - } - - .header-components-search { - top: calc(50% + 44px); - max-width: 560px; - } +.header-components-search__kw-tag:hover, +.header-slider-search .search_keywords:hover { + background: rgba(255, 255, 255, 0.95); } +/* zibll mobile (max-width: 767px) search / card offsets */ @media (max-width: 767px) { .header-components { height: var(--m-height); } - .header-components__content.slide-text { - width: calc(100% - 28px); - max-width: 480px; - top: 40%; - padding-top: 0; + .header-components--gradient { + height: var(--m-height); } - .header-components__content.slide-text .slide-title { - font-size: clamp(1.25rem, 5vw, 1.75rem); - margin-bottom: 10px; - } - - .header-components__content[style*="--hero-text-size-m"] .slide-title { - font-size: var(--hero-text-size-m); - } - - .header-components__content.slide-text .slide-desc { - font-size: 0.875rem; - line-height: 1.5; - } - - .header-components-search { - top: calc(50% + 20px); - width: calc(100% - 24px); - max-width: 420px; - padding: 0 12px; + .header-slider-search, + .header-components-search, + .header-slider-search.abs-center, + .header-components-search.abs-center { font-size: 12px; + top: calc(50% - 40px); + width: 100%; + max-width: 840px; + padding: 0 20px; } + .card-1 .header-slider-search, .card-1 .header-components-search, + .card-2 .header-slider-search, .card-2 .header-components-search { - top: calc(50% + 46px); + top: calc(50% - 1px); } + .card-5 .header-slider-search, .card-5 .header-components-search, + .card-6 .header-slider-search, .card-6 .header-components-search { - top: calc(50% - 22px); + top: calc(50% - 83px); } + .card-7 .header-slider-search, .card-7 .header-components-search, + .card-8 .header-slider-search, .card-8 .header-components-search { - top: calc(50% - 52px); + top: calc(50% - 120px); } + .header-slider-search-more.before { + margin-bottom: 1em; + } + + .header-slider-search .line-form, .header-components-search .line-form { font-size: 14px; padding: 4px 12px; } + .header-slider-search .scale-placeholder.is-focus, + .header-slider-search .line-form-input:focus ~ .scale-placeholder, .header-components-search .scale-placeholder.is-focus, .header-components-search .line-form-input:focus ~ .scale-placeholder { transform: translateY(-32px); @@ -96,6 +95,7 @@ color: #fff; } + .header-slider-card, .header-components-card { margin-top: -35px; } @@ -142,48 +142,27 @@ .icon-cover-subtitle { display: none; } -} -@media (max-width: 480px) { - .header-components { - height: var(--m-height); + /* zibll ~640px: slide-header text padding 52px */ + .header-components.slide-header .slide-text, + .header-components.slide-header .header-components__content.slide-text { + padding-top: 52px; } - .header-components__content.slide-text .slide-title { - font-size: clamp(1.1rem, 5.4vw, 1.4rem); - margin-bottom: 8px; - } - - .header-components__content.slide-text .slide-desc { - font-size: 0.8125rem; - } - - .header-components-search { - top: calc(50% + 26px); - width: calc(100% - 20px); - padding: 0 10px; - } - - .card-5 .header-components-search, - .card-6 .header-components-search { - top: calc(50% - 12px); - } - - .card-7 .header-components-search, - .card-8 .header-components-search { - top: calc(50% - 40px); - } - - .header-components-search .search-input-text { - padding-right: 40px; - } - - .header-components-search__submit { - width: 34px; - height: 34px; + .s-desc, + .slide-text { + padding: 0.7em; } } +@media (max-width: 640px) { + .header-components.slide-header .slide-text, + .header-components.slide-header .header-components__content.slide-text { + padding-top: 52px; + } +} + +/* Nav transparent helpers (when hero is present) */ .site-nav.nav-transparent { background-color: transparent; border-bottom-color: transparent; @@ -233,7 +212,6 @@ border-color: rgba(255, 255, 255, 0.5); } -/* 滚动后恢复实心 */ .site-nav.nav-transparent.is-scrolled { background-color: var(--surface-page); border-bottom-color: var(--color-line); @@ -262,9 +240,7 @@ border-color: var(--color-line); } -/* ============================================================ - * Header Slider — Swiper Navigation & Pagination (Zibll-style) - * ============================================================ */ +/* Swiper nav / pagination (header) */ .header-components .swiper-button-prev, .header-components .swiper-button-next { width: 30px; @@ -282,8 +258,8 @@ font-weight: 700; } -.header-slider:hover .swiper-button-prev, -.header-slider:hover .swiper-button-next { +.header-components:hover .swiper-button-prev, +.header-components:hover .swiper-button-next { opacity: 0.8; } @@ -317,8 +293,7 @@ } /* ============================================================ - * Banner Module — 1:1 Zibll (.s-desc / widget slider card) - * 圆角 = --main-radius，阴影 = main-shadow，文案底渐变条 + * Banner Module — zibll .s-desc style (unchanged geometry) * ============================================================ */ .banner-module { position: relative; @@ -330,17 +305,11 @@ background: var(--main-bg-color, var(--surface-1)); } -/* - * Aspect-ratio card height. - * Global reset uses box-sizing:border-box, so the classic - * height:0 + padding-bottom trick collapses to 0 unless we - * force content-box (or use aspect-ratio). - */ .banner-module__swiper { position: relative; width: 100%; height: auto; - aspect-ratio: 5 / 2; /* 40% */ + aspect-ratio: 5 / 2; overflow: hidden; } @@ -472,7 +441,7 @@ } .banner-module__swiper { - aspect-ratio: 2 / 1; /* 50% */ + aspect-ratio: 2 / 1; height: auto; } diff --git a/assets/css/frontend/header-components/widget-device-visibility.css b/assets/css/frontend/header-components/widget-device-visibility.css index 7a11e41d..b7030989 100644 --- a/assets/css/frontend/header-components/widget-device-visibility.css +++ b/assets/css/frontend/header-components/widget-device-visibility.css @@ -21,10 +21,8 @@ /* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */ -/* WordPress Admin Bar 已全局禁用，无需偏移规则 */ - /* ============================================================ - * Layer 1: Swiper 轮播 + * Layer 1: Swiper shell * ============================================================ */ .header-components { position: relative; @@ -37,23 +35,23 @@ background: #111; } -/* slide-header 模式：背景保持满铺，仅将文本层下移避开导航 */ .header-components.slide-header { padding-top: 0; + border-radius: 0; } +/* zibll: .slide-header .slide-text { padding-top: 70px; } — nav clearance only */ +.header-components.slide-header .slide-text, .header-components.slide-header .header-components__content.slide-text { - padding-top: var(--nav-fixed-reserve, var(--nav-height, 60px)); + padding-top: 70px; } -/* WordPress Admin Bar 已全局禁用，无需偏移规则 */ - -/* 渐变兜底 */ +/* Gradient fallback */ .header-components--gradient { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active, var(--color-primary-dark)) 100%); - display: flex; - align-items: center; - justify-content: center; + display: block; + position: relative; + height: var(--pc-height); } .header-components--gradient::before { @@ -65,7 +63,6 @@ pointer-events: none; } -/* Swiper 内部 */ .header-components .swiper-wrapper { position: absolute; inset: 0; @@ -80,7 +77,6 @@ cursor: pointer; } -/* 幻灯片背景图 */ .header-components__slide-bg { position: absolute; inset: 0; @@ -100,7 +96,6 @@ background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); } -/* 视频背景 */ .header-components__video { position: absolute; inset: 0; @@ -110,7 +105,6 @@ z-index: 0; } -/* 图片图层（视差叠加） */ .header-components__layer { position: absolute; inset: 0; @@ -130,18 +124,16 @@ transform: translateY(calc(var(--scroll-y, 0) * var(--layer-parallax-scale, 0.3) * 1px)); } -/* 文字视差 */ +/* Text parallax — keep abs-center vertical model (translateY only when abs-center is full-width) */ .has-text-parallax { will-change: transform; - transform: translate(-50%, calc(-50% + var(--scroll-y, 0) * var(--hero-text-parallax, 0) * 0.15px)); } -/* 文字尺寸覆盖 */ -.header-components__content[style*="--hero-text-size-pc"] .slide-title { - font-size: var(--hero-text-size-pc); +.header-components__content[style*="--hero-text-size-pc"] .slide-title, +.header-components__content[style*="--text-size-pc"] .slide-title { + font-size: inherit; } -/* 幻灯片遮罩 — 轻量压暗（zibll 以 .s-desc 底条为主） */ .header-components__slide-overlay { position: absolute; inset: 0; @@ -155,7 +147,7 @@ pointer-events: none; } -/* zibll .s-desc 底条文案 */ +/* Bottom-bar .s-desc mode */ .header-components__content.s-desc, .header-components__content.slide-text.s-desc { top: auto; @@ -185,25 +177,71 @@ background: unset; } -/* 搜索层 — header-slider-search */ -.header-components-search { +/* ============================================================ + * Layer 2: Search — zibll .header-slider-search + * Full-width abs-center + fine-tuned top (NOT point-centered). + * Title/subtitle are in .header-slider-search-more.before (flow). + * ============================================================ */ +.header-slider-search.abs-center, +.header-components-search.abs-center { position: absolute; - left: 50%; + left: 0; + right: 0; + width: 100%; top: calc(50% - 10px); - transform: translate(-50%, -50%); + transform: translateY(-50%); + z-index: 2; + margin: auto; + max-width: 840px; + padding: 0 20px; + font-size: 17px; + color: #fff; + box-sizing: border-box; +} + +.header-slider-search, +.header-components-search { max-width: 840px; - width: calc(100% - 40px); margin: auto; padding: 0 20px; font-size: 17px; + top: calc(50% - 10px); z-index: 2; - color: #fff; } +.card-0 .header-slider-search, .card-0 .header-components-search { top: calc(50% + 20px); } +.header-slider-search .search-input, +.header-components-search .search-input { + max-width: 800px; + margin: 0 auto; +} + +.header-slider-search-more { + color: #fff; +} + +.header-slider-search-more.before { + margin-bottom: 1.8em; +} + +.header-slider-search .search-form, +.header-components-search .search-form { + margin: 0; + display: block; + background: transparent; + border-radius: 0; + padding: 0; + box-shadow: none; + -webkit-backdrop-filter: none; + backdrop-filter: none; + transform: none; +} + +.header-slider-search .line-form, .header-components-search .line-form { background: rgba(255, 255, 255, 0.8); border-radius: 100px; @@ -212,8 +250,12 @@ color: #555; border: none; box-shadow: none; + position: relative; } +.has-blur-pc .header-slider-search .line-form, +.has-blur-mobile .header-slider-search .line-form, +.filter-blur .header-slider-search .line-form, .has-blur-pc .header-components-search .line-form, .has-blur-mobile .header-components-search .line-form, .filter-blur .header-components-search .line-form { @@ -221,12 +263,17 @@ backdrop-filter: saturate(5) blur(20px); } +.header-slider-search .line-form .icon, +.header-slider-search .line-form a, .header-components-search .line-form .icon, .header-components-search .line-form a { color: #555; } -/* 图标卡 — header-slider-card margin-top:-40px */ +/* ============================================================ + * Layer 3: Icon cards — margin-top:-40px (zibll) + * ============================================================ */ +.header-slider-card, .header-components-card { position: relative; margin-top: -40px; @@ -248,62 +295,43 @@ background: var(--blur-bg); } -.header-components.slide-header { - border-radius: 0; -} - .header-components.slide-header .swiper-slide img, .header-components.slide-header .header-components__slide-bg img { border-radius: 0 !important; } - -/* 幻灯片文字内容 */ -.header-components__content { - position: absolute; - bottom: auto; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 2; - width: calc(100% - 32px); - max-width: 920px; - text-align: center; +/* Decorative slide text content (not the main hero stack) */ +.header-components__content.slide-text:not(.s-desc) { + /* Placement comes from .abs-center + optional alignment modifiers */ + z-index: 1; color: #fff; + max-width: none; + width: 100%; } .header-components__title, .header-components .slide-title { font-family: var(--font-ui); - font-size: clamp(1.5rem, 3.2vw, 2.25rem); font-weight: 600; - margin: 0 0 12px; - line-height: 1.25; + margin: 0; + line-height: 1.35; letter-spacing: 0; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } -.header-components__subtitle { - font-size: clamp(0.9rem, 1.4vw, 1.125rem); - margin: 0; - max-width: 680px; - margin-left: auto; - margin-right: auto; - line-height: 1.6; - color: rgba(255, 255, 255, 0.9); - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); +.header-components__subtitle, +.header-components .slide-desc { + margin: 0.6em 0 0; + line-height: 1.5; + color: rgba(255, 255, 255, 0.95); + text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } .header-components__description { - font-size: clamp(0.8rem, 1.2vw, 0.95rem); - margin: 8px auto 0; - max-width: 600px; + font-size: 0.85em; + margin: 0.4em 0 0; line-height: 1.5; - color: rgba(255, 255, 255, 0.8); - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + color: rgba(255, 255, 255, 0.85); + text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } - - - - diff --git a/assets/css/frontend/zibll-utilities.css b/assets/css/frontend/zibll-utilities.css index 1bf25ea2..531c115e 100644 --- a/assets/css/frontend/zibll-utilities.css +++ b/assets/css/frontend/zibll-utilities.css @@ -42,17 +42,50 @@ top: 0; } +/* zibll .abs-center: full-width vertical center (translateY only). + * Header search and slide-text rely on this model. Point-center + * (left:50% + translate(-50%,-50%)) is NOT used for these layers. */ .abs-center { position: absolute; - left: 50%; + left: 0; + width: 100%; top: 50%; - transform: translate(-50%, -50%); + right: 0.7em; + transform: translateY(-50%); + z-index: 1; } /* Zibll abs-center position variants (main.css) */ -.abs-center.left-bottom, +.abs-center.left-top, +.abs-center.right-top { + transform: unset; + top: 0; +} + +.abs-center.right-top { + left: auto; + width: auto; + text-align: right; +} + +.abs-center.left-top { + text-align: left; +} + +.abs-center.conter-bottom, +.abs-center.conter-conter { + text-align: center; +} + +.abs-center.right-top, .abs-center.right-bottom, -.abs-center.conter-bottom { +.abs-center.right-conter { + text-align: right; +} + +.abs-center.conter-bottom, +.abs-center.right-bottom, +.abs-center.left-bottom { top: auto; transform: unset; bottom: 0; diff --git a/assets/js/core/slider.js b/assets/js/core/slider.js index 6b2519e6..79f9cf03 100644 --- a/assets/js/core/slider.js +++ b/assets/js/core/slider.js @@ -304,7 +304,7 @@ if (link && link !== "#") { slide.style.cursor = "pointer"; slide.addEventListener("click", function (e) { - if (e.target.closest(".header-components-search, .header-components-card, .hero__btn, .swiper-button-prev, .swiper-button-next, .swiper-pagination, .hero-search, a, button, input")) return; + if (e.target.closest(".header-components-search, .header-slider-search, .header-components-card, .header-slider-card, .hero__btn, .swiper-button-prev, .swiper-button-next, .swiper-pagination, .hero-search, a, button, input")) return; window.location.href = link; }); } diff --git a/src/AKSRT/Admin/Schema/SchemaPageDisplay.php b/src/AKSRT/Admin/Schema/SchemaPageDisplay.php index 677f271a..e63c069c 100644 --- a/src/AKSRT/Admin/Schema/SchemaPageDisplay.php +++ b/src/AKSRT/Admin/Schema/SchemaPageDisplay.php @@ -117,6 +117,25 @@ class SchemaPageDisplay { ['key' => 'header_components_search_popular_limit', 'label' => '热词数量', 'type' => 'number', 'default' => 5, 'min' => 1, 'max' => 20, 'dependsOn' => ['key' => 'header_components_search_show_keywords', 'value' => true]], ['key' => 'header_components_search_show_input_cat', 'label' => '显示分类搜索', 'type' => 'switch', 'default' => false, 'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true]], ['key' => 'header_components_search_show_type', 'label' => '显示类型切换', 'type' => 'switch', 'default' => false, 'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true]], + [ + 'key' => 'header_components_search_before_html', + 'label' => '搜索上方额外内容', + 'type' => 'textarea', + 'sanitize_type' => 'html', + 'default' => '
更优雅的Wordpress主题
+
这是导航栏幻灯片多功能组件，可在后台进行配置
', + 'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true], + 'help' => 'Hero 主标题/副标题写在这里（支持 HTML）。勿依赖幻灯片文案，以免与搜索重叠；请注意组件总高度。', + ], + [ + 'key' => 'header_components_search_after_html', + 'label' => '搜索下方额外内容', + 'type' => 'textarea', + 'sanitize_type' => 'html', + 'default' => '', + 'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true], + 'help' => '支持 HTML；请注意组件总高度。', + ], ]], ['key' => 'cards', 'title' => '图标卡片样式', 'fields' => [ ['key' => 'header_components_filter_blur_devices', 'label' => '容器模糊设备', 'type' => 'checkbox', 'default' => [], 'dependsOn' => ['key' => 'header_components_cards_enabled', 'value' => true], 'options' => [ diff --git a/src/AKSRT/Settings/DisplayRuntime.php b/src/AKSRT/Settings/DisplayRuntime.php index 74e1cf50..4596dda6 100644 --- a/src/AKSRT/Settings/DisplayRuntime.php +++ b/src/AKSRT/Settings/DisplayRuntime.php @@ -67,7 +67,7 @@ class DisplayRuntime { /** * Hero 搜索组件详细配置（PC/移动分别 + 子选项） * - * @return array{pc:bool,mobile:bool,show_keywords:bool,popular_limit:int,show_input_cat:bool,show_type:bool,keywords:string[],categories:array,type_options:array} + * @return array{pc:bool,mobile:bool,show:bool,show_keywords:bool,popular_limit:int,show_input_cat:bool,show_type:bool,keywords:string[],categories:array,type_options:array,before_html:string,after_html:string} */ public static function get_header_components_search_config(): array { $settings = Settings::get_all(); @@ -83,6 +83,11 @@ class DisplayRuntime { $show_cat = !empty($settings['header_components_search_show_input_cat']); $show_type = !empty($settings['header_components_search_show_type']); + // Mobile: hide hot keywords to keep the overlay short (zibll parity). + if ($is_mobile) { + $show_kw = false; + } + $keywords = []; if ($show && $show_kw) { $raw = $settings['hot_search_keywords'] ?? ''; @@ -108,6 +113,13 @@ class DisplayRuntime { } } + $before_html = isset($settings['header_components_search_before_html']) + ? (string) $settings['header_components_search_before_html'] + : ''; + $after_html = isset($settings['header_components_search_after_html']) + ? (string) $settings['header_components_search_after_html'] + : ''; + return [ 'pc' => $pc_on, 'mobile' => $mobile_on, @@ -119,6 +131,8 @@ class DisplayRuntime { 'keywords' => $keywords, 'categories' => $categories, 'type_options' => $type_options, + 'before_html' => $before_html, + 'after_html' => $after_html, ]; } diff --git a/templates/parts/home-modules/module-hero.php b/templates/parts/home-modules/module-hero.php index a8372e37..46822d59 100644 --- a/templates/parts/home-modules/module-hero.php +++ b/templates/parts/home-modules/module-hero.php @@ -2,8 +2,11 @@ /** * Home module: header components hero + floating search + icon cards. * + * DOM mirrors zibll header-slider: + * container > slider | search overlay (before + form + after) | cards + * * @package AKSRT - * @version 4.1.0 + * @version 4.2.0 */ defined('ABSPATH') || exit; @@ -18,7 +21,16 @@ if (!is_array($cfg)) { $hero_banners = function_exists('aksrt_get_banners') ? aksrt_get_banners(8, 'hero') : []; $settings = function_exists('aksrt_get_all_settings') ? aksrt_get_all_settings() : []; -$search_cfg = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_header_components_search_config() : ['show' => false, 'keywords' => [], 'categories' => [], 'type_options' => []]; +$search_cfg = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_header_components_search_config() : [ + 'show' => false, + 'keywords' => [], + 'categories' => [], + 'type_options' => [], + 'before_html' => '', + 'after_html' => '', + 'show_input_cat' => false, + 'show_type' => false, +]; $show_search = !empty($search_cfg['show']) || !empty($cfg['with_search']); $show_cards = !empty($settings['header_components_cards_enabled']); $icon_cards = isset($settings['header_components_icon_cards']) ? (array) $settings['header_components_icon_cards'] : []; @@ -52,14 +64,25 @@ $search_placeholder = function_exists('aksrt_get_search_placeholder') ? aksrt_ge $search_value = trim((string) get_search_query()); $search_type = function_exists('aksrt_get_search_form_type') ? aksrt_get_search_form_type() : 'post'; +/** + * Search overlay = zibll .header-slider-search.abs-center + * Title/subtitle live in before_html (same flow stack as the form). + */ $render_hero_search = static function (string $search_id) use ($search_placeholder, $search_value, $search_type, $search_cfg): void { $_kw = $search_cfg['keywords'] ?? []; $_cats = $search_cfg['categories'] ?? []; $_types = $search_cfg['type_options'] ?? []; $_show_cat = !empty($search_cfg['show_input_cat']) && !empty($_cats); $_show_type = !empty($search_cfg['show_type']) && !empty($_types); + $_before = isset($search_cfg['before_html']) ? (string) $search_cfg['before_html'] : ''; + $_after = isset($search_cfg['after_html']) ? (string) $search_cfg['after_html'] : ''; ?>
+ +
+ +
+
+ +
+ + + +
+ - -
- - - + +
+
@@ -186,104 +214,121 @@ if (!empty($hero_banners)) : } ?>
style=""> -
-
- $slide) : - $device_vis = $slide['device_visibility'] ?? 'all'; - $slide_classes = 'swiper-slide'; - if ($device_vis === 'pc') { - $slide_classes .= ' hero-slide--pc-only'; - } elseif ($device_vis === 'mobile') { - $slide_classes .= ' hero-slide--mobile-only'; - } - if (!empty($slide['video_url'])) { - $slide_classes .= ' hero-slide--has-video'; - } - $link_target = !empty($slide['link_target']) ? $slide['link_target'] : '_self'; - $has_layers = !empty($slide['layers']) && is_array($slide['layers']); - $text_parallax = !empty($slide['text_parallax']); - $text_style = ''; - if (!empty($slide['text_size_pc'])) { - $text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';'; - } - if (!empty($slide['text_size_m'])) { - $text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';'; - } - if ($text_parallax) { - $text_style .= '--hero-text-parallax:1;'; - } - ?> -
data-link="" data-target=""> -
- - - - - <?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?> - -
- - - -
- - -
-
- - -
> - -

+
+
+
+ $slide) : + $device_vis = $slide['device_visibility'] ?? 'all'; + $slide_classes = 'swiper-slide'; + if ($device_vis === 'pc') { + $slide_classes .= ' hero-slide--pc-only'; + } elseif ($device_vis === 'mobile') { + $slide_classes .= ' hero-slide--mobile-only'; + } + if (!empty($slide['video_url'])) { + $slide_classes .= ' hero-slide--has-video'; + } + $link_target = !empty($slide['link_target']) ? $slide['link_target'] : '_self'; + $has_layers = !empty($slide['layers']) && is_array($slide['layers']); + $text_parallax = !empty($slide['text_parallax']); + // Align CSS vars with zibll --text-size-pc / --text-size-m. + $text_style = ''; + if (!empty($slide['text_size_pc'])) { + $text_style .= '--text-size-pc:' . esc_attr((int) $slide['text_size_pc']) . 'px;'; + $text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';'; + } + if (!empty($slide['text_size_m'])) { + $text_style .= '--text-size-m:' . esc_attr((int) $slide['text_size_m']) . 'px;'; + $text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';'; + } + if ($text_parallax) { + $text_style .= '--hero-text-parallax:1;'; + } + ?> +
data-link="" data-target=""> +
+ + - -
+ + <?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?> + +
- -
+ + +
+
- -
- +
+ + +
> + +
+ + +
+ + +
+ +
+ +
+ +
- - - - - -
+ + + +
@@ -299,21 +344,27 @@ if (!empty($hero_banners)) : ?>
-
-

-
- -

- -

- -
- - - + +
+
+
+ +

+ +

+ +
+ +
+ +
+ + + +