支持手机屏幕的layui后台html模板

djk88882026-03-18 12:49

login.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录 - 手机端迷你系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">
    <style>
        /* 全局适配手机 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #f5f5f5;
            font-size: 14px;
        }
        /* 登录容器 */
        .login-container {
            width: 90%;
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .login-title {
            text-align: center;
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;
            font-weight: 600;
        }
        .layui-form-item {
            margin-bottom: 15px;
        }
        .layui-btn {
            width: 100%;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
        }
        /* 适配小屏手机 */
        @media screen and (max-width: 375px) {
            .login-container {
                margin: 30px auto;
                padding: 15px;
            }
            .layui-btn {
                height: 40px;
                line-height: 40px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-title">手机端迷你管理系统</div>
        <form class="layui-form" lay-filter="loginForm">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="loginBtn">登录</button>
                </div>
            </div>
        </form>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.8.18/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function() {
            var form = layui.form,
                layer = layui.layer;

            // 监听登录提交
            form.on('submit(loginBtn)', function(data) {
                // 模拟登录验证（实际项目替换为接口请求）
                if (data.field.username && data.field.password) {
                    layer.msg('登录成功，正在跳转...', {icon: 1, time: 1000}, function() {
                        window.location.href = 'main.html'; // 跳转到主页面
                    });
                } else {
                    layer.msg('请输入用户名和密码', {icon: 2});
                }
                return false; // 阻止表单默认提交
            });
        });
    </script>
</body>
</html>

main.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>主页面 - 手机端迷你系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">
    <style>
        /* 全局适配 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html, body {
            height: 100%;
            overflow: hidden;
            font-size: 14px;
        }
        /* 头部 */
        .header {
            height: 48px;
            line-height: 48px;
            background: #1E9FFF;
            color: #fff;
            padding: 0 15px;
            position: relative;
            z-index: 100;
            display: flex;
            align-items: center;
        }
        /* 独立的展开/收起按钮 */
        .sidebar-toggle-btn {
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: rgba(255,255,255,0.2);
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
            margin-right: 10px;
        }
        .header-title {
            flex: 1;
        }
        /* 主体布局 */
        .main-layout {
            display: flex;
            height: calc(100% - 48px);
        }
        /* 左侧菜单 - 新增分类折叠样式 */
        .left-menu {
            width: 200px;
            background: #2F4050;
            color: #fff;
            height: 100%;
            transition: all 0.3s;
            overflow-y: auto;
            z-index: 99;
        }
        .left-menu.hide {
            margin-left: -200px;
        }
        /* 导航分类标题 */
        .menu-category {
            padding: 12px 15px;
            font-weight: 600;
            background: #1f2d3d;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .category-icon {
            font-size: 12px;
            transition: transform 0.3s;
        }
        .category-icon.rotate {
            transform: rotate(90deg);
        }
        /* 分类下的子菜单 */
        .sub-menu-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .sub-menu-list.show {
            max-height: 500px; /* 足够大的高度容纳子菜单 */
        }
        /* 子菜单项 */
        .sub-menu-item {
            padding: 12px 25px; /* 缩进显示 */
            cursor: pointer;
            border-bottom: 1px solid #1f2d3d;
        }
        .sub-menu-item:hover {
            background: #1E9FFF;
        }
        /* 右侧内容区 */
        .right-content {
            flex: 1;
            height: 100%;
            overflow: hidden;
        }
        .right-content iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        /* 手机适配 */
        @media screen and (max-width: 768px) {
            .left-menu {
                position: absolute;
                top: 48px;
                left: 0;
            }
            .right-content {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 - 新增独立的展开/收起按钮 -->
    <div class="header">
        <div class="sidebar-toggle-btn layui-icon layui-icon-spread-left" id="sidebarToggle"></div>
        <div class="header-title">手机端迷你管理系统</div>
    </div>

    <!-- 主体布局 -->
    <div class="main-layout">
        <!-- 左侧菜单 - 新增分类折叠结构 -->
        <div class="left-menu" id="leftMenu">
            <!-- 第一个导航分类 -->
            <div class="menu-category" data-category="category1">
                <span>数据管理</span>
                <span class="category-icon layui-icon layui-icon-right"></span>
            </div>
            <div class="sub-menu-list" id="category1">
                <div class="sub-menu-item" data-url="table.html">用户列表</div>
                <div class="sub-menu-item" data-url="table.html?type=order">订单列表</div>
                <div class="sub-menu-item" data-url="table.html?type=goods">商品列表</div>
            </div>

            <!-- 第二个导航分类 -->
            <div class="menu-category" data-category="category2">
                <span>系统工具</span>
                <span class="category-icon layui-icon layui-icon-right"></span>
            </div>
            <div class="sub-menu-list" id="category2">
                <div class="sub-menu-item" data-url="https://www.baidu.com">百度（测试）</div>
                <div class="sub-menu-item" data-url="https://www.layui.com">Layui官网</div>
                <div class="sub-menu-item" data-url="table.html?type=setting">系统设置</div>
            </div>

            <!-- 第三个导航分类 -->
            <div class="menu-category" data-category="category3">
                <span>帮助中心</span>
                <span class="category-icon layui-icon layui-icon-right"></span>
            </div>
            <div class="sub-menu-list" id="category3">
                <div class="sub-menu-item" data-url="https://www.baidu.com/s?wd=layui%E6%96%87%E6%A1%A3">Layui文档</div>
                <div class="sub-menu-item" data-url="https://www.baidu.com/s?wd=html%E6%89%8B%E5%86%8C">HTML手册</div>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="right-content">
            <iframe src="table.html" id="mainIframe"></iframe>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.8.18/layui.js"></script>
    <script>
        layui.use(['jquery', 'layer'], function() {
            var $ = layui.jquery,
                layer = layui.layer;

            // 1. 左侧菜单整体展开/收起功能（独立按钮）
            $('#sidebarToggle').click(function() {
                var $leftMenu = $('#leftMenu');
                $leftMenu.toggleClass('hide');
                // 切换按钮图标
                if ($leftMenu.hasClass('hide')) {
                    $(this).removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
                } else {
                    $(this).removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
                }
            });

            // 2. 导航分类折叠/展开功能
            $('.menu-category').click(function() {
                var categoryId = $(this).attr('data-category');
                var $subMenu = $('#' + categoryId);
                var $icon = $(this).find('.category-icon');
                
                // 切换子菜单显示/隐藏
                $subMenu.toggleClass('show');
                // 切换图标旋转状态
                $icon.toggleClass('rotate');
            });

            // 3. 点击子菜单加载iframe内容
            $('.sub-menu-item').click(function() {
                var url = $(this).attr('data-url');
                $('#mainIframe').attr('src', url);
                // 手机端点击菜单后自动隐藏左侧菜单
                if ($(window).width() <= 768) {
                    $('#leftMenu').addClass('hide');
                    $('#sidebarToggle').removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
                }
            });

            // 初始化：默认展开第一个分类
            $('.menu-category[data-category="category1"]').trigger('click');
        });
    </script>
</body>
</html>

table.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>数据列表 - 手机端迷你系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">
    <style>
        /* 全局适配 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 15px;
            background: #f5f5f5;
            font-size: 14px;
        }
        /* 查询条件区域 */
        .search-box {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .layui-form-item {
            margin-bottom: 10px;
        }
        .layui-btn {
            padding: 0 15px;
        }
        /* 表格区域 */
        .table-box {
            background: #fff;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        /* 适配手机小屏 */
        @media screen and (max-width: 375px) {
            .layui-form-item .layui-inline {
                display: block;
                margin-bottom: 10px;
                clear: both;
            }
            .layui-table-cell {
                height: auto !important;
                line-height: 24px !important;
                padding: 5px 10px !important;
            }
        }
    </style>
</head>
<body>
    <!-- 查询条件区域 -->
    <div class="search-box">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <select name="sex" lay-verify="">
                            <option value="">全部</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-inline">
                        <input type="number" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 表格区域 -->
    <div class="table-box">
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
        
        <!-- 表格工具条模板 -->
        <script type="text/html" id="barTool">
            <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        </script>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.8.18/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'jquery'], function() {
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;

            // 初始化表格
            var tableIns = table.render({
                elem: '#dataTable',
                height: 'full-120', // 适配手机高度
                cellMinWidth: 80, // 单元格最小宽度
                page: true, // 开启分页
                limit: 5, // 每页默认5条（适配手机）
                limits: [5, 10, 15],
                data: [ // 模拟数据
                    {id: 1, name: '张三', sex: '男', age: 25, phone: '13800138000', address: '北京市朝阳区'},
                    {id: 2, name: '李四', sex: '女', age: 28, phone: '13900139000', address: '上海市浦东新区'},
                    {id: 3, name: '王五', sex: '男', age: 30, phone: '13700137000', address: '广州市天河区'},
                    {id: 4, name: '赵六', sex: '女', age: 26, phone: '13600136000', address: '深圳市南山区'},
                    {id: 5, name: '孙七', sex: '男', age: 32, phone: '13500135000', address: '杭州市西湖区'}
                ],
                cols: [[
                    {field: 'id', title: 'ID', width: 60, align: 'center'},
                    {field: 'name', title: '姓名', align: 'center'},
                    {field: 'sex', title: '性别', width: 60, align: 'center'},
                    {field: 'age', title: '年龄', width: 60, align: 'center'},
                    {field: 'phone', title: '手机号', align: 'center'},
                    {fixed: 'right', title: '操作', toolbar: '#barTool', align: 'center'}
                ]],
                done: function(res, curr, count) {
                    // 解决layui select下拉被遮挡问题
                    $('.layui-form-select dl').css({
                        'z-index': 99999,
                        'position': 'absolute'
                    });
                }
            });

            // 监听查询按钮
            form.on('submit(searchBtn)', function(data) {
                // 模拟查询（实际项目替换为接口请求）
                layer.msg('查询条件：' + JSON.stringify(data.field), {icon: 1});
                // 这里可根据查询条件筛选表格数据，示例仅做提示
                tableIns.reload({
                    where: data.field, // 传递查询条件
                    page: {curr: 1} // 重置页码
                });
                return false;
            });

            // 监听表格工具条
            table.on('tool(dataTable)', function(obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    // 跳转到详情页，传递ID参数
                    window.location.href = 'detail.html?id=' + data.id + '&name=' + encodeURIComponent(data.name);
                } else if (obj.event === 'del') {
                    layer.confirm('确定删除【' + data.name + '】吗？', {
                        btn: ['确定','取消'],
                        shade: 0.3
                    }, function(index) {
                        obj.del(); // 删除表格行
                        layer.close(index);
                        layer.msg('删除成功', {icon: 1});
                    });
                }
            });
        });
    </script>
</body>
</html>

detail.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>数据详情 - 手机端迷你系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">
    <style>
        /* 全局适配 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 15px;
            background: #f5f5f5;
            font-size: 14px;
        }
        /* 详情容器 */
        .detail-box {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .detail-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        /* 详情列表 */
        .detail-list {
            margin-bottom: 15px;
        }
        .detail-label {
            display: inline-block;
            width: 80px;
            color: #666;
            font-weight: 500;
        }
        .detail-value {
            color: #333;
        }
        /* 返回按钮 */
        .back-btn {
            margin-top: 20px;
        }
        /* 手机适配 */
        @media screen and (max-width: 375px) {
            .detail-box {
                padding: 15px;
            }
            .detail-label {
                width: 70px;
                font-size: 13px;
            }
            .detail-value {
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <div class="detail-box">
        <div class="detail-title">用户详情</div>
        
        <div class="detail-list">
            <span class="detail-label">ID：</span>
            <span class="detail-value" id="detailId"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">姓名：</span>
            <span class="detail-value" id="detailName"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">性别：</span>
            <span class="detail-value" id="detailSex"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">年龄：</span>
            <span class="detail-value" id="detailAge"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">手机号：</span>
            <span class="detail-value" id="detailPhone"></span>
        </div>
        <div class="detail-list">
            <span class="detail-label">地址：</span>
            <span class="detail-value" id="detailAddress"></span>
        </div>

        <button class="layui-btn layui-btn-primary back-btn" id="backBtn">返回列表</button>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.8.18/layui.js"></script>
    <script>
        layui.use(['layer', 'jquery'], function() {
            var layer = layui.layer,
                $ = layui.jquery;

            // 获取URL参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURIComponent(r[2]);
                return '';
            }

            // 模拟详情数据（实际项目从接口获取）
            var detailData = {
                1: {id:1, name:'张三', sex:'男', age:25, phone:'13800138000', address:'北京市朝阳区'},
                2: {id:2, name:'李四', sex:'女', age:28, phone:'13900139000', address:'上海市浦东新区'},
                3: {id:3, name:'王五', sex:'男', age:30, phone:'13700137000', address:'广州市天河区'},
                4: {id:4, name:'赵六', sex:'女', age:26, phone:'13600136000', address:'深圳市南山区'},
                5: {id:5, name:'孙七', sex:'男', age:32, phone:'13500135000', address:'杭州市西湖区'}
            };

            // 渲染详情数据
            var userId = getUrlParam('id');
            if (detailData[userId]) {
                $('#detailId').text(detailData[userId].id);
                $('#detailName').text(detailData[userId].name);
                $('#detailSex').text(detailData[userId].sex);
                $('#detailAge').text(detailData[userId].age);
                $('#detailPhone').text(detailData[userId].phone);
                $('#detailAddress').text(detailData[userId].address);
            } else {
                layer.msg('暂无该用户信息', {icon: 2});
            }

            // 返回列表
            $('#backBtn').click(function() {
                // 如果是从iframe打开，返回上一页；否则返回table.html
                if (window.parent !== window) {
                    window.parent.$('#mainIframe').attr('src', 'table.html');
                } else {
                    window.location.href = 'table.html';
                }
            });
        });
    </script>
</body>
</html>

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

参数 含义 作用
width=device-width 视口宽度 = 设备屏幕宽度 让页面适配手机屏幕，不会出现横向滚动条
initial-scale=1.0 初始缩放比例 1:1 页面打开时不放大、不缩小，100% 显示
maximum-scale=1.0 最大缩放比例 1:1 禁止用户放大页面
minimum-scale=1.0 最小缩放比例 1:1 禁止用户缩小页面
user-scalable=no 禁止用户手动缩放 双指缩放、双击缩放全部失效

如果希望手机浏览器可以缩放页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

initial-scale=1.0 ，初始大小：1.0倍，

maximum-scale=2.0 ，最大放大到：2.0倍，

minimum-scale=0.5，最小缩小到：0.5倍，

user-scalable=yes，支持两指滑动放大缩小(PC浏览器则是：Ctrl+鼠标滚轮)。

相关推荐
紫_龙2 小时前
最新版vue3+TypeScript开发入门到实战教程之watch详解
前端·javascript·typescript
默默学前端2 小时前
ES6模板语法与字符串处理详解
前端·ecmascript·es6
lxh01132 小时前
记忆函数 II 题解
前端·javascript
我不吃饼干2 小时前
TypeScript 类型体操练习笔记（三）
前端·typescript
华仔啊3 小时前
除了防抖和节流，还有哪些 JS 性能优化手段？
前端·javascript·vue.js
CHU7290353 小时前
随时随地学新知——线上网课教学小程序前端功能详解
前端·小程序
清粥油条可乐炸鸡3 小时前
motion入门教程
前端·css·react.js
这是个栗子3 小时前
【Vue3项目】电商前台项目（四）
前端·vue.js·pinia·表单校验·面包屑导航
前端Hardy3 小时前
Electrobun 正式登场：仅 12MB，JS 桌面开发迎来轻量化新方案！
前端·javascript·electron
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04UV安装并设置国内源05OpenClaw Control UI安全上下文访问配置06OpenClaw macOS 完整安装与本地模型配置教程（实战版）07Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services08本地部署 OpenClaw + DeepSeek-R1 完全指南09小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南