cycgs/src/main/webapp/template/1/default/header.htm

<!--头部begin-->
<script src="/{ms:global.style/}js/vue.js"></script>
    <script src="/{ms:global.style/}js/moment.js"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <link rel="stylesheet" href="/{ms:global.style/}css/header.css">
<link rel="stylesheet" href="/{ms:global.style/}css/public.css">
<div id="header" class="header_box">
            <div class="top_header">
              <div class="top_header_box">
                <div class="left_top">
                    <p>欢迎来到青岛市公安局交通警察支队车辆管理所!</p>
                </div>
                <div class="left_top right">
                    <div class="wea_box">
                        <div>{{time}}</div>
                        <div style="margin:0 5px 0 5px;">{{weather}}</div>
                        <div>{{temp}}℃</div>
                    </div>
                    <div class="login_box">登录个人中心</div>
                </div>
              </div>
                
            </div>
            <div class="center_header">
                <div class="top_cen">
                    <div>
                        <img src="/{ms:global.style/}images/logo.jpg" alt="">
                    </div>
                </div>
                <div class="bot_cen">
                    <div class="search_cen">
                        <form name="formsearch" action="/mcms/search.do" method="post">
                            <input class="input1" type="text" name="content_title" id="p" placeholder="搜索" value="${search.content_title}">
                            <input type="submit" class="bnts">
                        </form>
                    </div>
                </div>
            </div>
            <div class="bottom_header">
                <div class="header-nav">
      <ul>
        <li>
          <a href="/" title="门户首页">
            <span class="b <#assign typeid=field.typeid><#if typeid==''>r</#if>">门户首页</span>
          </a>
        </li>
        <!--定义变量typeid、ids，通过这两个变量判断是否选中-->
        <#assign typeid=field.typeid>
        <#assign parentid=field.parentid>
          <#assign ids=field.parentids>
            {ms:channel type='nav' flag='n' orderby='sort'}
            <#assign typeleaf=field.typeleaf>
              <li>
                <a href="<#if typeleaf == 0><#else>{ms:global.html/}${field.typelink}</#if>">
                  <span data-title="${field.typetitle}"
                    class="b <#if field.typeid == typeid || field.typeid==parentid >r</#if>">${field.typetitle}</span>
                  <div class="son-none<#if typeleaf == 1>son-cont</#if> ">
                    <div>
                      {ms:channel type="son"}
                      <a class="nav-a" href="{ms:global.html/}${field.typelink}">
                        ${field.typetitle}
                      </a>
                      {/ms:channel}
                    </div>
                  </div>

                </a>
              </li>
              {/ms:channel}
              
      </ul>
    </div>
            </div>
                      
        </div>
<!-- E touch-top-wrapper -->
<div class="touch-top">
    <div class="touch-top-wrapper clearfix">
        <div class="touch-logo" skinobjectzone="HtmlLogo_1514">
            <a class="" href="/">
                <img src="{@ms:file global.logo/}" alt="CMS,免费CMS,免费开源Java CMS,CMS系统,Java CMS,CMS内容管理系统,企业CMS,HTML网页模板,CMS模板,CMS源码,网站源码,信创系统软件,安可系统,网站建设,模板网站,建站模板,建站工具,建站平台,建站工具"/>
            </a>
        </div>
        <!-- S touch-navigation -->
        <div class="touch-navigation">
            <div class="touch-toggle">
                <ul>
                    <li class="touch-toggle-item-last">
                        <a href="javascript:void(0);" class="drawer-menu" data-drawer="search_div">
                            <i class="touch-icon-search"><span>搜索</span></i>
                        </a>
                    </li>
                    <li class="touch-toggle-item-last">
                        <a href="javascript:;" class="drawer-menu" data-drawer="drawer-section-menu">
                            <i class="touch-icon-menu"></i><span>导航</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- E touch-navigation -->
    </div>
    <!-- S touch-top -->
    <div class="touch-toggle-content touch-top-home">
        <!--手机搜索begin-->
        <div class="drawer-section search_div">
            <div class="search_con">
                <form  name="formsearch" action="/mcms/search.do" method="post" target="_blank" style="height: 42px;">
                    <input type="text" name="content_title" id="q" class="input1" placeholder="搜索" value=""/>
                    <input type="submit"  class="bnt1"/>
                </form>
            </div>
        </div>
        <!--手机搜索end-->
        <!--手机菜单begin-->
        <div class="drawer-section drawer-section-menu">
            <div class="touch-menu" skinobjectzone="menu_2005">
                <ul>
                    <li>
                        <a href="/"><span>首页</span></a>
                    </li>
                    <#assign typeid=field.typeid>
                    <#assign ids=field.parentids>
                    {ms:channel type='nav' flag='n' orderby='sort'}
                    <#if field.childsize &gt; 0>
                    <li>
                        <a href="<#if field.type==3>{ms:global.html/}${field.typeurl}<#else>{ms:global.html/}${field.typelink}</#if>">
                            <span>${field.typetitle}</span>
                            <i class="touch-arrow-down"></i>
                        </a>
                        <ul>
                            {ms:channel}
                            <li>
                                <a href="<#if field.type==3>{ms:global.html/}${field.typeurl}<#else>{ms:global.html/}${field.typelink}</#if>">
                                    <span>${field.typetitle}</span>
                                </a>
                            </li>
                            {/ms:channel}
                        </ul>
                    </li>
                    <#else>
                    <li>
                        <a href="<#if field.type==3>{ms:global.html/}${field.typeurl}<#else>{ms:global.html/}${field.typelink}</#if>">
                            <span>${field.typetitle}</span>
                        </a>
                        <ul>
                        </ul>
                    </li>
                    </#if>
                    {/ms:channel}
                </ul>
                <div class="closetitle">
                    <img src="/{ms:global.style/}picture/nav_bg2.png">
                </div>
            </div>
        </div>
        <!--手机菜单end-->
    </div>
    <!-- E touch-top -->
</div>
<div class="touch_bg">&nbsp;</div>
<!-- E touch-top-wrapper 
<div class="blank_h">&nbsp;</div>-->
                   <script>
        new Vue({
            el:"#header",
            data() {
                return {
                    time:"",
                    weather:'',
                    temp:''
                }
            },
            created() {
                this.time=  moment().format('yyyy-MM-DD')
                this.getWeather()
            },
            methods: {
                getWeather(){
                    axios.get('https://devapi.qweather.com/v7/weather/now?location=101120201&key=da5448d7e24e42659c86656047911980').then(res =>{
                        console.log('res ====>',res)
                        this.weather = res.data.now.text
                        this.temp = res.data.now.temp
                    })
                }
            },
        })
   </script>
<!--头部end-->