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>
<link rel="stylesheet" href="/{ms:global.style/}css/header.css">
<script src="/{ms:global.style/}/js/axios.min.js"></script>
<link href="/{ms:global.style/}css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="/{ms:global.style/}css/public.css">
<div style="display:flex;flex-direction:column;align-items:center;width:100vw">
<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>
                <div class="login_box">
                    <span class="login_dl">登录</span>
                    <span class="login_grzx">个人中心</span>
                    <div class="login_model">
                        <div class="triangle"></div>
                        <div class="l_label">用户名/账号：</div>
                        <div>
                            <input type="text" class="username" placeholder="请输入" />
                        </div>
                        <div class="l_label">密码：</div>
                        <div style="position: relative;">
                            <input type="password" class="password" id="myInput" placeholder="请输入"
                                style="padding-right: 26px;" />
                            <img src="/{ms:global.style/}images/y.png" class="login_y" style="position: absolute;
                				width: 15px;
                				height: 12px;
                				top: 10px;
                				right: 10px;">
                        </div>
                        <div class="login_btn">登录</div>
                    </div>
                  <div class="logout_model">
                    	<div class="triangle"></div>
                        <div class="logout_btn">退出</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div>
    <div class="hurl hurld" style="float:right;right:11.35%">
        <div><a href='https://www.mps.gov.cn/'>公安部</a></div>
        <div><a href='https://sd.122.gov.cn/'>部交管局</a></div>
        <div><a href='http://gat.shandong.gov.cn/'>省公安厅</a></div>
        <div><a href='https://sd.122.gov.cn/'>省交警总队</a></div>
        <div><a href='https://sd.122.gov.cn/'>省厅车管所</a></div>
        <div><a href='http://gat.shandong.gov.cn/'>市公安局</a></div>
    </div>
      </div>
</div>


<div class="bottom_header">
    <div class="header-nav">
        <ul>
            <li class="currentPage" data-href="/html/web/index.html">
                <a href="/html/web/index.html" title="首页">
                    <!-- <span class="b r">首页</span> -->
                    首页
                </a>
            </li>
            <!--定义变量typeid、ids，通过这两个变量判断是否选中-->
            <li class="currentPage" data-href="/html/web/intro/index.html">
                <a href="/html/web/intro/index.html">
                    <span data-title="单位简介" class="b ">单位简介</span>
                    <!-- <div class="son-none ">
              <div>
                <a class="nav-a" href="index1.html">
                  平台产品
                </a>
                <a class="nav-a" href="index2.html">
                  开源产品
                </a>
                <a class="nav-a" href="index3.html">
                  行业产品
                </a>
              </div>
            </div> -->

                </a>
            </li>
            <li class="currentPage" data-href="/html/web/zhibanbeiqin/index.html">
                <a href="/html/web/zhibanbeiqin/index.html">
                    <span data-title="值班备勤" class="b ">值班备勤</span>
                    <div class="son-noneson-cont ">
                        <div>
                        </div>
                    </div>

                </a>
            </li>
            <li class="currentPage" data-href="/html/web/tongxunlu/index.html">
                <a href="/html/web/tongxunlu/index.html">
                    <span data-title="通讯录" class="b ">通讯录</span>
                    <div class="son-noneson-cont ">
                        <div>
                        </div>
                    </div>

                </a>
            </li>
            <li class="currentPage" data-href="/html/web/article/huiyitongzhi/index.html">
                <a href="/html/web/article/huiyitongzhi/index.html">
                    <span data-title="会议通知" class="b ">会议通知</span>

                </a>
            </li>
            <li class="currentPage" data-href="/html/web/article/tongzhigonggao/index.html">
                <a href="/html/web/article/tongzhigonggao/index.html">
                    <span data-title="通知公告" class="b ">通知公告</span>
                    <div class="son-noneson-cont ">
                        <div>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript: void(0)">
                    <span data-title="办公自动化" class="b ">办公自动化</span>
                    <div class="son-noneson-cont ">
                        <div>
                        </div>
                    </div>

                </a>
            </li>
            <li>
                <a href="javascript: void(0)">
                    <span data-title="新版办公自动化" class="b ">新版办公自动化</span>


                </a>
            </li>
            <li>
                <div class="search_cen">
                    <form action="/mcms/search.do" method="post">
                        <select class="search_select" name="categoryIds">

                            <option value="" selected="selected">全部</option>


                            <option value="1765306882908344322">车管要闻</option>
                            <option value="1767079741717553153">车管动态</option>
                            <option value="1767087429860007938">通知公告</option>
                            <option value="1767091286732251138">会议通知</option>
                            <option value="1767126154677657602">警苑文化</option>
                            <!--  <option value="1772433260107251713">处会纪要</option>-->
                            <option value="1772809304160997378">领导批示</option>
                            <option value="1772809992177848321">上级文件</option>
                            <option value="1772810629200351233">工作交流</option>
                            <option value="1772811323781287938">法律法规</option>
                            <option value="1772814349241815042">党建队建</option>
                            <option value="1772815555934687234">政工通告</option>
                            <option value="1772815810168229890">综合监管</option>

                        </select>
                        <input class="input1" type="text" name="content_title" id="p" placeholder="搜索" />
                        <!-- <input type="text" name="categoryIds" placeholder="请输入栏目id,多个以,分隔"> -->
                        <!-- <input type="submit" class="bnts"> -->
                        <div class="btn ">
                            <input type="submit" value="" style="    width: 22px;cursor: pointer;
    height: 22px;
    position: absolute;
    top: 12px;
    background: none;">
                            <img src="/{ms:global.style/}images/fdj.png" alt="" srcset="">
                        </div>
                    </form>
                </div>
            </li>
        </ul>
    </div>
