页面适配手机,新增皮肤切换功能

view/admin/admin/admin_log.html

@@ -34,7 +34,7 @@
                     <div>
 
                     </div>
-                    <div>
+                    <div style="overflow: auto;">
                         <table class="layui-table">
                             <colgroup>
                                 <col width="150">

view/admin/admin/index.html

@@ -34,7 +34,7 @@
                     <div>
                         <a class="layui-btn" href="{:url('Admin/create')}">添加管理员</a>
                     </div>
-                    <div>
+                    <div style="overflow: auto;">
                         <table class="layui-table">
                             <thead>
                                 <tr>

view/admin/admin_group/index.html

@@ -34,7 +34,7 @@
                             <a class="layui-btn" href="{:url('AdminGroup/create')}">添加分组</a>
                         </div>
                     </div>
-                    <div>
+                    <div style="overflow: auto;">
                         <table class="layui-table">
                             <thead>
                                 <tr>

view/admin/admin_permission/index.html

@@ -31,8 +31,9 @@
                     </span>
                 </div>
                 <div class="main-container">
-                    
-                    <div>
+
+                    <div style="overflow: auto;">
+
                         <table class="layui-table">
                             <thead>
                                 <tr>
@@ -44,7 +45,7 @@
                             </thead>
                             <tbody>
                                 {volist name='list' id='vo'}
-                                    
+
                                 <tr class="item" data-id="{$vo.id}" data-is-log="{$vo->getData('is_log')}">
                                     <td>{$vo.id}</td>
                                     <td>
@@ -53,27 +54,29 @@
                                     </td>
                                     <td>
                                         <span>{$vo.app}/{$vo.controller}/{$vo.action}</span>
-                                        <div class="layui-btn layui-btn-sm set-url" data-url="{$vo.app}/{$vo.controller}/{$vo.action}">设置</div>
+                                        <div class="layui-btn layui-btn-sm set-url"
+                                            data-url="{$vo.app}/{$vo.controller}/{$vo.action}">设置</div>
                                     </td>
                                     <td>
                                         <div class="layui-btn-container">
-                                            <div class="layui-btn layui-btn-sm is-log" >{$vo.is_log}</div>
+                                            <div class="layui-btn layui-btn-sm is-log">{$vo.is_log}</div>
                                             <div class="layui-btn layui-btn-sm delete">删除</div>
                                         </div>
                                     </td>
                                 </tr>
                                 {/volist}
-                               {if condition="count($list) eq 0" }
-                                   <tr>
-                                       <td colspan="3">暂无数据</td>
-                                   </tr>
-                               {/if}
+                                {if condition="count($list) eq 0" }
+                                <tr>
+                                    <td colspan="3">暂无数据</td>
+                                </tr>
+                                {/if}
                             </tbody>
                         </table>
                         <div>
                             {$list->render()|raw}
                         </div>
                     </div>
+
                 </div>
             </div>
         </div>
@@ -82,75 +85,75 @@
         {include file="common/_footer"}
 
         <script>
