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 label-keyword" v-model="keywords" 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}" th:if="${count.index} le 9">
                    <a th:labelId="${label.id}" th:href="'/info/label-' + ${label.id} + '-1.html'" th:text="${label.name}" th:class="${labelId==label.id}?'label-active':''"></a>
                    <span th:if="${count.index} le 9"> / </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="search" 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,count : ${labels}" @click.stop="show = !show" th:if="${count.index} le 9">
                <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}" th:if="${status.index} < 10">
                <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>
            <a class="van-document" @click="(right_drawer = false)" href="/document/beauty-archive.html">美业资料</a>
        </van-collapse>
    </van-popup>

    <!--导航栏-->
    <div class="nav">
        <div class="type">
            <div class="type-content" th:if="${articleType}">
                <!-- <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'" th:if="${status.index} < 10">
                    <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" th:if="${type.linkList}">
                        <a th:each="link: *{type.linkList}" th:href="'/info/center-'+${link.id}+'-1.html'" th:text="${link.name}"></a>
                    </div>
                </div>
                <a class="typeBtn moreLink" 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>