</div>
</div>
<script>
    new Vue({
        el: "#header",
        data() {
            return {
                time: "",
                weather: '',
                temp: ''
            }
        },
        created() {
            this.time = moment().format('yyyy-MM-DD')
            
        },
        methods: {
            
        },
    })
    window.onload = function () {
        var pathname = window.location.pathname
        if (pathname == '/html/web/index.html') {
            $('.hurl').removeClass('hurld')
        }

        // axios.get('/statistics/pasZh/get.do').then(res => {
        //     console.log('res ====>', res)
        //     if (res.data.code == 200 && res.data.result) {
        //         if (res.data.data.yjzh) {
        //             $('html').addClass('zhhtmls');
        //         }
        //     }
        // })
     //置灰查询
    axios.get(`/ms/statistics/pasZh/list.do
  `).then(res=>{
   		if(res && res.data && res.data.data && res.data.data.rows && res.data.data.rows[0].yjzh == '1'){
   			if(moment(res.data.data.rows[0].zhEndtime).valueOf() > moment().valueOf()){
   			   $('html').addClass('zhhtmls');
   			}
   		}
     })
    };  
  
    $('.login_dl').click(() => {
        $('.login_model').css('display', 'block')
    })

    $(document).on('click', function (e) {
        var $target = e.target._prevClass;
        var target = $(event.target);
        var $myElement = $('.login_model');

        if ($target != 'login_dl' && $myElement.closest(target).length) {
            $myElement.hide();
        }
  
  		var $myElement2 = $('.logout_model');

        if ($target != 'login_dl' && $myElement2.closest(target).length) {
            $myElement2.hide();
        }
    });
    $('.login_btn').click(() => {

  			var username = $('.username').val();
        	var password = $('.password').val();
        	console.log(username, password)
       		var userlogin = {
            managerName: username,
            managerPassword: password
        }
        axios.post("/ms/login.do", userlogin, {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(r => {
            if (r.data.code == 200 && r.data.result) {
                // window.open('{ms:global.host/}ms/index.do')
                alert('登录成功')
                location.reload();
            } else {
                alert(r.data.msg)
            }
        })
        
    })
    axios.get('/ms/checkLogin.do').then(res => {
        if (res.data.code == 200 && res.data.result) {
            $('.login_dl').hide()
            $('.login_grzx').show()
            $('.zgtg').show()
        }
    })
    $('.login_grzx').click(() => {
  		$('.logout_model').css('display', 'block')
        //window.location.href = '{ms:global.host/}ms/index.do';
    })
  	$('.logout_btn').click(() => {
  		axios.get("/ms/loginOut.do").then(res=>{
    		location.reload();
  		})

  	})

    var types = true
    $('.login_y').off().click(() => {
        types = !types
        if (types) {
            document.getElementById("myInput").setAttribute('type', 'password')
        } else {
            document.getElementById("myInput").setAttribute('type', 'text')
        }
    })
   $('.currentPage').each(function (i, p) {
  		if(location.href.indexOf($(p).data('href')) != -1){
          $(p).addClass('iscurrentPage')
  		}
    });
</script>
<!--头部end-->