lixin-web/webapp/include-lottery.html

vue and bootstrap

<section class="navBox">
        <a class="" href="index.html"><img src="img/lottery/logo.png"></a>
        <nav>
          <ul class="navList">
            <li><a href="index.html"><i class="demo-icon icon-home-outline">&#xeccd;</i><span></span>首页</a></li>
            <li class="active"><a href="game-center.html"><span class="glyphicon glyphicon-fire"></span>&nbsp;游戏大厅</a></li>
            <li><a href="manager.html#mode=personalCenter&page=myCenter"><i class="demo-icon icon-megaphone-1">&#xec53;</i> 个人中心</a></li>
            <li><a href="manager.html#mode=orderReport&page=lotteryList"><i class="demo-icon icon-calendar-5">&#xedc2;</i>  订单报表</a></li>
            <li data-visible="proxy"><a href="manager.html#mode=agentManager&page=teamView"><i class="demo-icon icon-street-view">&#xeb09;</i>管理中心</a></li>
            <li><a href="game-activity.html"><i class="demo-icon icon-money">&#xeabd;</i>优惠活动</a></li>
            <li><a data-command="kefu"><i class="demo-icon icon-headphones-1">&#xe823;</i>联系客服</a></li>
          </ul>
        </nav>
        <div class="mobliem1">
        	
        </div>
</section>
<style>

@media screen and (max-width:768px){
		 .navBox{width:100%;position: relative;}
		 .navBox nav{width:100%;z-index:100;    position: absolute;    display: none;height:400px;    top: 62px;}
		 nav .navList li a:hover, nav .navList li.active a{background:#0164A2}
		 nav .navList li a{width:100%}
    	 .navList{background:#094E79;}
    	
    	#liixnnav{position:relative;margin: 0;}
    	.mobliem1:after,.mobliem1:before{content:"";width:30px;height:3px;background:#00C4FF;position:absolute;top: 50px;right: 9px;transition:0.5s all ease}
    	.mobliem1:before{top:30px;}
    	.mobliem1{display:block;width:55px;height:50px;background:#094E79;cursor:pointer;position:absolute;right:0px;top:0px;}
	    .mobliem1.activetm:after{-webkit-transform: translateY(8px) translateX(0) rotate(45deg);-ms-transform: translateY(8px) translateX(0) rotate(45deg);transform: translateY(8px) translateX(0) rotate(45deg);}
    	.mobliem1.activetm:before{-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);-ms-transform: translateY(-8px) translateX(0) rotate(-45deg);transform: translateY(-8px) translateX(0) rotate(-45deg);}
        nav .navList li{width:100%} 	

    	.mobliem1{height:62px;}
     	.mobliem1:after{top: 20px;}
     	.mobliem1:before{top: 40px;}
     	.mobliem1:after,.mobliem1:before{right:10px;}
     	.mobliem1.activetm:after{-webkit-transform: translateY(10px) translateX(0) rotate(45deg);-ms-transform: translateY(10px) translateX(0) rotate(45deg);transform: translateY(10px) translateX(0) rotate(45deg);}
    	.mobliem1.activetm:before{-webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);-ms-transform: translateY(-10px) translateX(0) rotate(-45deg);transform: translateY(-10px) translateX(0) rotate(-45deg);}
}
</style>
<script>
$(".mobliem1").click(function(){
	$('.navBox nav').stop().slideToggle();
	$('.mobliem1').toggleClass('activetm');
	$('.navList li a').click(function(){
		$('.navBox nav').slideUp();
		$('.mobliem1').removeClass('activetm')
	})
	
});

</script>