修改样式

app/admin/view/auth/apply.html

@@ -14,8 +14,7 @@
 {block name="script"}
 <script>
     window.RoleAction = new function () {
-        this.data = {}, this.ztree = null;
-        this.setting = {
+        this.data = {}, this.ztree = null, this.setting = {
             view: {showLine: false, showIcon: false, dblClickExpand: false},
             check: {enable: true, nocheck: false, chkboxType: {"Y": "ps", "N": "ps"}},
             callback: {

app/admin/view/auth/form.html

@@ -5,14 +5,14 @@
         <label class="layui-form-item relative block">
             <span class="color-green font-w7">访问权限名称</span>
             <span class="color-desc margin-left-5">Role Name</span>
-            <input type="text" name="title" class="layui-input" value='{$vo.title|default=""}' required placeholder="请输入访问权限名称">
+            <input type="text" name="title" maxlength="100" class="layui-input" value='{$vo.title|default=""}' required placeholder="请输入访问权限名称">
             <span class="help-block">访问权限名称需要保持不重复，在给用户授权时需要根据名称选择！</span>
         </label>
 
         <label class="layui-form-item relative block">
             <span class="color-green font-w7">访问权限描述</span>
             <span class="color-desc margin-left-5">Role Remark</span>
-            <textarea placeholder="请输入访问权限描述" class="layui-textarea" name="desc">{$vo.desc|default=""}</textarea>
+            <textarea placeholder="请输入访问权限描述" maxlength="200" class="layui-textarea" name="desc">{$vo.desc|default=""}</textarea>
         </label>
 
     </div>

app/admin/view/auth/index.html

@@ -40,8 +40,8 @@
             <td class='list-table-sort-td'>
                 <label><input data-action-blur="{:request()->url()}" data-value="id#{$vo.id};action#sort;sort#{value}" data-loading="false" value="{$vo.sort}" class="list-sort-input"></label>
             </td>
-            <td class='text-left'>{$vo.title|default='-'}</td>
-            <td class='text-left'>{$vo.desc|default="没有写描述哦！"}</td>
+            <td class='text-left nowrap'>{$vo.title|default='-'}</td>
+            <td class='text-left nowrap'>{$vo.desc|default="没有写描述哦！"}</td>
             <td class="text-left nowrap">{$vo.create_at|format_datetime}</td>
             <td class='text-left nowrap'>{eq name='vo.status' value='0'}<span class="color-red">已禁用</span>{else}<span class="color-green">已激活</span>{/eq}</td>
             <td class='text-left nowrap'>

app/admin/view/config/index.html

@@ -45,12 +45,13 @@
             {if auth('storage')}<a data-title="配置{$v}" data-modal="{:url('storage')}?type={$k}" class="layui-btn layui-btn-sm layui-btn-primary">{$v}</a>{else}<a class="layui-btn layui-btn-sm layui-btn-primary">{$v}</a>{/if}
             {/if}{/foreach}
         </div>
-        <div class="margin-top-20 nowrap">
+        <div class="margin-top-20 nowrap" style="float:left;width:100%">
             <p><b>本地服务器存储</b>：文件直接上传到本地服务器的 `static/upload` 目录，不支持大文件上传，占用服务器磁盘空间，访问时消耗服务器带宽流量。</p>
             <p><b>七牛云对象存储</b>：文件直接上传到七牛云存储空间，支持大文件上传，不占用服务器空间及服务器带宽流量，支持 CDN 加速访问，访问量大时推荐使用。</p>
             <p><b>阿里云OSS存储</b>：文件直接上传到阿里云 OSS 存储空间，支持大文件上传，不占用服务器空间及服务器带宽流量，支持 CDN 加速访问，访问量大时推荐使用。</p>
             <p><b>腾讯云COS存储</b>：文件直接上传到腾讯云 COS 存储空间，支持大文件上传，不占用服务器空间及服务器带宽流量，支持 CDN 加速访问，访问量大时推荐使用。</p>
         </div>
+        <div style="clear: both"></div>
     </div>
 </div>
 
@@ -63,7 +64,7 @@
             <span class="color-green font-w7">网站名称</span><span class="margin-left-5 color-desc">Website</span>
             <label class="relative block">
                 <input readonly value="{:sysconf('site_name')}" class="layui-input layui-bg-gray">
-                <a data-copy="{:sysconf('site_name')}" class="iconfont icon-copy input-right-icon"></a>
+                <a data-copy="{:sysconf('site_name')}" class="layui-icon layui-icon-release input-right-icon"></a>
             </label>
             <div class="help-block">网站名称及网站图标，将显示在浏览器的标签上。</div>
         </div>
@@ -71,7 +72,7 @@
             <span class="color-green font-w7">管理程序名称</span><span class="margin-left-5 color-desc">Name</span>
             <label class="relative block">
                 <input readonly value="{:sysconf('app_name')}" class="layui-input layui-bg-gray">
-                <a data-copy="{:sysconf('app_name')}" class="iconfont icon-copy input-right-icon"></a>
+                <a data-copy="{:sysconf('app_name')}" class="layui-icon layui-icon-release input-right-icon"></a>
             </label>
             <div class="help-block">管理程序名称，将显示在后台左上角标题。</div>
         </div>
@@ -79,7 +80,7 @@
             <span class="color-green font-w7">管理程序版本</span><span class="margin-left-5 color-desc">Version</span>
             <label class="relative block">
                 <input readonly value="{:sysconf('app_version')}" class="layui-input layui-bg-gray">
-                <a data-copy="{:sysconf('app_version')}" class="iconfont icon-copy input-right-icon"></a>
+                <a data-copy="{:sysconf('app_version')}" class="layui-icon layui-icon-release input-right-icon"></a>
             </label>
             <div class="help-block">管理程序版本，将显示在后台左上角标题。</div>
         </div>
@@ -87,7 +88,7 @@
             <span class="color-green font-w7">公网备案号</span><span class="margin-left-5 color-desc">Baian</span>
             <label class="relative block">
                 <input readonly value="{:sysconf('beian')?:'-'}" class="layui-input layui-bg-gray">
-                <a data-copy="{:sysconf('beian')}" class="iconfont icon-copy input-right-icon"></a>
+                <a data-copy="{:sysconf('beian')}" class="layui-icon layui-icon-release input-right-icon"></a>
             </label>
             <p class="help-block">公网备案号，可以在<a target="_blank" href="http://beian.miit.gov.cn">备案管理中心</a>查询获取，将在登录页面下面显示。</p>
         </div>
@@ -95,7 +96,7 @@
             <span class="color-green font-w7">网站备案号</span><span class="margin-left-5 color-desc">Miitbeian</span>
             <label class="relative block">
                 <input readonly value="{:sysconf('miitbeian')?:'-'}" class="layui-input layui-bg-gray">
-                <a data-copy="{:sysconf('miitbeian')}" class="iconfont icon-copy input-right-icon"></a>
+                <a data-copy="{:sysconf('miitbeian')}" class="layui-icon layui-icon-release input-right-icon"></a>
             </label>
             <div class="help-block">网站备案号，可以在<a target="_blank" href="http://beian.miit.gov.cn">备案管理中心</a>查询获取，将显示在登录页面下面。</div>
         </div>
@@ -103,7 +104,7 @@
             <span class="color-green font-w7">网站版权信息</span><span class="margin-left-5 color-desc">Copyright</span>
             <label class="relative block">
                 <input readonly value="{:sysconf('site_copy')}" class="layui-input layui-bg-gray">
-                <a data-copy="{:sysconf('site_copy')}" class="iconfont icon-copy input-right-icon"></a>
+                <a data-copy="{:sysconf('site_copy')}" class="layui-icon layui-icon-release input-right-icon"></a>
             </label>
             <div class="help-block">网站版权信息，在后台登录页面显示版本信息并链接到备案到信息备案管理系统。</div>
         </div>

app/admin/view/index/index-left.html

@@ -1,8 +1,8 @@
 <div class="layui-side notselect">
-    <a class="layui-logo layui-elip" href="{:url('@')}" title="{:sysconf('app_name')}">
+    <a class="layui-logo layui-elip" href="{:sysuri('@')}" title="{:sysconf('app_name')}">
         {:sysconf('app_name')} {if sysconf('app_version')}<sup>{:sysconf('app_version')}</sup>{/if}
     </a>
-    <a class="layui-logo-mini layui-elip" href="{:url('@')}" title="{:sysconf('app_name')}">
+    <a class="layui-logo-mini layui-elip" href="{:sysuri('@')}" title="{:sysconf('app_name')}">
         <span class="headimg headimg-xs" data-lazy-src="{:sysconf('site_icon')}"></span>
     </a>
     <div class="layui-side-scroll">

app/admin/view/index/index-top.html

@@ -6,7 +6,7 @@
             </a>
         </li>
         <li class="layui-nav-item" lay-unselect>
-            <a class="layui-logo-hide layui-elip" href="{:url('@')}" title="{:sysconf('app_name')}">
+            <a class="layui-logo-hide layui-elip" href="{:sysuri('@')}" title="{:sysconf('app_name')}">
                 <span class="headimg headimg-xs" data-lazy-src="{:sysconf('site_icon')}"></span>
             </a>
         </li>
@@ -24,13 +24,13 @@
         {if session('user.username')}
         <li class="layui-nav-item">
             <dl class="layui-nav-child">
-                <dd lay-unselect><a data-modal="{:url('admin/index/info',['id'=>session('user.id')])}"><i class="layui-icon layui-icon-set-fill"></i> 基本资料</a></dd>
-                <dd lay-unselect><a data-modal="{:url('admin/index/pass',['id'=>session('user.id')])}"><i class="layui-icon layui-icon-component"></i> 安全设置</a></dd>
+                <dd lay-unselect><a data-modal="{:sysuri('admin/index/info',['id'=>session('user.id')])}"><i class="layui-icon layui-icon-set-fill"></i> 基本资料</a></dd>
+                <dd lay-unselect><a data-modal="{:sysuri('admin/index/pass',['id'=>session('user.id')])}"><i class="layui-icon layui-icon-component"></i> 安全设置</a></dd>
                 {if isset($isSuper) and $isSuper}
-                <dd lay-unselect><a data-load="{:url('admin/api.runtime/push')}"><i class="layui-icon layui-icon-template-1"></i> 缓存加速</a></dd>
-                <dd lay-unselect><a data-load="{:url('admin/api.runtime/clear')}"><i class="layui-icon layui-icon-fonts-clear"></i> 清理缓存</a></dd>
+                <dd lay-unselect><a data-load="{:sysuri('admin/api.runtime/push')}"><i class="layui-icon layui-icon-template-1"></i> 缓存加速</a></dd>
+                <dd lay-unselect><a data-load="{:sysuri('admin/api.runtime/clear')}"><i class="layui-icon layui-icon-fonts-clear"></i> 清理缓存</a></dd>
                 {/if}
-                <dd lay-unselect><a data-load="{:url('admin/login/out')}" data-confirm="确定要退出登录吗？"><i class="layui-icon layui-icon-release"></i> 退出登录</a></dd>
+                <dd lay-unselect><a data-load="{:sysuri('admin/login/out')}" data-confirm="确定要退出登录吗？"><i class="layui-icon layui-icon-release"></i> 退出登录</a></dd>
             </dl>
             <a class="layui-elip">
                 <span class="headimg" data-lazy-src="{:htmlentities(session('user.headimg'))}"></span>

app/admin/view/main.html

@@ -8,6 +8,10 @@
     </div>
     {/notempty}
     {/block}
-    <div class="layui-card-body">{block name='content'}{/block}</div>
+    <div class="layui-card-body">
+        <div class="layui-card-html">
+            {block name='content'}{/block}
+        </div>
+    </div>
     {block name='script'}{/block}
 </div>

app/admin/view/menu/index.html

@@ -15,7 +15,7 @@
 {/block}
 
 {block name="content"}
-<div class="layui-tab layui-tab-card think-bg-white">
+<div class="layui-tab layui-tab-card">
     <ul class="layui-tab-title">
         {foreach ['index'=>'系统菜单','recycle'=>'回 收 站'] as $k=>$v}
         {if isset($type) and $type eq $k}
@@ -62,32 +62,32 @@
 
                     {if auth("add")}
                     <!--{if $vo.spt < 2}-->
-                    <a class="layui-btn layui-btn-xs layui-btn-primary" data-title="添加子菜单" data-modal='{:url("add")}?pid={$vo.id}'>添 加</a>
+                    <a class="layui-btn layui-btn-sm layui-btn-primary" data-title="添加子菜单" data-modal='{:url("add")}?pid={$vo.id}'>添 加</a>
                     <!--{else}-->
-                    <a class="layui-btn layui-btn-xs layui-btn-disabled">添 加</a>
+                    <a class="layui-btn layui-btn-sm layui-btn-disabled">添 加</a>
                     <!--{/if}-->
                     {/if}
 
                     <!--{if auth("edit")}-->
-                    <a data-dbclick class="layui-btn layui-btn-xs" data-title="编辑菜单" data-modal='{:url("edit")}?id={$vo.id}'>编 辑</a>
+                    <a data-dbclick class="layui-btn layui-btn-sm" data-title="编辑菜单" data-modal='{:url("edit")}?id={$vo.id}'>编 辑</a>
                     <!--{/if}-->
 
                     <!--{if $vo.status eq 1 and auth("state")}-->
-                    <a class="layui-btn layui-btn-warm layui-btn-xs" data-confirm="确定要禁用菜单吗？" data-action="{:url('state')}" data-value="id#{$vo.ids};status#0" data-csrf="{:systoken('state')}">禁 用</a>
+                    <a class="layui-btn layui-btn-warm layui-btn-sm" data-confirm="确定要禁用菜单吗？" data-action="{:url('state')}" data-value="id#{$vo.ids};status#0" data-csrf="{:systoken('state')}">禁 用</a>
                     <!--{/if}-->
 
                     {else}
 
                     <!--{if auth("state")}-->
-                    <a class="layui-btn layui-btn-warm layui-btn-xs" data-confirm="确定要激活菜单吗？" data-action="{:url('state')}" data-value="id#{$vo.ids};status#1" data-csrf="{:systoken('state')}">激 活</a>
+                    <a class="layui-btn layui-btn-warm layui-btn-sm" data-confirm="确定要激活菜单吗？" data-action="{:url('state')}" data-value="id#{$vo.ids};status#1" data-csrf="{:systoken('state')}">激 活</a>
                     <!--{/if}-->
 
                     <!--{if auth("remove") and ($vo.spc<1 or $vo.status<1)}-->
-                    <a class="layui-btn layui-btn-danger layui-btn-xs" data-confirm="确定要删除菜单吗?" data-action="{:url('remove')}" data-value="id#{$vo.ids}" data-csrf="{:systoken('remove')}">删 除</a>
+                    <a class="layui-btn layui-btn-danger layui-btn-sm" data-confirm="确定要删除菜单吗?" data-action="{:url('remove')}" data-value="id#{$vo.ids}" data-csrf="{:systoken('remove')}">删 除</a>
                     <!--{/if}-->
 
                     <!--{if auth("remove") and $vo.spc>0 and $vo.status>0}-->
-                    <a class="layui-btn layui-btn-disabled layui-btn-xs">删 除</a>
+                    <a class="layui-btn layui-btn-disabled layui-btn-sm">删 除</a>
                     <!--{/if}-->
 
                     {/if}

app/admin/view/oplog/index.html

@@ -1,4 +1,4 @@
-{extend name='main'}
+{extend name='table'}
 
 {block name="button"}
 <!--{if auth("clear")}-->
@@ -12,14 +12,14 @@
 {block name="content"}
 <div class="think-box-shadow">
     {include file='oplog/index_search'}
-    <table id="oplog" data-url="{:sysuri()}" class="layui-hide" data-target-search="form.form-search"></table>
+    <table id="oplog" data-url="{:sysuri()}" data-target-search="form.form-search"></table>
 </div>
 {/block}
 
 {block name='script'}
 <script>
     $(function () {
-        $('table').layTable({
+        $('#oplog').layTable({
             sort: {field: 'id', type: 'desc'},
             cols: [[
                 {checkbox: true},

app/admin/view/table.html

@@ -0,0 +1,15 @@
+<div class="layui-card">
+    {block name='style'}{/block}
+    {block name='header'}{notempty name='title'}
+    <div class="layui-card-header notselect">
+        <span class="layui-icon layui-icon-next font-s10 color-desc margin-right-5"></span>{$title|default=''}
+        <div class="pull-right">{block name='button'}{/block}</div>
+    </div>
+    {/notempty}{/block}
+    <div class="layui-card-body">
+        <div class="layui-card-table">
+            {block name='content'}{/block}
+        </div>
+    </div>
+    {block name='script'}{/block}
+</div>

public/static/admin.js

@@ -658,22 +658,25 @@ $(function () {
             if (this.nodeName !== 'TABLE') return new Error('It is not a table tag.');
             // 动态初始化数据表
             this.id = this.id || 't' + Math.random().toString().replace('0.', '');
-            this.dataset.filter = this.getAttribute('lay-filter') || this.id;
-            this.setAttribute('lay-filter', this.dataset.filter);
+            this.dataset.dataFilter = this.getAttribute('lay-filter') || this.id;
+            this.setAttribute('lay-filter', this.dataset.dataFilter);
             // 标准化请求参数，初始化排序参数，表格插件初始化参数
             var data = {}, sort = options.initSort || options.sort || {}, option = {
                 id: elem.id, elem: elem, url: options.url || elem.dataset.url || '', where: getWhere(),
                 limit: options.limit || 15, cols: options.cols || [[]], page: options.page !== false,
             };
             // 延用工具条配置
-            if (options.title) option.title = options.title;
-            if (options.toolbar) option.toolbar = options.toolbar;
-            if (options.defaultToolbar) option.defaultToolbar = top.defaultToolbar;
             if (sort.field && sort.type) option.initSort = sort;
+            if (options.title !== undefined) option.title = options.title;
+            if (options.width !== undefined) option.width = options.width;
+            if (options.height !== undefined) option.height = options.height;
+            if (options.toolbar !== undefined) option.toolbar = options.toolbar;
+            if (options.defaultToolbar !== undefined) option.defaultToolbar = options.defaultToolbar;
+
             // 实例化表单组件
-            layui.table.render(option);
+            $(this).data('this', layui.table.render(option));
             // 排序事件处理
-            layui.table.on('sort(' + this.dataset.filter + ')', function (object) {
+            layui.table.on('sort(' + this.dataset.dataFilter + ')', function (object) {
                 (sort = object), $(elem).trigger('reload')
             });
             // 绑定选择项对象

public/static/theme/css/console.config.less

@@ -19,44 +19,47 @@
 
 // 输入框边线颜色
 @RadioBorderNormalColor: #CCC;
-@InputBorderNormalColor: #E9E9E9;
+@InputBorderNormalColor: #EEE;
 @InputBorderActiveColor: #DDD;
 
 // 基础阴影样式配置
-@MinOuterShadow: 0 2px 3px 0 rgba(0, 0, 0, .11);
-@MaxOuterShadow: 0 2px 3px 0 rgba(0, 0, 0, .22);
-@MinInsetShadow: 0 2px 5px 0 rgba(0, 0, 0, .11) inset;
-@MaxInsetShadow: 0 2px 20px 0 rgba(0, 0, 0, .11) inset;
+@ShadowMinOuter: 0 2px 3px 0 rgba(0, 0, 0, .11);
+@ShadowMaxOuter: 0 2px 3px 0 rgba(0, 0, 0, .22);
+@ShadowMinInset: 0 2px 5px 0 rgba(0, 0, 0, .11) inset;
+@ShadowMaxInset: 0 2px 20px 0 rgba(0, 0, 0, .11) inset;
 
 // 导航条颜色配置
 @TopHeaderTextColor: #333;
-@TopHeaderBackColor: #393D49;
+@TopHeaderBackColor: #FFF;
+@TopHeaderBottomLine: 1px solid #098;
+@TopHeaderNavNormalTextColor: @TopHeaderTextColor;
+@TopHeaderNavNormalBackColor: @TopHeaderBackColor;
 
 // 导航条按钮颜色
-@TopHeaderNavHoverTextColor: #EFEFEF;
-@TopHeaderNavHoverBackColor: rgba(0, 0, 0, 0.1);
-
-@TopHeaderNavNormalTextColor: #EEE;
-@TopHeaderNavNormalBackColor: rgba(0, 0, 0, 0);
-
-@TopHeaderNavActiveTextColor: #FFF;
-@TopHeaderNavActiveBackColor: #098;
+@TopHeaderNavHoverTextColor: #000;
+@TopHeaderNavHoverBackColor: rgba(0, 0, 0, 0.05);
+@TopHeaderNavActiveTextColor: #000;
+@TopHeaderNavActiveBackColor: rgba(0, 0, 0, 0.1);
 
 // 左侧菜单布局颜色
 @LeftMainBackColor: #393D49 !important;
 @LeftMainSubBackColor: rgba(0, 0, 0, .3) !important;
 
 @LeftMainNavHoverBackColor: hsla(0, 0%, 39%, .2) !important;
-@LeftMainNavHoverTextColor: #fff;
+@LeftMainNavHoverTextColor: #FFF;
 
 @LeftMainNavNormalBackColor: none;
-@LeftMainNavNormalTextColor: #fff;
+@LeftMainNavNormalTextColor: #FFF;
 
 @LeftMainNavActiveBackColor: #098;
-@LeftMainNavActiveTextColor: #fff;
+@LeftMainNavActiveTextColor: #FFF;
 
 // 加载页面背景颜色
-@LoadBackColor: #E9E7E7;
+@LoadBackColor: #EEE;
 
 // 窗口页面背景颜色
 @BodyMainBackColor: #EEE;
+
+// 左侧菜单大小
+@LayoutMiniLeftSize: 50px;
+@LayoutDefaLeftSzie: 200px;

public/static/theme/css/console.custom.less

@@ -69,11 +69,11 @@
 }
 
 .shadow {
-  box-shadow: @MaxOuterShadow;
+  box-shadow: @ShadowMaxOuter;
 }
 
 .shadow-mini {
-  box-shadow: @MinOuterShadow;
+  box-shadow: @ShadowMinOuter;
 }
 
 .shadow-none {
@@ -98,7 +98,7 @@
 .think-box-shadow {
   padding: 20px !important;
   background: #fff !important;
-  box-shadow: @MaxOuterShadow;
+  box-shadow: @ShadowMaxOuter;
   border-radius: @BoxBorderRadius;
 
   > form.layui-card {

public/static/theme/css/console.display.less

@@ -119,7 +119,7 @@ fieldset {
   border: 1px solid #009688;
 
   &:hover:not(.layui-btn-disabled) {
-    box-shadow: @MaxInsetShadow;
+    box-shadow: @ShadowMaxInset;
   }
 
   &-warm {
@@ -169,6 +169,11 @@ fieldset {
     }
   }
 
+  .layui-icon {
+    float: left;
+    margin-right: 5px;
+  }
+
   & + .layui-btn {
     margin-left: 8px;
   }
@@ -353,6 +358,7 @@ label.think-radio, label.think-checkbox {
   }
 }
 
+
 .layui-table {
   td, th {
     font-size: 12px;
@@ -398,6 +404,24 @@ label.think-radio, label.think-checkbox {
   }
 }
 
+.layui-table-page {
+  .layui-laypage {
+    .layui-laypage-prev,
+    .layui-laypage-next {
+      padding: 0 8px;
+      border-radius: 3px;
+    }
+
+    .layui-laypage-prev {
+      margin-left: 0 !important;
+    }
+
+    .layui-laypage-next {
+      margin-right: 6px !important;
+    }
+  }
+}
+
 .layui-layer-content {
   .layui-form.layui-card {
     margin: 0;
@@ -473,7 +497,7 @@ label.think-radio, label.think-checkbox {
   height: 580px;
   position: relative;
   background: url(../img/wechat/mobile_head.png) no-repeat 0 0;
-  box-shadow: @MinOuterShadow;
+  box-shadow: @ShadowMinOuter;
   border-radius: @BoxBorderRadius;
 
   .mobile-header {

public/static/theme/css/console.layout.less

@@ -16,12 +16,14 @@
 
 .layui-layout {
   > .layui-header {
-    left: 200px;
+    left: @LayoutDefaLeftSzie;
     right: 0;
     height: 50px;
     position: absolute;
     color: @TopHeaderTextColor !important;
     background: @TopHeaderBackColor !important;
+    border-bottom: @TopHeaderBottomLine !important;
+    box-sizing: content-box;
 
     > ul.layui-nav {
       margin: 0;
@@ -82,7 +84,7 @@
       }
 
       .layui-nav-child {
-        top: 50px;
+        top: 51px;
         border: 0;
         padding: 0;
         line-height: 48px;
@@ -117,7 +119,8 @@
       }
     }
 
-    .layui-nav-bar, .layui-nav-item:after {
+    .layui-nav-bar,
+    .layui-nav-item:after {
       display: none !important
     }
   }
@@ -125,6 +128,7 @@
   > .layui-side {
     top: 0;
     bottom: 0;
+    width: @LayoutDefaLeftSzie;
     position: fixed;
     overflow: hidden;
     background-color: @LeftMainBackColor;
@@ -165,6 +169,10 @@
       overflow: auto;
       position: absolute;
 
+      .layui-nav-tree {
+        width: @LayoutDefaLeftSzie;
+      }
+
       &:after {
         height: 50px;
         display: block;
@@ -196,7 +204,8 @@
           background-color: @LeftMainNavNormalBackColor;
         }
 
-        dd.layui-this, dd.layui-this > a {
+        dd.layui-this,
+        dd.layui-this > a {
           color: @LeftMainNavActiveTextColor;
           background-color: @LeftMainNavActiveBackColor;
         }
@@ -213,7 +222,8 @@
             background: @LeftMainNavHoverBackColor
           }
 
-          .nav-icon, .nav-text {
+          .nav-icon,
+          .nav-text {
             padding-left: 5px
           }
         }
@@ -223,46 +233,62 @@
 
   > .layui-body {
     top: 50px;
-    bottom: 0;
-    overflow: auto;
-    background: @BodyMainBackColor;
+    left: @LayoutDefaLeftSzie;
+    padding: 0;
 
     > .layui-card {
-      overflow: visible;
-      position: absolute;
-      min-width: 100%;
-      min-height: 100%;
-      box-shadow: none;
+      box-shadow: none !important;
       background: none !important;
 
+
+      > .layui-card-body {
+        top: 0;
+        width: 100%;
+        bottom: 0;
+        padding: 0;
+        z-index: 2;
+        overflow: auto;
+        position: absolute;
+        box-sizing: border-box;
+        background: @BodyMainBackColor;
+
+        > .layui-card-table {
+          padding: 15px;
+          box-sizing: border-box;
+        }
+
+        > .layui-card-html {
+          padding: 15px;
+          min-width: 100%;
+          position: absolute;
+          box-sizing: border-box;
+        }
+
+        > div > .layui-tab.layui-tab-card {
+          border: none;
+          box-shadow: @ShadowMaxOuter;
+
+          & > .layui-tab-content.think-box-shadow {
+            box-shadow: none;
+          }
+        }
+      }
+
       > .layui-card-header {
-        left: 200px;
+        top: 50px;
+        left: @LayoutDefaLeftSzie;
         right: 0;
-        z-index: 3;
         height: 45px;
         border: none;
+        z-index: 3;
         padding: 0 15px;
         position: fixed;
         background: #fff;
         line-height: 45px;
-        box-shadow: @MaxOuterShadow;
-      }
-
-      > .layui-card-header + .layui-card-body {
-        top: 45px;
-      }
-
-      > .layui-card-body {
-        z-index: 2;
-        padding: 15px;
-
-        > .layui-tab.layui-tab-card {
-          border: none;
-          box-shadow: @MaxOuterShadow;
-        }
+        box-shadow: @ShadowMaxOuter;
 
-        > .layui-tab.layui-tab-card > .layui-tab-content.think-box-shadow {
-          box-shadow: none;
+        & + .layui-card-body {
+          top: 45px;
         }
       }
     }
@@ -271,15 +297,15 @@
 
 .layui-layout-left-mini {
   .layui-header {
-    left: 50px;
+    left: @LayoutMiniLeftSize;
   }
 
   > .layui-body {
-    left: 50px;
+    left: @LayoutMiniLeftSize;
 
     > .layui-card {
       > .layui-card-header {
-        left: 50px;
+        left: @LayoutMiniLeftSize;
       }
     }
   }
@@ -319,8 +345,8 @@
       }
     }
 
-    &, .layui-nav-tree, .layui-side-scroll {
-      width: 50px;
+    &, .layui-nav-tree, .layui-side-scroll, .layui-side-scroll .layui-nav-tree {
+      width: @LayoutMiniLeftSize;
       text-align: center;
     }
   }