22 changed files with 234 additions and 528 deletions
-
2app/controller/frontend/SearchController.php
-
92app/provider/Bootstrap.php
-
1public/themes/dist_static/static/css/announce.css
-
51public/themes/dist_static/static/css/download.css
-
1public/themes/dist_static/static/css/faq.css
-
47public/themes/dist_static/static/css/news.css
-
59public/themes/dist_static/static/css/pagination.css
-
1public/themes/dist_static/static/css/search.css
-
52public/themes/dist_static/static/css/video.css
-
5public/themes/dist_static/static/js/announce.js
-
45public/themes/dist_static/static/js/download.js
-
1public/themes/dist_static/static/js/faq.js
-
1public/themes/dist_static/static/js/news.js
-
29public/themes/dist_static/static/js/pagination.js
-
61public/themes/dist_static/static/js/search.js
-
1public/themes/dist_static/static/js/video.js
-
111public/themes/website/1/zh/demo/announce.html
-
1public/themes/website/1/zh/demo/download.html
-
1public/themes/website/1/zh/demo/faq.html
-
24public/themes/website/1/zh/demo/news.html
-
144public/themes/website/1/zh/demo/search.html
-
30public/themes/website/1/zh/demo/video.html
@ -0,0 +1,59 @@ |
|||||
|
.d-pagination { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 0.75rem; |
||||
|
} |
||||
|
.d-pagination__btn, |
||||
|
.d-pagination__page { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
border-radius: 0.5rem; |
||||
|
background: rgba(175, 181, 185, 0.15); |
||||
|
color: rgba(46, 53, 58, 0.6); |
||||
|
font-family: "MiSans VF", "PingFang SC", sans-serif; |
||||
|
font-size: var(--font-20); |
||||
|
font-weight: 400; |
||||
|
line-height: var(--font-24); |
||||
|
cursor: default; |
||||
|
} |
||||
|
.d-pagination__btn:not(:disabled), |
||||
|
.d-pagination__page[data-page]:not(.is-active) { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.d-pagination__btn img { |
||||
|
display: block; |
||||
|
width: 1.0625rem; |
||||
|
height: auto; |
||||
|
transform: scaleX(-1); |
||||
|
filter: grayscale(1) opacity(0.45); |
||||
|
} |
||||
|
.d-pagination__btn--next img { |
||||
|
transform: none; |
||||
|
filter: none; |
||||
|
} |
||||
|
.d-pagination__btn:disabled { |
||||
|
opacity: 0.55; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
.d-pagination__page.is-active { |
||||
|
background: var(--color-primary); |
||||
|
color: var(--color-white); |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
.d-pagination { |
||||
|
gap: 8Px; |
||||
|
} |
||||
|
.d-pagination__btn, |
||||
|
.d-pagination__page { |
||||
|
width: 40Px; |
||||
|
height: 40Px; |
||||
|
font-size: 16Px; |
||||
|
} |
||||
|
} |
||||
@ -1,2 +1,3 @@ |
|||||
import "./common.js"; |
import "./common.js"; |
||||
|
import "./pagination.js"; |
||||
import "./news2.js"; |
import "./news2.js"; |
||||
@ -0,0 +1,29 @@ |
|||||
|
//#region js/pagination.js
|
||||
|
function getCurrentPage() { |
||||
|
const activePage = Number($("[data-pagination] .d-pagination__page.is-active").attr("data-page") || 1); |
||||
|
return Number.isFinite(activePage) && activePage > 0 ? activePage : 1; |
||||
|
} |
||||
|
function goToPage(page) { |
||||
|
const nextPage = Number(page); |
||||
|
if (!Number.isFinite(nextPage) || nextPage < 1) return; |
||||
|
const url = new URL(window.location.href); |
||||
|
if (nextPage <= 1) url.searchParams.delete("page"); |
||||
|
else url.searchParams.set("page", String(nextPage)); |
||||
|
const query = url.searchParams.toString(); |
||||
|
window.location.href = query ? `${url.pathname}?${query}` : url.pathname; |
||||
|
} |
||||
|
$(function() { |
||||
|
$(document).on("click", "[data-pagination] .d-pagination__page[data-page]", function() { |
||||
|
if ($(this).hasClass("is-active") || $(this).prop("disabled")) return; |
||||
|
goToPage($(this).attr("data-page")); |
||||
|
}); |
||||
|
$(document).on("click", "[data-pagination] [data-page-prev]", function() { |
||||
|
if ($(this).prop("disabled")) return; |
||||
|
goToPage(getCurrentPage() - 1); |
||||
|
}); |
||||
|
$(document).on("click", "[data-pagination] [data-page-next]", function() { |
||||
|
if ($(this).prop("disabled")) return; |
||||
|
goToPage(getCurrentPage() + 1); |
||||
|
}); |
||||
|
}); |
||||
|
//#endregion
|
||||
@ -1,68 +1,13 @@ |
|||||
import "./common.js"; |
import "./common.js"; |
||||
|
import "./pagination.js"; |
||||
//#region js/search.js
|
//#region js/search.js
|
||||
function getQuery() { |
|
||||
return new URLSearchParams(window.location.search).get("q")?.trim() || ""; |
|
||||
} |
|
||||
function matchItem($item, type, keyword) { |
|
||||
const itemType = $item.attr("data-type") || ""; |
|
||||
if (type !== "all" && itemType !== type) return false; |
|
||||
if (!keyword) return true; |
|
||||
return [ |
|
||||
$item.attr("data-keywords") || "", |
|
||||
$item.find(".sr-item__title").text(), |
|
||||
$item.find(".sr-item__desc").text(), |
|
||||
$item.find(".sr-item__type").text() |
|
||||
].join(" ").toLowerCase().includes(keyword.toLowerCase()); |
|
||||
} |
|
||||
function updateCounts($items) { |
|
||||
const keyword = ($(".sr-search .s-search__input").val() || "").trim(); |
|
||||
[ |
|
||||
"all", |
|
||||
"product", |
|
||||
"solution", |
|
||||
"news", |
|
||||
"faq" |
|
||||
].forEach((type) => { |
|
||||
const count = $items.filter((_, el) => matchItem($(el), type, keyword)).length; |
|
||||
$(`[data-count="${type}"]`).text(String(count)); |
|
||||
}); |
|
||||
} |
|
||||
function applyFilter() { |
|
||||
const type = $(".sr-tabs__item.is-active").attr("data-type") || "all"; |
|
||||
const keyword = ($(".sr-search .s-search__input").val() || "").trim(); |
|
||||
const $items = $(".sr-item"); |
|
||||
let visible = 0; |
|
||||
$items.each(function() { |
|
||||
const show = matchItem($(this), type, keyword); |
|
||||
this.hidden = !show; |
|
||||
if (show) visible += 1; |
|
||||
}); |
|
||||
updateCounts($items); |
|
||||
$(".sr-empty").prop("hidden", visible > 0); |
|
||||
} |
|
||||
$(function() { |
$(function() { |
||||
const q = getQuery(); |
|
||||
|
const q = new URLSearchParams(window.location.search).get("q")?.trim() || ""; |
||||
if (q) $(".sr-search .s-search__input").val(q); |
if (q) $(".sr-search .s-search__input").val(q); |
||||
$(".sr-tabs__item").on("click", function() { |
|
||||
const $btn = $(this); |
|
||||
$btn.addClass("is-active").attr("aria-selected", "true"); |
|
||||
$btn.siblings(".sr-tabs__item").removeClass("is-active").attr("aria-selected", "false"); |
|
||||
applyFilter(); |
|
||||
}); |
|
||||
$(".sr-hot__tag").on("click", function() { |
$(".sr-hot__tag").on("click", function() { |
||||
const keyword = $(this).attr("data-keyword") || $(this).text().trim(); |
const keyword = $(this).attr("data-keyword") || $(this).text().trim(); |
||||
$(".sr-search .s-search__input").val(keyword); |
$(".sr-search .s-search__input").val(keyword); |
||||
applyFilter(); |
|
||||
}); |
|
||||
$(".sr-search").on("submit", function(e) { |
|
||||
e.preventDefault(); |
|
||||
const keyword = ($(".sr-search .s-search__input").val() || "").trim(); |
|
||||
const url = new URL(window.location.href); |
|
||||
if (keyword) url.searchParams.set("q", keyword); |
|
||||
else url.searchParams.delete("q"); |
|
||||
window.history.replaceState({}, "", url); |
|
||||
applyFilter(); |
|
||||
|
$(".sr-search").trigger("submit"); |
||||
}); |
}); |
||||
applyFilter(); |
|
||||
}); |
}); |
||||
//#endregion
|
//#endregion
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue