fix:首页顶部卡片共享背景布局

This commit is contained in:
2026-08-19 17:07:47 +08:00
parent 0375a11adc
commit aa58fb58ff
4 changed files with 25 additions and 5 deletions
@@ -56,6 +56,11 @@
padding-right: 15px;
box-sizing: border-box;
}
.header-slider-card .aksrt-icon-cover-card-grid {
display: grid;
grid-template-columns: repeat(var(--aksrt-icon-card-cols, 1), minmax(0, 1fr));
gap: 15px;
}
.filter-blur .header-slider-card .zib-widget,
.filter-blur .header-components-card .zib-widget {
-webkit-backdrop-filter: saturate(5) blur(20px);
@@ -58,6 +58,12 @@
/* zibll mobile (max-width: 767px) search / card offsets */
@media (max-width: 767px) {
.header-slider-card .aksrt-icon-cover-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.header-slider-container .new-swiper.slide-header .swiper-wrapper,
.new-swiper.slide-index.slide-header .swiper-wrapper {
height: var(--m-height);
+8 -5
View File
@@ -428,14 +428,17 @@ if (!function_exists('aksrt_header_slide')) {
if ($inner === '') {
continue;
}
$items .= !empty($card_options['show_widget_bg']) ? '<div class="relative-h">' : '<div class="flex1">';
$items .= $inner . '</div>';
$items .= !empty($card_options['show_widget_bg']) ? '<div class="relative-h">' . $inner . '</div>' : $inner;
$card_count++;
}
if ($items !== '') {
$cards_html = '<div class="header-slider-card container">'
. (!empty($card_options['show_widget_bg']) ? '<div class="zib-widget padding-10">' : '<div class="">')
. '<div class="flex jse flex-row gutters-5 flex-col-sm-2">' . $items . '</div></div></div>';
$cards_html = '<div class="header-slider-card container">';
if (!empty($card_options['show_widget_bg'])) {
$cards_html .= '<div class="zib-widget padding-10"><div class="flex jse flex-row gutters-5 flex-col-sm-2">' . $items . '</div></div>';
} else {
$cards_html .= '<div class="aksrt-icon-cover-card-grid" style="--aksrt-icon-card-cols:' . (int) $card_count . '">' . $items . '</div>';
}
$cards_html .= '</div>';
}
}
@@ -26,6 +26,9 @@ test('icon card renderers keep vertical and horizontal Zibll DOM contracts separ
test('homepage horizontal cards only use Zibll surface and responsive padding rules', () => {
const css = read('assets/css/frontend/header-components/dark-theme.css');
const headerCss = read('assets/css/frontend/header-components.css');
const mobileCss = read('assets/css/frontend/header-components/search-keywords-row.css');
const header = read('inc/helpers/homepage/header-components.php');
const widgetCss = read('assets/widgets/frontend.css');
assert.match(css, /\.header-slider-card \.icon-cover-card\.zib-widget \{\s*padding: 10px;/);
@@ -33,4 +36,7 @@ test('homepage horizontal cards only use Zibll surface and responsive padding ru
assert.doesNotMatch(css, /\.header-slider-card \.icon-cover-icon\.badg\.cir/);
assert.doesNotMatch(css, /\.header-slider-card \.icon-cover-icon img/);
assert.doesNotMatch(widgetCss, /aksrt-widget-icon-cards \.icon-cover-card/);
assert.match(header, /aksrt-icon-cover-card-grid/);
assert.match(headerCss, /\.header-slider-card \.aksrt-icon-cover-card-grid \{[\s\S]*?grid-template-columns: repeat\(var\(--aksrt-icon-card-cols, 1\), minmax\(0, 1fr\)\);[\s\S]*?gap: 15px;/);
assert.match(mobileCss, /\.header-slider-card \.aksrt-icon-cover-card-grid \{[\s\S]*?grid-template-columns: repeat\(2, minmax\(0, 1fr\)\);[\s\S]*?gap: 10px;/);
});