提示

前端(用户中心和后台)UI框架采用Layui开发，Layui官网，另外framecoder非可为统一风格还扩展了些方法和样式，具体如下：

css和组件

页面统一padding 和margin

提示

页面的padding和margin设置为15px，

/*间隔*/
.rc-pagepadding {
    padding: 15px;
}

.rc-pagemargin {
    margin: 15px;
}

默认margin和padding

.rc-padding-top-default .rc-padding-bottom-default .rc-padding-right-default .rc-padding-left-default,.rc-margin-top-default .rc-margin-bottom-default .rc-margin-right-default .rc-margin-left-default, 分表表示上下左右四个内外边距15px

pannel面板

面板示例

 <div class=" rc-pannel rc-margin-top-default">
    <div class=" rc-pannel-header">
        <div class="rc-flex layui-form toolbar rc-flex-justify-between">
            <div class=" rc-flex rc-flex-vertical-center ">
            </div>
            <div>
                <a href="/admin/Admin/add" class="layui-btn layui-btn-primary layui-btn-sm" id="install"><i class="iconfont">&#xe60e;</i> 添加管理员</a>

            </div>
        </div>

    </div>
    <div class="rc-pannel-body layui-form rc-pagepadding ">
    </div>
    <div class="rc-pannel-footer">
    </div>
</div>

表格操作按钮

加上rc-opbar类名 ，按钮上加上 error 为警告色按钮，info 为提示色按钮

示例

<td class="rc-opbar">
    <a class="info" href="/admin/Admin/edit?id=<?php echo $admin->id ?>"><i class="iconfont">&#xe606;</i> 编辑</a>
    <a class="error delete"><i class="iconfont">&#xe607;</i> 删除 </a>
</td>

更换主题色

提示

对当前配色不满意，可在theme.css 中更换 --primary-color: #255295

其他组件

请参考后台模板中的代码

js

轻量级提示框

正确提示

toastr_success("添加成功", function() {
    //提示后操作
});

错误提示

toastr_error("错误信息",function(){
    //提示后操作
});

checkbox 全选/取消全选 和 获取选中值

提示

全选checkbox的lay-filter属性为checkAll， 每个需要选中的checkbox的类名必须为item_checkbox， 值可以为任意值，获取选中的值调用getAllChkIds()方法

代码示例

<input type="checkbox" lay-filter="checkAll" autocomplete="off" />
<input type="checkbox" class="item_checkbox" value="1"/> 
<input type="checkbox" class="item_checkbox" value="2"/> 
<input type="checkbox" class="item_checkbox" value="3"/> 
<input type="checkbox" class="item_checkbox" value="4"/> 

//获取选中值
getAllChkIds();

内置图标

提示

查看图标