www/Template/User/person.html
<include file="snippet:drawer" menu="我的"/>这样就可以引入文件
www/Template/snippet/drawer.html
参数 [menu] 替换
<div id="drawer" class="l-drawer v-transfer-dom" style="height:0;">
<div class="menu">
<div class="top-info">
<div class="info-img"></div>
<p>￥0.00</p>
<div class="recharge-content">存/取款</div>
</div>
<div class="list">
<div class="vue-pull-to-wrapper">
<div class="scroll-container">
<ul class="drawer-list">
<li>
<a href="#">
<img src="__PUBLIC__/img/list/dollar.png" alt="今日输赢">
<div class="item">
<p>今日输赢</p>
<p class="text">0.00</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="__PUBLIC__/img/list/shopping_cart.png" alt="未结算">
<div class="item">
<p>未结算</p>
<p class="text">0.00</p>
</div>
</a>
</li>
</ul>
<ul class="drawer-list">
<li>
<a href="#">
<img src="__PUBLIC__/img/list/medal.png" alt="排行榜">
<div class="item">排行榜</div>
</a>
</li>
<li>
<a href="#">
<img src="__PUBLIC__/img/list/clothes.png" alt="主题皮肤">
<div class="item">主题皮肤</div>
</a>
</li>
<li>
<a href="#">
<img src="__PUBLIC__/img/cards/06_kefu.png" alt="客服">
<div class="item">联系客服</div>
</a>
</li>
<li>
<a href="#">
<img src="__PUBLIC__/img/list/power_off.png" alt="退出">
<div class="item">退出</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mask" style="display:none;" onclick="foldDrawer(this)"></div>
</div>
<!--页面顶部 我的-->
<header class="nav v-transfer-dom">
<div class="nav-item"></div>
<div class="title">[menu]</div>
<div class="nav-item">
<div class="right-slot">
<a class="drawer" onclick="unfoldDrawer(this)" href="javascript:;"><img src="__PUBLIC__/img/breadcrumb.png" /></a>
</div>
</div>
</header>
<script>
var drawer = document.getElementById("drawer");
function foldDrawer(o) {
o.style.display = "none";
// o.parentNode.style.height = 0;
drawer.style.height = "0";
}
function unfoldDrawer(o) {
drawer.querySelector(".mask").style.display = "block";
drawer.style.height = "100%";
drawer.querySelector(".menu").style.width = "50%";
}
</script>
