diff --git a/data/log.json b/data/log.json
new file mode 100644
index 0000000..397ed62
--- /dev/null
+++ b/data/log.json
@@ -0,0 +1,17 @@
+{
+  "code": 0,
+  "msg": "",
+  "count": 12,
+  "data": [
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+			"timeConsuming": 100,
+			"isNnormal": true,
+			"operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    }
+  ]
+}
diff --git a/index.html b/index.html
index f4b07fe..a361ce1 100644
--- a/index.html
+++ b/index.html
@@ -130,7 +130,7 @@
                 </li>
 				<li class="layui-nav-item">
 				    <a href="javascript:;">
-				        <i class="layui-icon">&#xe716;</i> 其他页面
+				        <i class="iconfont icon-other"></i> 其他页面
 				    </a>
 				    <dl class="layui-nav-child">
 				        <dd><a href="javascript:;" path="pages/other/login.html" tab-id="12-1"><i class="iconfont icon-denglu"></i> 登陆页面</a></dd>
diff --git a/pages/system/system-log.html b/pages/system/system-log.html
index 27df0b5..f51a14a 100644
--- a/pages/system/system-log.html
+++ b/pages/system/system-log.html
@@ -1,10 +1,184 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
     <meta charset="UTF-8">
     <title>系统日志</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="../../css/okadmin.css">
+    <link rel="stylesheet" href="../../lib/nprogress/nprogress.css">
 </head>
 <body>
