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

<header xmlns:th="http://www.w3.org/1999/xhtml">
    <ul>
        <li><a href="javascript:void(0);">登录</a></li>
        <li><a href="javascript:void(0);">注册</a></li>
        <li>
            <a href="javascript:void(0);">用户名</a>
            <div>
                <a href="javascript:void(0);">我的采美</a>
                <a href="javascript:void(0);">机构资料</a>
                <a href="javascript:void(0);">我的机构</a>
                <a href="javascript:void(0);">店铺管理</a>
                <a href="javascript:void(0);">退出登录</a>
            </div>
        </li>
        <li><a href="javascript:void(0);">我的订单</a></li>
        <li class="qr-code">
            <a href="javascript:void(0);">采美365公众号</a>
            <div class="hover">
                <img src="/img/base/qr_code_caimei.png" alt="采美365网"/>
                <p>扫描关注<br/>获取更多优惠信息</p>
            </div>
        </li>
        <li class="qr-code">
            <a href="javascript:void(0);">呵呵商城</a>
            <div class="hover">
                <img src="/img/base/qr_code_hehe.png" alt="呵呵商城"/>
                <p>扫描关注<br/>获取更多优惠信息</p>
            </div>
        </li>
    </ul>

    <div>
        <div>
            <a href="/" class="logo">
                <img src="/img/base/logo.png" alt="采美"/>
                <span>生美/医美采购服务平台</span>
            </a>
            <div class="search">
                <div>
                    <span class="current" data-id="0">产品</span>
                    <span data-id="1">供应商</span>
                    <span data-id="2">项目仪器</span>
                </div>
                <label>
                    <input type="text" placeholder="请输入关键字" th:value="${path}" />
                    <a href="javascript:void(0);">搜索</a>
                </label>
                <!-- 热门搜索关键词 -->
                <div>
                    <span th:each="word,wordStat: ${searchHotWord}">
                        <i th:if="${wordStat.index}>0">/</i>
                        <a th:href="@{/product/search.shtml( keyword=${word} )}" target="_blank" th:text="${word}"></a>
                    </span>
                </div>
            </div>
        </div>
        <div id="topMenu">
            <div>
                <a href="javascript:void(0);">商品分类</a>
                <!--商品分类（异步数据）-->
                <div id="mainClassify">
                    <div class="tab-tit">
                        <template v-for="big in classify">
                            <a v-if="big.validFlag==1" :href="'/product/category.shtml?category='+big.bigTypeID+'-0-0'" v-text="big.name"></a>
                        </template>
                    </div>
                    <div class="tab-con">
                        <div class="type-item" v-for="big in classify" :bid="big.bigTypeID">
                            <div class="line" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
                                <div class="lft">
                                    <a :href="'/product/category.shtml?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>
                                </div>
                                <div class="rgt">
                                    <template v-for="tiny in small.tinytypeList">
                                        <a v-if="tiny.validFlag==1" :href="'/product/category.shtml?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" v-text="tiny.name"></a>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <nav>
                <ul>
                    <!--导航菜单-->
                    <li th:each="menu: ${topMenuList}">
                        <a href="javascript:void(0);" th:text="${menu.name}"></a>
                        <div th:if="${not #lists.isEmpty(menu.subMenus)}">
                            <a th:each="sub: ${menu.subMenus}" href="javascript:void(0);" th:text="${sub.name}"></a>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <input type="hidden" th:value="${spiServer}" id="spiServer">
</header>