layui首页模板

第一次用layui做后台管理系统的页模首页，我盯着那堆模块发呆。页模左侧导航、页模顶部栏、页模中间内容区，页模代码写起来不算复杂，页模但真要拼出一个顺眼的页模布局，得花点心思。页模layui自带的页模栅格系统帮了大忙，`layui-row`配合`layui-col-md*`，页模三下五除二就能把卡片排整齐。页模不过有个坑：`layui-col-md*`在不同屏幕下表现不一样，页模手机端会挤成一团，页模后来加了`layui-col-xs*`才勉强能用。页模

下面是页模我常用的首页骨架，直接贴出来：

<div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">后台管理</div> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"><a href="">管理员</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">数据概览</a> <dl class="layui-nav-child"> <dd><a href="">实时统计</a></dd> <dd><a href="">历史报表</a></dd> </dl> </li> </ul> </div> </div> <div class="layui-body"> <div class="layui-row layui-col-space15" style="padding:15px;"> <div class="layui-col-md3"> <div class="layui-card"> <div class="layui-card-header">今日订单</div> <div class="layui-card-body">128</div> </div> </div> <div class="layui-col-md3"> <div class="layui-card"> <div class="layui-card-header">新增用户</div> <div class="layui-card-body">36</div> </div> </div> </div> </div> </div>

这段代码跑起来，页面基本能看。但有个问题：`layui-body`默认有`left:200px`和`top:60px`的定位，如果你自己调了侧边栏宽度，得同步改这个值，不然内容区会错位。我第一次就栽在这儿，侧边栏改成180px，结果右侧留了20px白边，排查了半小时。

再说卡片。`layui-card`挺方便，但头部和内容区的内边距是写死的——头部15px，内容区15px。想自定义？直接覆盖CSS，比如`.layui-card-header{ padding:10px 20px;}`，别改源码，升级会哭。

数据展示部分，我习惯用`layui-table`。静态表格简单，加个`layui-table`类就行。但如果是动态数据，得配合`table.render()`。有个细节：`table.render()`默认会请求数据接口，如果你只是本地数组，记得设`data: yourArray`，别傻等它发请求。

还有个小坑：layui的图标字体。`layui-icon`用起来顺手，但有时候图标不显示，多半是字体文件路径错了。检查`layui.css`里`@font-face`的`src`，确保`font`文件夹在正确位置。

最后提一嘴响应式。layui的栅格在手机端默认堆叠，但侧边栏不会自动隐藏。想在小屏上折叠菜单，得自己写JS监听`resize`事件，切换`layui-side`的`display`。我试过用`layui-layout-admin`自带的`layui-side`隐藏类，效果一般，后来干脆用媒体查询：`@media (max-width:768px){ .layui-side{ display:none;}}`，简单粗暴。

整套模板搭下来，代码量不大，但细节琐碎。我的建议是：先跑通官方示例，再按自己需求改。别一上来就魔改，容易把自己绕进去。