-    <h1>系统日志</h1>
+<div class="ok-body">
+    <!--面包屑导航区域-->
+    <div class="ok-body-breadcrumb">
+        <span class="layui-breadcrumb">
+            <a><cite>首页</cite></a>
+            <a><cite>系统管理</cite></a>
+            <a><cite>系统日志</cite></a>
+        </span>
+        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
+            <i class="layui-icon layui-icon-refresh"></i>
+        </a>
+    </div>
+    <!--模糊搜索区域-->
+    <div class="layui-row">
+        <form class="layui-form layui-col-md12 ok-search">
+            <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
+            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
+            <input class="layui-input" placeholder="请输入用户名" autocomplete="off">
+            <button class="layui-btn" lay-submit="" lay-filter="search">
+                <i class="layui-icon layui-icon-search"></i>
+            </button>
+        </form>
+    </div>
+    <!--工具栏-->
+    <okToolbar>
+        <button class="layui-btn layui-btn-normal" id="batchEnabled">
+            <i class="iconfont icon-shangsheng"></i>批量启用
+        </button>
+        <button class="layui-btn layui-btn-warm" id="batchDisabled">
+            <i class="iconfont icon-web-icon-"></i>批量停用
+        </button>
+        <button class="layui-btn layui-btn-danger" id="batchDel">
+            <i class="layui-icon layui-icon-delete"></i>批量删除
+        </button>
+        <button class="layui-btn" id="addUser">
+            <i class="layui-icon">&#xe61f;</i>添加用户
+        </button>
+        <span>共有数据：<i id="countNum"></i> 条</span>
+    </okToolbar>
+    <!--数据表格-->
+    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
+</div>
+<!--js逻辑-->
+<script src="../../lib/layui/layui.js"></script>
+<script src="../../lib/nprogress/nprogress.js"></script>
+<script>
+    // NProgress.start();
+    // window.onload = function () {
+    //     NProgress.done();
+    // }
+    layui.config({
+        base: "../../lib/layui_plugins/"
+    }).extend({
+        okLayer: "okLayer/okLayer",
+        okUtils: "okUtils/okUtils"
+    }).use(["element", "table", "form", "jquery", "laydate", "okLayer", "okUtils"], function () {
+        var table = layui.table;
+        var form = layui.form;
+        var $ = layui.jquery;
+        var laydate = layui.laydate;
+        var okLayer = layui.okLayer;
+        var okUtils = layui.okUtils;
+
+        laydate.render({elem: "#startTime", type: "datetime"});
+        laydate.render({elem: "#endTime", type: "datetime"});
+
+        table.render({
+            elem: "#tableId",
+            url: "../../data/log.json",
+            limit: 10,
+            page: true,
+			toolbar: true,
+			toolbar: 'default',
+            cols: [[
+                {type: "checkbox"},
+                {field: "id", title: "ID", width: 80, sort: true},
+                {field: "url", title: "请求地址", width: 230},
+                {field: "method", title: "操作方式", width: 100},
+                {field: "ip", title: "操作IP", width: 100},
+                {field: "timeConsuming", title: "耗时", width: 100},
+                {field: "status", title: "状态", width: 100, templet: "#statusTpl"},
+                {field: "operator", title: "操作人", width: 200},
+                {field: "operatingTime", title: "操作时间", width: 200},
+                {title: "操作", width: 200, align: 'center', templet: "#operationTpl"}
+            ]],
+            done: function (res, curr, count) {
+                $("#countNum").text(count);
+            }
+        });
+
+        form.on("submit(search)", function () {
+            layer.msg("正在查询，请稍后...");
+            return false;
+        });
+
+        table.on("tool(tableFilter)", function (obj) {
+            var data = obj.data;
+            var layEvent = obj.event;
+            if (layEvent === "edit") {
+                okLayer.open("编辑用户", "user-edit.html", "90%", "90%", true)
+            } else if (layEvent === "del") {
+                okLayer.confirm("确定要删除吗？", function () {
+                    okUtils.ajax("/user/batchDel", "post", {idsStr: data.id}).done(function (response) {
+                        console.log(response)
+                        okLayer.tableOperationMsg("删除成功");
+                    }).fail(function (error) {
+                        console.log(error)
+                    });
+                })
+            }
+        });
+
+        $("#batchEnabled").click(function () {
+            okLayer.confirm("确定要批量启用吗？", function (index) {
+                layer.close(index);
+                var idsStr = okLayer.tableCheck(table);
+                console.log("idsStr-->" + idsStr)
+                // ajax请求后台api
+                if (idsStr) {
+                    okUtils.ajax("/user/batchNormal", "post", {idsStr: idsStr}).done(function (response) {
+                        console.log(response)
+                        okLayer.tableOperationMsg("批量启用成功");
+                    }).fail(function (error) {
+                        console.log(error)
+                    });
+                }
+            });
+        })
+
+        $("#batchDisabled").click(function () {
+            okLayer.confirm("确定要批量停用吗？", function (index) {
+                layer.close(index);
+                var idsStr = okLayer.tableCheck(table);
+                if (idsStr) {
+                    okUtils.ajax("/user/batchStop", "post", {idsStr: idsStr}).done(function (response) {
+                        console.log(response)
+                        okLayer.tableOperationMsg("批量停用成功");
+                    }).fail(function (error) {
+                        console.log(error)
+                    });
+                }
+            });
+        })
+
+        $("#batchDel").click(function () {
+            okLayer.confirm("确定要批量删除吗？", function (index) {
+                layer.close(index);
+                var idsStr = okLayer.tableCheck(table);
+                if (idsStr) {
+                    okUtils.ajax("/user/batchDel", "post", {idsStr: idsStr}).done(function (response) {
+                        console.log(response)
+                        okLayer.tableOperationMsg("批量删除成功");
+                    }).fail(function (error) {
+                        console.log(error)
+                    });
+                }
+            });
+        })
+
+        $("#addUser").click(function () {
+            okLayer.open("添加用户", "user-add.html", "90%", "90%", true)
+        })
+    })
+</script>
+<!--模板-->
+<script type="text/html" id="statusTpl">
+    {{ d.role == 0 ? '正常' : '异常'}}
+</script>
+<script type="text/html" id="operationTpl">
+    <a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
+    <a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
+</script>
 </body>
 </html>
