You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
17 KiB
296 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{$current_cate.seo_title}</title>
|
|
<meta name="keywords" content="{$current_cate.seo_keywords}">
|
|
<meta name="description" content="{$current_cate.seo_description}">
|
|
<!-- 公共CSS 自动被打包进页面 -->
|
|
<link rel="icon" href="./favicon.ico" type="image/x-icon">
|
|
<script>
|
|
// 设计稿 1920px 宽度下 1rem = 16Px；放在 head 里避免刷新时 rem 闪动
|
|
(function () {
|
|
var h = document.documentElement
|
|
// 设计稿宽度
|
|
var DESIGN_WIDTH = 1920
|
|
// 设计稿1rem = 16Px
|
|
var REM_AT_DESIGN = 16
|
|
// 最小字体大小-限制, 同时注意所有的box的大小也有了最小限制
|
|
var MIN_ROOT_FONT_SIZE = 14
|
|
function setRootFontSize() {
|
|
// 当前屏幕可视宽度（每次计算都取最新值）
|
|
var W = h.getBoundingClientRect().width
|
|
var size = (W / DESIGN_WIDTH) * REM_AT_DESIGN
|
|
if (size < MIN_ROOT_FONT_SIZE) size = MIN_ROOT_FONT_SIZE
|
|
h.style.fontSize = size + 'px'
|
|
}
|
|
setRootFontSize()
|
|
var resizeRaf = 0
|
|
window.addEventListener('resize', function () {
|
|
if (resizeRaf) return
|
|
resizeRaf = requestAnimationFrame(function () {
|
|
resizeRaf = 0
|
|
setRootFontSize()
|
|
})
|
|
})
|
|
})()
|
|
</script>
|
|
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.23/dist/lenis.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
|
|
<script type="module" crossorigin src="/themes/dist_static/static/js/search.js"></script>
|
|
<link rel="modulepreload" crossorigin href="/themes/dist_static/static/js/common.js">
|
|
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/common.css">
|
|
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/pagination.css">
|
|
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/empty.css">
|
|
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/faq.css">
|
|
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/video.css">
|
|
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/search.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 引入公共头部 -->
|
|
<!-- header -->
|
|
{include file="components/header"}
|
|
|
|
<main class="main-search" data-header-dark>
|
|
<div class="sr-page section__wrap">
|
|
<div class="sr-hero">
|
|
<h1 class="sr-hero__title">Search</h1>
|
|
<form class="s-search sr-search" action="/search.html" method="get" role="search">
|
|
<img class="s-search__icon" src="data:image/svg+xml,%3csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='24.000000'%20height='24.000000'%20fill='none'%3e%3crect%20id='搜索'%20width='24.000000'%20height='24.000000'%20x='0.000000'%20y='0.000000'%20fill='rgb(255,255,255)'%20fill-opacity='0'%20/%3e%3cpath%20id='矢量%203'%20d='M15.8481%2017.1208C14.4808%2018.2114%2012.7482%2018.8633%2010.8633%2018.8633C6.44506%2018.8633%202.86328%2015.2816%202.86328%2010.8633C2.86328%206.445%206.44506%202.86328%2010.8633%202.86328C15.2815%202.86328%2018.8633%206.445%2018.8633%2010.8633C18.8633%2012.7482%2018.2114%2014.4808%2017.1208%2015.8481L21.136%2019.8633L19.8633%2021.136L15.8481%2017.1208ZM17.0632%2010.8633C17.0632%207.43908%2014.2874%204.66326%2010.8633%204.66326C7.4392%204.66326%204.66332%207.43908%204.66332%2010.8633C4.66332%2014.2875%207.4392%2017.0633%2010.8633%2017.0633C14.2874%2017.0633%2017.0632%2014.2875%2017.0632%2010.8633Z'%20fill='rgb(175,181,185)'%20fill-rule='evenodd'%20/%3e%3c/svg%3e" alt="" width="24" height="24" />
|
|
<input class="s-search__input" type="search" name="q" value="{$keywords}" placeholder="Search what you want to know" autocomplete="off" />
|
|
<button class="s-search__btn" type="submit">Search</button>
|
|
</form>
|
|
<div class="sr-hot">
|
|
<span class="sr-hot__label">Popular searches:</span>
|
|
<div class="sr-hot__list">
|
|
{hcTaglib:category id="679" item="vo" field="id,title,description"}
|
|
{php}
|
|
$description = $vo['description'] ?? '';
|
|
$descriptionArr = [];
|
|
if(!empty($description)){
|
|
$descriptionArr = explode(',',$description);
|
|
}
|
|
{/php}
|
|
{/hcTaglib:category}
|
|
|
|
{volist name="descriptionArr" id="one"}
|
|
<button type="button" class="sr-hot__tag" data-keyword="{$one}">{$one}</button>
|
|
{/volist}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{php}
|
|
$sr_type_cur = $sr_type ?? 'all';
|
|
$sr_q = $keywords ?? '';
|
|
$sr_counts = $sr_counts ?? ['all' => 0, 'product' => 0, 'news' => 0, 'faq' => 0, 'other' => 0];
|
|
$sr_tabs = [];
|
|
foreach (['all', 'product', 'news', 'faq', 'other'] as $tabType) {
|
|
$query = ['type' => $tabType];
|
|
if ($sr_q !== '') {
|
|
$query['q'] = $sr_q;
|
|
}
|
|
$sr_tabs[$tabType] = '/search.html?' . http_build_query($query);
|
|
}
|
|
{/php}
|
|
<div class="sr-tabs" role="tablist" aria-label="Result categories">
|
|
<a class="sr-tabs__item {if $sr_type_cur=='all'}is-active{/if}" role="tab" aria-selected="{if $sr_type_cur=='all'}true{else /}false{/if}"
|
|
href="{$sr_tabs.all}">
|
|
All ( <span data-count="all">{$sr_counts.all}</span> )
|
|
</a>
|
|
<a class="sr-tabs__item {if $sr_type_cur=='product'}is-active{/if}" role="tab" aria-selected="{if $sr_type_cur=='product'}true{else /}false{/if}"
|
|
href="{$sr_tabs.product}">
|
|
Products ( <span data-count="product">{$sr_counts.product}</span> )
|
|
</a>
|
|
<a class="sr-tabs__item {if $sr_type_cur=='news'}is-active{/if}" role="tab" aria-selected="{if $sr_type_cur=='news'}true{else /}false{/if}"
|
|
href="{$sr_tabs.news}">
|
|
News ( <span data-count="news">{$sr_counts.news}</span> )
|
|
</a>
|
|
<a class="sr-tabs__item {if $sr_type_cur=='faq'}is-active{/if}" role="tab" aria-selected="{if $sr_type_cur=='faq'}true{else /}false{/if}"
|
|
href="{$sr_tabs.faq}">
|
|
FAQ ( <span data-count="faq">{$sr_counts.faq}</span> )
|
|
</a>
|
|
<a class="sr-tabs__item {if $sr_type_cur=='other'}is-active{/if}" role="tab" aria-selected="{if $sr_type_cur=='other'}true{else /}false{/if}"
|
|
href="{$sr_tabs.other}">
|
|
Other ( <span data-count="other">{$sr_counts.other}</span> )
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sr-list">
|
|
{volist name="list" id="vo"}
|
|
{php}
|
|
$sr_kind = $vo['sr_kind'] ?? 'content';
|
|
$sr_date = $vo['sr_date'] ?? '';
|
|
if ($sr_date === '') {
|
|
$sr_time = $vo['publish_time'] ?? ($vo['create_time'] ?? '');
|
|
if ($sr_time !== '' && $sr_time !== null) {
|
|
if (is_numeric($sr_time)) {
|
|
$sr_date = date('Y-m-d', (int)$sr_time);
|
|
} else {
|
|
$ts = strtotime((string)$sr_time);
|
|
$sr_date = $ts ? date('Y-m-d', $ts) : substr((string)$sr_time, 0, 10);
|
|
}
|
|
}
|
|
}
|
|
$sr_cid = $vo['category_id'] ?? ($vo['category'][0]['id'] ?? 0);
|
|
$sr_thumb = is_array($vo['thumbnail'] ?? null) ? ($vo['thumbnail']['url'] ?? '') : '';
|
|
$sr_url = hcUrl('detail/index', ['id' => $vo['id'], 'cid' => $sr_cid]);
|
|
$sr_file = $vo['url'] ?? '';
|
|
$sr_title = $vo['title'] ?? '';
|
|
$sr_type_name = $vo['sr_tab_name'] ?? 'Content';
|
|
$sr_show_desc = ($sr_kind === 'news' || $sr_kind === 'content');
|
|
$sr_show_more = ($sr_kind === 'news' || $sr_kind === 'content');
|
|
{/php}
|
|
<article class="sr-item sr-item--{$sr_kind}" data-keywords="{$sr_title}" data-kind="{$sr_kind}">
|
|
{if $sr_kind == 'video'}
|
|
<button type="button" class="sr-item__media sr-item__media--video" data-video-src="{$vo.cover.url ?? ''}" aria-label="Play: {$sr_title}">
|
|
<span class="v-card__media">
|
|
<img class="v-card__cover" src="{$sr_thumb}" alt="" width="300" height="200" loading="lazy" />
|
|
<span class="v-card__play" aria-hidden="true">
|
|
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20width='13.538574'%20height='16.000000'%20fill='none'%3e%3cpath%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
|
|
</span>
|
|
</span>
|
|
</button>
|
|
{elseif $sr_kind == 'download' /}
|
|
<a class="sr-item__media" href="{$sr_file}" target="_blank" rel="noopener" title="Preview">
|
|
<img src="{$sr_thumb}" alt="" width="300" height="200" loading="lazy" />
|
|
</a>
|
|
{elseif $sr_kind == 'announce' /}
|
|
<a class="sr-item__media" href="{$sr_file}" target="_blank" rel="noopener">
|
|
<img src="{$sr_thumb}" alt="" width="300" height="200" loading="lazy" />
|
|
</a>
|
|
{else /}
|
|
<a class="sr-item__media" href="{$sr_url}">
|
|
<img src="{$sr_thumb}" alt="" width="300" height="200" loading="lazy" />
|
|
</a>
|
|
{/if}
|
|
|
|
<div class="sr-item__body">
|
|
<div class="sr-item__main">
|
|
<div class="sr-item__meta">
|
|
<span class="sr-item__type">{$sr_type_name}</span>
|
|
<span class="sr-item__sep" aria-hidden="true"></span>
|
|
<time class="sr-item__date" datetime="{$sr_date}">{$sr_date}</time>
|
|
</div>
|
|
|
|
{if $sr_kind == 'faq'}
|
|
<div class="f-item sr-item__faq">
|
|
<button type="button" class="f-item__trigger" aria-expanded="false">
|
|
<span class="f-item__q">
|
|
<span class="f-item__dot" aria-hidden="true"></span>
|
|
<span class="f-item__title">{$sr_title}</span>
|
|
</span>
|
|
<span class="f-item__icon" aria-hidden="true"></span>
|
|
</button>
|
|
<div class="f-item__panel">
|
|
<p class="f-item__a">
|
|
{$vo.content|strip_tags}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{else /}
|
|
<h2 class="sr-item__title">
|
|
{if $sr_kind == 'video'}
|
|
{$sr_title}
|
|
{elseif $sr_kind == 'download' /}
|
|
<a href="{$sr_file}" target="_blank" rel="noopener" title="Preview">{$sr_title}</a>
|
|
{elseif $sr_kind == 'announce' /}
|
|
<a href="{$sr_file}" target="_blank" rel="noopener">{$sr_title}</a>
|
|
{else /}
|
|
<a href="{$sr_url}">{$sr_title}</a>
|
|
{/if}
|
|
</h2>
|
|
{/if}
|
|
|
|
{if $sr_show_desc}
|
|
{notempty name="vo.description"}
|
|
<p class="sr-item__desc">{$vo.description}</p>
|
|
{/notempty}
|
|
{/if}
|
|
</div>
|
|
|
|
{if $sr_kind == 'download'}
|
|
<a class="sr-item__more sr-item__more--download" href="{$sr_file}" download="{$sr_title}">
|
|
<span>Download</span>
|
|
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3cpath%20d='M16.667%209.333H22V22H2V9.333h5.333'%20stroke='rgb(46,53,58)'%20stroke-linejoin='round'%20stroke-width='1.5'/%3e%3cpath%20d='M16%2014l-4%204-4-4M12%202v16'%20stroke='rgb(239,67,53)'%20stroke-width='1.5'/%3e%3c/svg%3e" alt="" width="20" height="20" />
|
|
</a>
|
|
{elseif $sr_kind == 'product' /}
|
|
<a class="sr-item__more sr-item__more--product" href="{$sr_url}">
|
|
<span>Learn more</span>
|
|
<span class="s-product-card__arrow" aria-hidden="true">
|
|
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2012.2529%2011.314'%20xmlns='http://www.w3.org/2000/svg'%20width='12.252930'%20height='11.313965'%20fill='none'%3e%3cpath%20d='M5.18202%201.41422L6.59622%200L12.2531%205.65686L12.2529%205.65702L10.8389%207.07108L6.59608%2011.3139L5.18186%209.89966L8.4245%206.65702L-0%206.65702L0%204.657L8.42482%204.65702L5.18202%201.41422Z'%20fill='rgb(239,67,53)'%20fill-rule='evenodd'/%3e%3c/svg%3e" alt="" width="12" height="11" />
|
|
</span>
|
|
</a>
|
|
{elseif $sr_kind == 'announce' /}
|
|
<a class="sr-item__more" href="{$sr_file}" target="_blank" rel="noopener">
|
|
<span>Explore more</span>
|
|
<svg viewBox="0 0 16.502 6.66113" xmlns="http://www.w3.org/2000/svg" width="16.501953" height="6.661133" fill="none">
|
|
<path d="M0 2.83057L16 2.83057L16 3.83057L0 3.83057L0 2.83057ZM15.2929 3.33057L12.818 0.855693C12.62 0.657703 12.62 0.346575 12.818 0.148586C13.016 -0.0494041 13.3271 -0.0494046 13.5251 0.148585L16.3536 2.97701C16.5515 3.175 16.5515 3.48613 16.3536 3.68412L13.5251 6.51255C13.3271 6.71054 13.016 6.71054 12.818 6.51255C12.62 6.31456 12.62 6.00343 12.818 5.80544L15.2929 3.33057Z" fill="rgb(102,102,102)" fill-rule="nonzero" />
|
|
</svg>
|
|
</a>
|
|
{elseif $sr_show_more /}
|
|
<a class="sr-item__more" href="{$sr_url}">
|
|
<span>Explore more</span>
|
|
<svg viewBox="0 0 16.502 6.66113" xmlns="http://www.w3.org/2000/svg" width="16.501953" height="6.661133" fill="none">
|
|
<path d="M0 2.83057L16 2.83057L16 3.83057L0 3.83057L0 2.83057ZM15.2929 3.33057L12.818 0.855693C12.62 0.657703 12.62 0.346575 12.818 0.148586C13.016 -0.0494041 13.3271 -0.0494046 13.5251 0.148585L16.3536 2.97701C16.5515 3.175 16.5515 3.48613 16.3536 3.68412L13.5251 6.51255C13.3271 6.71054 13.016 6.71054 12.818 6.51255C12.62 6.31456 12.62 6.00343 12.818 5.80544L15.2929 3.33057Z" fill="rgb(102,102,102)" fill-rule="nonzero" />
|
|
</svg>
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
</article>
|
|
{/volist}
|
|
</div>
|
|
|
|
{php}
|
|
$list_empty = isHcListEmpty($list ?? null);
|
|
if ($list_empty) {
|
|
$empty_text = 'No matching results. Try another keyword';
|
|
}
|
|
{/php}
|
|
{if $list_empty}
|
|
{include file="components/empty"}
|
|
{else /}
|
|
{$list_page|raw}
|
|
{/if}
|
|
|
|
<div class="v-modal" id="v-modal" hidden>
|
|
<div class="v-modal__backdrop" data-v-modal-close></div>
|
|
<div class="v-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="v-modal-title">
|
|
<div class="v-modal__head">
|
|
<h2 class="v-modal__title" id="v-modal-title">Video</h2>
|
|
<button type="button" class="v-modal__close" data-v-modal-close aria-label="Close">
|
|
<img src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3e%3cpath%20d='M1.5%201.5L14.5%2014.5M14.5%201.5L1.5%2014.5'%20stroke='%23fff'%20stroke-width='1.5'%20stroke-linecap='round'/%3e%3c/svg%3e" alt="" width="16" height="16" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
<div class="v-modal__body">
|
|
<video class="v-modal__video" id="v-modal-video" controls playsinline></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{include file="components/mask"}
|
|
<!-- 模块：底部 -->
|
|
{include file="components/footer"}
|
|
|
|
|
|
<script src="https://unpkg.com/lenis@1.3.23/dist/lenis.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js"></script>
|
|
<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
|
|
</body>
|
|
|
|
</html>
|