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

<header class="header" id="info-header" xmlns:th="http://www.w3isRossShow.org/1999/xhtml">
    <div class="head-back">
        <div class="head">
            <div class="head-logo"></div>
            <div class="text">
                <a href="/index.html">采美商城首页</a>
            </div>
        </div>
    </div>
<!--    搜索头-->
    <div class="search-top" :class="(show || right_drawer) ? 'search-top-shadow' : '' ">
        <div class="info-logo-content" @click="handleOpenLink"></div>
        <div class="search auto-input" id="topSearch">
            <div class="search-info">
                <label>
                    <input class="keyword" type="text" placeholder="请输入关键词" autocomplete="off" />
                </label>
                <a class="searchBtn icon" href="javascript:void(0);">搜索</a>
            </div>
            <div class="keywords">
                <div th:each="label,count : ${labels}">
                    <a th:href="'/info/label-' + ${label.id} + '-1.html'" th:text="${label.name}"></a>
                    <span th:if="${!count.last}"> / </span>
                </div>
            </div>
        </div>
        <div class="H5-info-logo" @click="handleOpenLink"></div>
        <div class="H5-info-menu">
            <div @click="(right_drawer = false), (show = !show)"></div>
            <div>菜单</div>
            <div :class="right_drawer ? 'right_drawer_close' : 'right_drawer_open'" @click="(right_drawer = !right_drawer), (show = false)"></div>
        </div>
    </div>

<!--    搜索头弹窗-->
    <van-popup class="searchPopup" v-model="show" position="top" v-cloak>
        <div class="search-title">
            <div>搜索</div>
            <div @click.stop="show = !show"></div>
        </div>
        <div class="search-info">
            <label>
                <input class="keyword" type="text" placeholder="请输入关键词" autocomplete="off" v-model="searchKeys" />
            </label>
            <a class="searchBtn icon" href="javascript:void(0);" @click="handlerH5Search">搜索</a>
        </div>
        <div class="keywords">
            <div th:each="label : ${labels}" @click.stop="show = !show">
                <a th:href="'/info/label-' + ${label.id} + '-1.html'" th:text="${label.name}"></a>
            </div>
        </div>
    </van-popup>

<!--   导航栏弹窗-->
    <van-popup class="navPopup" v-model="right_drawer" position="right" v-cloak>
        <van-collapse accordion v-model="activeNames">
            <van-collapse-item th:title="${type.name}" th:name="${type.id}" th:each="type,status: *{articleType}" th:typeId="${type.id}">
                <a th:href="'/info/center-'+${type.id}+'-1.html'" th:text="${type.name}" class="van-collapse-nav"></a>
                <a class="van-collapse-nav" th:each="link: *{type.linkList}" th:text="${link.name}" th:href="'/info/center-'+${link.id}+'-1.html'"></a>
            </van-collapse-item>
        </van-collapse>
    </van-popup>

    <!--导航栏-->
    <div class="nav">
<!--        <div class="h5-head">-->
<!--            <a class="index" href="/"><img src="/img/info/mall.png"></a>-->
<!--&lt;!&ndash;            <a class="hotWord" href="javascript:void(0);">热搜词</a>&ndash;&gt;-->
<!--        </div>-->
<!--        <div class="logo">-->
<!--            <a href="/" target="_blank"><img src="/img/base/logo_article@2x.png"/></a>-->
<!--        </div>-->
        <div class="type">
            <div class="type-content">
                <!-- <a class="home" href="/" target="_blank">商城</a> -->
                <div class="type-item" th:each="type,status: *{articleType}" th:typeId="${type.id}" th:class="${typeId==type.id}?'type-item current':'type-item'">
                    <a class="typeBtn" th:text="${type.name}" th:href="'/info/center-'+${type.id}+'-1.html'"></a>
                    <div class="type-item-link" th:if="${type.linkList}"></div>
                    <div class="nav-menu">
                        <a th:each="link: *{type.linkList}" th:href="'/info/center-'+${link.id}+'-1.html'" th:text="${link.name}"></a>
                    </div>
                </div>
                <a class="typeBtn" href="/document/beauty-archive.html" target="_blank">美业资料</a>
                <!-- <a class="typeBtn" href="/encyclopedia/product.html" target="_blank">采美百科</a> -->
            </div>
        </div>
        <!--搜索-->
<!--        <div class="search auto-input" id="topSearch">-->
<!--            <input class="keyword" type="text" placeholder="请输入关键词" autocomplete="off" />-->
<!--            <a class="searchBtn icon" href="javascript:void(0);"></a>-->
<!--        </div>-->
    </div>
    <input type="hidden" th:value="${labelId}" id="labelId">
    <input type="hidden" th:value="${typeId}" id="typeId">
    <input type="hidden" th:value="${pageNum}" id="pageNum">
    <input type="hidden" th:value="${coreServer}" id="coreServer">
    <input type="hidden" th:value="${agent}" id="userAgent">
</header>