caimei365-www/src/main/resources/templates/encyclopedia/components/header.html

<!-- 头部导航 -->
<header class="navbar" xmlns:th="https://www.thymeleaf.org">
    <input type="hidden" th:value="${coreServer}" id="coreServer">
    <input type="hidden" th:value="${agent}" id="userAgent">
    <div class="container">
        <div class="logo">
            <div class="menu-btn" id="menuBtn" data-target="#menuNav" data-colse="#menuColseBtn">
                <i class="icon menu"></i>
            </div>
            <a href="/">
                <h1>采美百科丰富的百科文库</h1>
                <img src="/img/encyclopedia/logo.png" alt="采美百科"/>
            </a>
        </div>
        <ul class="nav" id="menuNav">
            <li class="active"><a href="product.html">产品百科</a></li>
            <li><a href="instrument.html">仪器百科</a></li>
            <li><a href="about.html">关于采美百科</a></li>
            <li><a href="contact.html">联系我们</a></li>
            <li><span class="nav-close" id="#menuColseBtn"></span></li>
        </ul>
        <div class="search">
            <div class="search-control">
                <form action="search.html">
                    <input type="text" id="searchKeyword" class="search-input" name="keyword" placeholder="请输入产品/仪器名称"/>
                    <button class="search-btn">搜索</button>
                </form>
                <button class="hot-keyword" id="hotKeyword" data-target="#hotKeywords">热搜词</button>
            </div>
            <div class="keywords" id="hotKeywords">
                <span class="close-btn icon close"></span>
                <span>热门搜索：</span>
                <!--跳转方式：1仅搜索，2产品，3仪器，4链接-->
                <th:block th:each="item,stat: ${searchHotWord}" th:object="${item}">
                    <a th:href="*{'search.html?keyword=' + keyWord}" th:if="*{jumpType eq 1}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
                    <a th:href="*{'product-' + productId + '.html'}" th:if="*{jumpType eq 2}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
                    <a th:href="*{'instrument-' + productId + '.html'}" th:if="*{jumpType eq 3}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
                    <a th:href="*{jumpLink}" th:if="*{jumpType eq 4}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
                    <em th:if="${stat.size gt 1 and stat.size ne stat.index + 1}">/</em>
                </th:block>
            </div>
        </div>
    </div>
</header>