layui 左边设备树，右边四分屏

layui是一个简洁、模块化的前端UI框架，它提供了一种布局管理方式，其中可以创建左侧设备树和右侧的四分屏布局。这种设计常用于后台管理系统或者开发者工具中，以便用户能够清晰地浏览和操作复杂的配置信息或项目结构。

左侧设备树通常是导航菜单，用于展示系统层级结构，如功能分类、菜单项等，方便用户快速定位到他们需要的功能区域。而右侧四分屏则可以根据需求划分成四个独立的部分，可以用来显示详细的内容、编辑区、数据查看、实时监控等功能，每个部分都可以根据实际业务场景调整大小。

通过layui的栅格系统（grid），你可以简单设置每个分块的宽度百分比，例如设置1/4的宽度来形成四分屏效果。布局代码示例可能如下：

<div class="layui-row">
  <div class="layui-col-md3 layui-col-offset-md9"> <!-- 设备树 -->
    <ul id="deviceTree"></ul>
  </div>
  <div class="layui-col-md3"> <!-- 四分屏 -->
    <div id="splitScreen" lay-split="{ratio: [30, 70]}" ></div>
  </div>
</div>

在这个例子中，`.layui-col-md3` 和 `.layui-col-md3 layui-col-offset-md9` 分别设置了左右两侧的列宽，`lay-split` 则是layui提供的分割布局组件。