diff --git a/assets/css/frontend/widget-batch5.css b/assets/css/frontend/widget-batch5.css index c0b1dcb4..6d0a9e8c 100644 --- a/assets/css/frontend/widget-batch5.css +++ b/assets/css/frontend/widget-batch5.css @@ -453,19 +453,67 @@ display: flex; align-items: center; gap: 10px; - padding: 10px 14px; + padding: 8px 14px; border-radius: 10px; background: #eff6ff; color: #1d4ed8; margin-bottom: 8px; overflow: hidden; } -.aksrt-scroll-notice.is-radius { border-radius: 999px; } +.aksrt-scroll-notice.is-radius, +.aksrt-scroll-notice.radius { border-radius: 999px; } .aksrt-scroll-notice.color-c-green { background: #ecfdf5; color: #047857; } .aksrt-scroll-notice.color-c-yellow { background: #fffbeb; color: #b45309; } .aksrt-scroll-notice.color-c-red { background: #fef2f2; color: #b91c1c; } .aksrt-scroll-notice.color-c-purple { background: #f5f3ff; color: #6d28d9; } +.aksrt-scroll-notice.color-c-blue-2 { background: #dbeafe; color: #1e3a8a; } +.aksrt-scroll-notice.color-c-green-2 { background: #d1fae5; color: #065f46; } +.aksrt-scroll-notice.color-c-yellow-2 { background: #ffedd5; color: #9a3412; } +.aksrt-scroll-notice.color-c-red-2 { background: #fee2e2; color: #991b1b; } +.aksrt-scroll-notice.color-c-purple-2 { background: #ede9fe; color: #5b21b6; } +.aksrt-scroll-notice.color-b-theme { background: var(--color-primary, #3b82f6); color: #fff; } +.aksrt-scroll-notice.color-b-red { background: #ef4444; color: #fff; } +.aksrt-scroll-notice.color-b-yellow { background: #f59e0b; color: #fff; } +.aksrt-scroll-notice.color-b-blue { background: #3b82f6; color: #fff; } +.aksrt-scroll-notice.color-b-green { background: #10b981; color: #fff; } +.aksrt-scroll-notice.color-b-purple { background: #8b5cf6; color: #fff; } +.aksrt-scroll-notice.text-center { justify-content: center; text-align: center; } +.aksrt-scroll-notice.text-right { justify-content: flex-end; text-align: right; } +.aksrt-scroll-notice.is-affix[data-affix="true"] { + position: sticky; + top: calc(var(--nav-height, 60px) + 12px); + z-index: 5; +} .aksrt-scroll-notice__icon { flex-shrink: 0; } +.aksrt-scroll-notice .aksrt-notice-swiper, +.aksrt-scroll-notice .new-swiper { + flex: 1; + min-width: 0; + height: 1.5em; + margin: 0; +} +.aksrt-scroll-notice .swiper-slide { + height: 1.5em !important; + display: flex; + align-items: center; +} +.aksrt-scroll-notice .swiper-slide a, +.aksrt-scroll-notice .swiper-slide .text-ellipsis { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: inherit; + text-decoration: none; + font-size: 13px; + line-height: 1.5; +} +.aksrt-scroll-notice .bulletin-icon { + display: inline-flex; + width: 1.1em; + margin-right: 6px; +} .aksrt-scroll-notice__viewport { position: relative; flex: 1; min-width: 0; height: 1.4em; } .aksrt-scroll-notice__item { position: absolute; @@ -476,17 +524,14 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + line-height: 1.4em; font-size: 13px; - line-height: 1.4; } .aksrt-scroll-notice__item.is-active { opacity: 1; transform: translateY(0); } -.aksrt-scroll-notice__item a { - color: inherit; - text-decoration: none; -} +.aksrt-scroll-notice__item a { color: inherit; text-decoration: none; } .aksrt-scroll-notice__item i { margin-right: 6px; opacity: .85; } .hot-post-item { display: flex; align-items: center; gap: 10px; } @@ -1003,3 +1048,258 @@ color: var(--muted-2-color, #999); text-align: center; } + +/* ---- batch11: search widget type/cat + FAQ structure ---- */ +.aksrt-search-widget__form { margin: 0; } +.aksrt-search-widget__types { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-bottom: 10px; +} +.aksrt-search-widget__type { + border: 1px solid var(--color-line, #e5e7eb); + background: var(--surface-2, #f8fafc); + color: inherit; + border-radius: 999px; + padding: 4px 12px; + font-size: 12px; + font-weight: 600; + cursor: pointer; + line-height: 1.4; +} +.aksrt-search-widget__type.is-active { + background: var(--color-primary, #3b82f6); + border-color: var(--color-primary, #3b82f6); + color: #fff; +} +.aksrt-search-widget__line { + display: flex; + align-items: stretch; + gap: 0; + border: 1px solid var(--color-line, #e5e7eb); + border-radius: 10px; + overflow: hidden; + background: var(--surface-1, #fff); +} +.aksrt-search-widget__cat { + flex: 0 0 auto; + max-width: 38%; + border-right: 1px solid var(--color-line, #e5e7eb); + background: var(--surface-2, #f8fafc); +} +.aksrt-search-widget__cat-select { + width: 100%; + height: 42px; + border: 0; + background: transparent; + padding: 0 10px; + font-size: 13px; + color: inherit; + outline: none; + cursor: pointer; +} +.aksrt-search-widget__field { + position: relative; + flex: 1; + min-width: 0; + display: flex; + align-items: center; +} +.aksrt-search-widget__field .widget-search-box__input, +.aksrt-search-widget .widget-search-box__input { + width: 100%; + height: 42px; + border: 0; + background: transparent; + padding: 0 44px 0 12px; + font-size: 14px; + color: inherit; + outline: none; +} +.aksrt-search-widget .widget-search-box__btn { + position: absolute; + right: 4px; + top: 50%; + transform: translateY(-50%); + width: 34px; + height: 34px; + border: 0; + border-radius: 8px; + background: var(--color-primary, #3b82f6); + color: #fff; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; +} +.aksrt-search-widget .widget-search-box__btn:hover { filter: brightness(1.05); } + +/* FAQ structure parity */ +.aksrt-faq.produck-wid-faq-block { margin: 0; } +.aksrt-faq__head { margin-bottom: 14px; } +.aksrt-faq__search-wrap { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 10px; + border-radius: 12px; + background: var(--surface-2, #f3f4f6); + border: 1px solid var(--color-line, #e5e7eb); +} +.aksrt-faq__search-icon { color: var(--muted-2-color, #999); } +.aksrt-faq__search-input { + flex: 1; + min-width: 0; + border: 0; + background: transparent; + outline: none; + font-size: 14px; + color: inherit; + height: 34px; +} +.aksrt-faq__search-btn { + border: 0; + border-radius: 8px; + background: var(--color-primary, #3b82f6); + color: #fff; + padding: 0 14px; + height: 34px; + font-weight: 600; + cursor: pointer; + font-size: 13px; +} +.aksrt-faq__main { + display: grid; + grid-template-columns: minmax(0, 1.4fr) minmax(220px, .9fr); + gap: 16px; + align-items: start; +} +.aksrt-faq__main.is-full { grid-template-columns: 1fr; } +.aksrt-faq__list { display: flex; flex-direction: column; gap: 10px; } +.aksrt-faq__item { + border: 1px solid var(--color-line, #e5e7eb); + border-radius: 12px; + background: var(--surface-1, #fff); + padding: 0; + overflow: hidden; +} +.aksrt-faq__summary { + list-style: none; + display: flex; + align-items: center; + gap: 12px; + padding: 12px 14px; + cursor: pointer; +} +.aksrt-faq__summary::-webkit-details-marker { display: none; } +.aksrt-faq__badge { + flex-shrink: 0; + width: 34px; + height: 34px; + border-radius: 10px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 700; + color: #fff; + background: #8b5cf6; +} +.aksrt-faq__badge.tone-pink { background: #ec4899; } +.aksrt-faq__badge.tone-green { background: #10b981; } +.aksrt-faq__badge.tone-orange { background: #f59e0b; } +.aksrt-faq__badge.tone-blue { background: #3b82f6; } +.aksrt-faq__badge.tone-purple { background: #8b5cf6; } +.aksrt-faq__qblock { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } +.aksrt-faq__q { font-weight: 700; font-size: 14px; line-height: 1.35; } +.aksrt-faq__preview { + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.aksrt-faq__chevron { + color: var(--muted-2-color, #999); + transition: transform .2s ease; + flex-shrink: 0; +} +.aksrt-faq__item[open] .aksrt-faq__chevron { transform: rotate(180deg); } +.aksrt-faq__a { + padding: 0 14px 14px 60px; + font-size: 13px; + color: var(--color-ink-3, #555); + line-height: 1.65; +} +.aksrt-faq__aside { display: flex; flex-direction: column; gap: 12px; } +.aksrt-faq__doc { + border: 1px solid var(--color-line, #e5e7eb); + border-radius: 12px; + padding: 14px; + background: var(--surface-1, #fff); +} +.aksrt-faq__doc-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; } +.aksrt-faq__doc-ico { + width: 36px; height: 36px; border-radius: 10px; + display: inline-flex; align-items: center; justify-content: center; + background: #eff6ff; color: #2563eb; flex-shrink: 0; +} +.aksrt-faq__doc-title { margin: 0; font-size: 15px; } +.aksrt-faq__doc-desc { margin: 4px 0 0; font-size: 12px; } +.aksrt-faq__doc-list { list-style: none; margin: 0; padding: 0; } +.aksrt-faq__doc-li + .aksrt-faq__doc-li { margin-top: 8px; } +.aksrt-faq__doc-a { + display: flex; + align-items: center; + gap: 10px; + padding: 8px; + border-radius: 10px; + background: var(--surface-2, #f8fafc); + text-decoration: none; + color: inherit; +} +.aksrt-faq__doc-li-ico { + width: 28px; height: 28px; border-radius: 8px; + display: inline-flex; align-items: center; justify-content: center; + background: #fff; color: var(--color-primary, #3b82f6); flex-shrink: 0; +} +.aksrt-faq__doc-li-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } +.aksrt-faq__doc-li-title { font-size: 13px; font-weight: 600; } +.aksrt-faq__doc-li-desc { font-size: 11px; } +.aksrt-faq__doc-go { + font-size: 12px; + color: var(--color-primary, #3b82f6); + white-space: nowrap; + flex-shrink: 0; +} +.aksrt-faq__help { + border-radius: 12px; + padding: 14px; + background: linear-gradient(135deg, #3b82f6, #8b5cf6); + color: #fff; +} +.aksrt-faq__help-top { display: flex; gap: 10px; align-items: flex-start; } +.aksrt-faq__help-ico { + width: 36px; height: 36px; border-radius: 10px; + display: inline-flex; align-items: center; justify-content: center; + background: rgba(255,255,255,.18); flex-shrink: 0; +} +.aksrt-faq__help-title { margin: 0; font-size: 15px; } +.aksrt-faq__help-sub { margin: 4px 0 0; font-size: 12px; opacity: .92; } +.aksrt-faq__help-btn { + display: inline-flex; + align-items: center; + gap: 6px; + margin-top: 12px; + padding: 8px 14px; + border-radius: 999px; + background: #fff; + color: #1d4ed8 !important; + text-decoration: none; + font-weight: 700; + font-size: 13px; +} +@media (max-width: 900px) { + .aksrt-faq__main { grid-template-columns: 1fr; } + .aksrt-faq__a { padding-left: 14px; } +} diff --git a/src/AKSRT/Widgets/NoticeWidget.php b/src/AKSRT/Widgets/NoticeWidget.php index 18ff6ebc..f6c8eb1a 100644 --- a/src/AKSRT/Widgets/NoticeWidget.php +++ b/src/AKSRT/Widgets/NoticeWidget.php @@ -1,6 +1,6 @@ esc_html__('多条公告滚动显示。', 'aksrt'), + 'description' => esc_html__('多条公告垂直滚动（共享 Swiper 栈）。', 'aksrt'), + 'classname' => 'widget_aksrt_notice', ]); } @@ -23,10 +24,12 @@ class NoticeWidget extends \WP_Widget { return; } - $color = sanitize_html_class((string) ($instance['color'] ?? 'c-blue')); - $blank = !empty($instance['blank']); - $radius = !empty($instance['radius']); + $color = sanitize_html_class((string) ($instance['color'] ?? 'c-blue')); + $blank = !empty($instance['blank']); + $radius = !empty($instance['radius']); $interval = max(2, min(15, (int) ($instance['interval'] ?? 4))); + $align = sanitize_html_class((string) ($instance['alignment'] ?? '')); + $in_affix = !empty($instance['in_affix']); echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped $title = apply_filters('widget_title', (string) ($instance['title'] ?? ''), $instance, $this->id_base); @@ -34,48 +37,47 @@ class NoticeWidget extends \WP_Widget { echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } - $uid = 'aksrt-notice-' . esc_attr($this->id); - $class = 'aksrt-scroll-notice color-' . $color . ($radius ? ' is-radius' : ''); - echo '
'; - echo '
'; - echo '
'; - foreach ($items as $i => $item) { - $active = $i === 0 ? ' is-active' : ''; + $wrap_cls = 'aksrt-scroll-notice swiper-bulletin color-' . $color; + if ($radius) { + $wrap_cls .= ' is-radius radius'; + } + if ($align !== '') { + $wrap_cls .= ' ' . $align; + } + if ($in_affix) { + $wrap_cls .= ' is-affix'; + } + + $attr = $in_affix ? ' data-affix="true"' : ''; + echo '
'; + echo '
'; + + // Prefer shared vertical new-swiper (zib_notice parity) via slider.js Type C. + echo '
'; + echo '
'; + foreach ($items as $item) { $inner = ''; if ($item['icon'] !== '') { - $inner .= ' '; + $icon = $item['icon']; + if (strpos($icon, 'fa-') === 0 && strpos($icon, ' ') === false) { + $icon = 'fa ' . $icon; + } + $inner .= '
'; } $inner .= esc_html($item['title']); - echo '
'; + echo '
'; if ($item['href'] !== '') { - $tgt = $blank ? ' target="_blank" rel="noopener noreferrer"' : ''; - echo '' . $inner . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + echo '' . $inner . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } else { - echo '' . $inner . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + echo '' . $inner . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } echo '
'; } echo '
'; - if (count($items) > 1) { - ?> - - '; echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } @@ -86,7 +88,6 @@ class NoticeWidget extends \WP_Widget { private function normalize_items(array $instance): array { $raw = $instance['items'] ?? $instance['img_ids'] ?? null; if ($raw === null && !empty($instance['content'])) { - // Legacy single content. return [[ 'title' => wp_strip_all_tags((string) $instance['content']), 'icon' => sanitize_text_field((string) ($instance['icon'] ?? 'fas fa-bullhorn')), @@ -130,6 +131,24 @@ class NoticeWidget extends \WP_Widget { ]; } $json = wp_json_encode($items, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); + $colors = [ + 'c-blue' => __('透明蓝', 'aksrt'), + 'c-green' => __('透明绿', 'aksrt'), + 'c-yellow' => __('透明黄', 'aksrt'), + 'c-red' => __('透明粉红', 'aksrt'), + 'c-purple' => __('透明紫', 'aksrt'), + 'c-blue-2' => __('透明深蓝', 'aksrt'), + 'c-green-2' => __('透明墨绿', 'aksrt'), + 'c-yellow-2' => __('透明橘黄', 'aksrt'), + 'c-red-2' => __('透明红', 'aksrt'), + 'c-purple-2' => __('透明深紫', 'aksrt'), + 'b-theme' => __('主题色', 'aksrt'), + 'b-red' => __('红色', 'aksrt'), + 'b-yellow' => __('黄色', 'aksrt'), + 'b-blue' => __('蓝色', 'aksrt'), + 'b-green' => __('绿色', 'aksrt'), + 'b-purple' => __('紫色', 'aksrt'), + ]; ?>

-

+

+ +


- +
+

sanitize_text_field((string) ($new_instance['title'] ?? '')), - 'items' => $this->normalize_items(['items' => $new_instance['items'] ?? []]), - 'interval' => max(2, min(15, (int) ($new_instance['interval'] ?? 4))), - 'color' => sanitize_html_class((string) ($new_instance['color'] ?? 'c-blue')), - 'blank' => !empty($new_instance['blank']) ? 1 : 0, - 'radius' => !empty($new_instance['radius']) ? 1 : 0, + 'title' => sanitize_text_field((string) ($new_instance['title'] ?? '')), + 'items' => $this->normalize_items(['items' => $new_instance['items'] ?? []]), + 'interval' => max(2, min(15, (int) ($new_instance['interval'] ?? 4))), + 'color' => sanitize_html_class((string) ($new_instance['color'] ?? 'c-blue')), + 'alignment' => sanitize_html_class((string) ($new_instance['alignment'] ?? '')), + 'blank' => !empty($new_instance['blank']) ? 1 : 0, + 'radius' => !empty($new_instance['radius']) ? 1 : 0, + 'in_affix' => !empty($new_instance['in_affix']) ? 1 : 0, ]; } }