-        
-            layui.use(['layer'],function(){
-                $('.set-name').click(function(){
+
+            layui.use(['layer'], function () {
+                $('.set-name').click(function () {
                     var item = this;
                     layer.prompt({
-                        value:$(item).data('name')
-                    },function(value,index){
-                        $.post('{:url("AdminPermission/update")}',{
-                            id:$(item).parents('tr').data('id'),
-                            name:value
-                        },function(result){
+                        value: $(item).data('name')
+                    }, function (value, index) {
+                        $.post('{:url("AdminPermission/update")}', {
+                            id: $(item).parents('tr').data('id'),
+                            name: value
+                        }, function (result) {
                             layer.close(index)
                             $(item).siblings('span').text(value)
                         })
                     })
                 })
-                $('.set-url').click(function(){
+                $('.set-url').click(function () {
                     var item = this;
                     layer.prompt({
-                        value:$(item).data('url')
-                    },function(value,index){
-                        $.post('{:url("AdminPermission/update")}',{
-                            id:$(item).parents('tr').data('id'),
-                            url:value
-                        },function(result){
+                        value: $(item).data('url')
+                    }, function (value, index) {
+                        $.post('{:url("AdminPermission/update")}', {
+                            id: $(item).parents('tr').data('id'),
+                            url: value
+                        }, function (result) {
                             layer.close(index)
                             $(item).siblings('span').text(value)
                         })
                     })
                 })
 
-                $('.delete').click(function(){
+                $('.delete').click(function () {
                     var item = this;
-                    layer.confirm('确定要删除吗?',function(){
-                        $.get('{:url("AdminPermission/delete")}',{
-                            id:$(item).parents('tr').data('id')
-                        },function(result){
-                            if(result.code == 0){
+                    layer.confirm('确定要删除吗?', function () {
+                        $.get('{:url("AdminPermission/delete")}', {
+                            id: $(item).parents('tr').data('id')
+                        }, function (result) {
+                            if (result.code == 0) {
                                 layer.msg('删除成功');
                                 $(item).parents('tr').remove();
-                            }else{
+                            } else {
                                 layer.msg(result.msg)
                             }
                         })
                     })
                 })
 
-                $('.is-log').click(function(){
+                $('.is-log').click(function () {
                     var item = this;
                     var isLog = $(item).parents('tr').data('is-log')
-                    if(isLog == 0){
+                    if (isLog == 0) {
                         isLog = 1
-                    }else{
+                    } else {
                         isLog = 0
                     }
-                    $.post('{:url("AdminPermission/update")}',{
-                        id:$(item).parents('tr').data('id'),
-                        is_log:isLog
-                    },function(){
-                        if(isLog == 1){
+                    $.post('{:url("AdminPermission/update")}', {
+                        id: $(item).parents('tr').data('id'),
+                        is_log: isLog
+                    }, function () {
+                        if (isLog == 1) {
                             $(item).text('记录')
-                        }else{
+                        } else {
                             $(item).text('不记录')
 
                         }
                     })
                 })
             })
-        
+
         </script>
     </div>
 </body>

view/admin/common/_header.html

@@ -1,14 +1,14 @@
 <div class="layui-header">
     <a class="layui-logo" href="/">{:get_system_config('site_name')}</a>
-    <!-- 头部区域（可配合layui已有的水平导航） -->
-    <ul class="layui-nav layui-layout-left">
+    <!-- 头部区域（可配合layui已有的水平导航） PC端显示 -->
+    <ul class="layui-nav layui-layout-left layui-hide-xs pc-nav-container">
         <li class="layui-nav-item header-nav-item" data-name="Index" ><a href="{:url('admin/Index/index')}">首页</a></li>
         <li class="layui-nav-item header-nav-item" data-name="User" ><a href="{:url('admin/User/index')}">用户管理</a></li>
         <li class="layui-nav-item header-nav-item" data-name="File" ><a href="{:url('admin/File/index')}">文件管理</a></li>
         <li class="layui-nav-item header-nav-item" data-name="Admin" ><a href="{:url('admin/Admin/index')}">管理员管理</a></li>
         <li class="layui-nav-item header-nav-item" data-name="System" ><a href="{:url('admin/System/index')}">系统设置</a></li>
     </ul>
-    <ul class="layui-nav layui-layout-right">
+    <ul class="layui-nav layui-layout-right layui-hide-xs">
         <li class="layui-nav-item header-nav-item" data-name="Login">
             <a href="javascript:;">
                 <img src="{$admin.avatar}" class="layui-nav-img">
@@ -22,4 +22,64 @@
 
         <li class="layui-nav-item"><a href="{:url('Login/logout')}">退出</a></li>
     </ul>
-</div>
+
+
+    <!-- 手机端显示 -->
+
+    <div class="left-bottom-options layui-show-xs-block layui-hide-md layui-icon layui-icon-right">
+        
+    </div>
+
+    <div class="layui-nav layui-layout-right layui-show-xs-block layui-hide-md">
+        <li class="layui-nav-item">
+            <a href="javascript:;" class="mobile-nav-current-title">菜单</a>
+            <dl class="layui-nav-child mobile-nav-container"> <!-- 二级菜单 -->
+
+            </dl>
+        </li>
+        <li class="layui-nav-item header-nav-item" data-name="Login">
+            <a href="javascript:;">
+                <img src="{$admin.avatar}" class="layui-nav-img">
+            </a>
+            <dl class="layui-nav-child">
+                <dd><a href="{:url('Admin/edit')}">基本资料</a></dd>
+            <dd><a href="{:url('Admin/password')}">安全设置</a></dd>
+            <dd><a href="{:url('Login/logout')}">退出</a></dd>
+            </dl>
+        </li>
+    </div>
+</div>
+
+<div class="tpl" style="display: none;">
+    <dd class="mobile-nav-item header-nav-item"><a href="{:url('Admin/edit')}">基本资料</a></dd>
+</div>
+<script>
+
+    $(function(){
+        $('.pc-nav-container').children().each(function(n,e){
+            var nav = $('.tpl .mobile-nav-item').clone();
+
+            nav.data('name',$(e).data('name'))
+
+            nav.html($(e).html())
+
+            nav.appendTo('.mobile-nav-container')
+
+        })
+
+        $('.left-bottom-options').click(function(){
+            layer.open({
+                type:1,
+                content:$('.layui-side'),
+                anim:3,
+                offset:'l',
+                area:['60%','100%'],
+                shadeClose:true,
+                title:false,
+                closeBtn:false,
+                
+            })
+        })
+    })
+
+</script>

view/admin/common/_require.html

@@ -1,42 +1,76 @@
 <link rel="stylesheet" href="/static/css/reset.css">
 <link rel="stylesheet" href="/static/css/pagination.css">
 <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
+<link rel="stylesheet" href="/static/css/common.css">
 <script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
+<script src="/static/lib/jquery/jquery.cookie.js"></script>
 <script src="/static/lib/layui/layui.js"></script>
 <script src="/static/js/common.js"></script>
 
 <style>
-    .main-container{
+    .main-container {
         margin-top: 10px;
     }
-    .layui-table img{
+
+    .layui-table img {
         max-width: 60px;
-        max-height: 60px;;;
+        max-height: 60px;
     }
 </style>
 
 <script>
+
     //JavaScript代码区域
-    layui.use(['element','layer'], function () {
+    layui.use(['element', 'layer', 'util'], function () {
         var element = layui.element;
+        var util = layui.util;
+        var defaultCookieSetting = {
+            path:'/',
+            expires: 7,
+        }
+        //执行
+        util.fixbar({
+            bar1: '&#xe656;'
+            , click: function (type) {
+                console.log(type);
+                if (type === 'bar1') {
+                    var skinName = $.cookie('skin-name')
+                    $('body').removeClass()
+                    if(skinName == 'skin-1'){
+                        $.cookie('skin-name','skin-0',defaultCookieSetting)
+                        $('body').addClass('skin-0')
+                    }else{
+                        $.cookie('skin-name','skin-1',defaultCookieSetting)
+                        $('body').addClass('skin-1')
+
+                    }
+                }
+            }
+        });
+        $('.layui-side').addClass('layui-hide-xs')
 
     });
 
-    $(function(){
-        if(typeof currentHeaderNavItem != "undefined"){
-            $('.header-nav-item').each(function(i,e){
-                if($(e).data('name') == currentHeaderNavItem){
-                    $(e).addClass('layui-this')
-                }
-            })
-        }
-        if(typeof currentLeftNavItem != "undefined"){
-            $('.left-nav-item').each(function(i,e){
-                if($(e).data('name') == currentLeftNavItem){
-                    $(e).addClass('layui-this')
-                }
-            })
-        }
+    $(function () {
+        var skinName = $.cookie('skin-name')
+
+        $('body').addClass(skinName)
+        setTimeout(() => {
+            if (typeof currentHeaderNavItem != "undefined") {
+                $('.header-nav-item').each(function (i, e) {
+                    if ($(e).data('name') == currentHeaderNavItem) {
+                        $(e).addClass('layui-this')
+                    }
+                })
+            }
+            if (typeof currentLeftNavItem != "undefined") {
+                $('.left-nav-item').each(function (i, e) {
+                    if ($(e).data('name') == currentLeftNavItem) {
+                        $(e).addClass('layui-this')
+                    }
+                })
+            }
+        }, 1);
     })
 </script>
-{:get_system_config('site_tongji')}
+{:get_system_config('site_tongji')}

view/admin/file/index.html

@@ -32,7 +32,7 @@
                 </div>
                 <div class="main-container">
                     <div>
-                        <form action="" lay-filter="filter" class="layui-form">
+                        <form action="" lay-filter="filter" class="layui-form layui-form-pane ">
                             <input type="hidden" name="type" value="{$Request.param.type|default=1}">
                             <div class="layui-form-item">
                                 <div class="layui-inline">
@@ -43,8 +43,8 @@
                                             <option value="0">未使用(仅供预览)</option>
                                             <option value="1">已使用</option>
                                             <option value="2">已删除</option>
-                                            <option value="3">已清除</option>                                            
-                                        </select>     
+                                            <option value="3">已清除</option>
+                                        </select>
                                     </div>
 
                                 </div>
@@ -55,7 +55,7 @@
 
                         </form>
                     </div>
-                    <div>
+                    <div style="overflow: auto;">
                         <table class="layui-table">
 
                             <thead>
@@ -63,7 +63,7 @@
                                     <th>ID</th>
                                     <th>预览</th>
                                     <th>文件信息</th>
-                                    <th>状态时间</th>
+                                    <th style="min-width: 200px;">状态时间</th>
                                     <th>操作</th>
                                 </tr>
                             </thead>
@@ -103,14 +103,15 @@
                                     <td>
                                         <div class="layui-btn-container">
                                             {if condition="empty($vo->getData('clear_time'))" }
-                                            {if condition="!empty($vo->getData('used_time')) && empty($vo->getData('delete_time'))" }
+                                            {if condition="!empty($vo->getData('used_time')) &&
+                                            empty($vo->getData('delete_time'))" }
                                             <div class="layui-btn layui-btn-sm force-clear">强制清除文件</div>
                                             {else /}
-                                                    <div class="layui-btn layui-btn-sm clear">清除文件</div>
+                                            <div class="layui-btn layui-btn-sm clear">清除文件</div>
                                             {/if}
                                             {/if}
                                             {if condition="empty($vo->getData('clear_time'))" }
-                                                <a class="layui-btn layui-btn-sm" href="{$vo.src}" target="_blank">下载</a>
+                                            <a class="layui-btn layui-btn-sm" href="{$vo.src}" target="_blank">下载</a>
                                             {/if}
 
                                         </div>
@@ -132,42 +133,42 @@
         {include file="common/_footer"}
 
         <script>
-            layui.use(['layer','form'],function(){
+            layui.use(['layer', 'form'], function () {
 
                 var form = layui.form;
 
-                form.val('filter',{
-                    status:'{$Request.param.status}'
+                form.val('filter', {
+                    status: '{$Request.param.status}'
                 })
 
-                $('.clear').click(function(){
+                $('.clear').click(function () {
                     var item = this;
                     console.log($(item).parents('tr').data('id'));
-                    
-                    layer.confirm('确定要清除吗?清除后不能恢复',function(){
-                        $.get('{:url("File/clear")}',{
-                            id:$(item).parents('tr').data('id')
-                        },function(result){
-                            if(result.code == 0){
+
+                    layer.confirm('确定要清除吗?清除后不能恢复', function () {
+                        $.get('{:url("File/clear")}', {
+                            id: $(item).parents('tr').data('id')
+                        }, function (result) {
+                            if (result.code == 0) {
                                 layer.msg('删除成功');
                                 $(item).parents('td').children().remove()
-                            }else{
+                            } else {
                                 layer.msg(result.msg)
                             }
                         })
                     })
                 })
-                $('.force-clear').click(function(){
+                $('.force-clear').click(function () {
                     var item = this;
 
-                    layer.confirm('确定要强制清除吗?该文件有可能正在使用',function(){
-                        $.get('{:url("File/clear")}',{
-                            id:$(item).parents('tr').data('id')
-                        },function(result){
-                            if(result.code == 0){
+                    layer.confirm('确定要强制清除吗?该文件有可能正在使用', function () {
+                        $.get('{:url("File/clear")}', {
+                            id: $(item).parents('tr').data('id')
+                        }, function (result) {
+                            if (result.code == 0) {
                                 layer.msg('删除成功');
                                 $(item).parents('td').children().remove()
-                            }else{
+                            } else {
                                 layer.msg(result.msg)
                             }
                         })

view/admin/login/index.html

@@ -54,7 +54,8 @@
                                     <div class="layui-input-block">
                                         <input type="text" name="captcha" required lay-verify="required"
                                             placeholder="请输入验证码" autocomplete="off" value="test(直接登陆即可)" class="layui-input">
-                                            <img class="captcha" src="/api/Captcha/build" onclick="this.src = '/api/Captcha/build?v='+Math.random()" style="cursor: pointer" alt="">
+                                            <img class="captcha" src="/api/Captcha/build" onclick="this.src = '/api/Captcha/build?v='+Math.random()" style="cursor: pointer;width: 
+                                            100%;" alt="">
                                     </div>
                                     
                                 </div>

view/admin/user/edit.html

@@ -55,11 +55,10 @@
                                         <div class="layui-form-item">
                                             <div class="layui-form-label">密码</div>
                                             <div class="layui-input-block">
-                                                <input type="password" name="password"
-                                                    value="" class="layui-input">
+                                                <input type="password" name="password" value="" class="layui-input">
                                             </div>
                                         </div>
-                                        
+
                                         <div class="layui-form-item">
                                             <div class="layui-form-label">头像</div>
                                             <div class="layui-input-block">
@@ -67,10 +66,11 @@
                                                     <div class="layui-btn upload-admin-avatar">上传</div>
                                                 </div>
                                                 <div>
-                                                    <img class="layui-circle admin-avatar" style="width: 80px" src="{$user.avatar}"
-                                                        alt="{$user.avatar}" srcset="">
+                                                    <img class="layui-circle admin-avatar" style="width: 80px"
+                                                        src="{$user.avatar}" alt="{$user.avatar}" srcset="">
                                                 </div>
-                                                <input type="hidden" name="avatar" value="{$user->getData('avatar')}" class="layui-input">
+                                                <input type="hidden" name="avatar" value="{$user->getData('avatar')}"
+                                                    class="layui-input">
                                             </div>
                                         </div>
                                         <div class="layui-form-item">
@@ -91,7 +91,7 @@
         <script>
             layui.config({
                 base: '/static/lib/layui/lib/cropper/'
-            }).use(['layer', 'upload', 'croppers','form'], function () {
+            }).use(['layer', 'upload', 'croppers', 'form'], function () {
                 var upload = layui.upload;
                 var croppers = layui.croppers;
 
@@ -103,13 +103,13 @@
                         type: 3,
                         dir: 'user_avatar'
                     },
-                    saveW: 150 //保存宽度
-                        ,
-                    saveH: 150,
-                    mark: 1 / 1 //选取比例
-                        ,
-                    area: '900px' //弹窗宽度
-                        ,
+                    saveW: 200, //保存宽度
+                    
+                    saveH: 200,
+                    mark: 1 / 1, //选取比例
+                    
+                    area: true, //弹窗宽度
+                    
                     accept: 'images',
                     done: function (result) {
                         if (result.code == 0) {

view/admin/user/index.html

@@ -34,7 +34,7 @@
                     <div >
                         <a class="layui-btn" href="{:url('create')}"> 添加用户</a>
                     </div>
-                    <div>
+                    <div style="overflow: auto;">
                         <table class="layui-table" lay-skin="line">
                             <thead>
                                 <tr>